From 37370ca73c9b0428345ea147840f9934a69a8afc Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Tue, 28 Nov 2023 12:47:46 +0100 Subject: [PATCH 1/6] TODOs --- src/components/Content/HtmlContent.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Content/HtmlContent.tsx b/src/components/Content/HtmlContent.tsx index 598b6994d..f59e0a3c6 100644 --- a/src/components/Content/HtmlContent.tsx +++ b/src/components/Content/HtmlContent.tsx @@ -81,7 +81,11 @@ function HtmlContentEditable(props: Omit) { return; } - if (element.dataset.contentState === 'react-render' || element !== document.activeElement) { + if ( + element.dataset.contentState === 'react-render' || + element !== document.activeElement + // __________________________ <- TODO: !!! [🧠] Also fill content when navigating back to page with content + ) { element.innerHTML = content /* <- Here [3] */; element.dataset.contentState = 'filled'; } From 64a1045101a53547a4046a24a5b265108908925b Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Tue, 28 Nov 2023 12:53:29 +0100 Subject: [PATCH 2/6] Branch custom-html-components From 8de14331d888558894375a7d2d44f543bc981cd4 Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Tue, 28 Nov 2023 13:29:48 +0100 Subject: [PATCH 3/6] Define custom element --- promptbook/write-website-content-cs.ptbk.md | 15 +++++++- promptbook/write-website-content.ptbk.md | 3 ++ .../WallpaperContent/WallpaperContent.tsx | 34 +++++++++++++++++++ src/styles/globals.css | 17 ++++++++++ 4 files changed, 68 insertions(+), 1 deletion(-) diff --git a/promptbook/write-website-content-cs.ptbk.md b/promptbook/write-website-content-cs.ptbk.md index a2859a8f0..412a20d81 100644 --- a/promptbook/write-website-content-cs.ptbk.md +++ b/promptbook/write-website-content-cs.ptbk.md @@ -1,9 +1,13 @@ # 🌍 Vytvoření obsahu webové stránky + + + + Instrukce pro vytvoření obsahu webové stránky za pomocí [🌠 Prompt template pipelines](https://github.com/webgptorg/promptbook). - PTBK URL https://ptbk.webgpt.com/cs/write-website-content.ptbk.md@v0.1.0 -- PTBK version 0.0.1 +- PTBK version 0.0.2 - Use chat - Input param `{idea}` Obecná idea webu _v Češtině_ @@ -320,6 +324,15 @@ Zadání webu od zákazníka: - Použijte klíčová slova, avšak ta mají být přirozeně v textu - Jedná se o kompletní obsah stránky, tedy nezapomeňte na všechny důležité informace a prvky, co by měla stránka obsahovat - Použijte nadpisy, odrážky, formátování textu +- Použijte speciální komponenty, viz níže + +## Komponenty + +### Call to action + +\`\`\`markdown +🛒 Koupit +\`\`\` ## Klíčová slova: diff --git a/promptbook/write-website-content.ptbk.md b/promptbook/write-website-content.ptbk.md index 998be7cc9..9781ead5e 100644 --- a/promptbook/write-website-content.ptbk.md +++ b/promptbook/write-website-content.ptbk.md @@ -1,5 +1,8 @@ # 🌍 Creating website content + + + Instructions for creating web page content using [🌠 Prompt template pipelines](https://github.com/webgptorg/promptbook). - PTBK URL https://ptbk.webgpt.com/cs/write-website-content.ptbk.md@v0.1.0 diff --git a/src/components/WallpaperContent/WallpaperContent.tsx b/src/components/WallpaperContent/WallpaperContent.tsx index c2e2772cd..6609cff30 100644 --- a/src/components/WallpaperContent/WallpaperContent.tsx +++ b/src/components/WallpaperContent/WallpaperContent.tsx @@ -12,6 +12,7 @@ import { Content } from '../Content/Content'; import { MaxdownContent } from '../Content/Maxdown/MaxdownContent'; import { ExportCommentedBlock } from '../ExportComment/ExportCommentedBlock'; import { addFontToContent } from '../ImportFonts/addFontToContent'; +import { InlineScript } from '../InlineScript/InlineScript'; import { Section } from '../Section/Section'; import { getPageContent } from './getPageContent'; import styles from './WallpaperContent.module.css'; @@ -121,6 +122,39 @@ export function WallpaperContentSection() { + + for custom html components + > + {` + + class CallToAction extends HTMLAnchorElement { + constructor() { + super(); + } + + connectedCallback() { + + // TODO: !!! This must work + console.info('Connected to component'); + + + + this.addEventListener('click', () => { + + // TODO: !!! This must work + console.info('Clicked on component'); + }); + } + } + + + console.info('🌟 Defining component'); + customElements.define('call-to-action', CallToAction, { extends: 'a' }); + + `} + ); } diff --git a/src/styles/globals.css b/src/styles/globals.css index b3f84f1cb..6a24aee71 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -38,6 +38,23 @@ a.button { text-decoration: none !important; } +call-to-action { + /* + TODO: !!! This should be part of component OR better organized + TODO: Always align to the middle + */ + border: solid 1px rgba(var(--palette-1-triplet), 0.8); + background-color: rgba(var(--palette-2-triplet), 0.8); + color: rgba(var(--palette-1-triplet), 0.8); + border-radius: 6px; + padding: 7px 18px; + margin: 10px; + cursor: pointer; + display: inline-block; + text-decoration: none; + transition: all 0.2s ease-in-out; +} + .emoji { display: inline !important; width: 1.8em; From eef164a664876cbc5a3c16bd6a51917d2db3f29d Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Tue, 28 Nov 2023 13:41:07 +0100 Subject: [PATCH 4/6] Sandbox for custom components --- other/custom-elements/TODO.txt | 2 + .../samples/call-to-action.html | 47 +++++++++++++++++++ .../WallpaperContent/WallpaperContent.tsx | 3 ++ 3 files changed, 52 insertions(+) create mode 100644 other/custom-elements/TODO.txt create mode 100644 other/custom-elements/samples/call-to-action.html diff --git a/other/custom-elements/TODO.txt b/other/custom-elements/TODO.txt new file mode 100644 index 000000000..bd9a4b67a --- /dev/null +++ b/other/custom-elements/TODO.txt @@ -0,0 +1,2 @@ +TODO: !!! [🧠] `Custom elements` vs `Custom components` vs `Custom html elements` vs `Custom html components` vs `WebGPT components` +TODO: !!! Move this folder to src/?/ \ No newline at end of file diff --git a/other/custom-elements/samples/call-to-action.html b/other/custom-elements/samples/call-to-action.html new file mode 100644 index 000000000..334294569 --- /dev/null +++ b/other/custom-elements/samples/call-to-action.html @@ -0,0 +1,47 @@ +Buy 0 + + + + +Buy 1 diff --git a/src/components/WallpaperContent/WallpaperContent.tsx b/src/components/WallpaperContent/WallpaperContent.tsx index 6609cff30..e491ec0cf 100644 --- a/src/components/WallpaperContent/WallpaperContent.tsx +++ b/src/components/WallpaperContent/WallpaperContent.tsx @@ -132,6 +132,9 @@ export function WallpaperContentSection() { class CallToAction extends HTMLAnchorElement { constructor() { super(); + + + console.info('!!! CallToAction.constructor'); } connectedCallback() { From ff478c37d8471659617f4b4dd1daaa530f475f28 Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Tue, 28 Nov 2023 23:04:33 +0100 Subject: [PATCH 5/6] Using shadow root in --- .../samples/call-to-action.html | 52 ++++++++------ .../samples/pricing-table.html | 68 +++++++++++++++++++ 2 files changed, 101 insertions(+), 19 deletions(-) create mode 100644 other/custom-elements/samples/pricing-table.html diff --git a/other/custom-elements/samples/call-to-action.html b/other/custom-elements/samples/call-to-action.html index 334294569..859b45e7a 100644 --- a/other/custom-elements/samples/call-to-action.html +++ b/other/custom-elements/samples/call-to-action.html @@ -1,8 +1,8 @@ -Buy 0 +ddd Buy 0 sss - -Buy 1 diff --git a/other/custom-elements/samples/pricing-table.html b/other/custom-elements/samples/pricing-table.html new file mode 100644 index 000000000..0ce832ae2 --- /dev/null +++ b/other/custom-elements/samples/pricing-table.html @@ -0,0 +1,68 @@ + + + Feature 1 + Feature 2 + Feature 3 + Feature 4 + + + Feature 1 + Feature 2 + Feature 3 + Feature 4 + + + Feature 1 + Feature 2 + Feature 3 + Feature 4 + + + + + From 41362adc0f40fe08eee04ec91cda87c5b284be3e Mon Sep 17 00:00:00 2001 From: Pavol Hejny Date: Wed, 29 Nov 2023 09:48:07 +0100 Subject: [PATCH 6/6] Pricing table --- other/custom-elements/samples/pricing-table.html | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/other/custom-elements/samples/pricing-table.html b/other/custom-elements/samples/pricing-table.html index 0ce832ae2..a3679235b 100644 --- a/other/custom-elements/samples/pricing-table.html +++ b/other/custom-elements/samples/pricing-table.html @@ -1,17 +1,23 @@ - + Feature 1 Feature 2 Feature 3 Feature 4 - + Feature 1 Feature 2 Feature 3 Feature 4 - + + Feature 1 + Feature 2 + Feature 3 + Feature 4 + + Feature 1 Feature 2 Feature 3