Recreating Current Pages

You can use any view from the Astro AntfuStyle Theme to build the pages you want.

This post shows how to recreate the /, /projects, /highlights, /photos, /shorts, /changelog, /streams, /feeds and 404 pages, add new ones, or remove existing ones.

For /releases and /prs, check out Customizing GitHub Activity Pages.

Creating Pages#

In Project Structure, it is mentioned that the theme’s organizational strategy is to store all substantive content in the src/content/ directory, while the src/pages/ directory uses .mdx files to assemble content into structured, styled layouts.

Open any .mdx file in src/pages/, and you’ll notice a similar structure: YAML frontmatter + imported Astro components + JSX with layout components nesting view components.

The theme defined all .mdx files in src/pages/ belong to the pages collection. The frontmatter fields for pages collection are defined by pageSchema in src/content/schema.ts as follows:

The theme includes a VS Code snippet for auto-generating this frontmatter (located in .vscode/astro-antfustyle-theme.code-snippets). Type pageFrontmatter and press tab to insert it (tab completion is enabled in .vscode/settings.json).

These properties can be easily passed to layout and view components. If you need to modify anything, you only need to adjust the frontmatter.

By creating pages this way, you can manage metadata and control features across pages efficiently, making it easy to expand and maintain your site.

Updating Pages#

Homepage#

To update the homepage, open src/content/home/index.md and start writing the content you want to present.

/projects#

Open src/content/projects/data.json, delete the existing content, and write your own.

The fields for each entry in the projects collection are defined by projectSchema as follows:

The theme includes a code snippet for generating projectSchema. Type projectData to trigger it, then use tab to modify the values.

Finally, update the frontmatter in src/pages/projects.mdx.

/highlights#

Similar to the /feeds page, the /highlights page displays content retrieved via astro-loader-bluesky-posts. You can reconfigure it in src/content.config.ts by referring to the loader’s README, specifying the Bluesky posts to fetch:

import { blueskyPostsLoader } from 'astro-loader-bluesky-posts'

const highlights = defineCollection({
  loader: blueskyPostsLoader({
    uris: [
      'https://bsky.app/profile/bsky.app/post/3l6oveex3ii2l'
      // 'https://bsky.app/profile/did:plc:z72i7hdynmk6r22z27h6tvur/post/3l6oveex3ii2l'
      // 'at://bsky.app/app.bsky.feed.post/3l6oveex3ii2l'
      // 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3l6oveex3ii2l'
    ],
    newlineHandling: 'paragraph',
    fetchThread: true,
    threadDepth: 4,
    fetchOnlyAuthorReplies: true,
  }),
})

Of course, if you prefer to fetch data locally for display, you can follow these steps:

Step 1: Define the Zod schema for the highlights collection

// Define the schema based on `CardItemData` in `src/components/views/CardItem.astro`
// Include only necessary properties.
// Exclude `html` and `text`, as content is written in Markdown rather than frontmatter.

export const highlightSchema = z.object({
  date: z.coerce.date(),
  images: z
    .array(
      z.object({
        src: z.string(),
        alt: z.string(),
      })
    )
    .optional(),
  video: z
    .object({
      src: z.string(),
      alt: z.string(),
      thumbnail: z.string(),
    })
    .optional(),
  external: z
    .object({
      uri: z.string(),
      title: z.string(),
      description: z.string(),
      thumb: z.string(),
    })
    .optional(),
})

Step 2: Redefine the highlights collection

import {
  pageSchema,
  postSchema,
  projectsSchema,
  streamsSchema,
  highlightSchema,
} from './schema'

const highlights = defineCollection({
  loader: blueskyPostsLoader({
    uris: [
      'at://astro.build/app.bsky.feed.post/3lifesehhok27',
      ...
    ],
    newlineHandling: 'paragraph',
    fetchThread: true,
    threadDepth: 4,
    fetchOnlyAuthorReplies: true,
  }),
  type: 'content',
  schema: highlightSchema,
})

Step 3: Update CardView logic

---
import { getCollection, render } from 'astro:content'

if (collectionType === 'highlights') {
  const highlights = await getCollection(collectionType)
  dataForMasonry = processBlueskyPosts(highlights).sort((a, b) =>
    !a.date || !b.date
      ? 0
      : new Date(b.date).valueOf() - new Date(a.date).valueOf()
  )
  dataForMasonry = highlights.sort(
    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf()
  )
}
---

{
  mode === 'masonry' && (
    <responsive-masonry
      class="block relative w-full min-h-screen op-0 op-transition-500"
      data-gap={gap}
      data-min-card-width={minCardWidth}
      data-max-card-width={maxCardWidth}
    >
      {dataForMasonry.map((item) => (
        <CardItem class="card-masonry absolute top-0 left-0" item={item} />
      ))}
      {dataForMasonry.map(async (item) => {
        const { Content } = await render(item)
        return (
          <CardItem class="card-masonry absolute top-0 left-0" item={item.data}>
            <Content />
          </CardItem>
        )
      })}
    </responsive-masonry>
  )
}

Step 4: Create the content/highlights/ to store content

---
date: 2025-03-01
images:
  - src: "https://example.com/remote-image.jpg"
    alt: "Example Image 1"
  - src: "/src/assets/local-image.png"
    alt: "Example Image 2"
  - src: "/src/assets/highlights/local-image.webp"
    alt: "Example Image 3"
---

This is a sample highlight entry for the `/highlights` page.
...

---
date: 2025-03-02
video:
  src: "/src/assets/local-video.mp4"
  alt: "Example Video"
  poster: "https://example.com/poster.jpg"
---

This is a sample highlight entry for the `/highlights` page.
...

