manual merge from zola_heart

2026-11-04 09:28:11 +00:00 · 2024-08-26 12:06:32 -04:00
1 parent a11ed59378
commit d2ba64cc0a
@@ -1,36 +0,0 @@
-+++
-title = "Another Exciting Update"
-date = "2023-10-20"
-description = "Lorem Ipsum Dolor Si Amet"
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -1,6 +1,6 @@
 +++
 title = "AI Stylize Guide"
-slug = "ai-stylize-guide"
+slug = "ai-stylize"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/ai-stylize-guide/aistylize.png"
+cover_image = "/learn/ai-stylize/aistylize.png"
 +++

 # AI Stylize
@@ -1,6 +1,6 @@
 +++
 title = "Audio and Audio Generation Guide"
-slug = "audio-guide"
+slug = "audio"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "learn/audio-guide/uploadaudio.png"
+cover_image = "/learn/audio/audiocover.png"
 +++

 # Audio and Audio Generation Guide
@@ -1,6 +1,6 @@
 +++
 title = "Character and Animation Guide"
-slug = "character-and-animation-guide"
+slug = "character-and-animation"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/character-and-animation-guide/charcover.png"
+cover_image = "/learn/character-and-animation/charcover.png"
 +++

 # Characters & Animations
@@ -1,6 +1,6 @@
 +++
 title = "Image and Video Panels"
-slug = "image-and-video-panels-guide"
+slug = "image-and-video-panels"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/image-and-video-panels-guide/panelscover.png"
+cover_image = "/learn/image-and-video-panels/panelscover.png"
 +++

 # Image and Video Panels
@@ -1,6 +1,6 @@
 +++
 title = "Negative Prompting Guide"
-slug = "negative-prompting-guide"
+slug = "negative-prompting"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/negative-prompting-guide/negativecover.png"
+cover_image = "/learn/negative-prompting/negativecover.png"
 +++

 # Negative Prompting Guide
@@ -1,6 +1,6 @@
 +++
 title = "Prompt Emphasis Guide"
-slug = "prompt-emphasis-guide"
+slug = "prompt-emphasis"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/prompt-emphasis-guide/emphasiscover.png"
+cover_image = "/learn/prompt-emphasis/emphasiscover.png"
 +++

 # Prompt Emphasis
@@ -1,6 +1,6 @@
 +++
 title = "Saving and Loading Scenes"
-slug = "saving-loading-scenes-guide"
+slug = "saving-loading-scenes"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]
@@ -9,7 +9,7 @@ authors = ["Heart Ribbon"]
 categories = ["tutorial"]

 [extra]
-cover_image = "/learn/saving-loading-scenes-guide/scenescover.png"
+cover_image = "/learn/saving-loading-scenes/scenescover.png"
 +++

 # Saving and Loading Scenes
@@ -1,39 +0,0 @@
-+++
-title = "Bar Post 3"
-date = "2023-10-20"
-template= "blog_template/page.html" 
-authors = ["wil"]
-
-[taxonomies]
-tags = ["featured"]
-categories = ["tutorial"]
-
-[extra]
-cover_image = "/poc/bar-3/2D_many_phases.png"
-+++
-
-# Main Heading 1
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
-
-Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
-tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
-lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
-accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
-vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
-ultrices nulla eget justo malesuada viverra.
-
-## Heading 2
-
-Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
-
-![2-D_Phase_5](./2-D_Phase_5.jpg)
-
-### Heading 3
-
-{{ youtube(id="amPMMEAmf0Q") }}
-youtube video
-
-# Main Heading 2
-
-end of doc
@@ -1,20 +0,0 @@
-+++
-title = "An Update on TTS"
-date = "2024-08-08"
-description = "New updates coming to FakeYou TTS feature"
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-In FakeYou.com, users can use Text To Speech (TTS) AI in order to create well-known voices from their favorite media instantly. As of a recent update, new voice models have received an upgrade and the website has been overhauled, which will allow you to generate higher quality voices even easier!
-
-# How to get started:
-
-1. Go to https://fakeyou.com/tts
-2. Choose from the **Featured Voices** or search for a voice of your own.
-3. Voices with the **New** tag will be using the newer model for generating.
-4. Enter your text and Speak! Your output will be received shortly.
-
-Make sure to check out other functions such as Voice to Voice conversion (V2V) or Video Style Transfer which have improved in recent updates too.
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
@@ -6,4 +6,7 @@ description = "Tutorials, tips and tricks on how to create better content."

 # Defaults
 template= "blog_template/section.html" 
