JamSite 🚀

Modern, fast, and modular Jamstack-based website template. Kickstart your project in seconds with the power of Astro 6, Svelte 5, and Tailwind CSS 4.

English Documentation | Türkçe Dokümantasyon

---

✨ Showcase

🌓 Dark & Light Theme

Eye-friendly and modern design with smooth one-click transitions.

Light Mode	Dark Mode

Experience: Theme Transition Animation

🧱 Modular UI Blocks

Professional and varied components inspired by Tailwind Plus, managed entirely via Markdown.

Recording: Block Showcase Scroll

🔍 Smart Search & Interactivity

Build-time indexed, Fuse.js based, super fast Cmd+K search experience.

---

Multi-lingual static site template built with Astro 6, Svelte 5, and Tailwind CSS 4. Includes Blog (tags/categories), product catalog, in-site search (Cmd+K), dark/light theme, dynamic slider, and PWA support.

Created by: Bahadır Doğru

Content and SEO are generated by Astro; interactive components are written in Svelte and hydrated on relevant pages. Build output (docs/) can be deployed to any static hosting (including GitHub Pages).

Features

• Blog — Posts with Content Collections, tags/categories, language-based lists, reading time, social sharing
• Product Catalog — SKU-based YAML data, multi-lingual support, favorites, comparison
• Site Search — Cmd+K / Ctrl+K powered by Fuse.js, build-time index
• Dark / Light Mode — FOUC-prevented theme, OS preference, and localStorage
• Dynamic Slider — Language-based data, hero/image slide types, autoplay
• Multi-lingual (i18n) — TR /tr/, EN /en/ prefix; hreflang and language switcher
• SEO — Meta tags, Open Graph, Twitter Cards, sitemap, RSS
• Interactive Components — Favorites, reading list, quick preview, comparison, keyboard shortcuts
• Animation — Motion + Astro View Transitions
• PWA — Service Worker (vite-plugin-pwa), manifest
• Progressive Enhancement — Content readable without JS

Requirements

• Node.js (v22+)
• Git

Installation

git clone https://github.com/<user>/JamSite.git
cd JamSite
npm install

Development

npm run dev

Astro dev server starts (default http://localhost:4321). Hot reload is enabled.

Build

npm run build

Sequence:

1. src/lib/search-index.js — generates search index as public/search-index.json
2. astro build — builds the site into docs/

Preview

npm run preview

Tests the docs/ output on a local server.

Deploy

npm run build

Then upload the docs/ folder to your hosting (for GitHub Pages, you can push the docs content to the repo or gh-pages branch; Actions for automatic build can also be used).

Project Structure

src/
  config/             site.js — single config (site, features, i18n; Jekyll _config style)
  components/         Svelte components
  content/
    posts/           Blog posts (.md)
    pages/           About, Getting Started guide (.md, tr/en)
    products/        Products (.md frontmatter)
    slides/          Slider slides (.md, lang + order)
  data/              products.js, slides.js (reads from content)
  i18n/              tr.js, en.js, index.js (UI translations)
  layouts/           BaseLayout.astro
  lib/               search-index.js (build-time search index)
  pages/             Astro pages ([lang] prefix structure)
  styles/            global.css (Tailwind, @theme)

Site Configuration

All site settings are managed from the src/config/site.js file (like _config.yml in Jekyll):

• site: title, description, url, baseUrl — for sitemap, canonical, and RSS.
• features: Blog, products, search, PWA, RSS, dark mode, sitemap, tags, categories, features page, and getting started guide can be toggled on/off (true/false). Disabled features won't appear in the menu and related pages will return 404.
• i18n: languages, defaultLang — just add a code to the languages array to add a new language.

Build, layout, feed, and search index use this file as the single source of truth.

Technology

• SSG: Astro 6
• UI: Svelte 5 (client:visible / client:load)
• Style: Tailwind CSS 4 (CSS-first)
• Icons: Phosphor Icons (Svelte)
• Animation: Motion + Astro View Transitions
• Search: Fuse.js + build-time JSON index
• SEO: Astro meta + @astrojs/sitemap
• RSS: @astrojs/rss (feed.xml.js)
• PWA: vite-plugin-pwa

Adding a New Language

1. Add the new language code (e.g., "de") to the languages array in src/config/site.js.
2. New language is automatically supported thanks to the src/pages/[lang]/ dynamic structure (add new custom pages if needed).
3. Add src/i18n/{lang}.js and include it in src/i18n/index.js.
4. Optional: Add new language slide .md files under src/content/slides/ (e.g., de-01.md, lang: de).
5. Add the corresponding language block to product .md frontmatter (e.g., de: title, description, slug).

Adding a New Product

1. Create src/content/products/{sku}.md (frontmatter with common fields + tr/en blocks).
2. npm run build — product pages are auto-generated via getStaticPaths.
3. Search index and tag/category lists are updated during build.

Search

While on any page, press Cmd+K (macOS) or Ctrl+K (Windows/Linux) to open the search modal. Results are filtered by current page language; type tags (post, product, page) are displayed.

License

MIT