Write frontend docs for all components in an appealing form factor.

.ddev/.env.web

@@ -1,10 +1,10 @@
-CRAFT_DB_SERVER="db"
-CRAFT_DB_USER="db"
-CRAFT_DB_PASSWORD="db"
-MAILPIT_SMTP_PORT="1025"
 CRAFT_DB_DRIVER="mysql"
 CRAFT_DB_PORT="3306"
-CRAFT_DB_DATABASE="db"
-MAILPIT_SMTP_HOSTNAME="127.0.0.1"
+CRAFT_DB_SERVER="db"
+CRAFT_DB_USER="db"
 CRAFT_WEB_ROOT="/var/www/html/public"
 PRIMARY_SITE_URL="https://craft-base-install.local.statik.be"
+CRAFT_DB_DATABASE="db"
+CRAFT_DB_PASSWORD="db"
+MAILPIT_SMTP_HOSTNAME="127.0.0.1"
+MAILPIT_SMTP_PORT="1025"

.githooks/post-merge

@@ -12,6 +12,6 @@ check_run() {
 }
 
 check_run package.json "yarn install"
-check_run tailoff "yarn run dev"
+check_run frontend "yarn run dev"
 check_run composer.json "ddev composer install"
 check_run config/project/project.yaml "ddev craft up"

.github/workflows/doctest.yml → .github/workflows/docs.yml

@@ -6,7 +6,7 @@ on:
   # Runs on pushes targeting the `main` branch. Change this to `master` if you're
   # using the `master` branch as the default branch.
   push:
-    branches: [KarelJanVanHaute/issue347]
+    branches: [master]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -43,18 +43,21 @@ jobs:
           cache: npm # or pnpm / yarn
       - name: Setup Pages
         uses: actions/configure-pages@v4
-      - name: Install dependencies
+      - name: Install dependencies in root
+        run: yarn install # or pnpm install / yarn install / bun install
+      - name: Install dependencies for docs
         working-directory: ./docs
         run: yarn install # or pnpm install / yarn install / bun install
       - name: Build frontend into docs
         working-directory: ./docs
-        run: yarn docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+        run: yarn build # or pnpm docs:build / yarn docs:build / bun run docs:build
       - name: Build with VitePress
+        working-directory: ./docs
         run: yarn docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: docs/.vitepress/dist
+          path: docs/src/.vitepress/dist
 
   # Deployment job
   deploy:

.gitignore

@@ -25,3 +25,12 @@ templates/_site/_snippet/_global/_iconSprite.twig
 templates/_site/_snippet/_global/_favicon.twig
 public/frontend*/*
 /translations
+docs/src/.vitepress/dist
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/src/assets/examples/*
+docs/node_modules/*
+docs/src/.vitepress/cache/*
+docs/src/public/*
+docs/.env
+storage/logs/*

MULTISITE.MD

@@ -9,9 +9,9 @@ The single base site files are located in subfolders with the name "site". If yo
 If you want to rename the site you need to adjust the name or content of the following files/folder.
 
 - templates/\_site
-- tailoff/js/site.ts
-- tailoff/img/site
-- tailoff/css/site
+- frontend/js/site.ts
+- frontend/img/site
+- frontend/css/site
 - vite-favicon.config.js
 - vite.config.js
 
@@ -43,18 +43,18 @@ Make sure the name fits the name you choose in the vite.config.js file.
 
 ## JS
 
-Rename the files "tailoff/js/site.ts" and "tailoff/js/site2.ts", or duplicate one. Also adjust the references in the corresponing vite.config.js.
+Rename the files "frontend/js/site.ts" and "frontend/js/site2.ts", or duplicate one. Also adjust the references in the corresponing vite.config.js.
 
 ## CSS
 
-Rename or duplicate the folder "tailoff/css/site". And adjust the reference in the .ts files.
+Rename or duplicate the folder "frontend/css/site". And adjust the reference in the .ts files.
 
 ## Headers
 
 Make sure the \_layout.twig files are referencing the correct files in the head.
 
 ```
-{{ craft.vite.script("tailoff/js/site.ts") }}
+{{ craft.vite.script("frontend/js/site.ts") }}
 {{ craft.vite.inline("@webroot/favicon/site/webapp.html") }}
 ```
 

README.MD

@@ -149,10 +149,10 @@ yarn watch
 
 **CSS and Javascript**
 
-`tailoff/css` and `tailoff/js`
+`frontend/css` and `frontend/js`
 
 **Favicon**
-Add an svg in `tailoff/img/` called `favicon.svg` and run
+Add an svg in `frontend/img/` called `favicon.svg` and run
 
 ```bash
 
@@ -161,7 +161,7 @@ yarn favicon
 ```
 
 **Icons**
-Icon go in the folder `tailoff/icons`
+Icon go in the folder `frontend/icons`
 
 ---
 

bitbucket_pipelines_build_frontend.sh

@@ -7,3 +7,4 @@ nvm install && nvm use
 npm install -g yarn
 yarn install
 yarn prod
+yarn ckeditor

config/license.key.1

@@ -0,0 +1,5 @@
+IHXFQTF50SHEH+^WA3IS*O$HT8U=1LRSZGP587O/SXRVAP!D^=
++M2TU48Y73CG^%#YN=/K$ZWG%UHMXGV+SX^US70P^SH432GD*1
+KC*WPXCNIX#D2VV6HJPSWW5!=K#K*/WHEA0B+3&9HKNKRIE5DG
+TURZ!AR+QA=66HH9$R4DNSYE0ANY4V2KR6N3NZ4T+Z&DE9A*23
+!&3IY#D+$BRAXSAUC%I2L/3U&P$ZKA#KI6$FOI99B&OBD69R16

