<MT's.blog/>

Astro notes

#astro #tailwindcss
Sat, October 26, 2024 - 3 min read

Contents

Install Astro

bun create astro@latest

Create Table of Contents

  • Install plugins
bun install rehype-autolink-headings rehype-slug rehype-toc
  • Add to astro.config.mjs
import remarkToc from 'remark-toc';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';

markdown: {
  // ...
  remarkPlugins: [
    remarkReadingTime,
    [remarkToc, { heading: 'contents', maxDepth: 3 }], // heading to inject toc, not case sensitive
  ],
  rehypePlugins: [
    [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
  ],
  // ...
}
  • In .md file, add ## Contents to inject table of contents.
---

---

... ## Contents
<!-- ToC will render to:
<h2 id="contents">Contents</h2>
<ul>
  <li>
    <a href="#heading-1">Heading 1</a>
  </li>
  <li>
    <a href="#heading-2">Heading 2</a>
  </li>
</ul>
-->

...

TailwindCSS

  • Add package

    bun astro add tailwind

  • Config tailwind.config.mjs

    // disable default code element with `` in .md file
const disabledCss = {
  'code::before': false,
  'code::after': false,
  code: false,
};

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    // add here to override tailwind default classes. Ex:
    // fontFamily: {},
    extend: {
      // add here to extend tailwind classes
      fontFamily:
      {
        atkinson: ['atkinson']
      }
      typography: {
        DEFAULT: { css: disabledCss },
        sm: { css: disabledCss },
        lg: { css: disabledCss },
        xl: { css: disabledCss },
        '2xl': { css: disabledCss }
      }
    }
  },
  plugins: [require('@tailwindcss/typography')]
};

  • Config astro.config.mjs

    export default defineConfig({
  site: 'https://toantnm.pages.dev/',
  integrations: [
    ...tailwind({
      applyBaseStyles: false, // disable base.css applied default by astro
    }),
  ],
  markdown: {
    remarkPlugins: [
      remarkReadingTime,
      [remarkToc, { heading: 'toc', maxDepth: 2 }],
    ],
    // rehypePlugins: [rehypeAccessibleEmojis],
    shikiConfig: {
      themes: {
        light: 'min-light',
        dark: 'min-dark',
      },
      wrap: true,
    },
  },
});

  • Add tailwind.css (recommend in /src/assets/styles)

    @tailwind base;
@tailwind components;
@tailwind utilities;

/* add web fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* add local fonts*/
@font-face {
  font-family: 'atkinson';
  src:
    url('/fonts/atkinson-regular.woff') format('woff'),
    url('/fonts/atkinson-bold.woff') format('woff');
}

@layer base {
  html.dark .astro-code,
  html.dark .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

/* style ` ` - compile to <code></code>
``` wil compile to <pre><code></code></pre> */
:not(pre) > code {
  @apply text-orange-800 dark:text-orange-500 !important;
  @apply bg-stone-400 font-semibold dark:bg-stone-800;
}

Auto format astro files & auto sort tailwindcss classes

  • Install plugins:

    bun install -d prettier-plugin-astro prettier-plugin-tailwindcss prettier-plugin-organize-imports

  • Config

    Add to .prettierrc

    { "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"] }

    If using .prettierrc.mjs, add the following:

    // .prettierrc.mjs
/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

    In VSCode, add the following to settings.json

    "prettier.documentSelectors": ["**/*.astro"],
"[astro]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

    Now VSCode should auto format (with auto sorting tailwindcss classes) the .astro file when save. If it’s not working, check Prettier extension ortry to reload/restart VSCode.

    CLI command to format:

    bunx prettier --write .

Reference:

md file syntax highlight

  • Config astro.config.mjs
import {
  transformerNotationDiff,
  // ...
} from '@shikijs/transformers'
...

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'min-light',
        dark: 'min-dark',
      },
      wrap: true,
    },
  })
...
  • Config transformer in .md file
bun install -d @shikijs/transformers
import { 
  transformerMetaHighlight,
  transformerMetaWordHighlight,
  transformerNotationDiff,
  transformerNotationErrorLevel,
  transformerNotationFocus,
  transformerNotationHighlight,
  transformerNotationWordHighlight,
} from '@shikijs/transformers'; 
...

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'min-light',
        dark: 'min-dark',
      },
      wrap: true,
      transformers: [ 
        transformerNotationDiff(),
        transformerNotationHighlight(),
        transformerNotationWordHighlight(),
        transformerNotationFocus(),
        transformerNotationErrorLevel(),
        transformerMetaHighlight(),
        transformerMetaWordHighlight(),
      ],
    },
  },
  });
...

Reference: