ourworld_web/HOME
18
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

zola upgrade/TEMPLATE: build shortcodes component library - using tailwind compatibility #27

New Issue
Open
opened 2025-03-20 15:01:50 +00:00 by sashaastiadi · 6 comments
sashaastiadi commented 2025-03-20 15:01:50 +00:00
Owner
Copy Link

tfgrid/circle_product_management#188

we wanna go back to using zola / shortcodes + markdown to make website instead of react or astro etc, because its easy to do for everyone but i want to make sure its fully responsive, and the layout is done well.

build shortcodes component library - using tailwind compatibility
check : https://tailwindui.com/components

steps:

  • @ehab / @timur teach sasha how to configure shortcodes + markdown

  • a zola shortcode + markdown tutorial / guide would be nice to have cc: @mik-tf so i myself can create new components / edit the shortcodes configurations.

  • make zola shortcode component template the same way as https://tailwindui.com/components so people can just copy paste the shortcodes when they create new website

https://git.ourworld.tf/tfgrid/circle_product_management/issues/188 we wanna go back to using zola / shortcodes + markdown to make website instead of react or astro etc, because its easy to do for everyone but i want to make sure its fully responsive, and the layout is done well. build shortcodes component library - using tailwind compatibility check : https://tailwindui.com/components steps: - [ ] @ehab / @timur teach sasha how to configure shortcodes + markdown - [ ] a zola shortcode + markdown tutorial / guide would be nice to have cc: @mik-tf so i myself can create new components / edit the shortcodes configurations. - [ ] make zola shortcode component template the same way as https://tailwindui.com/components so people can just copy paste the shortcodes when they create new website
sashaastiadi added this to the OW Website & Wiki Project 2025 project 2025-03-20 15:37:45 +00:00
sashaastiadi self-assigned this 2025-03-20 16:36:04 +00:00
ehab was assigned by sashaastiadi 2025-03-20 16:36:07 +00:00
sashaastiadi changed title from zola upgrade: build shortcodes component library - using tailwind compatibility to zola upgrade/TEMPLATE: build shortcodes component library - using tailwind compatibility 2025-03-20 16:36:23 +00:00
sashaastiadi commented 2025-03-20 16:46:15 +00:00
Author
Owner
Copy Link

OurWorld Web Template: Component-Based Zola with TailwindCSS

📌 Overview

The OurWorld Web team is developing a Zola-based static site template with a component-driven approach and TailwindCSS for styling.

Instead of writing full-page Markdown (index.md), marketing teams can call prebuilt HTML components inside Markdown files, allowing for modular, reusable, and scalable page creation.

🎯 User Stories

Marketing Team

As a content editor or marketing team member,
I want to use prebuilt components in Markdown,
So that I can create and update web pages easily without writing complex code.

Front-End Developer

As a developer,
I want a structured Zola template with TailwindCSS and modular components,
So that I can efficiently build and maintain a scalable, consistent, and performant website.

✅ Core Features

  • Component-based structure using Zola shortcodes.
  • Markdown-driven approach, where marketing teams use simple component calls.
  • TailwindCSS integration for styling components efficiently.
  • Automated build system using build.sh and start.sh.
  • SEO optimizations (meta tags, OpenGraph, sitemaps).
  • Multilingual support (if required).

🏗 Technical Implementation

📂 Shortcodes System

Instead of writing long Markdown pages, marketing teams can use prebuilt components:

Shortcodes Folder (shortcodes/)

<!-- hero1.html -->
<div class="hero1 bg-blue-500 text-white p-8">
    <h3 class="text-xl font-bold">{{ title }}</h3>
    <p class="mt-2">{{ content | safe }}</p>
</div>


<!-- hero2.html -->
<div class="hero2 bg-gray-100 p-8 border border-gray-300 rounded-lg">
    <h2 class="text-2xl font-semibold">{{ title }}</h2>
    <p class="mt-2">{{ content | safe }}</p>
</div>

Content Folder (content/)

Instead of writing full-page layouts, marketing teams can reference components like this:


{{ hero1(title="Welcome to OurWorld", content="This is a beautifully formatted section.") }}

{{ hero2(title="Another Section", content="More structured and reusable content.") }}

TailwindCSS Integration

📂 CSS & Static Assets (static/css/)

TailwindCSS setup for utility-based styling.
tailwind.config.js → Configuration for customizing Tailwind styles.
output.css → Compiled Tailwind styles.
global.css → Additional global styles if needed.
📂 Tailwind Workflow

Tailwind scans shortcodes/ and content/ for used classes to generate a minimal CSS file.
build.sh ensures Tailwind compiles styles before building the site.

⚡ Automation Scripts

📂 Scripts Folder (scripts/)

  • build.sh → Installs dependencies (Zola, Tailwind), builds the project.
  • start.sh → Reads output.css and serves the site locally.

📦 Expected Deliverables

✅ A working Zola template with TailwindCSS and component-based rendering.
✅ A structured shortcodes/ folder with modular, reusable HTML blocks.
✅ A marketing-friendly Markdown structure where content editors simply call components.
✅ A TailwindCSS setup with prebuilt styles for shortcodes.
✅ A fully automated build system (build.sh + start.sh).
✅ Documentation on how to use and modify the components.
✅ Demo deployment for review & testing.

