Skip to content

Commit 081bf5f

Browse files
aalhouraalhour
authored
Revamp with Jekyll (#1)
1 parent 3cddc48 commit 081bf5f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+4832
-290
lines changed

‎.cursorrules‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Digital Bazaar Community — Agent Rules
2+
3+
> Bilingual Arabic/English Jekyll site for WhatsApp community
4+
> Aesthetic: High-end magazine, Middle Eastern-inspired palette
5+
6+
---
7+
8+
## 🧠 AGENT MINDSET
9+
10+
### 1. Research First, Code Second
11+
12+
Before writing ANY custom code, search in this order:
13+
1. Jekyll built-in features and plugins
14+
2. Tailwind CSS utilities and plugins
15+
3. Bootstrap components (especially RTL)
16+
4. Community solutions (GitHub, Stack Overflow)
17+
5. Only then: custom implementation
18+
19+
### 2. Bilingual UX Thinking
20+
21+
Every feature must work in BOTH languages:
22+
- Arabic: RTL, larger line-height (1.8+), right-aligned
23+
- English: LTR, standard line-height, left-aligned
24+
- Test both `/ar/` and `/en/` before considering anything complete
25+
26+
### 3. Magazine, Not Blog
27+
28+
**This is a high-end digital magazine, not a basic blog.**
29+
30+
Design every page like a premium publication spread:
31+
- Editorial layouts with intentional white space
32+
- Images that command attention (floats, bleeds, overlays)
33+
- Typography as art (pull quotes, drop caps, hierarchy)
34+
- Refined details (shadows, borders, spacing)
35+
36+
---
37+
38+
## 🎨 COLOR PALETTE
39+
40+
```
41+
--sand: #F4E6C4 Background, warm neutral
42+
--saffron: #E2B714 Accent, highlights
43+
--terracotta: #B34E36 Primary CTA, warmth
44+
--marigold: #D9912A Secondary accent, energy
45+
--teal: #2F8F9D Links, cool contrast
46+
--night: #152029 Headings, strong text
47+
--ink: #21313B Body text
48+
--white: #FFFFFF Cards, buttons
49+
```
50+
51+
**Never introduce colors outside this palette.**
52+
53+
---
54+
55+
## 📁 FILE STRUCTURE
56+
57+
```
58+
├── _config.yml
59+
├── _data/rules_{ar,en}.yml
60+
├── _includes/{header,footer,language-toggle,article-card}.html
61+
├── _layouts/{default,home,article}.html
62+
├── _posts/YYYY-MM-DD-title.md
63+
├── _docs/ ← Design system reference
64+
│ ├── design-system.md
65+
│ ├── image-layouts.md
66+
│ └── article-templates.md
67+
├── assets/css/styles.css
68+
├── ar/index.html
69+
├── en/index.html
70+
└── index.html ← Redirects to /ar/
71+
```
72+
73+
---
74+
75+
## 📝 ARTICLE FRONT MATTER
76+
77+
```yaml
78+
---
79+
layout: article
80+
title: "عنوان المقال"
81+
author: "اسم الكاتب"
82+
date: 2025-01-15
83+
lang: ar # 'ar' or 'en'
84+
excerpt: "ملخص قصير"
85+
---
86+
```
87+
88+
---
89+
90+
## ✅ ALWAYS
91+
92+
1. Search for existing solutions before custom code
93+
2. Run `bundle exec jekyll serve --trace` and watch logs
94+
3. Test BOTH `/ar/` and `/en/` pages in browser
95+
4. Use CSS logical properties (`margin-inline-start`, not `margin-left`)
96+
5. Keep text in `_data/` files, never hardcode
97+
6. Use only palette colors
98+
7. Design like a magazine — floats, bleeds, pull quotes, drop caps
99+
8. Check browser DevTools console for errors
100+
9. Test mobile responsiveness
101+
10. Verify language toggle works
102+
103+
---
104+
105+
## 🚫 NEVER
106+
107+
1. Write custom code before checking existing solutions
108+
2. Hardcode text in templates
109+
3. Use physical properties (`left/right`) — use logical (`start/end`)
110+
4. Design boring layouts — no walls of text
111+
5. Use default/unstyled code blocks
112+
6. Skip manual browser testing
113+
7. Ignore Jekyll build warnings
114+
8. Introduce colors outside the palette
115+
9. Merge without testing both languages
116+
10. Create cramped layouts — white space is design
117+
118+
---
119+
120+
## ✅ VERIFICATION (After Every Change)
121+
122+
```bash
123+
# 1. Watch logs
124+
bundle exec jekyll serve --livereload --trace
125+
126+
# 2. Test both languages
127+
open http://localhost:4000/ar/
128+
open http://localhost:4000/en/
129+
130+
# 3. Check:
131+
# - Page loads without errors
132+
# - Text direction correct (RTL/LTR)
133+
# - Language toggle works
134+
# - Mobile layout (resize window)
135+
# - DevTools console (F12) — no errors
136+
```
137+
138+
---
139+
140+
## 📚 DESIGN REFERENCES
141+
142+
When implementing specific features, read these files:
143+
144+
| Need | Reference |
145+
|------|-----------|
146+
| Image layouts (floats, bleeds, overlays) | `_docs/image-layouts.md` |
147+
| Typography (pull quotes, drop caps) | `_docs/design-system.md` |
148+
| Article page structure | `_docs/article-templates.md` |
149+
| Code block styling | `_docs/design-system.md` |
150+
151+
---
152+
153+
## 🔗 EXTERNAL RESOURCES
154+
155+
- Jekyll Docs: https://jekyllrb.com/docs/
156+
- Tailwind RTL: https://github.com/20lives/tailwindcss-rtl
157+
- CSS Logical Properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
158+
- Arabic Fonts: https://fonts.google.com/?subset=arabic
159+

‎.github/workflows/jekyll.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# GitHub Actions workflow for building and deploying Jekyll site to GitHub Pages
2+
name: Deploy Jekyll site to Pages
3+
4+
on:
5+
# Runs on pushes targeting the default branch
6+
push:
7+
branches: ["main"]
8+
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20+
concurrency:
21+
group: "pages"
22+
cancel-in-progress: false
23+
24+
jobs:
25+
# Build job
26+
build:
27+
runs-on: ubuntu-latest
28+
steps:
29+
- name: Checkout
30+
uses: actions/checkout@v4
31+
32+
- name: Setup Ruby
33+
uses: ruby/setup-ruby@v1
34+
with:
35+
ruby-version: '3.3'
36+
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
37+
38+
- name: Setup Pages
39+
id: pages
40+
uses: actions/configure-pages@v4
41+
42+
- name: Build with Jekyll
43+
run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
44+
env:
45+
JEKYLL_ENV: production
46+
47+
- name: Upload artifact
48+
uses: actions/upload-pages-artifact@v3
49+
50+
# Deployment job
51+
deploy:
52+
environment:
53+
name: github-pages
54+
url: ${{ steps.deployment.outputs.page_url }}
55+
runs-on: ubuntu-latest
56+
needs: build
57+
steps:
58+
- name: Deploy to GitHub Pages
59+
id: deployment
60+
uses: actions/deploy-pages@v4
61+

‎Gemfile‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Digital Bazaar — Gemfile
2+
# Simplified for compatibility
3+
4+
source "https://rubygems.org"
5+
6+
# Core Jekyll
7+
gem "jekyll", "~> 4.3"
8+
9+
# Plugins
10+
group :jekyll_plugins do
11+
gem "jekyll-seo-tag", "~> 2.8"
12+
gem "jekyll-sitemap", "~> 1.4"
13+
gem "jekyll-feed", "~> 0.17"
14+
end
15+
16+
# Dependencies
17+
gem "kramdown-parser-gfm", "~> 1.1"
18+
gem "webrick", "~> 1.8"
19+
gem "logger", "~> 1.6"
20+
gem "csv", "~> 3.3"
21+
gem "base64", "~> 0.2"

0 commit comments

Comments
 (0)