Kurd Web
وێبسایتی ڕاست‑بۆ‑چەپی کوردی (سۆرانی یان بادینی) هەنگاو بە هەنگاو دروست بکە و بە یەک کرتە وەک index.html بینووسە ناو پڕۆژەکەت.
Build a complete RTL Kurdish website (Sorani or Badini) step by step and write it to index.html with one click.
Publisher: arkanit · Package: kurd-web
Features
- Guided wizard: Header → Menu → Hero slider → Content → Footer → Review. Jump to any step at any time.
- Live full-page preview: hover or click any section in the preview to jump straight to the step that changes it.
- Dialect switch: Sorani (سۆرانی) / Badini (بادینی) – changes all generated copy and the previews instantly.
- 20 styles: 4 headers, 3 menus, 6 heroes (3 are auto-playing sliders), 4 content sections (incl. pricing), 3 footers.
- Accent colors (Teal, Violet, Rose, Amber, Sky) and Dark / Light page theme.
- Font picker (Settings): 14 Arabic-script Google Fonts, each previewed with the Kurdish letters ڕ ۆ ێ ە ڵ. The choice applies to the previews and to the generated
index.html (--font-kurd CSS variable).
- Output: HTML5,
lang="ku" dir="rtl", your chosen Google font, Tailwind CDN, accessible mobile menu and slider (reduced-motion aware).
- Sidebar view and full editor panel (
Kurd Web: Open Kurd Web Builder).
- Writes
index.html in the workspace root; asks before replacing and can keep a timestamped backup.
Build & run
npm install
npm run build # tsc → i18n check → Tailwind CSS (media/webview.css)
Press F5 ("Run Extension") and click the Kurd Web icon in the activity bar.
Package & install
npm run package # → kurd-web-1.0.0.vsix
code --install-extension kurd-web-1.0.0.vsix
npx vsce publish # publisher "arkanit" (needs a Marketplace PAT)
Editing the Kurdish text (Sorani / Badini)
All generated copy lives in two dictionaries with identical keys:
src/i18n/sorani.ts
src/i18n/badini.ts
Templates reference text as [[key]]. Edit the values freely (the Badini set especially deserves a review by a
native speaker), then run npm run build – it fails if a key is missing in either dictionary.
Adding a style
- New font? Add an entry to
src/templates/fonts.ts (use only weights the family really offers).
- Add an object to the matching file in
src/templates/ (id, category, name, description, html).
- Use the tokens
bg-base, bg-surface, text-ink, text-muted, border-line, accent-400/500/600,
placeholders {{TITLE}}, {{INITIAL}}, {{YEAR}} and dictionary tokens [[key]].
- Use logical utilities (
ms-*, me-*, ps-*, pe-*, text-start) so layouts stay RTL-correct.
- Sliders: reuse the
data-slider / data-slide / data-dot / data-prev / data-next attributes (see src/templates/heroes.ts).
Project layout
package.json manifest, commands, views, settings, scripts
tailwind.config.js Tailwind build for the builder UI (shares tokens with the generator)
scripts/check-i18n.js verifies every [[token]] exists in both dialects
src/extension.ts activation, commands, sidebar view
src/state.ts selection/options model + sanitising of webview input
src/generator.ts assembles the final HTML5 document (+ menu & slider script)
src/fileWriter.ts workspace detection, overwrite prompt, backup, write
src/generateCommand.ts generate / copy actions + notifications
src/i18n/* Sorani + Badini dictionaries
src/panel/webview.ts builder HTML shell (CSP + nonce) and message handling
src/panel/builderPanel.ts editor-tab panel src/panel/sidebarProvider.ts activity-bar view
src/templates/* theme tokens + every Header / Menu / Hero / Content / Footer
media/builder.js webview client (wizard, previews, overlays, actions)
Notes
- The generated page loads Tailwind (CDN) and the chosen font (Google Fonts), so it needs internet when first opened.
The builder UI itself works offline.
- Both dialects are written in Arabic script so the same RTL layout and font are used;
lang="ku" is set for both.
- Anchors:
#home (hero), #features (content), #contact (footer).
| |
