+ `),
+ ),
+ );
+ });
+
+ // Note: No need to test more complex cases because they are tested in maxdownNormalization.test.ts
+});
diff --git a/src/components/Content/Maxdown/maxdownToHtml.ts b/src/components/Content/Maxdown/maxdownToHtml.ts
new file mode 100644
index 0000000000..b14165adf2
--- /dev/null
+++ b/src/components/Content/Maxdown/maxdownToHtml.ts
@@ -0,0 +1,60 @@
+import spaceTrim from 'spacetrim';
+import { prettifyHtml } from '../../../export/utils/prettifyHtml';
+import type { string_html, string_maxdown } from '../../../utils/typeAliases';
+import { markdownConverter } from '../markdownConverter';
+
+/**
+ * Converts maxdown to HTML which can be safely used in the page
+ *
+ * @param maxdownContent the maxdown content to convert
+ * @returns the HTML content
+ */
+export function maxdownToHtml(maxdownContent: string_maxdown): string_html {
+ maxdownContent = spaceTrim(maxdownContent || '' /* <- TODO: [👧 */) as string_maxdown;
+
+ let html = markdownConverter.makeHtml(maxdownContent);
+
+ // Note: Removing empty paragraphs
+ html = html.split(/
\s*<\/p>/g).join('');
+
+ // Note: Replacing font comments with divs
+ let isFontTagOpened = false;
+ const htmlLines: string_html[] = [];
+ for (let htmlLine of html.split('\n')) {
+ const fontMatch = htmlLine.match(//);
+
+ if (!fontMatch) {
+ htmlLines.push((isFontTagOpened ? ' ' : '') + htmlLine);
+ } else {
+ if (isFontTagOpened) {
+ htmlLines.push('');
+ }
+
+ const font = fontMatch.groups?.font;
+
+ // Note: [💅] Keeping font family unquoted
+ // There is some problem with escaping in export:
+ // -
+ htmlLines.push(
+ `
` /* <- TODO: Do not hardcode sans-serif */ /* <- [🎗] */,
+ );
+
+ isFontTagOpened = true;
+ }
+ }
+ if (isFontTagOpened) {
+ htmlLines.push('
');
+ }
+
+ html = htmlLines.join('\n');
+
+ html = prettifyHtml(html);
+ html = spaceTrim(html);
+
+ return html;
+}
+
+/**
+ * TODO: [🧠] Do here somewhere normalizeDashes
+ * TODO: [🧠] Do here somewhere linkMarkdown (but with dynamic list of what to link)
+ */
diff --git a/src/components/Content/Maxdown/samples/10-simple.md b/src/components/Content/Maxdown/samples/10-simple.md
new file mode 100644
index 0000000000..905cb8b2cb
--- /dev/null
+++ b/src/components/Content/Maxdown/samples/10-simple.md
@@ -0,0 +1,3 @@
+# Simple
+
+Test of simple markdown.
diff --git a/src/components/Content/Maxdown/samples/20-wallpaper.md b/src/components/Content/Maxdown/samples/20-wallpaper.md
new file mode 100644
index 0000000000..729429c29c
--- /dev/null
+++ b/src/components/Content/Maxdown/samples/20-wallpaper.md
@@ -0,0 +1,21 @@
+
+
+# Komunikace v proměnách
+
+> Komunikace – spojení, které nás mění a proměňuje
+
+---
+
+> Vývoj komunikace se neustále vyvíjí a ovlivňuje naše životy více, než si uvědomujeme. Moderní technologie nám umožňuje být ve spojení s ostatními neustále, ale zároveň nám může bránit v opravdovém porozumění a spolupráci.
+
+Komunikace je klíčovým prvkem našeho každodenního života a její význam v současném světě je nezastupitelný. Od pradávna se lidé snažili najít způsoby, jak si navzájem sdělovat své myšlenky, pocity a potřeby. Původní formy komunikace, jako například hlasová řeč a posunky, se postupem času vyvinuly do komplexnějších forem, jako jsou písmo, tisk, telefon nebo internet.
+
+Vývoj komunikace v průběhu času byl nutný pro zajištění stále se rozrůstajícího společenství a různorodých způsobů využití této schopnosti. Komunikace nám umožňuje sdílet informace, učit se od sebe, navazovat vztahy a spolupracovat. Díky tomu se náš svět stává stále více propojeným a globálním.
+
+Nicméně, moderní technologie, které jsou neodmyslitelnou součástí našeho každodenního života, vedou k mnoha proměnám a úskalím v oblasti komunikace. Zatímco jsou nám nástroji jako sociální sítě nebo mobilní telefony k dispozici pro okamžité připojení ke světu, častokrát nás odvádějí od skutečných interakcí s ostatními lidmi. Komunikace přes média neustále přináší nové výzvy, jako jsou manipulace nebo falšování informací, což může vést k nedorozuměním a konfliktům.
+
+Je ale důležité uvědomit si, že komunikace není pouze o sdílení informací, ale také o porozumění a spolupráci. Moderní technologie nám mohou tento proces umožňovat, pokud se dokážeme naučit je správně využívat. Jedna z možností je využití online nástrojů pro učení se jazyků a komunikaci s cizinci. Další možností je využití virtuálních schůzek pro zlepšení pracovního procesu a spolupráce týmu.
+
+V závěru našeho eseje se nabízí otázka, jak můžeme využít komunikaci pro lepší porozumění a spolupráci mezi námi. Prvním krokem je uvědomit si, že komunikace není pouze o elektronických médiích, ale také o osobní interakci. Dále můžeme využít různé nástroje pro zlepšení našich komunikačních dovedností, jako jsou kurzy a tréninky. A nakonec, najít rovnováhu mezi využíváním moderních technologií a skutečnými osobními interakcemi.
+
+Vývoj komunikace byl a stále bude významným tématem, který se týká každého z nás a ovlivňuje naše životy ve všech aspektech. Je důležité si uvědomit její význam v současném světě, ale také být kritičtí vůči jejím proměnám a aktivně se podílet na vytváření lepší komunikace mezi námi.
diff --git a/src/components/Content/Maxdown/samples/30-multiple-fonts.md b/src/components/Content/Maxdown/samples/30-multiple-fonts.md
new file mode 100644
index 0000000000..002156ad0f
--- /dev/null
+++ b/src/components/Content/Maxdown/samples/30-multiple-fonts.md
@@ -0,0 +1,33 @@
+
+
+# Komunikace v proměnách
+
+> Komunikace – spojení, které nás mění a proměňuje
+
+
+
+> Vývoj komunikace se neustále vyvíjí a ovlivňuje naše životy více, než si uvědomujeme. Moderní technologie nám umožňuje být ve spojení s ostatními neustále, ale zároveň nám může bránit v opravdovém porozumění a spolupráci.
+
+
+
+Komunikace je klíčovým prvkem našeho každodenního života a její význam v současném světě je nezastupitelný. Od pradávna se lidé snažili najít způsoby, jak si navzájem sdělovat své myšlenky, pocity a potřeby. Původní formy komunikace, jako například hlasová řeč a posunky, se postupem času vyvinuly do komplexnějších forem, jako jsou písmo, tisk, telefon nebo internet.
+
+
+
+Vývoj komunikace v průběhu času byl nutný pro zajištění stále se rozrůstajícího společenství a různorodých způsobů využití této schopnosti. Komunikace nám umožňuje sdílet informace, učit se od sebe, navazovat vztahy a spolupracovat. Díky tomu se náš svět stává stále více propojeným a globálním.
+
+
+
+Nicméně, moderní technologie, které jsou neodmyslitelnou součástí našeho každodenního života, vedou k mnoha proměnám a úskalím v oblasti komunikace. Zatímco jsou nám nástroji jako sociální sítě nebo mobilní telefony k dispozici pro okamžité připojení ke světu, častokrát nás odvádějí od skutečných interakcí s ostatními lidmi. Komunikace přes média neustále přináší nové výzvy, jako jsou manipulace nebo falšování informací, což může vést k nedorozuměním a konfliktům.
+
+
+
+Je ale důležité uvědomit si, že komunikace není pouze o sdílení informací, ale také o porozumění a spolupráci. Moderní technologie nám mohou tento proces umožňovat, pokud se dokážeme naučit je správně využívat. Jedna z možností je využití online nástrojů pro učení se jazyků a komunikaci s cizinci. Další možností je využití virtuálních schůzek pro zlepšení pracovního procesu a spolupráce týmu.
+
+
+
+V závěru našeho eseje se nabízí otázka, jak můžeme využít komunikaci pro lepší porozumění a spolupráci mezi námi. Prvním krokem je uvědomit si, že komunikace není pouze o elektronických médiích, ale také o osobní interakci. Dále můžeme využít různé nástroje pro zlepšení našich komunikačních dovedností, jako jsou kurzy a tréninky. A nakonec,
+
+
+
+Vývoj komunikace byl a stále bude významným tématem, který se týká každého z nás a ovlivňuje naše životy ve všech aspektech. Je důležité si uvědomit její význam v současném světě, ale také být kritičtí vůči jejím proměnám a aktivně se podílet na vytváření lepší komunikace mezi námi.
diff --git a/src/components/Content/Maxdown/samples/50-custom-components.md b/src/components/Content/Maxdown/samples/50-custom-components.md
new file mode 100644
index 0000000000..28280b2314
--- /dev/null
+++ b/src/components/Content/Maxdown/samples/50-custom-components.md
@@ -0,0 +1,29 @@
+# Components
+
+## Button
+
+Buy
+
+
+## Code
+
+
+
+ Feature 1
+ Feature 2
+ Feature 3
+ Feature 4
+
+
+ Feature 1
+ Feature 2
+ Feature 3
+ Feature 4
+
+
+ Feature 1
+ Feature 2
+ Feature 3
+ Feature 4
+
+
diff --git a/src/components/Content/Maxdown/samples/50-html-components.md.todo b/src/components/Content/Maxdown/samples/50-html-components.md.todo
new file mode 100644
index 0000000000..a586856eb1
--- /dev/null
+++ b/src/components/Content/Maxdown/samples/50-html-components.md.todo
@@ -0,0 +1,27 @@
+
+
+# Components
+
+## Button
+
+Buy
+
+## Code
+
+
+
+```javascript
+const a = 1;
+```
+
+## Image
+
+
+
+## Iframe
+
+
diff --git a/src/components/Content/Maxdown/validateMaxdown.ts b/src/components/Content/Maxdown/validateMaxdown.ts
new file mode 100644
index 0000000000..3135b7c1fe
--- /dev/null
+++ b/src/components/Content/Maxdown/validateMaxdown.ts
@@ -0,0 +1,20 @@
+import { string_maxdown } from '../../../utils/typeAliases';
+
+/**
+ * Validate maxdown content
+ *
+ * If content is not a valid maxdown, throws an error
+ * If content is a valid maxdown,
+ */
+export function validateMaxdown(content: unknown): string_maxdown {
+ if (typeof content !== 'string') {
+ throw new Error('Content is not a string');
+ }
+
+ return content as string_maxdown;
+}
+
+/**
+ * TODO: !! Do here a real validation / sanitization
+ * TODO: [🧠][🚓] Is/which combination it better to use asserts/check, validate or is utility function?
+ */
diff --git a/src/components/MarkdownContent/mapLinksInHtml.test.ts b/src/components/Content/mapLinksInHtml.test.ts
similarity index 100%
rename from src/components/MarkdownContent/mapLinksInHtml.test.ts
rename to src/components/Content/mapLinksInHtml.test.ts
diff --git a/src/components/MarkdownContent/mapLinksInHtml.ts b/src/components/Content/mapLinksInHtml.ts
similarity index 100%
rename from src/components/MarkdownContent/mapLinksInHtml.ts
rename to src/components/Content/mapLinksInHtml.ts
diff --git a/src/components/MarkdownContent/markdownConverter.test.ts b/src/components/Content/markdownConverter.test.ts
similarity index 100%
rename from src/components/MarkdownContent/markdownConverter.test.ts
rename to src/components/Content/markdownConverter.test.ts
diff --git a/src/components/MarkdownContent/markdownConverter.ts b/src/components/Content/markdownConverter.ts
similarity index 100%
rename from src/components/MarkdownContent/markdownConverter.ts
rename to src/components/Content/markdownConverter.ts
diff --git a/src/components/MarkdownContent/useHash.ts b/src/components/Content/useHash.ts
similarity index 100%
rename from src/components/MarkdownContent/useHash.ts
rename to src/components/Content/useHash.ts
diff --git a/src/components/ControlPanel/ControlPanel.tsx b/src/components/ControlPanel/ControlPanel.tsx
index 8c77100509..569380894e 100644
--- a/src/components/ControlPanel/ControlPanel.tsx
+++ b/src/components/ControlPanel/ControlPanel.tsx
@@ -25,7 +25,7 @@ export function ControlPanel() {
return (
{/*
{wallpaperId}
*/}
@@ -97,7 +97,7 @@ export function ControlPanel() {
)}
{/*
- Note: In the
+ TODO: [🧠] What is the best way how to navigate home?
-
{/* */}
- {' '}
+
);
}
diff --git a/src/components/ControlPanel/RandomWallpaper/RandomWallpaperManager.ts b/src/components/ControlPanel/RandomWallpaper/RandomWallpaperManager.ts
index b813e716cc..57d4e68c1a 100644
--- a/src/components/ControlPanel/RandomWallpaper/RandomWallpaperManager.ts
+++ b/src/components/ControlPanel/RandomWallpaper/RandomWallpaperManager.ts
@@ -5,9 +5,12 @@ import type { RecommendWallpaperResponse } from '../../../pages/api/recommend-wa
import { IWallpaperSerialized } from '../../../utils/IWallpaper';
import { randomItem } from '../../../utils/randomItem';
import { provideClientIdWithoutVerification } from '../../../utils/supabase/provideClientIdWithoutVerification';
-import { string_wallpaper_id } from '../../../utils/typeAliases';
+import { string_color } from '../../../utils/typeAliases';
export type IWallpaperInStorage = Pick;
+export type IWallpaperInMockedApi = Pick & {
+ primaryColor: string_color;
+};
/**
* RandomWallpaperManager is a class that manages the random wallpapers which will be shown next.
@@ -144,26 +147,24 @@ export class RandomWallpaperManager {
return /* not await */ this.prefetchIfNeeded();
}
- private welcomeWallpapers: null | Array<{
- id: string_wallpaper_id;
- }> = null;
+ private welcomeWallpapers: null | Array = null;
- public async getWelcomeWallpaper(): Promise> {
+ public async getWelcomeWallpapers(): Promise> {
if (this.welcomeWallpapers === null) {
const response = await fetch(`${NEXT_PUBLIC_URL.href}mocked-api/wallpapers-min-loved.json`);
const { wallpapers } = (await response.json()) as {
- wallpapers: Array<{
- id: string_wallpaper_id;
- // [2]
- // primaryColor: string_color;
- // likedStatus: keyof typeof LikedStatus;
- }>;
+ wallpapers: Array;
};
this.welcomeWallpapers = wallpapers;
}
- // TODO: Do here a preloading when [2] there will be src in wallpapers-min-loved.json
+ // TODO: Do here a preloading when there will be src in wallpapers-min-loved.json
// > await this.preloadRandomWallpaper(randomWallpaper);
- return randomItem(...this.welcomeWallpapers);
+ return this.welcomeWallpapers;
+ }
+
+ public async getWelcomeWallpaper(): Promise {
+ const welcomeWallpapers = await this.getWelcomeWallpapers();
+ return randomItem(...welcomeWallpapers);
}
public async getRandomWallpaper(): Promise {
diff --git a/src/components/CopilotInput/CopilotInput.tsx b/src/components/CopilotInput/CopilotInput.tsx
index 252839c565..6021ab8660 100644
--- a/src/components/CopilotInput/CopilotInput.tsx
+++ b/src/components/CopilotInput/CopilotInput.tsx
@@ -1,18 +1,19 @@
+import type { string_prompt } from '@promptbook/types';
import Image from 'next/image';
import { useCallback, useRef, useState } from 'react';
import spaceTrim from 'spacetrim';
import { classNames } from '../../utils/classNames';
import { focusRef } from '../../utils/focusRef';
import { useRotatingPlaceholder } from '../../utils/hooks/useRotatingPlaceholder';
-import { string_prompt } from '../../utils/typeAliases';
-import { TorusInteractiveImage } from '../TaskInProgress/TorusInteractiveImage';
+import { message } from '../../utils/typeAliases';
+import { LoadingInteractiveImage } from '../TaskInProgress/LoadingInteractiveImage';
import styles from './CopilotInput.module.css';
interface useRouterProps {
/**
* Label for the input
*/
- label: string;
+ label: message;
/**
* The html comment to export
@@ -42,9 +43,8 @@ export function CopilotInput(props: useRouterProps) {
let prompt = inputRef.current?.value || '';
+ setRunning(true);
try {
- setRunning(true);
-
// TODO: [🍛] Make same normalization as in the backend
prompt = spaceTrim(prompt);
@@ -66,7 +66,7 @@ export function CopilotInput(props: useRouterProps) {
}, [inputRef, onPrompt, isRunning]);
return (
-
+
) : (
-
+
)}
diff --git a/src/components/CopilotPanel/CopilotPanel.tsx b/src/components/CopilotPanel/CopilotPanel.tsx
index d916f9814a..e6b25bda0e 100644
--- a/src/components/CopilotPanel/CopilotPanel.tsx
+++ b/src/components/CopilotPanel/CopilotPanel.tsx
@@ -1,38 +1,44 @@
+import type { string_prompt } from '@promptbook/types';
import Image from 'next/image';
+import Link from 'next/link';
import { useRouter } from 'next/router';
import { useCallback, useMemo, useRef, useState } from 'react';
import spaceTrim from 'spacetrim';
import { COPILOT_PLACEHOLDERS, FONTS, IS_VERIFIED_EMAIL_REQUIRED } from '../../../config';
-import type {
- UpdateWallpaperContentRequest,
- UpdateWallpaperContentResponse,
-} from '../../pages/api/update-wallpaper-content';
+import { getExecutionTools } from '../../ai/prompt-templates/getExecutionTools';
+import { webgptPtpLibrary } from '../../ai/prompt-templates/webgptPtpLibrary';
import { classNames } from '../../utils/classNames';
import { computeWallpaperUriid } from '../../utils/computeWallpaperUriid';
+import { removeContentComments } from '../../utils/content/removeContentComments';
import { focusRef } from '../../utils/focusRef';
import { useCurrentWallpaper } from '../../utils/hooks/useCurrentWallpaper';
import type { LikedStatus } from '../../utils/hooks/useLikedStatusOfCurrentWallpaper';
+import { useLocale } from '../../utils/hooks/useLocale';
import { useRotatingPlaceholder } from '../../utils/hooks/useRotatingPlaceholder';
import { serializeWallpaper } from '../../utils/hydrateWallpaper';
import { randomItem } from '../../utils/randomItem';
import { shuffleItems } from '../../utils/shuffleItems';
import { getSupabaseForBrowser } from '../../utils/supabase/getSupabaseForBrowser';
import { provideClientId } from '../../utils/supabase/provideClientId';
-import { string_prompt } from '../../utils/typeAliases';
+import { validateMaxdown } from '../Content/Maxdown/validateMaxdown';
import { parseKeywordsFromWallpaper } from '../Gallery/GalleryFilter/utils/parseKeywordsFromWallpaper';
import { Hint } from '../Hint/Hint';
+import { addFontToContent } from '../ImportFonts/addFontToContent';
import { changeFontsInContent } from '../ImportFonts/changeFontInContent';
-import { ImportFonts } from '../ImportFonts/ImportFonts';
+import { extractFontsFromContent } from '../ImportFonts/extractFontsFromContent';
import { PublishLink } from '../PublishModal/PublishLink';
-import { TorusInteractiveImage } from '../TaskInProgress/TorusInteractiveImage';
+import { LoadingInteractiveImage } from '../TaskInProgress/LoadingInteractiveImage';
import { WallpaperLink } from '../WallpaperLink/WallpaperLink';
import styles from './CopilotPanel.module.css';
+import { CopilotPanelChangeFont } from './CopilotPanelChangeFont';
+import { CopilotPanelRotateColors } from './CopilotPanelRotateColors';
/**
* Renders the co-pilot panel for text commands to edit the page.
*/
export function CopilotPanel() {
const router = useRouter();
+ const locale = useLocale();
const [wallpaper, modifyWallpaper] = useCurrentWallpaper();
const [runningPrompt, setRunningPrompt] = useState(null);
const [isMenuOpen, setMenuOpen] = useState(false); /* <- TODO: useToggle */
@@ -40,14 +46,14 @@ export function CopilotPanel() {
const placeholders = useMemo(() => shuffleItems(...COPILOT_PLACEHOLDERS), []);
const placeholder = useRotatingPlaceholder(...placeholders);
const randomFont = useMemo(
- () => randomItem(...FONTS) /* <- TODO: [🧠] Some better heurictic than pure random */,
+ () => randomItem(...FONTS) /* <- TODO: [🧠][🔠] Some better heurictic than pure random */,
// Note: Wallpaper is dependency because we want to offer new font after each change of the font
/* eslint-disable-next-line react-hooks/exhaustive-deps */
[wallpaper],
);
const modifyWallpaperFont = useCallback(() => {
modifyWallpaper((modifiedWallpaper) => {
- modifiedWallpaper.content = changeFontsInContent(modifiedWallpaper.content, randomFont);
+ modifiedWallpaper.content = changeFontsInContent(modifiedWallpaper.content, randomFont.fontFamily);
modifiedWallpaper.saveStage = 'EDITED';
return modifiedWallpaper;
});
@@ -83,37 +89,71 @@ export function CopilotPanel() {
`),
);
- const { content: oldContent } = wallpaper;
+ let { content: oldContent } = wallpaper;
- const response = await fetch(
- `/api/update-wallpaper-content?clientId=${await provideClientId({
- isVerifiedEmailRequired: IS_VERIFIED_EMAIL_REQUIRED.EDIT,
- })}`,
+ const fonts = extractFontsFromContent(oldContent);
+ if (fonts.size !== 1) {
+ throw new Error(`Expected exactly one font in the content, got ${fonts.size}`);
+ }
+ const font = Array.from(fonts)[0]!;
+
+ oldContent = removeContentComments(oldContent);
+
+ const updateWebsiteContentLocaleMap = {
+ en: 'updateWebsiteContent',
+ cs: 'updateWebsiteContentCs',
+ /* <- TODO: [👧] Constrain key to only existing PTPs in the library */
+ };
+
+ const { newContent } = await webgptPtpLibrary.createExecutor(
+ updateWebsiteContentLocaleMap[
+ locale
+ ] /* <- TODO: !! Deal here with locale better - detect from content NOT app */,
+ getExecutionTools(
+ await provideClientId({
+ isVerifiedEmailRequired: IS_VERIFIED_EMAIL_REQUIRED.EDIT,
+ }),
+ ),
+ )(
{
- method: 'POST',
- body: JSON.stringify({
- prompt,
- wallpaper: { content: oldContent },
- } satisfies UpdateWallpaperContentRequest),
+ oldContent,
+ rawAssignment: prompt,
+ },
+ (taskProgress) => {
+ console.info('CopilotPanel: Update wallpaper content: ', { taskProgress });
},
);
- if (response.ok === false) {
- // TODO: [🈵] If 4XX error, show also the message from json body
- throw new Error(`Prompt failed with status ${response.status}`);
- }
+ const newContentWithFont = addFontToContent(validateMaxdown(newContent || ''), font);
+
+ /*/
+ const newContentWithMetadata = spaceTrim(
+ (block) => `
+ ${block(newContentWithFont)}
+
+ ---
+
+
Edit markdown
- {/* <- TODO: Should be here "Edit markdown" or "Edit content" */}
+ {/* <- TODO: [🧠] Should be here "Edit markdown" or "Edit content" or "Advanced edit"
+ + It should be in the submenu of "Advanced edits"
+ */}