+
+[extra]
+featured_post = { url = "/learn/ai-live-portrait-guide", title = "AI Live Portrait Guide", cover_image="/learn/ai-live-portrait-guide/liveportrait1.png" }
 +++
@@ -7,6 +7,9 @@ authors = ["Moonchamp "]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/ai-live-portrait-guide/liveportrait1.png"
 +++

 [AI Face Mirror](https://fakeyou.com/ai-face-mirror) is a tool used to transfer facial expressions, audio, and vocal lip movement from one face video to an image. This feature is ideal for creating realistic animations by mapping the motion from a “driver” video onto a target face.
@@ -1,12 +1,15 @@
 +++
 title = "AI Stylize Guide"
-slug = "ai-stylize-guide"
+slug = "ai-stylize"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/ai-stylize/aistylize.png"
 +++

 # AI Stylize
@@ -1,18 +1,27 @@
 +++
 title = "Audio and Audio Generation Guide"
-slug = "audio-guide"
+slug = "audio"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/audio/audiocover.png"
 +++

 # Audio and Audio Generation Guide
 In the Audio tab, you have two choices: Upload audio and Generate audio. Let's explore what each option does.
+![audio tab](<audio tab.png>)

 ## Generate Audio
 Generate AI speech here. You can select from a variety of AI voices. Enter text to generate audio or upload your own audio to convert it to a different voice. Conversion is recommended for the best results.
+![generate tab](generate.png)
+
+### Upload Audio / Voice Conversion
+Here you can upload your own audio and select from a variety of voices to convert your selected audio into. No need to enter text.
+![upload audio](uploadaudio.png)


@@ -1,12 +1,15 @@
 +++
 title = "Character and Animation Guide"
-slug = "character-and-animation-guide"
+slug = "character-and-animation"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/character-and-animation/charcover.png"
 +++

 # Characters & Animations
@@ -1,18 +1,23 @@
 +++
 title = "Image and Video Panels"
-slug = "image-and-video-panels-guide"
+slug = "image-and-video-panels"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/image-and-video-panels/panelscover.png"
 +++

 # Image and Video Panels
 Image and Video Panels allow you to import your own images and videos into the studio for 3d manipulation. To access them, go to the “Image & Video Panels” tab on the right hand side of the studio and select either “Image Panels” or “Video Panels” and click “Upload”. 
-
+![tab](tab.png)
+![image and video panels](imvidpanels.png)
 Once you’ve uploaded your selected media, click on it and drag it onto the scene. You can click to select it and press either T, R or G to adjust position, rotation or scale. Alternatively, you can use the transform panel on the right hand side to adjust it as well. 
+![image panels example in scene](panelexample.png)

 You can combine multiple image and video panels to create interesting outputs. 
 Here’s an example of a video generated using video panels and one with image panels:
@@ -1,12 +1,15 @@
 +++
 title = "Negative Prompting Guide"
-slug = "negative-prompting-guide"
+slug = "negative-prompting"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/negative-prompting/negativecover.png"
 +++

 # Negative Prompting Guide
@@ -1,12 +1,15 @@
 +++
 title = "Prompt Emphasis Guide"
-slug = "prompt-emphasis-guide"
+slug = "prompt-emphasis"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/prompt-emphasis/emphasiscover.png"
 +++

 # Prompt Emphasis
@@ -7,6 +7,9 @@ authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/prompting-guide/promptingcover.png"
 +++

 # General Prompting Guide
@@ -1,19 +1,25 @@
 +++
 title = "Saving and Loading Scenes"
-slug = "saving-loading-scenes-guide"
+slug = "saving-loading-scenes"
 date = "2024-08-08"
 template= "blog_template/page.html" 
 authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/saving-loading-scenes/scenescover.png"
 +++

 # Saving and Loading Scenes
 To name your scene, go to the top of the studio where it says “Untitled New Scene” (or it may already have a name if it's a remix scene). Click the scene name to edit it. To save the scene, click “File” in the top left corner, then “Save Scene.” The page will reload—this is normal. Be sure to save any changes you make afterward.
+![naming scene](<scene naming.png>)
+![saving scene](saving.png)

 To save a copy of your scene, follow the same steps but click “Save Scene as Copy” instead.

+
 To load a scene, click “File” in the top left corner, then “Load my Scene.”
 {{ youtube(id="5JEk8Af4EZE") }}
 {{ youtube(id="YXp_0ueHlsU") }}
@@ -7,6 +7,9 @@ authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/style-transfer/stylecover.png"
 +++

 # Style Transfer
@@ -14,6 +17,8 @@ categories = ["tutorial"]
 Sometimes, it's hard to get the details right as you envision them. That's where Style Reference comes in. If you have an image you'd like to use as a reference, whether it's scenery, a subject, or a certain art style, Style Transfer will handle it. It also increases consistency, decreasing pop-ins or morphing.

 To use Style Transfer, go to the "Stylize" tab. Drag and drop an image into the panel where prompted, or click to upload one. Crop the image as desired.
+![style transferring](style.png)
+![style transferring2](style2.png)

 After entering your image, you don't need to add the qualities of the image to the prompt, as they'll automatically be handled. You can also choose not to prompt at all if you want it to solely focus on the image you inputted. Once you're satisfied, press "Generate Movie."

@@ -7,12 +7,16 @@ authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/the-camera-view/cameracover.png"
 +++

 # The Camera View

 ## Entering Camera View
 To enter Camera View, go to the bottom left pane above the "Timeline" panel and click "Enter View." Once in this view, use WASD to move the camera and the middle mouse button to orbit. When you're done, click "Exit View."
+![camera view](camera1.png)

 ## Creating Camera Transitions
 To create a camera transition, first select the camera. In the bottom right corner above the Timeline panel, you’ll find the transformation panel. To start a transition, go to the desired start time and press "Add Keyframe." Then move to the end time on the timeline, position the camera where you want the transition to end, and press "Add Keyframe" again. This creates a moving camera transition.
@@ -7,12 +7,17 @@ authors = ["Heart Ribbon"]

 [taxonomies]
 categories = ["tutorial"]
+
+[extra]
+cover_image = "/learn/uploading-objects-and-characters/uploadingcover.png"
 +++

 # Uploading Objects and Characters
 To upload your content and characters, ensure they are in GLB format with baked-in textures. Our character rigging system works only with Mixamo.

 To upload an object, navigate to the desired object category, click “Upload,” name your item, and press “OK.” Your uploaded item will appear in the “Mine” tab.
+![uploading 1st panel](uploading1.png)
+![uploading 2nd panel](uploading2.png)

 If you encounter issues, please contact us on Discord.

@@ -1,112 +0,0 @@
-+++
-title = "MD Writing Example"
-date = "2023-10-20"
-description = "Example to how to write an MD blog post."
-
-[taxonomies]
-# tags = ["markdown", "text"]
-
-[extra]
-mermaid = true
-math = true
-+++
-
-# Title
-
-## Paragraphs
-
-***Victa caducifer***, malo _vulnere_ ~contra~ `dicere` aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
-
-## Ordered List
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-## Unordered List
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Images
-## SVG Image
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-Link: [The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Local Image
-![Godzilla](./godzilla-poster.jpg)
-
-# Short Codes
-
-## Youtube
-{{ youtube(id="S7TUe5w6RHo") }}
-
-## Mermaid Diagram
-
-{% mermaid () %}
-```mermaid
-pie title What Voldemort doesn't have?
-  "FRIENDS" : 2
-  "FAMILY" : 3
-  "NOSE" : 45
-```
-{% end %}
-
-{% mermaid () %}
-```mermaid
-sequenceDiagram
-  participant Alice
-  participant Bob
-  Alice->>John: Hello John, how are you?
-  loop Healthcheck
-      John->>John: Fight against hypochondria
-  end
-  Note right of John: Rational thoughts <br/>prevail!
-  John-->>Alice: Great!
-  John->>Bob: How about you?
-  Bob-->>John: Jolly good!
-```
-{% end %}
-
-[More Mermaid Examples Here >](https://mermaid.js.org/syntax/examples.html)
-
-## Admonitions
-
-{% admonition(type="tip", title="tip") %}
-The `tip` admonition.
-{% end %}
-
-There are 12 admonitions supported, you can read them [here](https://st1020.github.io/kita/shortcodes/#admonition)
-
-## Math
-For inline math, wrap the math text with `$ ... $`
-```markdown
-## Code example
-When $x = \pi$, Eler's formula may berewritten as $e^{i \pi} + 1 = 0$.
-```
-
-##### Rendered example:
-When $x = \pi$, Eler's formula may berewritten as $e^{i \pi} + 1 = 0$.
-
-You can also have a block that's just math
-```
-## Code example
-$$
-  \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
-$$
-
-```
-##### Rendered example:
-$$
- \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
-$$
-
-
-## Gallery
-**WIP**: Please let wil cook for a bit more
@@ -1,37 +0,0 @@
-+++
-title = "Page Example"
-date = "2023-10-20"
-description = "Lorem Ipsum Dolor Si Amet"
-
-[taxonomies]
-# tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -1,11 +0,0 @@
-+++
-sort_by = "date"
-paginate_by = 10
-title = "Learn"
-description = "Tutorials, tips and tricks on how to create better content."
-
-# Defaults
-template= "blog_template/section.html" 
-+++
-
-# This is the PoC of the Blog
@@ -1,36 +0,0 @@
-+++
-title = "Placeholder Text 1"
-date = "2023-10-20"
-template= "blog_template/page.html" 
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -1,36 +0,0 @@
-+++
-title = "Placeholder Text 2"
-date = "2023-10-20"
-template= "blog_template/page.html" 
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -1,37 +0,0 @@
-+++
-title = "Gorillaz"
-date = "2024-08-07"
-template= "blog_template/page.html" 
-authors = ["Bombay"]
-
-[taxonomies]
-tags = ["featured"]
-categories = ["tutorial"]
-
-[extra]
-cover_image = "/learn/bar-4/2D_many_phases.png"
-+++
-
-## Heading 2
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
-
-Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
-tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
-lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
-accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
-vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
-ultrices nulla eget justo malesuada viverra.
-
-### Heading 3
-
-Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
-
-![2-D_Phase_5](./2-D_Phase_5.jpg)
-
-#### Heading 4
-
-{{ youtube(id="amPMMEAmf0Q") }}
-youtube video
-
-end of doc
@@ -1,36 +0,0 @@
-+++
-title = "Top 10 Tools for Video Generation"
-date = "2023-10-20"
-description = "Lorem Ipsum Dolor Si Amet"
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -1,36 +0,0 @@
-+++
-title = "Placeholder Text 2"
-date = "2023-10-20"
-description = "Lorem Ipsum Dolor Si Amet"
-[taxonomies]
-tags = ["markdown", "text"]
-+++
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-# Vagus elidunt
-
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
@@ -0,0 +1,4 @@
+public
+backup
+node_modules
+deploy
@@ -0,0 +1,104 @@
+# ZOLA BLOG README
+
+Zola is a SSG (static site generator) written in Rust, however, you do not need to know any Rust programming to do the development work on this. It is more important to understand the [Tera Templates](https://keats.github.io/tera/) and its particualr syntax for templating and markdown editing.
+
+So, to start:-
+
+## The BASICS
+### Installation
+
+#### On Mac
+
+Using `brew` is probably the easiest
+```sh
+$ brew install zola
+```
+
+#### On Windows
+Using `winget` is probably the easiest
+```sh
+$ winget install getzola.zola
+```
+
+For Other systems, please refer to Zola's [Installation Guide](https://www.getzola.org/documentation/getting-started/installation/).
+
+### Running the Development
+This project consist of Tailwind CSS, which is a module on npm, so firstly, install and build Tailwind
+```sh
+$ yarn        # this installs the module according to the package.json
+$ yarn dev    # this build and serve the css files with live reload
+```
+Then, at the root of this project, simply run.
+```sh
+$ zola serve
+```
+This builds and serves the blog at `http://localhost:1111`, it also provide **live-reloading** for a more convenient development workflow as well.
+
+### Building the Deployment
+At the root of this project, simply run.
+```sh
+$ yarn build    # this builds the css files
+$ zola build    # this builds the entire package
+```
+At the end, this compiles everthing into the `public` folder, and this `public` folder is ready for a static site deployment.
+
+#### Dry Running the Deployment
+You may want to do a dry run on the deployment build, one of the easiest ways is to use python's simple http serve
+```sh
+$ cd public
+$ python -m SimpleHTTPServer 9000
+# if you have the latest python install you can also run 
+$ python3 -m http.server 9000
+```
+This serves the static files on `http://localhost:9000`, you can change the port number it something else is already running on `9000`.
+
+The above commands are the same in `serve_publc.sh`, for your convenience, you can simply run this file instead.
+
+## DEVELOPMENT
+
+### File Structure
+
+
+```sh
+/
+├── config.toml            # Configuration file for SSG 
+│
+├── content/               # Directory for all MD files
+│   │
+│   ├── blog/              # A Section of the Generated Site
+│   │   ├── _index.md      # The Blog-roll of a section, aka the section page
+│   │   ├── first.md       # Every other MD file is a post in the section
+│   │   └── second/        # If a post have many files, it's better to use a directory
+│   │       ├── index.md   # The MD file of the post must be named index.md
+│   │       └── image.jpg  # e.g, the post has an image, it can be placed in its directory
+│   ⋮
+│   └── news/              # There could be many sections, they take have any name you give its directory
+│
+├── public/               # Output folder, ignored by Git
+│
+├── static/               # All the static assets that's used by the template
+│
+└── templates/            # All the template files are in the template directory
+    │                     # The following are some important files
+    │  
+    │                     # Zola Defaults
+    ├── index.html        # The default template for /content/_index.md, unused by our project
+    ├── page.html         # The default template for any blog post page
+    ├── section.html      # The default template for any section page
+    │
+    │                          # Templates pages of less priority
+    ├── 404.html               # The default template for 404 page
+    ├── taxonomy_list.html     # The default template for tags page, iow, show all tags
+    ├── taxonomy_single.html   # The default template for a tag's page, iow, show all post with a certain tag
+    │
+    │                     # Other that is Important for our template
+    ├── base.html         # Base template that's shared among all templates
+    ├── partials/         # HTML partials that are reused in different templates
+    └── shortcodes/       # HTML partials that are used in MD files to go beyond basic MD rendering, 
+                          # such as youtubes embeds, etc,
+```
+
+## POST Writing, iow, MD Specifications
+
+WIP m(_ _)m Let me cook please.
+
@@ -0,0 +1,50 @@
+# The base URL of the site; the only required configuration variable.
+base_url = "/"
+
+# The site title and description; used in feeds by default.
+title = "Storyteller.ai"
+description = "Blog posts and tutorials of Storyteller.ai"
+
+# The default language; used in feeds.
+default_language = "en"
+
+# The site theme to use.
+# theme = "kita"   
+# Our theme is based on Kita, but we need so much customization that we dont use any theme directly
+
+# For overriding the default output directory `public`, set it to another value (e.g.: "docs")
+output_dir = "public"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# When set to "true", the generated HTML files are minified.
+minify_html = false
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+
+# The taxonomies to be rendered for the site and their configuration of the default languages
+# Example:
+#     taxonomies = [
+#       {name = "tags", feed = true}, # each tag will have its own feed
+#       {name = "tags"}, # you can have taxonomies with the same name in multiple languages
+#       {name = "categories", paginate_by = 5},  # 5 items per page for a term
+#       {name = "authors"}, # Basic definition: no feed or pagination
+#     ]
+#
+
+taxonomies = [
+  { name= "categories", paginate_by = 5},
+  { name = "tags", rss = true, paginate_by = 5 },
+]
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here
+social_image = "icons/github.svg"
+
@@ -0,0 +1,9 @@
+++
+++
+
+# the MAIN INDEX
+
+1. This page should never be seen by any user, all deployed contents are in their separate directories.
+2. All `_index.md` files are the blog-roll page for each directory, except for this page, this is the directory of the root of `context/`
+3. In addition, although this is technically a **blog-roll**, it does not use `section.html` as its template like other direcotry's blog-roll; by default, this page only loads `index.html` as its template.
+4. a blog-roll consist of some example pages should be shown for the deployment of this page.
@@ -0,0 +1,25 @@
+{
+  "name": "zola-kita",
+  "version": "0.1.0",
+  "description": "Kita is a clean, elegant and simple blog theme for Zola.",
+  "homepage": "https://github.com/st1020/kita",
+  "license": "MIT",
+  "author": "st1020 <me@st1020.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/st1020/kita.git"
+  },
+  "scripts": {
+    "build": "./scripts/build.sh",
+    "clean": "./scripts/clean.sh",
+    "dev": "./scripts/develop.sh",
+    "serve": "./scripts/serve_deploy.sh"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.13",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.7"
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+echo "Building Tailwind CSS"
+npx tailwindcss -c ./tailwind.config.js -i ./static/zola/app.css -o ./static/zola/main.css
+
+echo "Building site via Zola SSG"
+zola --config config.toml build --output-dir deploy
+
+echo "Done, please check the deploy folder".
@@ -0,0 +1,13 @@
+#!/bin/bash
+
+if [ -d "deploy" ]; then
+  echo "deleting the deploy directory..."
+  rm -rf deploy
+  echo "done."
+fi
+
+if [ -d "public" ]; then
+  echo "deleting the public directory..."
+  rm -rf public
+  echo "done."
+fi
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+echo "Building and Watching Tailwind CSS"
+npx tailwindcss -c ./tailwind.config.js -i ./static/zola/app.css -o ./static/zola/main.css --watch &
+
+
+echo "Building with Live-Reload via Zola SSG"
+zola  --config config.toml serve
+
+echo "Closing... BYE!".
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+if [ -d "deploy" ]; then
+  pushd deploy
+  echo "Running Python HTTP Server on deploy"
+  python3 -m http.server 9000
+  echo "Closing Python HTTP Server"
+  popd
+else
+  echo "deploy directory does not exist."
+  echo "please build the deployment first."
+fi
@@ -0,0 +1,131 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body {
+    @apply h-full min-h-full;
+  }
+
+  html {
+    --bg: transparent;
+    --bg-dark: transparent;
+    --header: transparent;
+    --header-dark: transparent;
+    font-family: "Source Sans 3", system-ui, sans-serif;
+  }
+
+  body {
+    -webkit-tap-highlight-color: transparent;
+    background: var(--bg);
+  }
+
+  .dark body {
+    background: var(--bg-dark);
+  }
+
+  *,
+  ::before,
+  ::after {
+    /* Auto direction for text */
+    unicode-bidi: plaintext;
+  }
+}
+
+iframe {
+  @apply w-full aspect-video h-full mb-3;
+}
+
+.btn {
+  @apply flex w-fit px-4 py-1.5 rounded-lg font-semibold text-white hover:bg-primary-400 transition-colors duration-200;
+}
+
+.btn-primary {
+  @apply bg-primary text-[15px];
+}
+
+h2 {
+  @apply !leading-5;
+}
+
+a {
+  @apply underline !text-link hover:opacity-90 transition-all duration-150;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  @apply !text-4xl !font-bold !leading-9;
+}
+
+.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
+@layer utilities {
+  .not-ready * {
+    @apply !transition-none;
+  }
+
+  .btn-menu::before,
+  .btn-menu::after {
+    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
+  }
+
+  .open {
+    @apply overflow-hidden;
+  }
+
+  .open .btn-menu::before {
+    @apply w-6 translate-y-[5.5px] rotate-45;
+  }
+
+  .open .btn-menu::after {
+    @apply w-6 -translate-y-[5.5px] -rotate-45;
+  }
+
+  .nav-wrapper {
+    @apply hidden lg:flex;
+  }
+
+  .open .nav-wrapper {
+    @apply flex;
+  }
+
+  article {
+    @apply text-lg;
+  }
+
+  .header {
+    background-color: var(--header);
+  }
+
+  .dark .header {
+    background: var(--header-dark);
+  }
+
+  .blur-header {
+    @apply bg-black/10 backdrop-blur dark:bg-white/10;
+  }
+
+  .block-bg {
+    @apply bg-black/[3%] dark:bg-white/[8%];
+  }
+
+  .block-hover {
+    @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
+  }
+
+  .block-hover-mask {
+    @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
+  }
+
+  .primary-link {
+    @apply text-black no-underline hover:opacity-80 dark:text-white;
+  }
+
+  .secondary-link {
+    @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
+  }
+}