Merge pull request #10 from ak0r/preview

Preview

Author: ak0r

README.md

@@ -1,47 +1,116 @@
-# Astro Starter Kit: Minimal
+# 🌟 Astro Flexoki
 
-```sh
-npm create astro@latest -- --template minimal
-```
+A minimalist, fast, and elegant blog theme built with [Astro](https://astro.build), [Tailwind CSS](https://tailwindcss.com), and the warm, beautiful [Flexoki](https://stephango.com/flexoki) color palette.
+
+> ✨ Ideal for developers, writers, and creators who value simplicity, performance, and timeless design.
+
+![Astro Flexoki Preview](./public/og-theme-preview.jpg)
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+---
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## 🚀 Features
 
-## 🚀 Project Structure
+- ⚡ **Blazing fast** with Astro’s static site generation
+- 🎨 **Custom theming** using Flexoki’s harmonious color tokens
+- 🌗 **Light/Dark mode** toggle with `data-theme`
+- 🧠 **SEO optimized** with dynamic `<meta>` tags and OG support
+- ✍️ **Markdown-powered** posts, notes*, and pages
+- 📱 Fully **responsive** and mobile-first
+- 🔗 Configurable **navigation, social, and footer links**
+- 📦 No heavy dependencies — just Astro and Tailwind CSS
+- 🖼️ Ready for dynamic **OG image generation** via Astro API (in progress)
 
-Inside of your Astro project, you'll see the following folders and files:
+---
 
-```text
-/
-├── public/
+## 🗂️ Folder Structure
+
+```bash
+astro-flexoki/
 ├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
+│   ├── components/       # Reusable UI components (Header, Footer, etc.)
+│   ├── content/          # Markdown content for blog, notes, etc.
+│   ├── layouts/          # Layouts used by pages
+│   ├── pages/            # Routes like /, /about, /articles
+│   ├── styles/           # Tailwind and theme styles
+├── public/               # Static assets
+├── site.config.ts        # Global site configuration
+├── tailwind.config.ts    # Tailwind CSS configuration
+```
+
+---
+
+## 🛠️ Getting Started
+
+```bash
+# Clone the repo
+git clone https://github.com/ak0r/astro-flexoki.git
+cd astro-flexoki
+
+# Install dependencies
+npm install
+
+# Start the dev server
+npm run dev
+```
+
+Then visit `http://localhost:4321` in your browser.
+
+---
+
+## ⚙️ Configuration
+
+All your site settings live in `site.config.ts`:
+
+```ts
+export const siteConfig = {
+  title: 'Astro Flexoki',
+  description: 'A Astro starter template built with TailwindCSS and Flexoki colour pallette',
+  author: 'John Doe',
+  url: 'https://example.com',
+  settings: {
+    accentColor: 'orange',
+    postsPerPage: 6,
+    enableDarkMode: true,
+    showNewsletterSignup: true,
+  },
+};
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+---
+
+## 📸 Screenshots
+
+| Light Theme | Dark Theme |
+|-------------|------------|
+| ![](./public/screens/light-home.png) | ![](./public/screens/dark-home.png) |
+
+---
+
+## 🔮 Roadmap
+
+- [ ] Update MDX contents
+- [ ] Add full-text search
+- [ ] Add Projects / Notes content collections
+- [ ] OG-image generation
+- [ ] CMS integration (Tina, Notion, Contentlayer)
+- [ ] RSS feed and sitemap
+
+---
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+## 🙌 Credits
 
-Any static assets, like images, can be placed in the `public/` directory.
+- [Astro](https://astro.build) — the static site builder
+- [Tailwind CSS](https://tailwindcss.com) — utility-first CSS
+- [Steph Ango](https://stephango.com/flexoki) — the color palette
+- [Astro Pure](https://github.com/cworld1/astro-theme-pure) — References
 
-## 🧞 Commands
+---
 
-All commands are run from the root of the project, from a terminal:
+## 📄 License
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+MIT © [Amit K](https://github.com/ak0r)  
+Free to use, modify, and share.
 
-## 👀 Want to learn more?
+---
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+> Made with 💛 using Astro, Tailwind, and Flexoki.

src/components/blog/SinglePost.astro

@@ -4,7 +4,6 @@ import PageLayout from '@/layouts/PageLayout.astro';
 import { getFormattedDate } from '@/utils/commonFunctions';
 import type { CollectionEntry } from 'astro:content';
 import Container from '@/components/layout/Container.astro';
-import RenderMarkdown from './RenderMarkdown.astro';
 import Badge from '@/components//ui/Badge.astro';
 import CustomImage from '@/components/ui/CustomImage.astro';
 import BackButton from '@/components/widgets/BackButton.astro';
@@ -26,7 +25,11 @@ const coverImageAlt = frontmatter.coverImageAlt || title
 const pubDate = frontmatter.publishedDate.toISOString()
 const isDraft = frontmatter.isDraft
 ---
-<PageLayout>
+<PageLayout
+  title={title}
+  description={description}
+  image={coverImage?.src || '/og-default.jpg'}
+>
   <Container outerClass="max-w-5xl">
     <!-- Back button -->
     <BackButton

src/components/layout/Footer.astro

@@ -1,15 +1,23 @@
 ---
 import Container from "./Container.astro";
+import Link from '@/components/ui/Link.astro';
+import { siteConfig } from "@/site.config";
+const { footerLinks, settings } = siteConfig;
 ---
 
 <footer class="w-full border-t border-ui-primary ">
   <Container outerClass="flex max-w-4xl px-6 py-2 mx-auto w-full">
     <div class="flex justify-between gap-3 py-8 w-full">
-      <div class="flex gap-3 text-content-muted">
-        <a href="/">Privacy Policy</a>
-        <a href="/">Terms of Service</a>
+      <div class="flex gap-3 text-content-muted text-sm">
+        {
+          footerLinks.map((link) => (
+            <Link href={link.href}>
+              {link.title}
+            </Link>
+          ))
+        }
       </div>
-      <div class="flex text-sm text-content-muted">© 2025 Umami. All rights reserved.</div>
+      <div class="flex text-sm text-content-muted">{siteConfig.settings?.copyright}</div>
     </div>
   </Container>
 </footer>

src/components/layout/Header.astro

@@ -3,36 +3,49 @@ import ThemeSwitch from "@/components/widgets/ThemeSwitch.astro";
 import Container from '@/components/layout/Container.astro';
 import Link from '@/components/ui/Link.astro';
 import Button from "@/components/ui/Button.astro"
+import { siteConfig } from "@/site.config";
+const { siteLogo, nav, settings } = siteConfig;
+const currentPath = Astro.url.pathname;
 ---
 
 <header class="fixed top-0 w-full h-[76px] border-b border-ui-primary z-50 backdrop-blur-lg">
 
   <!-- Mobile menu -->
   <div id="navMenu" class="fixed bg-base-primary shadow-sm h-full w-full text-xl sm:w-1/2 sm:text-2xl transform transition-transform duration-300 -translate-x-full z-50">
     <div class="flex flex-col min-h-screen w-full bg-base-primary">
-      <div class="">
+      <div class="items-center justify-center">
         <!-- Logo -->
         <div class="flex items-center justify-between font-medium px-6 py-2 h-[76px] border-b border-ui-primary">
           <a class="flex items-center gap-2" href="/">
-            <h3 class="font-bold">Umami</h2>  
+            <h3 class="font-bold">{siteConfig.title}</h2>  
           </a>
-          <div id="closeBtn" class="">
+          <div id="closeBtn" class="text-content-primary hover:cursor-pointer">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" class="size-6">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>                  
           </div>
         </div>
         <!-- Links -->
         <div class="flex flex-col gap-3 px-2 py-8">
-          <Link href="/articles" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/articles' ? 'page' : undefined}>Articles</Link>
-          <Link href="/tags" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/tags' ? 'page' : undefined}>Tags</Link>
-          <Link href="/about" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/about' ? 'page' : undefined}>About</Link>
-          
-          <!-- Subscribe button -->
-          <Button href="/" variant="primary" class="px-4">
-            Subscribe Now
-          </Button>
+        {
+          nav.map((item) => (
+            <Link 
+              href={item.href} 
+              class={`px-4 py-2 text-sm ${
+                currentPath === item.href
+                  ? `text-${settings?.accentColor} font-semibold`
+                  : 'text-content-primary' }`
+              } 
+              aria-current={Astro.url.pathname === item.href ? 'page' : undefined}>{item.title}</Link>
+          ))
+        }
         </div>
+        <!-- Subscribe button -->
+          {settings?.showNewsletterSignup && (
+            <Button href="/" variant="primary" class="px-4">
+              Subscribe Now
+            </Button>
+          )}
       </div>
     </div>
   </div>
@@ -42,26 +55,31 @@ import Button from "@/components/ui/Button.astro"
     <nav class="flex h-full w-full">
       <!-- Logo -->
       <a class="flex items-center gap-2" href="/">
-        <h3 class="font-bold">Umami</h2>
+        <h3 class="font-bold">{siteConfig.title}</h3>
       </a>
-
+      
+      
       <!-- Centered Links (only visible on sm and up) -->
       <div class="hidden sm:flex flex-1 justify-center items-center gap-4 text-base">
-        <Link href="/articles" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/articles' ? 'page' : undefined}>Articles</Link>
-        <Link href="/tags" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/tags' ? 'page' : undefined}>Tags</Link>
-        <Link href="/about" class="px-4 py-2 text-content-primary" aria-current={Astro.url.pathname === '/about' ? 'page' : undefined}>About</Link>
+        {
+          nav.map((item) => (
+            <Link 
+              href={item.href} 
+              class={`px-4 py-2 text-sm ${
+                currentPath === item.href
+                  ? `text-${settings?.accentColor} font-semibold`
+                  : 'text-content-primary' }`
+              } 
+              aria-current={Astro.url.pathname === item.href ? 'page' : undefined}>{item.title}</Link>
+          ))
+        }
       </div>
 
       <!-- Right section -->
       <div class="flex items-center gap-3 ml-auto">
         <!-- Theme Switcher (always visible) -->
         <ThemeSwitch />
 
-        <!-- Subscribe button (only on sm and up) -->
-        <!-- <Button href="/" class="ml-4" style="pill">
-          Subscribe
-        </Button> -->
-
         <!-- Mobile nav button (only on small screens) -->
         <div id="navBtn" class="sm:hidden text-content-primary hover:cursor-pointer">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" class="size-6">

src/components/ui/Link.astro

@@ -1,4 +1,7 @@
 ---
+import { siteConfig } from "@/site.config";
+const { settings } = siteConfig;
+
 type Props = {
   href: string;
   external?: boolean;
@@ -7,7 +10,6 @@ type Props = {
   class?: string;
 };
 
-
 const {
   href,
   external,
@@ -17,6 +19,8 @@ const {
   ...rest
 } = Astro.props;
 
+const themeColor = settings?.accentColor || ''
+const hoverColorClass = `hover:text-${themeColor}`;
 ---
 
 <a
@@ -26,6 +30,7 @@ const {
   class:list={[
     "block",
     className,
+    hoverColorClass,
     group && "group",
   ]}
   {...rest}

src/components/widgets/ScrollToTop.astro

@@ -3,10 +3,10 @@
 
 <button
   id="scrollToTopButton"
-  class="fixed bottom-6 right-6 z-50 rounded-full bg-secondary-bg text-white size-12 flex items-center justify-center shadow-lg opacity-0 pointer-events-none transition-opacity duration-300 hover:opacity-100"
+  class="fixed bottom-6 right-6 z-50 rounded-full bg-base-muted text-content-primary size-12 flex items-center justify-center shadow-lg opacity-0 cursor-pointer pointer-events-none transition-opacity duration-300 hover:opacity-100"
   aria-label="Scroll to top"
 >
-  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
   </svg>
 </button>

src/components/widgets/SocialLinks.astro

@@ -0,0 +1,18 @@
+---
+import { Icon } from "astro-icon/components";
+import Link from '@/components/ui/Link.astro';
+import { siteConfig } from '@/site.config';
+const { socials } = siteConfig;
+---
+<div class="flex items-center gap-6">
+  {socials.map((link) => (
+    <Link
+      href={link.href}
+      class="text-content-muted hover:text-content-primary hover:scale-120 transition-transform"
+      rel="noopener noreferrer"
+      aria-label={`Follow on ${link.name}`}
+    >
+      <Icon name={link.icon} class="size-6" />
+    </Link>
+  ))}
+</div>

src/content/articles/elements.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Elements of the Umami Blog Theme"
+title: "Elements of the Astro Flexoki blog theme"
 description: "This page demonstrate some basic elements and typography which you will use frequently within your site."
 coverImage: "https://picsum.photos/900/600?random=1.webp"
 publishedDate: 2022-10-01