Configuration

Environment Variables

Copy the example file and fill in your values:

cp .env.example .env

In development, ENABLE_ADMIN defaults to true and the admin link is shown automatically. The admin panel is for local development only.

Site Config

The primary site configuration lives in src/config/branding.ts:

// src/config/branding.ts
export const branding = {
  siteName: "Your Site Name",
  siteDescription: "Your site description",
  // social links, logos, etc.
};

Edit this file to set your site name, description, logo, and social media links.

Navigation

Top navigation links are defined in src/config/navigation.ts:

// src/config/navigation.ts
export const navigationLinks = [
  { title: "Blog", href: "/blog" },
  { title: "Docs", href: "/docs" },
  { title: "Twitter", href: "/twitter" },
  { title: "YouTube", href: "/youtube" },
  // Add or remove links as needed
];

Authors

Author profiles are registered in src/config/authors.ts:

// src/config/authors.ts
export const authors = {
  "author-slug": {
    name: "Author Name",
    description: "Short bio",
    avatar: "/images/authors/avatar.jpg",
    social: {
      twitter: "https://twitter.com/handle",
      github: "https://github.com/handle",
    },
  },
};

Reference authors in blog post frontmatter by their slug.

Categories

Category definitions live in src/config/categories/. Each module (blog, twitter, youtube) has its own category configuration:

src/config/categories/
├── blog-categories.ts
├── twitter-categories.ts
├── youtube-categories.ts
└── index.ts           # Global category registry

Categories support i18n labels. Each category has an en and zh-hans display name.

Theme

Visual theming is controlled via CSS custom properties in src/app/global.css:

/* src/app/global.css */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  /* ... more variables */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  /* ... more variables */
}

The project uses shadcn/ui-style design tokens. Modify these CSS variables to change colors, border radius, and spacing across the entire site.

Additional design tokens are available in:

• src/config/design-tokens.ts -- programmatic design tokens
• src/config/typography.ts -- font and typography settings
• src/config/theme.ts -- theme mode configuration