diff --git a/other/webgpt-components/README.md b/other/webgpt-components/README.md new file mode 100644 index 000000000..f4039ccd1 --- /dev/null +++ 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 `` or `` +- **Element** is custom element extended from `WebgptElement` for example `` diff --git a/other/webgpt-components/TODO.txt b/other/webgpt-components/TODO.txt new file mode 100644 index 000000000..38fdf78a1 --- /dev/null +++ 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 \ No newline at end of file diff --git a/other/webgpt-components/call-to-action/call-to-action.html b/other/webgpt-components/call-to-action/call-to-action.html new file mode 100644 index 000000000..859b45e7a --- /dev/null +++ b/other/webgpt-components/call-to-action/call-to-action.html @@ -0,0 +1,61 @@ +ddd Buy 0 sss + + + diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html new file mode 100644 index 000000000..4e4e17eb6 --- /dev/null +++ b/other/webgpt-components/pricing-table/pricing-table.html @@ -0,0 +1,129 @@ + + + + + + Zadarmo / navždy + WebGPT značka + Naše reklama [1] + + + + + + + + + 49,- Kč / web / měsíc + 1 stránka + 1 jazyk + 30 změn za měsíc + Hosting na naší doméně / Možnost zakoupení domény + Základní komponenty + + + + + + 159,- Kč / web / měsíc + .cz doména v ceně + 10 stránek + 1000 změn za měsíc + 2 jazykové verze + kontrola SEO + kontrola přístupnosti + + + + + 599,- Kč / web / měsíc + podpora po telefonu + možnost navrhovat vlastní komponenty + automatická aktualizace na základě sociálních sítí + plný přístup k podkladovým materiálům + prémiové komponenty + + + + + + 699,- Kč / měsíc + + + + + + + + + + + + + + Zadarmo / navždy + + + + + + + +
+ +
+ + +Zadarmo / navždy + + + + diff --git a/other/webgpt-components/pricing-table/pricing-table.js b/other/webgpt-components/pricing-table/pricing-table.js new file mode 100644 index 000000000..92d18c70a --- /dev/null +++ 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 new file mode 100644 index 000000000..a70b06912 --- /dev/null +++ b/other/webgpt-components/pricing-table/pricing-table.md @@ -0,0 +1,79 @@ +# Some cool product + +## Pricing as + + + ### 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 as
+ +
+ +# 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 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 new file mode 100644 index 000000000..3cf9117b6 --- /dev/null +++ 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 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/public/icons/openmoji/README.md b/public/icons/openmoji/README.md index c2590c9e7..eb5967551 100644 --- a/public/icons/openmoji/README.md +++ b/public/icons/openmoji/README.md @@ -1,4 +1,4 @@ -# 🍱 Emojis +# 😉 Emojis 1. Go to https://openmoji.org/library/#search=love to search emoji and find the code 2. Switch to non-color version diff --git a/src/components/AiComponents/README.md b/src/components/AiComponents/README.md index 7b2cdd450..89d3b2229 100644 --- a/src/components/AiComponents/README.md +++ b/src/components/AiComponents/README.md @@ -1,4 +1,4 @@ -🖼 AI Components +# 🖼 AI Components Theese are components that are used in dynamic next page and also rendered into static export diff --git a/src/components/AiComponents/TODO.txt b/src/components/AiComponents/TODO.txt index 5cac25277..47296a751 100644 --- a/src/components/AiComponents/TODO.txt +++ b/src/components/AiComponents/TODO.txt @@ -1 +1 @@ -TODO: [👨‍🦲] AI Components are deprecated, use custom html components instead \ No newline at end of file +TODO: [👨‍🦲] AI Components are deprecated, use webgpt components instead \ No newline at end of file diff --git a/src/components/WallpaperContent/WallpaperContent.tsx b/src/components/WallpaperContent/WallpaperContent.tsx index c2e2772cd..e491ec0cf 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,42 @@ export function WallpaperContentSection() { + + for custom html components + > + {` + + class CallToAction extends HTMLAnchorElement { + constructor() { + super(); + + + console.info('!!! CallToAction.constructor'); + } + + 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;