hejny · hejny · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023
diff --git a/other/webgpt-components/README.md b/other/webgpt-components/README.md
@@ -0,0 +1,8 @@
+# 🍱 WebGPT components
+
+Custom elements for WebGPT used in the dynamic next page and also rendered into static export.
+
+## Terminology
+
+-   **Component** is is comprehensive set of elements that are used together, Often it is a single element, for example `<call-to-action>` or `<pricing-table>`
+-   **Element** is custom element extended from `WebgptElement` for example `<pricing-plan>`
diff --git a/other/webgpt-components/TODO.txt b/other/webgpt-components/TODO.txt
@@ -0,0 +1,6 @@
+
+TODO: !!! Index all webgpt components
+TODO: !!! Use webgpt components in export
+TODO: !!! [🧠] `Custom elements` vs `Custom components` vs `Custom html elements` vs `Custom html components` vs `WebGPT components`
+TODO: !!! Move this folder to src/?/
+TODO: !!! People webgpt component
diff --git a/other/webgpt-components/call-to-action/call-to-action.html b/other/webgpt-components/call-to-action/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>
diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
@@ -0,0 +1,129 @@
+<script src="./pricing-table.js"></script>
+<link rel="stylesheet" href="./pricing-table.module.css" />
+
+<pricing-table>
+    <pricing-plan label="Free" suppressed>
+        <pricing-price>Zadarmo / navždy</pricing-price>
+        <pricing-feature>WebGPT značka </pricing-feature>
+        <pricing-feature>Naše reklama [1]</pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Základní">
+        <pricing-price>49,- Kč / web / měsíc</pricing-price>
+        <pricing-feature>1 stránka </pricing-feature>
+        <pricing-feature>1 jazyk </pricing-feature>
+        <pricing-feature>30 změn za měsíc</pricing-feature>
+        <pricing-feature>Hosting na naší doméně / Možnost zakoupení domény </pricing-feature>
+        <pricing-feature>Základní komponenty</pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Standard" featured>
+        <pricing-price>159,- Kč / web / měsíc</pricing-price>
+        <pricing-feature>.cz doména v ceně </pricing-feature>
+        <pricing-feature>10 stránek </pricing-feature>
+        <pricing-feature>1000 změn za měsíc </pricing-feature>
+        <pricing-feature>2 jazykové verze </pricing-feature>
+        <pricing-feature> kontrola SEO </pricing-feature>
+        <pricing-feature> kontrola přístupnosti </pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Profesionální">
+        <pricing-price>599,- Kč / web / měsíc</pricing-price>
+        <pricing-feature> podpora po telefonu </pricing-feature>
+        <pricing-feature> možnost navrhovat vlastní komponenty </pricing-feature>
+        <pricing-feature> automatická aktualizace na základě sociálních sítí </pricing-feature>
+        <pricing-feature> plný přístup k podkladovým materiálům </pricing-feature>
+        <pricing-feature> prémiové komponenty </pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Tvůrce" price="$40" suppressed>
+        <pricing-price>699,- Kč / měsíc</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+</pricing-table>
+
+<!-- TODO: !!! This should error in console + remove after-->
+<pricing-plan label="Free" suppressed>
+    <pricing-price>Zadarmo / navždy</pricing-price>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <div>
+        <pricing-feature></pricing-feature>
+    </div>
+</pricing-plan>
+
+<pricing-price>Zadarmo / navždy</pricing-price>
+
+<pricing-feature></pricing-feature>
+
+<!--
+<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>
+-->
diff --git a/other/webgpt-components/pricing-table/pricing-table.js b/other/webgpt-components/pricing-table/pricing-table.js
@@ -0,0 +1,50 @@
+class WebgptElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    assertsToBeDirectChildOf(parentTagName) {
+        // Note: Need to be in timeout to this.parentElement to be defined
+        setTimeout(() => {
+            if (this.parentElement.tagName.toLowerCase() !== parentTagName) {
+                console.error(
+                    `<${this.tagName.toLowerCase()}/> must be a direct child of <${parentTagName}/>, but it is child of <${this.parentElement.tagName.toLowerCase()}/>`,
+                    this,
+                );
+            }
+        }, 1);
+    }
+}
+
+class PricingTable extends WebgptElement {
+    constructor() {
+        super();
+        // TODO: Check that in root
+    }
+}
+
+class PricingPlan extends WebgptElement {
+    constructor() {
+        super();
+        this.assertsToBeDirectChildOf('pricing-table');
+    }
+}
+
+class PricingPrice extends WebgptElement {
+    constructor() {
+        super();
+        this.assertsToBeDirectChildOf('pricing-plan');
+    }
+}
+
+class PricingFeature extends WebgptElement {
+    constructor() {
+        super();
+        this.assertsToBeDirectChildOf('pricing-plan');
+    }
+}
+
+customElements.define('pricing-table', PricingTable);
+customElements.define('pricing-plan', PricingPlan);
+customElements.define('pricing-price', PricingPrice);
+customElements.define('pricing-feature', PricingFeature);
diff --git a/other/webgpt-components/pricing-table/pricing-table.md b/other/webgpt-components/pricing-table/pricing-table.md
@@ -0,0 +1,79 @@
+# Some cool product
+
+## Pricing as <pricing-table>
+
+<pricing-table>
+    ### Free
+
+    -   Feature 1
+    -   Feature 2
+    -   Feature 3
+    -   Feature 4
+
+    #### Basic
+
+    -   197,- Kč / měsíc
+    -   Feature 1
+    -   Feature 2
+
+    #### Advanced
+
+    -   500,- Kč / měsíc
+
+    #### Enterprise
+
+    -   1500,- Kč / měsíc
+
+</pricing-table>
+
+## Pricing as <div is="pricing-table">
+
+<div is="pricing-table">
+
+# Free
+
+-   Feature 1
+-   Feature 2
+-   Feature 3
+-   Feature 4
+
+## Basic
+
+-   197,- Kč / měsíc
+-   Feature 1
+-   Feature 2
+
+## Advanced
+
+-   500,- Kč / měsíc
+
+## Enterprise
+
+-   1500,- Kč / měsíc
+
+</div>
+
+## Pricing as block
+
+```markdown
+# Free
+
+-   Feature 1
+-   Feature 2
+-   Feature 3
+-   Feature 4
+
+## Basic
+
+-   197,- Kč / měsíc
+-   Feature 1
+-   Feature 2
+
+## Advanced
+
+-   500,- Kč / měsíc
+
+## Enterprise
+
+-   1500,- Kč / měsíc
+```
diff --git a/other/webgpt-components/pricing-table/pricing-table.module.css b/other/webgpt-components/pricing-table/pricing-table.module.css
@@ -0,0 +1,23 @@
+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;
+}
+
+/*
+TODO: !!! Design
+*/
diff --git 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
 
+<!-- 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: