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

New Issue

sashaastiadi · 2025-03-20T15:01:50Z

sashaastiadi commented

2025-03-20 15:01:50 +00:00

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: - [x] @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. - [x] 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 referenced this issue from ourworld_web/circle_web_presence

2025-03-20 15:42:16 +00:00

zola upgrade: build shortcodes component library - using tailwind compatibility #56

sashaastiadi referenced this issue from ourworld_web/circle_web_presence

2025-03-20 15:44:51 +00:00

zola upgrade: build shortcodes component library - using tailwind compatibility #56

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

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  <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>  <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

looking good

2025-03-21 17.01.31.jpg

43 KiB

ehab commented

2025-03-23 19:54:55 +00:00

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

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

@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

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!

ehab commented

2025-08-06 14:31:10 +00:00

Working in progress
Adding more components to the template

Working in progress Adding more components to the template

ehab commented

2025-08-10 14:31:30 +00:00

Working in progress
All components support dark and light modes

What needs to be done

Adjust the icon for dark and light
fix header.md
update main branch

Working in progress All components support dark and light modes What needs to be done - Adjust the icon for dark and light - fix header.md - update main branch

ehab commented

2025-08-11 09:05:31 +00:00

Done
https://zola-template.staging.grid.tf/
Repo
https://git.ourworld.tf/ourworld_web/www_zola_template/src/branch/main

Done https://zola-template.staging.grid.tf/ Repo https://git.ourworld.tf/ourworld_web/www_zola_template/src/branch/main

Sign in to join this conversation.

3 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ourworld_web/HOME#27

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

OurWorld Web Template: Component-Based Zola with TailwindCSS

📌 Overview

🎯 User Stories

Marketing Team

Front-End Developer

✅ Core Features

🏗 Technical Implementation

📂 Shortcodes System

Shortcodes Folder (shortcodes/)

Content Folder (content/)

TailwindCSS Integration

⚡ Automation Scripts

📦 Expected Deliverables

Shortcodes Folder (`shortcodes/`)