Merge pull request #13 from nemanjam/feature/content-layer

Content layer migration

Author: nemanjam

astro.config.ts

@@ -21,9 +21,6 @@ export default defineConfig({
   site: SITE_URL,
   trailingSlash: 'ignore',
   env: envSchema,
-  legacy: {
-    collections: true,
-  },
   // default
   compressHTML: true,
   server: { port: 3000 },

docs/working-notes/todo4.md

@@ -28,5 +28,9 @@ astro v5
 
 migrate gallery to astro components
 migrate content collections to content layer, restructure folder with slug to contain images
+------------
+// content layer
+git checkout -b feature/content-layer
 
+id, slug, decoupled with my custom type Post[], Project[], from CollectionEntry<T>
 ```

src/constants/collections.ts

@@ -3,6 +3,11 @@ import { DEFAULT_METADATA } from '@/constants/metadata';
 import DefaultPostHeroImage from '@/assets/images/default/default-post-hero-image.jpg';
 import DefaultProjectHeroImage from '@/assets/images/default/default-project-hero-image.jpg';
 
+export const BASE_FOLDERS = {
+  POST: 'src/content/post',
+  PROJECT: 'src/content/project',
+} as const;
+
 export const COLLECTIONS = {
   POST: 'post',
   PROJECT: 'project',

src/content/config.ts

@@ -1,16 +1,20 @@
 import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
 
-import { postSchema } from '../schemas/post';
-import { projectSchema } from '../schemas/project';
+import { postSchema } from '@/schemas/post';
+import { projectSchema } from '@/schemas/project';
+import { BASE_FOLDERS } from '@/constants/collections';
+
+const { POST, PROJECT } = BASE_FOLDERS;
 
 export const postCollection = defineCollection({
+  loader: glob({ pattern: '**/*.mdx', base: POST }),
   schema: postSchema,
-  type: 'content',
 });
 
 export const projectCollection = defineCollection({
+  loader: glob({ pattern: '**/*.mdx', base: PROJECT }),
   schema: projectSchema,
-  type: 'content',
 });
 
 // _schemas folder in collections will be included in type

src/modules/common.ts

@@ -65,3 +65,10 @@ export const getPublishedOrUpdatedDate = ({
 
   return result;
 };
+
+/*------------------------- for content layer -----------------------*/
+
+export const idToSlug = <T extends { id: unknown }>(item: T): T & { slug: T['id'] } => ({
+  ...item,
+  slug: item.id,
+});

src/modules/post/common.ts

@@ -1,4 +1,6 @@
-import { getAllEntries } from '@/modules/common';
+import { render } from 'astro:content';
+
+import { getAllEntries, idToSlug } from '@/modules/common';
 import { COLLECTIONS } from '@/constants/collections';
 
 import type { Post, PostCollection } from '@/types/post';
@@ -10,18 +12,24 @@ export const getPostsWithReadingTimeFromPosts = async (
   posts: PostCollection[]
 ): Promise<Post[]> => {
   const readingTimePromises = posts.map(async (post) => {
-    const { remarkPluginFrontmatter } = await post.render();
+    const { remarkPluginFrontmatter } = await render(post);
     const { readingTime } = remarkPluginFrontmatter;
     return { readingTime };
   });
   const readingTimes = await Promise.all(readingTimePromises);
 
   // other frontmatter props are in post.data...
   // readingTimes is in post.readingTimes
-  const postsWithReadingTime = posts.map((post, index) => ({ ...post, ...readingTimes[index] }));
-  return postsWithReadingTime;
+  const postsWithReadingTimeAndSlug = posts
+    .map((post, index) => ({ ...post, ...readingTimes[index] }))
+    .map(idToSlug);
+  return postsWithReadingTimeAndSlug;
 };
 
-/** Prefer over getAllPosts() */
+/**
+ * Prefer over getAllPosts()
+ * From this point Post[] instead of CollectionEntry<'post'>[].
+ * My custom type with slug, readingTime, etc.
+ */
 export const getAllPostsWithReadingTime = async (): Promise<Post[]> =>
   getPostsWithReadingTimeFromPosts(await getAllPosts());

src/modules/project.ts

@@ -1,6 +1,13 @@
-import { getAllEntries } from '@/modules/common';
+import { getAllEntries, idToSlug } from '@/modules/common';
 import { COLLECTIONS } from '@/constants/collections';
 
+import type { Project } from '@/types/project';
+
 /*-------------------------------- getAllProjects ------------------------------*/
 
-export const getAllProjects = () => getAllEntries(COLLECTIONS.PROJECT);
+/**
+ * From this point Project[] instead of CollectionEntry<'project'>[].
+ * My custom type with slug, etc.
+ */
+export const getAllProjects = (): Promise<Project[]> =>
+  getAllEntries(COLLECTIONS.PROJECT).then((entries) => entries.map(idToSlug));

src/pages/blog/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from 'astro:assets';
+import { render } from 'astro:content';
 
 import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import { getRandomPosts } from '@/modules/post/random';
@@ -39,7 +40,7 @@ export async function getStaticPaths() {
   return paths;
 }
 
-const { data, render, readingTime, randomPosts } = Astro.props;
+const { data, readingTime, randomPosts } = Astro.props;
 const {
   draft,
   title,
@@ -57,7 +58,7 @@ const {
 const { slug } = Astro.params;
 const { pathname } = Astro.url;
 
-const { Content, headings: postHeadings } = await render();
+const { Content, headings: postHeadings } = await render(Astro.props);
 const headings = getHeadingsForTableOfContents(postHeadings);
 
 const postMetaProps = {

src/pages/projects/[...page].astro

@@ -6,11 +6,11 @@ import { CONFIG_CLIENT } from '@/config/client';
 import { getPageMetadata } from '@/utils/metadata';
 import { pickPaginationPropsFromPage } from '@/utils/pagination';
 
-import type { ProjectCollection } from '@/types/project';
+import type { Project } from '@/types/project';
 import type { GetStaticPathsOptions, Page } from 'astro';
 
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
-  const sortedProjects = await getAllProjects();
+  const sortedProjects: Project[] = await getAllProjects();
   const pageSize = CONFIG_CLIENT.PAGE_SIZE_POST_CARD;
 
   const pagination = paginate(sortedProjects, { pageSize });
@@ -19,7 +19,7 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 }
 
 type Props = {
-  page: Page<ProjectCollection>;
+  page: Page<Project>;
 };
 
 const { page } = Astro.props;

src/pages/projects/[slug].astro

@@ -1,27 +1,30 @@
 ---
+import { render } from 'astro:content';
+
 import { getAllProjects } from '@/modules/project';
-import Project from '@/layouts/Project.astro';
+import ProjectLayout from '@/layouts/Project.astro';
 import Share from '@/components/Share.astro';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG_CLIENT } from '@/config/client';
 import { getOpenGraphImagePath } from '@/libs/api/open-graph/image-path';
 
 import type { Metadata } from '@/types/common';
+import type { Project } from '@/types/project';
 
 const { SITE_URL } = CONFIG_CLIENT;
 
 export async function getStaticPaths() {
-  const sortedProjects = await getAllProjects();
+  const sortedProjects: Project[] = await getAllProjects();
 
-  const paths = sortedProjects.map((page) => ({
-    params: { slug: page.slug },
-    props: { page },
+  const paths = sortedProjects.map((project) => ({
+    params: { slug: project.slug },
+    props: { ...project },
   }));
 
   return paths;
 }
 
-const { data, render } = Astro.props.page;
+const { data } = Astro.props;
 const { pathname } = Astro.url;
 const { slug } = Astro.params;
 
@@ -36,10 +39,10 @@ const shareProps = {
   url: `${SITE_URL}${ROUTES.PROJECTS}${slug}`,
 };
 
-const { Content } = await render();
+const { Content } = await render(Astro.props);
 ---
 
-<Project {metadata}>
+<ProjectLayout {metadata}>
   <Content />
   <Share {...shareProps} />
-</Project>
+</ProjectLayout>