Obsidian Vault Garden (Authenticated Digital Garden)

A feature-rich, high-performance Eleventy template for publishing Obsidian vaults using the Obsidian Digital Garden Plugin.

Includes per-project password authentication, pre-compiled Dataview / DQL queries, TaskNotes integration, AnuPpuccin / Catppuccin theme styling, and an interactive file tree and graph view.

---

Key Features

• Per-Project Password Protection: Lock specific folders or note subtrees behind passwords while keeping public notes accessible. Sessions are authenticated via HttpOnly JWT cookies (jose library) and enforced at both Edge Middleware (Vercel) and local server levels.
• Frosted Glass Unlock Modal: Sleek UI prompt over blurred background when accessing restricted paths directly or clicking locked notes.
• Dataview & DQL Pre-compiler: Automatically evaluates Dataview queries during pre-build (scripts/process-dataview.js) and compiles them to static HTML.
• TaskNotes Integration: Parses task notes and frontmatter metadata for seamless project task rendering.
• AnuPpuccin & Callout Support: Native rendering for Obsidian callouts (notes, tips, warnings, quotes, multi-column layouts) and CSS variable-driven themes.
• Interactive Graph & Navigation: Client-side interactive graph visualization with locked project node indicators and collapsible sidebar controls.

---

Architecture Overview

obsidian-vault-garden/
├── auth/
│   ├── projects.js         # Project registry (prefixes, labels, env var names)
│   └── gate.mjs            # Authentication logic & JWT session handler
├── middleware.ts           # Vercel Edge Middleware for path gating
├── server.mjs              # Local Node.js server with middleware support
├── scripts/
│   └── process-dataview.js # Pre-build DQL & TaskNotes compiler
├── src/
│   ├── site/
│   │   ├── notes/          # Published markdown notes from Obsidian
│   │   ├── styles/         # SASS / SCSS stylesheets & theme files
│   │   └── _includes/      # Nunjucks layouts, components & auth modals
│   └── helpers/            # File tree, links, and tier helpers
├── .env.local.example      # Template for environment variables
└── package.json

---

Password & Secret Setup Guide

1. Configure Projects in auth/projects.js

Edit auth/projects.js to register any folder paths that require password protection:

module.exports = {
  publicPrefixes: [],
  homePaths: ["/"],
  privateProjects: [
    {
      key: "private_demo",          // Unique key used in JWT tokens
      label: "Private Demo Project",// Display name in the unlock modal
      prefix: "/PrivateDemo",       // Folder path to restrict in published notes
      landing: "/PrivateDemo/Dashboard/", // Default page to open after unlocking
      env: "PW_PRIVATE_DEMO",       // Environment variable holding the password
    },
  ],
};

Notes under /PrivateDemo/... will automatically trigger the password prompt unless unlocked.

---

2. Configure Environment Variables

Secret Key (AUTH_SECRET)

The AUTH_SECRET variable is used to sign session JWTs. Generate a strong secret:

openssl rand -base64 32

Project Passwords (PW_<PROJECT_KEY>)

Define a password environment variable for each project listed in auth/projects.js.

---

3. Local Development (.env.local)

Copy .env.local.example to .env.local and set your credentials:

cp .env.local.example .env.local

Example .env.local:

# Session signing key (HS256)
AUTH_SECRET="your-generated-base64-secret"

# Passwords matching `env` field in auth/projects.js
PW_PRIVATE_DEMO="my-secret-password-123"

Start the local development server:

npm install
npm run start

Your site will run locally at http://localhost:8080 (or the server port defined in server.mjs).

---

4. Production Deployment (Vercel / Netlify)

When deploying to Vercel or Netlify:

1. Push your repository to GitHub.
2. In your Vercel project dashboard, go to Settings → Environment Variables.
3. Add the following variables:
   • AUTH_SECRET = <your-generated-base64-secret>
   • PW_PRIVATE_DEMO = <your-chosen-password>
4. Deploy the repository. Vercel Edge Middleware (middleware.ts) will automatically enforce password authentication on incoming requests.

---

Obsidian Setup

1. Install the Digital Garden plugin in Obsidian (oleeskild/obsidian-digital-garden).
2. Set your GitHub username and repository name (obsidian-vault-garden) in plugin settings.
3. Provide a GitHub Personal Access Token with repository write permissions.
4. Set notes to publish by adding dg-publish: true in their frontmatter:

---
title: My First Note
dg-publish: true
---

5. Run Digital Garden: Publish Single Note or Publish All Notes from Obsidian.

---

License

MIT License.