Astro Remark Plugins

Installation

First install nodejs

Create a astro projects

1npm create astro@latest

You should follow the installation steps given in the theme you choose.

Setup & Deploy

Templating

Using `sass`

Installing sass module to compile

1npm install sass

Write stylesheet

1<!-- css for inline -->
2<style lang="sass">
3 // write code here
4</style>
5
6<!-- css for global -->
7<style is:global lang="sass">
8 // write code here
9</style>

Using `tailwindcss`

1npx astro add tailwind

ConfigFile: Default the config of tailwind is tailwind.config.ts

1import { defineConfig } from 'astro/config';
2import tailwind from '@astrojs/tailwind';
3
4export default defineConfig({
5  // ...
6  integrations: [
7    tailwind({
8      configFile: './custom-config.mjs',
9    }),
10  ],
11});

ApplyBaseStyles: By default, the integrations imports a basic base.css file on every page of your project. To disable this behavior, set applyBaseStyles to false.

1import { defineConfig } from 'astro/config';
2import tailwind from '@astrojs/tailwind';
3
4export default defineConfig({
5  // ...
6  integrations: [
7    tailwind({
8      applyBaseStyles: false,
9    }),
10  ],
11});

Content Collections

Define Collections

1import { defineCollection } from 'astro:content';
2
3const blogCollection = defineCollection({ /* ... */ });
4
5// this key should match your collection directory name in "src/content"
6export const collections = {
7 'blog': blogCollection,
8};

Define collection schema

1import { defineCollection } from 'astro:content';
2import { defineCollection, z } from 'astro:content';
3
4const blogCollection = defineCollection({ /* ... */ });
5
6const blogCollection = defineCollection({
7 type: 'content', // content or data
8 schema: z.object({
9  title: z.string(),
10  tags: z.array(z.string()).optional(),
11  // ... more schema
12 })
13});
14
15// this key should match your collection directory name in "src/content"
16export const collections = {
17 'blog': blogCollection,
18};

Using content in Astro

1---
2import { getCollection } from 'astro:content';
3const posts = await getCollection('blog');
4---
5<ul>
6 {posts.map(post => (
7  <li>
8   <a href={post.slug}/>{ post.data.title }</a>
9  </li>
10 ))}
11</ul>

Render content to HTML

1---
2import { getEntry } from 'astro:content';
3const post = await getEntry('blog', 'post-1'); // post-1 is slug markdown
4const { Content } = await post.render();
5---
6
7<Content/>

Framework Components

Astro supports a variety of popular frameworks including react, preact, svelte, vue, solidjs, alpinejs, lit with official integrations. To install it, please follow this official guide

Using frameworks

1---
2import MyReactComponent from '../components/react/my-react-component.jsx';
3---
4<html>
5 <body>
6  <h1>Use React Component</h1>
7  <MyReactComponent />
8 </body>
9</html>

Hydrating interactive Components

1---
2// Example: hydrating framework components in the browser.
3import InteractiveButton from '../components/InteractiveButton.jsx';
4import InteractiveCounter from '../components/InteractiveCounter.jsx';
5import InteractiveModal from '../components/InteractiveModal.svelte';
6---
7<!-- This component's JS will begin importing when the page loads -->
8<InteractiveButton client:load />
9
10<!-- This component's JS will not be sent to the client until
11the user scrolls down and the component is visible on the page -->
12<InteractiveCounter client:visible />
13
14<!-- This component won't render on the server, but will render on the client when the page loads -->
15<InteractiveModal client:only="svelte" />

Remark and Rehype

Remark parses Markdown and MDX files and convert theme to HTML.

Rehype parses and transforms HTML and exports HTML

[!note] Astro supports adding third-party remark and rehype plugins for Markdown and MDX.

Plugins for both Remark and Rehype may be registered in the Markdown or MDX integrations in astro.config.mjs. Below, we is and example remark plugins of the markdown

Create a Remark Plugins

Somewhere in a root project, create a .mjs file with the name you like, such as remark-post-status.mjs

1export function remarkPostStatus () {
2 return function (tree, file) {
3  const currentDate = new Date();
4  const sevenDaysAgo = new Date();
5  sevenDaysAgo.setDate(currentDate.getDate() -  7);
6
7  const createdDate = new Date(
8   file.data.astro.frontendmatter.createDate || currentDate
9  ); // get create date of post via frontendmatter
10
11  if (createdDate >= sevenDaysAgo) {
12   file.data.astro.frontendmatter.isNew = true;
13  }
14 }
15}

This code will be applied to every markdown file in your project, one at a time. This checks the post is a new post or not if this file was created within 7 days ago and parses to frontendmatter of this file.

In order to register this remark plugin with Astro and make it applies to your markdown page, you need to reference its in your astro.config.mjs like this:

1import { defineConfig } from "astro/config";
2import { remarkPostStatus } from "remark-plugins/remark-post-status.mjs"
3
4// <https://astro.build/config>
5export default defineConfig({
6  integrations: [
7    markdown({
8      remarkPlugins: [remarkPostStatus]
9    })
10  ]
11});

List example `remark-plugin`

remark-toc

remark-reading-time