config/project/project.yaml

@@ -1,4 +1,4 @@
-dateModified: 1756977801
+dateModified: 1759849244
 elementSources:
   craft\elements\Entry:
     -

config/project/volumes/publicFiles--979c3eeb-f99a-4ca1-bcbe-ce9298a4e4ca.yaml

@@ -2,6 +2,9 @@ altTranslationKeyFormat: null
 altTranslationMethod: site
 fieldLayouts:
   8985b5d5-d4d2-4e77-a044-b0cba33552b7:
+    cardView:
+      - 'layoutElement:72d09997-657f-46cc-ab0b-5b48e28bdbfb'
+      - 'layoutElement:1e9dc273-861f-4698-8e81-099c5675056a'
     tabs:
       -
         elementCondition: null
@@ -49,11 +52,11 @@ fieldLayouts:
             attribute: alt
             class: null
             cols: null
-            dateAdded: '2024-10-14T06:42:46+00:00'
+            dateAdded: '2025-07-10T07:39:55+00:00'
             disabled: false
             elementCondition: null
             id: null
-            includeInCards: true
+            includeInCards: false
             instructions: 'Alternative text is a textual substitute for images. Screen readers announce the alternative text, but it is also displayed if the image fails to load. Search engines also use alternative text and factor it into their assessment of the page purpose. Use the alternative text to describe what the image means within its context, not what it depicts. Leave empty if the image serves a purely ornamental or decorative purpose.'
             label: null
             name: null
@@ -67,7 +70,7 @@ fieldLayouts:
             tip: null
             title: null
             type: craft\fieldlayoutelements\assets\AltField
-            uid: 613a44f5-6a37-4c31-9640-88cb393cb476
+            uid: 98be8a9f-0c1f-4fe2-8789-fdf33a33024d
             userCondition: null
             warning: null
             width: 100

config/vite.php

@@ -4,13 +4,13 @@
 
 $manifestPath = '@webroot/frontend/.vite/manifest.json';
 $serverPublic = '/frontend';
-$errorEntry = '/tailoff/js/site.ts';
+$errorEntry = '/frontend/js/site.ts';
 
 // switch(Craft::$app->getSites()->currentSite->handle){
 //     case 'fr' :
 //         $manifestPath = '@webroot/frontend-site2/manifest.json';
 //         $serverPublic = '/frontend-site2';
-//         $errorEntry = '/tailoff/js/site2.ts';
+//         $errorEntry = '/frontend/js/site2.ts';
 //         break;
 // }
 

docs/.env

@@ -0,0 +1 @@
+

docs/README.md

@@ -0,0 +1,7 @@
+# Statik Craft Base Install Docs
+
+## How to build
+
+- First run `yarn build`. This will take all the frontend from the frontend folder and build it to the example folder zo all examples work.
+- Then run `yarn docs:dev` for local testing.
+- If all is done you can run `yarn docs:build` and `yarn docs:preview` to preview the final result.

docs/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "docs",
+  "type": "module",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "docs:dev": "vitepress dev src",
+    "docs:build": "vitepress build src",
+    "docs:preview": "vitepress preview src"
+  },
+  "devDependencies": {
+    "vitepress": "^1.6.3"
+  },
+  "dependencies": {}
+}

docs/src/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,52 @@
+{
+  "hash": "9969b800",
+  "configHash": "8b872746",
+  "lockfileHash": "e0c142d9",
+  "browserHash": "3f9c9830",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "d9ca7532",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "f3e8997c",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/core": {
+      "src": "../../../../node_modules/@vueuse/core/index.mjs",
+      "file": "vitepress___@vueuse_core.js",
+      "fileHash": "670b8f6c",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/integrations/useFocusTrap": {
+      "src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
+      "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
+      "fileHash": "534edfcb",
+      "needsInterop": false
+    },
+    "vitepress > mark.js/src/vanilla.js": {
+      "src": "../../../../node_modules/mark.js/src/vanilla.js",
+      "file": "vitepress___mark__js_src_vanilla__js.js",
+      "fileHash": "7cb96e71",
+      "needsInterop": false
+    },
+    "vitepress > minisearch": {
+      "src": "../../../../node_modules/minisearch/dist/es/index.js",
+      "file": "vitepress___minisearch.js",
+      "fileHash": "ecf7a73a",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-Z5QSWKN2": {
+      "file": "chunk-Z5QSWKN2.js"
+    },
+    "chunk-LW4I4DCF": {
+      "file": "chunk-LW4I4DCF.js"
+    }
+  }
+}

docs/src/.vitepress/cache/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}