docs: WIP demo site update

demoSite/config.toml

@@ -3,15 +3,6 @@ languageCode = "en-us"
 # theme = "hugo-theme-re-terminal"
 paginate = 5
 
-# Only for demo deploy perpous
-[module]
-[[module.mounts]]
-source = 'exampleSite/content'
-target = 'content'
-[[module.mounts]]
-source = 'exampleSite/static'
-target = 'static'
-
 [params]
 contentTypeName = "posts"
 themeColor = "blue"
@@ -46,3 +37,25 @@ url = "/about"
 identifier = "showcase"
 name = "Showcase"
 url = "/showcase"
+
+
+# Only for demo deploy perpous
+[module]
+[[module.mounts]]
+source = 'demoSite/content'
+target = 'content'
+[[module.mounts]]
+source = 'demoSite/static'
+target = 'static'
+[[module.mounts]]
+source = 'static'
+target = 'static'
+[[module.mounts]]
+source = 'demoSite/layouts'
+target = 'layouts'
+[[module.mounts]]
+source = 'layouts'
+target = 'layouts'
+[[module.mounts]]
+source = 'archetypes'
+target = 'archetypes'

demoSite/content/posts/css-vars.md

@@ -0,0 +1,10 @@
++++
+title = "CSS Variables update"
+date = "2024-07-30"
+author = "Mirus"
+cover = "img/hello.jpg"
+description = "A small demo of native css variables"
+layout = "css-vars-showcase"
++++
+
+hello md

demoSite/content/showcase.md

@@ -4,6 +4,9 @@ date: "2018-07-18"
 author: "Hello Robot"
 ---
 
+# Features in updates
+- [native CSS variables showcase](/posts/css-vars/)
+
 ## Header 2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.

demoSite/layouts/posts/css-vars-showcase.html

@@ -0,0 +1,32 @@
+{{ define "head" }}
+<style>
+
+</style>
+{{ end }}{{ define "main" }}
+<div class="post">
+  <!-- Common header, cover, etc. -->
+  {{ partial "single_basic.html" . }}
+
+  <form oninput="color.value=colorpicker.value">
+    <output name="color" for="colorpicker">Color</output>
+    <label>
+      Pick a color
+      <input id="colorpicker" name="colorpicker" type="color" /> 
+    </label>
+  </form>
+  
+  <script defer>
+    const picker = document.getElementById("colorpicker"); 
+    const root = document.querySelector(':root');
+    const listener = picker.addEventListener("input", () => {
+      if (picker.value) {
+        root.style.setProperty('--accent', picker.value);
+      }
+    })
+  </script>
+
+  {{ if eq .Type $.Site.Params.contentTypeName }} {{ partial
+  "posts_pagination.html" . }} {{ end }} {{ if not (.Params.hideComments |
+  default false) }} {{ partial "comments.html" . }} {{ end }}
+</div>
+{{ end }}