/photos#

Photos on the /photos page are manually configured in src/content/photos/data.json. Both local and public remote images are supported and can be mixed. This page can also showcase designs, illustrations, and other images — not just photos.

The fields for each entry in the photos collection are defined by photoSchema as follows:

For local images, files must be placed in src/content/photos/, and id must be configured such that it can be correctly matched in the following code:

const localImages = import.meta.glob<{ default: ImageMetadata }>(
  '/src/content/photos/**/*.{jpg,jpeg,png,webp,avif}'
)
const localImageKeys = Object.keys(localImages)
const localImagePath = localImageKeys.find((path) => path.includes(id))

For remote images, id must start with http or https. To enable thumbnail generation, also configure imageDomains in src/config.ts (see explanation below).

Page implementation details

• At build time, a photos.[hash].json file is generated based on your data.json config. When the /photos page loads, it fetches this file and renders the images dynamically.
• The file is served by src/pages/photos/photos.[hash].json.ts as a static file endpoint, which does the following:
  • Loads remote or local images to extract metadata.
  • Uses sharp to generate a blurred placeholder as a Data URL (cached in './node_modules/.astro/photos/' during development).
  • Uses Astro’s getImage() to generate 720px-wide thumbnails (served via Astro’s built-in /_image endpoint during development, and HTTP cached during build).

Additional notes that may be useful

• Remote images larger than 10MB or loading longer than 10 seconds will be skipped with a warning. You can adjust these limits in src/utils/image.ts.
• Photos are displayed in a left-to-right, top-to-bottom flow based on their order in data.json.
• Lightbox view is powered by viewerjs, customizable via ImageViewer.astro. Note: this component is also used in Photoview.astro and RenderPost.astro.
• To generate thumbnails for remote images, Astro requires remote image authorization. For large images over 720px wide, consider setting the imageDomains option in src/config.ts; otherwise, you can ignore this.

/shorts#

The current /shorts page uses data from the blog collection. To create a standalone shorts collection, follow these steps:

Step 1: Define the shorts collection

const shorts = defineCollection({
  loader: glob({ base: './src/content/shorts', pattern: '**/[^_]*.{md,mdx}' }),
  schema: postSchema,
})

export const collections = {
  ...
  shorts,
}

Step 2: Update CardView to query shorts instead of blog

import { getFilteredPosts, getSortedPosts } from '~/utils/data'
import { resolvePath } from '~/utils/path'

if (collectionType === ('shorts' as CollectionKey)) {
  const posts = await getCollection('blog')
  dataForGrid = await getShortsFromBlog(posts)
}
if (collectionType === 'shorts') {
  const shorts = await getFilteredPosts(collectionType)
  const sortedShorts = getSortedPosts(shorts)
  dataForGrid = sortedShorts.map((item)=>({
    link: resolvePath(collectionType) + item.id,
    text: item.data.title,
    date: item.data.pubDate,
  }))
}

Step 3: Create the pages/shorts/ to generate pages

• Copy src/pages/shorts/[...slug].astro into the pages/shorts/ directory, and update 'blog' to 'shorts' inside the file.
• Move src/pages/shorts.mdx into the pages/shorts/ directory and rename it to index.mdx.

Step 4: Create the content/shorts/ to store content

/changelog#

To recreate the /changelog page, please follow the Adding New Posts. The content for the /changelog page, stored in the src/content/changelog/ directory, belongs to the changelog collection. This collection also uses postSchema for frontmatter types.

/streams#

Similarly to adding projects, open src/content/streams/data.json, delete the existing, and write your own.

The fields for each entry in the streams collection are defined by streamSchema as follows:

The theme includes a code snippet for generating streamSchema. Type streamData to trigger it, then use tab to modify the values.

Finally, update the frontmatter in src/pages/streams.mdx.

/feeds#

The /feeds page displays content retrieved via @ascorbic/feed-loader. You can define an external data source (like RSS, RDF, or Atom feeds) for the feeds collection using the following:

import { feedLoader } from '@ascorbic/feed-loader'

const feeds = defineCollection({
  loader: feedLoader({
    url: 'https://astro.build/rss.xml',
  }),
})

404#

To update the 404 page, you can directly edit src/pages/404.mdx.

Removing Pages#

Using remove the /changelog page as an example:

• Delete src/pages/changelog.mdx.
• Delete src/content/changelog directory.
• Update src/content.config.ts and src/config.ts:

import { glob } from 'astro/loaders'
import { defineCollection } from 'astro:content'
import { feedLoader } from '@ascorbic/feed-loader'
import { pageSchema, postSchema, projectsSchema, streamsSchema } from './schema'

// Define other collections...

const changelog = defineCollection({
  type: 'content',
  schema: postSchema,
})

// Define other collections...

export const collections = { pages, blog, projects, changelog, streams, feeds }

export const UI: Ui = {
  internalNavs: [
    ...
    {
      path: '/changelog',
      title: 'Changelog',
      displayMode: 'iconHiddenOnMobile',
      icon: 'i-ri-draft-line',
    },
  ],
  ...
  tabbedLayoutTabs: [
    { title: 'Changelog', path: '/changelog' },
    { title: 'AstroBlog', path: '/feeds' },
    { title: 'AstroStreams', path: '/streams' },
  ],
  ...
}

For the loaders used in the /feeds and /highlights pages, you can uninstall them if they are no longer needed.

Wrapping Up#

That’s all about customizing pages in this theme. Thanks for reading!

If you encounter any issues, find errors, or see opportunities for improvement, feel free to join the discussion or submit an issue or pull request. Your feedback is highly appreciated! ❤️