starlight: 基于 astro 的文档工具

添加 astro + tailwind

# 建议目录
mkdir docs-starlight
cd docs-starlight
# 
yarn create astro --template starlight/tailwind

添加自己的 tw 配置

yarn add --dev @jswork/presets-tailwind

配置文件如下

import colors from 'tailwindcss/colors';
import jswPresets from '@jswork/presets-tailwind';

import starlightPlugin from '@astrojs/starlight-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [jswPresets()],
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        // Your preferred accent color. Indigo is closest to Starlight’s defaults.
        accent: colors.indigo,
        // Your preferred gray scale. Zinc is closest to Starlight’s defaults.
        gray: colors.zinc
      }
    }
  },
  plugins: [starlightPlugin()]
};

因为是 beta 版，所以经常会有更新

npx @astrojs/upgrade

安装

yarn add --dev starlight-image-zoom

配置

import starlightImageZoom from 'starlight-image-zoom';

// https://astro.build/config
export default defineConfig({
  image: {
    service: passthroughImageService()
  },
  integrations: [
    starlight({
      title: 'Starlight Notes',
      social: {
        github: 'https://github.com/aric-notes/starlight-notes'
      },
      customCss: ['./src/tailwind.css'],
      plugins: [starlightImageZoom()]
    }),
    tailwind({ applyBaseStyles: false })
  ]
});

报错内容

Could not process image request: MissingSharp: Could not find Sharp. Please install Sharp (`sharp`) manually into your project or migrate to another i

解决办法

import { defineConfig, passthroughImageService } from 'astro/config';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';

// https://astro.build/config
export default defineConfig({
  image: {
    service: passthroughImageService()
  },
  // .... 此处省略10000行代码