Astro Friday

A content-focused Astro integration with tag and series support.

You can find source code in here.

Highlights

• concise config and easy to use, just install and set your content collections
• multi collections design and filterable
• seo friendly by astro-seo
• open graph image auto generated by @vercel/og
• light & dark mode by astro-color-scheme
• responsive design, mobile and desktop friendly
• unocss for css, also icon convenient
• viewTransition enabled default for post title, tag and series link navigation

Usage

• install astro-friday package

npm install astro-friday
# or
pnpm add astro-friday
# or
yarn add astro-friday

• add astro-friday integration in your astro.config.*

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

export default defineConfig({
  integrations: [
    friday({
      collections: {
        blog: {
          glob: {
            pattern: '**/*.md',
            base: './src/contents/blog',
          },
        },
      },
    }),
  ],
})

• import collections in src/content.config.ts file

import collection from 'virtual:astro-friday-collection'

export const collections = collection()

That’s it! You can start your dev server and see the result.

More settings can be found in here.

Roadmap

• sitemap
• robots.txt
• search
• toc
• keywords frontmatter field and seo binding
• etc.

Credits

• Page Style is inspired by antfu.me.

---