@rahuldshetty/inscribe 0.0.1

package/template/layouts/doc_index.njk

@@ -0,0 +1,140 @@
+{% extends "base.njk" %}
+
+{% block title %}{{ config.title }} — Blog{% endblock %}
+
+{% block content %}
+<div class="min-h-screen bg-[var(--color-bg)] w-full max-w-[1400px] mx-auto flex flex-col md:flex-row md:px-8">
+
+    {% if config.show_doc_nav !== false %}
+    {# Left Navigation Sidebar #}
+    <aside class="w-full md:w-64 flex-shrink-0 md:border-r border-[var(--color-border)] py-8 md:pr-8 px-6 md:px-0">
+        <nav class="sticky top-8 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-4rem)]">
+            {% macro renderNode(node, depth, currentDirPath) %}
+                {% if node.title %}
+                    <details class="group" {% if currentDirPath == node.path or currentDirPath.startsWith(node.path + '/') %}open{% endif %}>
+                        <summary class="flex items-center justify-between cursor-pointer list-none py-1.5 hover:bg-[var(--color-tag-bg)] rounded-md transition-all"
+                                 style="padding-left: {{ depth * 16 + 8 }}px">
+                            <span class="text-sm font-bold text-[var(--color-text)]">
+                                {{ node.title }}
+                            </span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-[var(--color-muted)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </summary>
+                        <div class="mt-0.5">
+                            {% for item in node.items %}
+                                {% if item.type == 'folder' %}
+                                    {{ renderNode(item.node, depth + 1, currentDirPath) }}
+                                {% else %}
+                                    <div class="rounded-md hover:bg-[var(--color-tag-bg)] transition-all">
+                                        <a href="/doc/{{ item.post.metadata.slug }}" 
+                                           style="padding-left: {{ (depth + 1) * 16 + 8 }}px"
+                                           class="text-sm py-1.5 block text-[var(--color-muted)] hover:text-[var(--color-text)] transition-colors">
+                                            {{ item.post.metadata.title }}
+                                        </a>
+                                    </div>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </details>
+                {% else %}
+                    {# Root node - just render items directly #}
+                    {% for item in node.items %}
+                        {% if item.type == 'folder' %}
+                            {{ renderNode(item.node, depth, currentDirPath) }}
+                        {% else %}
+                            <div class="rounded-md hover:bg-[var(--color-tag-bg)] transition-all">
+                                <a href="/doc/{{ item.post.metadata.slug }}" 
+                                   style="padding-left: {{ depth * 16 + 8 }}px"
+                                   class="text-sm py-1.5 block text-[var(--color-muted)] hover:text-[var(--color-text)] transition-colors">
+                                    {{ item.post.metadata.title }}
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
+            {% endmacro %}
+
+            {% for rootNode in sidebarTree %}
+                {{ renderNode(rootNode, 0, currentDirPath) }}
+            {% endfor %}
+        </nav>
+    </aside>
+    {% endif %}
+
+
+    {# Post List #}
+    <main class="flex-1 min-w-0 px-6 py-10 lg:px-12 {% if config.show_doc_nav === false %}max-w-2xl mx-auto{% else %}max-w-3xl{% endif %}">
+
+        {% if docs and docs.length %}
+        <p class="text-xs font-semibold uppercase tracking-widest text-[var(--color-muted)] mb-6">
+            {{ docs.length }} doc{% if docs.length !== 1 %}s{% endif %}
+        </p>
+
+        <ul class="divide-y divide-[var(--color-border)]">
+            {% for item in docs %}
+            <li>
+                <a href="/docs/{{ item.metadata.slug }}"
+                   class="group flex items-start justify-between gap-6 py-7 hover:no-underline">
+
+                    {# Text content #}
+                    <div class="flex-1 min-w-0">
+                        <h2 class="text-xl font-bold text-[var(--color-text)] leading-snug tracking-tight group-hover:text-[var(--color-muted)] transition-colors duration-150 truncate">
+                            {{ item.metadata.title }}
+                        </h2>
+
+                        {% if item.metadata.description or item.metadata.excerpt %}
+                        <p class="mt-1.5 text-sm text-[var(--color-muted)] line-clamp-2 leading-relaxed">
+                            {{ item.metadata.description or item.metadata.excerpt }}
+                        </p>
+                        {% endif %}
+
+                        <div class="flex items-center gap-3 mt-3">
+                            {% if item.metadata.author %}
+                            <span class="text-xs text-[var(--color-muted)] font-medium">{{ item.metadata.author }}</span>
+                            <span class="text-[var(--color-border)]">·</span>
+                            {% endif %}
+                            <span class="text-xs text-[var(--color-muted)]">{{ item.metadata.date or 'Undated' }}</span>
+
+                            {# Tags — show first 2 #}
+                            {% if item.metadata.tags and item.metadata.tags.length %}
+                            <span class="text-[var(--color-border)]">·</span>
+                            {% for tag in item.metadata.tags %}
+                            {% if loop.index <= 2 %}
+                            <span class="inline-block text-xs px-2 py-0.5 rounded-full bg-[var(--color-tag-bg)] text-[var(--color-tag-text)]">{{ tag }}</span>
+                            {% endif %}
+                            {% endfor %}
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    {# Cover thumbnail #}
+                    {% if item.metadata.cover %}
+                    <div class="flex-shrink-0 w-24 h-16 sm:w-32 sm:h-20 rounded-lg overflow-hidden bg-[var(--color-tag-bg)]">
+                        <img
+                            src="{{ item.metadata.cover }}"
+                            alt="{{ item.metadata.title }}"
+                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                        />
+                    </div>
+                    {% endif %}
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+
+        {% else %}
+        {# Empty state #}
+        <div class="text-center py-24">
+            <div class="w-14 h-14 rounded-2xl bg-[var(--color-tag-bg)] flex items-center justify-center mx-auto mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-[var(--color-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                </svg>
+            </div>
+            <h2 class="text-lg font-semibold text-[var(--color-text)] mb-1">No docs yet</h2>
+            <p class="text-sm text-[var(--color-muted)]">Start writing your first doc.</p>
+        </div>
+        {% endif %}
+    </main>
+</div>
+{% endblock %}

package/template/layouts/home.njk

@@ -0,0 +1,28 @@
+{% extends "base.njk" %}
+
+{% block title %}{{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="min-h-[85vh] flex flex-col items-center justify-center text-center px-6">
+    <div class="max-w-3xl">
+        <h1 class="text-5xl sm:text-7xl font-extrabold tracking-tight text-[var(--color-text)] mb-8">
+            {{ config.title }}
+        </h1>
+        <p class="text-xl sm:text-2xl text-[var(--color-muted)] mb-12 leading-relaxed">
+            {{ config.tagline }}
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
+            {% if navState.hasBlog %}
+            <a href="/blogs/" class="px-8 py-3 w-full sm:w-auto text-lg font-medium text-[var(--color-bg)] bg-[var(--color-text)] rounded-full hover:opacity-90 transition-opacity">
+                Read the Blog
+            </a>
+            {% endif %}
+            {% if navState.hasDocs %}
+            <a href="/docs/" class="px-8 py-3 w-full sm:w-auto text-lg font-medium text-[var(--color-text)] bg-[var(--color-border)] rounded-full hover:bg-[var(--color-muted)] hover:text-white transition-colors">
+                Documentation
+            </a>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}

package/template/layouts/partials/footer.njk

@@ -0,0 +1,7 @@
+<footer class="mt-auto py-6 border-t border-[var(--color-border)]">
+    <div class="max-w-3xl mx-auto px-6 text-center">
+        <p class="text-sm text-[var(--color-muted)]">
+            Made with <a href="https://github.com/rahuldshetty/inscribe" class="text-[var(--color-muted)] hover:text-[var(--color-text)] underline underline-offset-2 transition-colors" target="_blank" rel="noopener">Inscribe</a>
+        </p>
+    </div>
+</footer>

package/template/layouts/partials/header.njk

@@ -0,0 +1,25 @@
+{% set showHeader = navState.hasHome or navState.hasBlog or navState.hasDocs %}
+{% if showHeader %}
+<nav class="sticky top-0 z-50 border-b border-[var(--color-border)] backdrop-blur-sm"
+     style="background-color: var(--color-bg-nav);">
+    <div class="max-w-4xl mx-auto px-6 h-14 flex items-center justify-between">
+        <a href="/" class="text-lg font-bold text-[var(--color-text)] flex items-center gap-2 hover:opacity-80 transition-opacity">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-[var(--color-accent)]" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd" />
+            </svg>
+            {{ config.title }}
+        </a>
+        <div class="flex gap-6 items-center">
+            {% if navState.hasHome %}
+            <a href="/" class="text-sm font-medium text-[var(--color-muted)] hover:text-[var(--color-accent)] transition-colors">Home</a>
+            {% endif %}
+            {% if navState.hasDocs %}
+            <a href="/docs/" class="text-sm font-medium text-[var(--color-muted)] hover:text-[var(--color-accent)] transition-colors">Docs</a>
+            {% endif %}
+            {% if navState.hasBlog %}
+            <a href="/blogs/" class="text-sm font-medium text-[var(--color-muted)] hover:text-[var(--color-accent)] transition-colors">Blogs</a>
+            {% endif %}
+        </div>
+    </div>
+</nav>
+{% endif %}

package/template/themes/default.css

@@ -0,0 +1,41 @@
+/* ==========================================================================
+   Inscribe Theme: Default
+   Uses the CSS light-dark() function — no duplication between light & dark.
+   The browser picks the correct value based on color-scheme.
+
+   To override via JS toggle, set data-theme="dark" or data-theme="light"
+   on the <html> element — no variable values need to be repeated.
+   ========================================================================== */
+
+:root {
+  color-scheme: light dark;
+
+  /* Backgrounds */
+  --color-bg:       light-dark(#ffffff, #0f172a);
+  --color-bg-nav:   light-dark(rgba(255, 255, 255, 0.90), rgba(15, 23, 42, 0.90));
+
+  /* Text */
+  --color-text:     light-dark(#0f172a, #f8fafc);
+  --color-muted:    light-dark(#64748b, #94a3b8);
+
+  /* Borders & dividers */
+  --color-border:   light-dark(#e2e8f0, #1e293b);
+
+  /* Links & accents — blue in both modes for clear visibility */
+  --color-accent:   light-dark(#2563eb, #60a5fa);
+
+  /* Tag / badge pills */
+  --color-tag-bg:   light-dark(#f1f5f9, #1e293b);
+  --color-tag-text: light-dark(#475569, #cbd5e1);
+
+  /* Inline code */
+  --color-code-bg:  light-dark(#f1f5f9, #1e293b);
+
+  /* Code blocks */
+  --color-pre-bg:   light-dark(#0f172a, #020617);
+  --color-pre-text: light-dark(#e2e8f0, #e2e8f0);
+
+  /* Fonts */
+  --font-sans:      'Inter', sans-serif;
+  --font-serif:     'Merriweather', Georgia, serif;
+}

package/template/themes/medium.css

@@ -0,0 +1,39 @@
+/* ==========================================================================
+   Inscribe Theme: Medium
+   Inspired by Medium.com: Clean serif fonts, high contrast text,
+   minimal borders.
+   ========================================================================== */
+
+   :root {
+    color-scheme: light dark;
+  
+    /* Backgrounds */
+    --color-bg:       light-dark(#ffffff, #121212);
+    --color-bg-nav:   light-dark(rgba(255, 255, 255, 0.95), rgba(18, 18, 18, 0.95));
+  
+    /* Text */
+    --color-text:     light-dark(#242424, #f2f2f2);
+    --color-muted:    light-dark(#6b6b6b, #a8a8a8); /* Lighter gray for dark mode meta */
+  
+    /* Borders & dividers: very subtle in medium */
+    --color-border:   light-dark(#f2f2f2, #242424);
+  
+    /* Links & accents: pure black/white or a soft green */
+    --color-accent:   light-dark(#000000, #ffffff);
+  
+    /* Tag / badge pills */
+    --color-tag-bg:   light-dark(#f2f2f2, #292929);
+    --color-tag-text: light-dark(#242424, #e2e8f0);
+  
+    /* Inline code */
+    --color-code-bg:  light-dark(#f9f9f9, #1e1e1e);
+  
+    /* Code blocks */
+    --color-pre-bg:   light-dark(#f9f9f9, #1e1e1e);
+    --color-pre-text: light-dark(#242424, #f2f2f2);
+  
+    /* Fonts: Fallback-serif as primary for that editorial look */
+    --font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-serif:     'Merriweather', 'Charter', 'Georgia', serif;
+  }
+  

package/template/themes/nord.css

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   Inscribe Theme: Nord
+   Inspired by the famous Nord color palette. Frosty blues, muted grays,
+   very pleasant and relaxed for developer blogs.
+   ========================================================================== */
+
+   :root {
+    color-scheme: light dark;
+  
+    /* Backgrounds (Snow Storm light, Nord dark) */
+    --color-bg:       light-dark(#eceff4, #2e3440);
+    --color-bg-nav:   light-dark(rgba(236, 239, 244, 0.90), rgba(46, 52, 64, 0.90));
+  
+    /* Text */
+    --color-text:     light-dark(#2e3440, #d8dee9);
+    --color-muted:    light-dark(#4c566a, #4c566a);
+  
+    /* Borders & dividers */
+    --color-border:   light-dark(#d8dee9, #3b4252);
+  
+    /* Links & accents: Frost blue */
+    --color-accent:   light-dark(#5e81ac, #81a1c1);
+  
+    /* Tag / badge pills */
+    --color-tag-bg:   light-dark(#e5e9f0, #434c5e);
+    --color-tag-text: light-dark(#3b4252, #eceff4);
+  
+    /* Inline code */
+    --color-code-bg:  light-dark(#e5e9f0, #3b4252);
+  
+    /* Code blocks */
+    --color-pre-bg:   light-dark(#2e3440, #242933); /* Slightly darker than bg in dark mode */
+    --color-pre-text: light-dark(#eceff4, #d8dee9);
+  
+    /* Fonts: Mono-ish sans-serif vibe */
+    --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-serif:     'Merriweather', serif;
+  }

package/template/themes/sepia.css

@@ -0,0 +1,39 @@
+/* ==========================================================================
+   Inscribe Theme: Sepia
+   A warm, reading-focused theme with low contrast to reduce eye strain.
+   Dark mode shifts to a warm charcoal rather than pure black/blue.
+   ========================================================================== */
+
+   :root {
+    color-scheme: light dark;
+  
+    /* Backgrounds: Warm cream (light), Warm charcoal (dark) */
+    --color-bg:       light-dark(#fbf0d9, #1c1b18);
+    --color-bg-nav:   light-dark(rgba(251, 240, 217, 0.90), rgba(28, 27, 24, 0.90));
+  
+    /* Text: Deep brown (light), Soft warm light (dark) */
+    --color-text:     light-dark(#433422, #cecdc3);
+    --color-muted:    light-dark(#8f8373, #87857e);
+  
+    /* Borders & dividers */
+    --color-border:   light-dark(#e6dac3, #383531);
+  
+    /* Links & accents: Warm red/orange */
+    --color-accent:   light-dark(#b24a3e, #d36a5d);
+  
+    /* Tag / badge pills */
+    --color-tag-bg:   light-dark(#eedfc5, #2d2a26);
+    --color-tag-text: light-dark(#5c4c3b, #b5b3a8);
+  
+    /* Inline code */
+    --color-code-bg:  light-dark(#eedfc5, #2d2a26);
+  
+    /* Code blocks */
+    --color-pre-bg:   light-dark(#433422, #111110);
+    --color-pre-text: light-dark(#fbf0d9, #cecdc3);
+  
+    /* Fonts */
+    --font-sans:      'Inter', sans-serif;
+    --font-serif:     'Merriweather', Georgia, serif;
+  }
+