⭐ Custom html components

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/?/

other/custom-elements/samples/call-to-action.html

@@ -0,0 +1,61 @@
+ddd <call-to-action href="?buy=0">Buy 0</call-to-action> sss
+
+<script>
+    // TODO: !!! DRY
+    class CallToAction extends HTMLElement {
+        constructor() {
+            super();
+
+            console.info('!!! CallToAction.constructor');
+        }
+
+        connectedCallback() {
+            // TODO: !!! This must work
+            console.info('Connected to <call-to-action/> component');
+
+            const shadow = this.attachShadow({ mode: 'open' });
+
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', this.getAttribute('href'));
+            linkElement.innerHTML = this.innerHTML;
+            linkElement.addEventListener('click', (event) => {
+                event.preventDefault();
+
+                // TODO: !!! This must work
+                console.info('Clicked on <call-to-action/> linkElement component');
+            });
+
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+
+                a {
+                    border: solid 1px red;
+                    background-color: rgb(69 209 34);
+                    color: #2d2200;
+                    border-radius: 6px;
+                    padding: 7px 18px;
+                    margin: 10px;
+                    cursor: pointer;
+                    display: inline-block;
+                    text-decoration: none;
+                    transition: all 0.2s ease-in-out;
+                }
+
+            `;
+
+            shadow.appendChild(linkElement);
+            shadow.appendChild(styleElement);
+        }
+    }
+
+    console.info('🌟 Defining <call-to-action/> component');
+    customElements.define('call-to-action', CallToAction);
+</script>
+<style>
+    /*
+    TODO: !!! DRY
+    */
+    call-to-action {
+        border: solid 1px red;
+    }
+</style>

other/custom-elements/samples/pricing-table.html

@@ -0,0 +1,74 @@
+<pricing-table>
+    <pricing-plan label="Free" price="$40" suppressed>
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Basic" price="197,- Kč / měsíc">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Advanced" price="500,- Kč / měsíc">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Enterprise" price="1500,- Kč / měsíc">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+</pricing-table>
+
+<script>
+    // TODO: !!! DRY
+    class PricingPlan extends HTMLElement {
+        constructor() {
+            super();
+
+            console.info('!!! CallToAction.constructor');
+        }
+
+        connectedCallback() {
+            // TODO: !!! This must work
+            console.info('Connected to <pricing-plan/> component');
+
+            this.addEventListener('click', () => {
+                // TODO: !!! This must work
+                console.info('Clicked on <pricing-plan/> component');
+            });
+        }
+    }
+
+    console.info('🌟 Defining <pricing-plan/> component');
+    customElements.define('pricing-plan', PricingPlan);
+</script>
+<style>
+    /*
+    TODO: !!! DRY
+    */
+    pricing-table {
+        display: flex;
+    }
+
+    pricing-plan {
+        border: solid 1px red;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        border-radius: 15px;
+    }
+
+    pricing-feature {
+        border: solid 1px red;
+
+        padding: 10px;
+    }
+</style>

promptbook/write-website-content-cs.ptbk.md

@@ -1,9 +1,13 @@
 # 🌍 Vytvoření obsahu webové stránky
 
+<!-- TODO: !!! Use custom html components -->
+<!-- TODO: !!! [🧠] How to propperly update ptbk version -->
+<!-- TODO: !!! Expect that <call-to-action/> will be used -->
+
 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
 <!-- TODO: [🌚]> -   Use GPT-3.5 -->
 -   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
+<call-to-action href="/buy">🛒 Koupit</call-to-action>
+\`\`\`
 
 ## Klíčová slova:
 

promptbook/write-website-content.ptbk.md

@@ -1,5 +1,8 @@
 # 🌍 Creating website content
 
+<!-- TODO: !!! Use custom html components -->
+<!-- TODO: !!! [🧠] How to propperly update ptbk version -->
+
 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

src/components/Content/HtmlContent.tsx

@@ -81,7 +81,11 @@ function HtmlContentEditable(props: Omit<HtmlContentProps, 'isEditable'>) {
             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';
         }

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,42 @@ export function WallpaperContentSection() {
                     <MaxdownContent {...{ content, isEditable, onMaxdownChange }} />
                 </ExportCommentedBlock>
             </AiComponentsRoot>
+
+            <InlineScript
+                id="call-to-action"
+                // TODO: !!! Make/change some system like <AiComponentsRoot/> for custom html components
+            >
+                {`
+
+                    class CallToAction extends HTMLAnchorElement {
+                        constructor() {
+                            super();
+
+
+                            console.info('!!! CallToAction.constructor');
+                        }
+
+                        connectedCallback() {
+
+                            // TODO: !!! This must work
+                            console.info('Connected to <call-to-action/> component');
+
+
+
+                            this.addEventListener('click', () => {
+
+                                // TODO: !!! This must work
+                                console.info('Clicked on <call-to-action/> component');
+                            });
+                        }
+                    }
+
+
+                    console.info('🌟 Defining <call-to-action/> component');
+                    customElements.define('call-to-action', CallToAction, { extends: 'a' });
+
+                `}
+            </InlineScript>
         </Section>
     );
 }

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 <call-to-action/> 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;