# OurWorld Web Template: Component-Based Zola with TailwindCSS ## 📌 Overview The **OurWorld Web** team is developing a **Zola-based static site template** with a **component-driven approach** and **TailwindCSS** for styling. Instead of writing full-page Markdown (`index.md`), marketing teams can call **prebuilt HTML components** inside Markdown files, allowing for **modular, reusable, and scalable** page creation. --- ## 🎯 User Stories ### **Marketing Team** **As a** content editor or marketing team member, **I want** to use prebuilt components in Markdown, **So that** I can create and update web pages easily without writing complex code. ### **Front-End Developer** **As a** developer, **I want** a structured Zola template with TailwindCSS and modular components, **So that** I can efficiently build and maintain a scalable, consistent, and performant website. --- ## ✅ Core Features - **Component-based structure** using Zola shortcodes. - **Markdown-driven approach**, where marketing teams use simple component calls. - **TailwindCSS integration** for styling components efficiently. - **Automated build system** using `build.sh` and `start.sh`. - **SEO optimizations** (meta tags, OpenGraph, sitemaps). - **Multilingual support** (if required). --- ## 🏗 Technical Implementation ### 📂 **Shortcodes System** Instead of writing long Markdown pages, marketing teams can use **prebuilt components**: #### **Shortcodes Folder (`shortcodes/`)** ```html <!-- hero1.html --> <div class="hero1 bg-blue-500 text-white p-8"> <h3 class="text-xl font-bold">{{ title }}</h3> <p class="mt-2">{{ content | safe }}</p> </div> <!-- hero2.html --> <div class="hero2 bg-gray-100 p-8 border border-gray-300 rounded-lg"> <h2 class="text-2xl font-semibold">{{ title }}</h2> <p class="mt-2">{{ content | safe }}</p> </div> ``` ### Content Folder (content/) Instead of writing full-page layouts, marketing teams can reference components like this: ``` {{ hero1(title="Welcome to OurWorld", content="This is a beautifully formatted section.") }} {{ hero2(title="Another Section", content="More structured and reusable content.") }} ``` ### TailwindCSS Integration 📂 CSS & Static Assets (static/css/) TailwindCSS setup for utility-based styling. tailwind.config.js → Configuration for customizing Tailwind styles. output.css → Compiled Tailwind styles. global.css → Additional global styles if needed. 📂 Tailwind Workflow Tailwind scans shortcodes/ and content/ for used classes to generate a minimal CSS file. build.sh ensures Tailwind compiles styles before building the site. ### ⚡ Automation Scripts 📂 Scripts Folder (scripts/) - build.sh → Installs dependencies (Zola, Tailwind), builds the project. - start.sh → Reads output.css and serves the site locally. ---- ## 📦 Expected Deliverables ✅ A working Zola template with TailwindCSS and component-based rendering. ✅ A structured shortcodes/ folder with modular, reusable HTML blocks. ✅ A marketing-friendly Markdown structure where content editors simply call components. ✅ A TailwindCSS setup with prebuilt styles for shortcodes. ✅ A fully automated build system (build.sh + start.sh). ✅ Documentation on how to use and modify the components. ✅ Demo deployment for review & testing.
sashaastiadi commented 2025-03-21 16:01:41 +00:00
Author
Owner
Copy Link

looking good

looking good
2025-03-21 17.01.31.jpg
43 KiB
2025-03-21 17.01.31.jpg
ehab commented 2025-03-23 19:54:55 +00:00
Owner
Copy Link

Work done for now

  • Create zola
  • Add some components shortcodes markdown
  • Add dark and light mode
  • Add Blog
Work done for now - [x] Create zola - [x] Add some components shortcodes markdown - [x] Add dark and light mode - [x] Add Blog
mik-tf commented 2025-04-10 22:14:50 +00:00
Owner
Copy Link

Any update on this? @sashaastiadi Lmk if there's something to be done now. Thanks.

Any update on this? @sashaastiadi Lmk if there's something to be done now. Thanks.
ehab commented 2025-04-11 11:25:25 +00:00
Owner
Copy Link

@mik-tf @sashaastiadi This is related to this issue tfgrid/circle_product_management#188
Zola template repo https://git.ourworld.tf/ourworld_web/www_zola_template

@mik-tf @sashaastiadi This is related to this issue https://git.ourworld.tf/tfgrid/circle_product_management/issues/188 Zola template repo https://git.ourworld.tf/ourworld_web/www_zola_template
🚀 1
mik-tf commented 2025-04-12 12:43:51 +00:00
Owner
Copy Link

OK thanks for the info. The project looks well on its way.

Can you then update the story: tfgrid/circle_product_management#188 with all the specs so far, and mention if a spec is blocking?

It'll help to keep track of progress and deliverables.

Thanks!

OK thanks for the info. The project looks well on its way. Can you then update the story: https://git.ourworld.tf/tfgrid/circle_product_management/issues/188 with all the specs so far, and mention if a spec is blocking? It'll help to keep track of progress and deliverables. Thanks!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
  
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
question

More information is needed

No Label
bug
duplicate
enhancement
question
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
OW Website & Wiki Project 2025
Assignees
Clear assignees
No Assignees
sashaastiadi
ehab
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: ourworld_web/HOME#27
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?