Configuration

Oct 4 guide

Astro Friday is a content-focused Astro integration with tag and series support. This guide will help you complete the configuration.

Basic Configuration

Add the Astro Friday integration to your astro.config.* file:

import Friday from 'astro-friday'
import { defineConfig } from 'astro/config'

export default defineConfig({
  integrations: [
    Friday({
      title: 'My Blog',
      description: 'A content-focused blog',
      author: {
        name: 'Your Name',
        email: 'your.email@example.com',
      },
    }),
  ],
})

Configuration Options

Basic Information

Author Information

author: {
  name?: string       // Author name, defaults to 'Anonymous'
  email?: string      // Author email
  url?: string        // Author website
  avatar?: string     // Author avatar URL
}
copyright: {
  copyrightYears?: string  // Copyright years, defaults to current year
  license?: {
    type: string           // License type, defaults to 'CC BY-NC-SA 4.0'
    url: string           // License URL, defaults to 'https://creativecommons.org/licenses/by-nc-sa/4.0/'
  }
}

Post Configuration

Configure post-related settings:

post: {
  pathStyle?: 'collection/id' | 'id'  // Path style for post routes, defaults to 'collection/id'
}

Path styles:

Collections Configuration

Define content collections and their data sources:

collections: {
  [collectionName: string]: {
    label?: string        // Display label for the collection
    glob: {
      pattern: string     // Glob pattern
      base: string        // Base directory
    }
  }
}

Example:

collections: {
  blog: {
    label: 'Blog Posts',
    glob: {
      pattern: '**/*.md',
      base: './src/content/blog',
    },
  },
  guide: {
    label: 'Guides',
    glob: {
      pattern: '**/*.md',
      base: './src/content/guide',
    },
  },
}

Customize navigation items:

navigations: {
  [key: string]: {
    label: string       // Display text
    link: string        // Link URL
    icon?: string       // Icon class name (e.g., 'i-lucide:home')
    type?: 'icon'       // Navigation type, 'icon' means always show as a icon
    external?: boolean  // Whether it's an external link
    order?: number      // Sort weight, higher numbers appear keep left
    hidden?: boolean    // Whether to hide
  }
}

Built-in navigation items:

Example:

navigations: {
  post: { label: 'Posts' },
  tag: { label: 'Tags' },
  series: { label: 'Series' },
  github: {
    label: 'GitHub',
    icon: 'i-lucide:github',
    external: true,
    link: 'https://github.com/username',
    type: 'icon',
    order: 900
  },
  'theme-toggle': { label: 'Theme', order: 1000 },
}

Page Configuration

Configure routes for special pages:

pages: {
  home?: InjectedRoute | false    // Home page route
  404?: InjectedRoute | false     // 404 page route
}

Set to false to disable default pages.

Example:

pages: {
  home: false,  // Disable default home page, you can create your own home page at `src/pages/index.astro`
}

See Custom Homepage for more details on creating a custom homepage.

SEO Configuration

SEO optimization using astro-seo, you can refer to its documentation for more options.

Logo Configuration

logo: {
  url?: string  // Logo image URL
}

Art Background Configuration

Configure decorative background elements for pages:

art: {
  dots?: {
    weight?: number   // Selection weight, higher values increase probability, defaults to 1
  }
  plum?: {
    weight?: number   // Selection weight, defaults to 1
  }
}

Imports Configuration

Configure module imports for your needs:

imports: {
  '@vercel/og'?: string  // OG image generation module, defaults to '@vercel/og'
}

This is useful when deploying to non-Node.js environments. For example, when deploying to Cloudflare Workers:

imports: {
  '@vercel/og': '@cloudflare/pages-plugin-vercel-og/api',
}

See Custom OG Middleware Handler for more details.

Complete Configuration Example

import Friday from 'astro-friday'
import { defineConfig } from 'astro/config'

export default defineConfig({
  // ...
  integrations: [
    Friday({
      title: 'My Tech Blog',
      description: 'A blog about web development and technology',
      author: {
        name: 'John Doe',
        email: 'john@example.com',
        url: 'https://johndoe.dev',
        avatar: '/avatar.jpg',
      },
      copyright: {
        copyrightYears: '2024',
        license: {
          type: 'MIT',
          url: 'https://opensource.org/licenses/MIT',
        },
      },
      post: {
        pathStyle: 'collection/id',
      },
      collections: {
        blog: {
          label: 'Blog Posts',
          glob: {
            pattern: '**/*.md',
            base: './src/content/blog',
          },
        },
        tutorial: {
          label: 'Tutorials',
          glob: {
            pattern: '**/*.md',
            base: './src/content/tutorial',
          },
        },
      },
      navigations: {
        post: { label: 'Posts' },
        tag: { label: 'Tags' },
        series: { label: 'Series' },
        about: { label: 'About', link: '/about' },
        github: {
          label: 'GitHub',
          icon: 'i-lucide:github',
          external: true,
          link: 'https://github.com/username',
          type: 'icon',
          order: 900,
        },
      },
      seo: {
        title: 'My Tech Blog',
        description: 'A blog about web development',
        openGraph: {
          basic: {
            title: 'My Tech Blog',
            type: 'website',
            image: '/og-image.jpg',
          },
        },
      },
      logo: {
        url: '/logo.svg',
      },
      art: {
        dots: { weight: 2 },
        plum: { weight: 1 },
      },
      imports: {
        '@vercel/og': '@vercel/og',
      },
    }),
  ],
})

Content Structure

Ensure your content files contain appropriate frontmatter:

---
title: Article Title
description: Article description
tags:
  - web-development
  - astro
series:
  - astro-tutorial
created: 2024-10-04
modified: 2024-10-04
---

Your Markdown content...

Supported frontmatter fields: