Refactor content architecture (#54)

* Move content config files

* Organize site config

* Better naming for contentlayer glue

* Refactor to selector verbiage and fix document exports

* Colocate components in app dir

* Fix circular dependencies

* Reorganize content files

* Decouple utils from contentlayer concepts

* Remove blog post contant

* Clean up

* Rename to entities

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
 
           // components + modules in their own separate groups first
           ['^(~/components/.*|$)'],
-          ['^(~/content/.*|$)'],
+          ['^(~/entities/.*|$)'],
 
           ['^(~|@|src|app)(/.*|$)'],
           ['^\\.\\.(?!/?$)', '^\\.\\./?$'],

contentlayer.config.ts

@@ -1,15 +1,16 @@
 import { makeSource } from 'contentlayer/source-files';
 
-import { siteMetadata } from './src/config/metadata';
-import * as documentTypes from './src/content/config';
-import { CONTENT_DIR_PATH } from './src/content/config/constants';
-import { rehypePlugins, remarkPlugins } from './src/content/config/plugins';
+import { contentConfig } from './src/config/content';
+import { siteConfig } from './src/config/site';
+import * as documentTypes from './src/entities/bootstrap';
+import { rehypePlugins } from './src/lib/rehype';
+import { remarkPlugins } from './src/lib/remark';
 
 export default makeSource({
-  contentDirPath: CONTENT_DIR_PATH,
   documentTypes,
+  contentDirPath: contentConfig.dirPath,
   date: {
-    timezone: siteMetadata.timezone,
+    timezone: siteConfig.timezone,
   },
   mdx: {
     remarkPlugins,

scripts/generate-rss.ts

@@ -2,34 +2,36 @@ import fs from 'fs';
 
 import { Feed } from 'feed';
 
-import { authorMetadata, siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
 
 export default async function generateRSS() {
   // have to import esm this way
   const { allBlogPosts } = await import('../.contentlayer/generated/index.mjs');
 
   const author = {
-    name: authorMetadata.name,
-    email: authorMetadata.email,
-    link: siteMetadata.siteUrl,
+    name: siteConfig.author.name,
+    email: siteConfig.author.email,
+    link: siteConfig.siteUrl,
   };
 
   const feed = new Feed({
-    title: siteMetadata.siteName,
-    description: siteMetadata.metaDescription,
-    id: siteMetadata.siteUrl,
-    link: siteMetadata.siteUrl,
-    image: `${siteMetadata.images.logo}`,
-    favicon: `${siteMetadata.images.favicon}`,
-    copyright: `Copyright © ${new Date().getFullYear()} ${authorMetadata.name}`,
+    title: siteConfig.siteName,
+    description: siteConfig.defaultMetaDescription,
+    id: siteConfig.siteUrl,
+    link: siteConfig.siteUrl,
+    image: `${siteConfig.images.logo}`,
+    favicon: `${siteConfig.images.favicon}`,
+    copyright: `Copyright © ${new Date().getFullYear()} ${
+      siteConfig.author.name
+    }`,
     feedLinks: {
-      rss2: `${siteMetadata.siteUrl}/feed.xml`,
+      rss2: `${siteConfig.siteUrl}/feed.xml`,
     },
     author,
   });
 
   allBlogPosts.forEach(post => {
-    const slug = `${siteMetadata.siteUrl}/blog/${post.slug}`;
+    const slug = `${siteConfig.siteUrl}/blog/${post.slug}`;
 
     feed.addItem({
       id: slug,

src/content/blog/components/LatestPosts.tsx → src/app/(home)/components/LatestPosts.tsx

@@ -2,7 +2,7 @@ import { ButtonLink } from '~/components/ButtonLink';
 import { Section } from '~/components/Section';
 import { Spacer } from '~/components/Spacer';
 
-import type { BlogPostMetadata } from '../types';
+import type { BlogPostMetadata } from '~/entities/blog-post';
 
 import { PostListCompact } from './PostListCompact';
 

src/content/blog/components/PostListCompact.tsx → src/app/(home)/components/PostListCompact.tsx

@@ -2,9 +2,9 @@ import { Heading } from '~/components/Heading';
 import { Link } from '~/components/Link';
 import { Paragraph } from '~/components/Paragraph';
 
-import { formatDate } from '~/utils/date';
+import type { BlogPostMetadata } from '~/entities/blog-post';
 
-import type { BlogPostMetadata } from '../types';
+import { formatDate } from '~/utils/date';
 
 type Props = {
   posts: BlogPostMetadata[];

src/app/page.tsx → src/app/(home)/page.tsx

@@ -2,15 +2,17 @@ import type { Metadata } from 'next';
 
 import { HeroSection } from '~/components/home/HeroSection';
 
-import { getLatestPosts } from '~/content/blog/client';
-import { LatestPosts } from '~/content/blog/components/LatestPosts';
-import { MAX_POSTS_DISPLAY } from '~/content/blog/constants';
+import { getLatestPosts } from '~/entities/blog-post';
 
-import { siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
+
+import { LatestPosts } from './components/LatestPosts';
+
+const MAX_POSTS_DISPLAY = 3;
 
 export const metadata: Metadata = {
   alternates: {
-    canonical: siteMetadata.siteUrl,
+    canonical: siteConfig.siteUrl,
   },
 };
 

src/app/about/page.tsx

@@ -7,9 +7,9 @@ import { Prose } from '~/components/Prose';
 import SocialLinks from '~/components/SocialLinks';
 import { TechStack } from '~/components/TechStack';
 
-import { getPageContent } from '~/content/page/client';
+import { getPageContent } from '~/entities/page';
 
-import { siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
 
 import Avatar from '../../../public/images/avatar.jpg';
 
@@ -21,7 +21,7 @@ export async function generateMetadata(
   const parentOpenGraph = (await parent).openGraph || {};
 
   return {
-    title: `About | ${siteMetadata.metaTitle}`,
+    title: `About | ${siteConfig.defaultMetaTitle}`,
     description:
       'Software Engineer and perpetual tinkerer specializing in front-end JavaScript development.',
     openGraph: {

src/app/blog/[slug]/page.tsx

@@ -1,11 +1,11 @@
 import type { Metadata, ResolvingMetadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { getBlogPost, getBlogPosts } from '~/content/blog/client';
+import { getBlogPost, getBlogPosts } from '~/entities/blog-post';
 
-import { siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
 
-import { BlogPostPage } from './BlogPostPage';
+import { BlogPostPage } from '../components/BlogPostPage';
 
 interface Props {
   params: { slug: string };
@@ -25,7 +25,7 @@ export async function generateMetadata(
 
   const parentOpenGraph = (await parent).openGraph || {};
 
-  const url = `${siteMetadata.siteUrl}/blog/${slug}`;
+  const url = `${siteConfig.siteUrl}/blog/${slug}`;
 
   return {
     title,

src/app/blog/[slug]/BlogPostPage.tsx → src/app/blog/components/BlogPostPage.tsx

@@ -6,13 +6,14 @@ import { MDXComponent } from '~/components/MDXComponent';
 import { Prose } from '~/components/Prose';
 import { Spacer } from '~/components/Spacer';
 
-import { BlogPost } from '~/content/blog';
-import { PublishedAndReadTime } from '~/content/blog/components/PublishedAndReadTime';
-import { TagsList } from '~/content/blog/components/TagsList';
+import { BlogPost } from '~/entities/blog-post';
 
-import { authorMetadata, siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
 import { formatDate } from '~/utils/date';
 
+import { PublishedAndReadTime } from './PublishedAndReadTime';
+import { TagsList } from './TagsList';
+
 interface Props {
   post: BlogPost;
 }
@@ -35,14 +36,14 @@ export function BlogPostPage({ post }: Props) {
         type="BlogPosting"
         useAppDir
         authorName={{
-          name: authorMetadata.name,
+          name: siteConfig.author.name,
         }}
-        url={`${siteMetadata.siteUrl}/blog/${slug}`}
+        url={`${siteConfig.siteUrl}/blog/${slug}`}
         title={title}
         description={summary}
         datePublished={date}
         dateModified={lastModified}
-        images={[siteMetadata.images.socialBanner]}
+        images={[siteConfig.images.socialBanner]}
       />
 
       <Spacer size="8" />

src/content/blog/components/ExploreByTopic.tsx → src/app/blog/components/ExploreByTopic.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '~/components/Heading';
 
-import { Tag } from '../types';
+import type { Tag } from '~/entities/blog-post';
 
 import { TagsList } from './TagsList';
 

src/content/blog/components/PostList.tsx → src/app/blog/components/PostList.tsx

@@ -4,7 +4,7 @@ import { Link } from '~/components/Link';
 import { Paragraph } from '~/components/Paragraph';
 import { Spacer } from '~/components/Spacer';
 
-import type { BlogPostMetadata } from '../types';
+import type { BlogPostMetadata } from '~/entities/blog-post';
 
 import { PublishedAndReadTime } from './PublishedAndReadTime';
 import { TagsList } from './TagsList';

src/content/blog/components/PublishedAndReadTime.tsx → src/app/blog/components/PublishedAndReadTime.tsx

@@ -6,9 +6,9 @@ import { twMerge } from 'tailwind-merge';
 
 import { GradientText } from '~/components/GradientText';
 
-import { formatDate } from '~/utils/date';
+import type { BlogPostMetadata } from '~/entities/blog-post';
 
-import { BlogPostMetadata } from '../types';
+import { formatDate } from '~/utils/date';
 
 type Props = {
   className?: string;

src/content/blog/components/TagsList.tsx → src/app/blog/components/TagsList.tsx

@@ -1,9 +1,9 @@
 import { Badge } from '~/components/Badge';
 import { Paragraph } from '~/components/Paragraph';
 
-import { clsxm } from '~/utils/clsxm';
+import type { Tag } from '~/entities/blog-post';
 
-import { Tag } from '../types';
+import { clsxm } from '~/utils/clsxm';
 
 type Props = {
   tags: Tag[];

src/app/blog/page.tsx

@@ -4,11 +4,12 @@ import { PageIntro } from '~/components/PageIntro';
 import { Section } from '~/components/Section';
 import { Spacer } from '~/components/Spacer';
 
-import { getAllBlogTags, getLatestPosts } from '~/content/blog/client';
-import { ExploreByTopic } from '~/content/blog/components/ExploreByTopic';
-import { PostList } from '~/content/blog/components/PostList';
+import { getAllBlogTags, getLatestPosts } from '~/entities/blog-post';
 
-import { siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
+
+import { ExploreByTopic } from './components/ExploreByTopic';
+import { PostList } from './components/PostList';
 
 export async function generateMetadata(
   // @ts-ignore throwaway
@@ -19,11 +20,11 @@ export async function generateMetadata(
   const metaDesc = 'Content focusing on React, JavaScript, Node.js, and more.';
 
   return {
-    title: `Blog | ${siteMetadata.metaTitle}`,
+    title: `Blog | ${siteConfig.defaultMetaTitle}`,
     description: metaDesc,
     openGraph: {
       ...parentOpenGraph,
-      title: siteMetadata.siteName,
+      title: siteConfig.siteName,
       description: metaDesc,
     },
   };

src/app/blog/tags/[tag]/page.tsx

@@ -4,16 +4,17 @@ import { notFound } from 'next/navigation';
 import { PageIntro } from '~/components/PageIntro';
 
 import {
+  type Tag,
   getAllBlogTags,
   getLatestPosts,
   getPostPreviews,
   getTag,
   getTaggedPosts,
-} from '~/content/blog/client';
-import { PostList } from '~/content/blog/components/PostList';
-import type { Tag } from '~/content/blog/types';
+} from '~/entities/blog-post';
 
-import { siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
+
+import { PostList } from '../../components/PostList';
 
 interface Props {
   params: { tag: string };
@@ -30,7 +31,7 @@ export async function generateMetadata(
   const metaTitle = `Posts about ${tagInfo.displayName}`;
 
   return {
-    title: `${metaTitle} | ${siteMetadata.metaTitle}`,
+    title: `${metaTitle} | ${siteConfig.defaultMetaTitle}`,
     openGraph: {
       ...parentOpenGraph,
       title: metaTitle,

src/app/layout.tsx

@@ -4,7 +4,7 @@ import { Analytics } from '@vercel/analytics/react';
 
 import { PageLayout } from '~/components/layout/PageLayout';
 
-import { authorMetadata, siteMetadata } from '~/config/metadata';
+import { siteConfig } from '~/config/site';
 import { clsxm } from '~/utils/clsxm';
 
 import { fontSans } from './fonts';
@@ -18,9 +18,9 @@ interface Props {
 }
 
 export const metadata: Metadata = {
-  metadataBase: new URL(siteMetadata.siteUrl),
-  title: siteMetadata.metaTitle,
-  description: siteMetadata.metaDescription,
+  metadataBase: new URL(siteConfig.siteUrl),
+  title: siteConfig.defaultMetaTitle,
+  description: siteConfig.defaultMetaDescription,
   icons: {
     icon: [
       {
@@ -41,24 +41,24 @@ export const metadata: Metadata = {
     'msapplication-TileColor': '#fff',
   },
   openGraph: {
-    title: siteMetadata.metaTitle,
-    description: siteMetadata.metaDescription,
-    url: siteMetadata.siteUrl,
-    siteName: siteMetadata.siteName,
+    title: siteConfig.defaultMetaTitle,
+    description: siteConfig.defaultMetaDescription,
+    url: siteConfig.siteUrl,
+    siteName: siteConfig.siteName,
     images: [
       {
-        url: siteMetadata.images.socialBanner,
+        url: siteConfig.images.socialBanner,
         width: 1200,
         height: 600,
         alt: 'Banner for melanies.dev',
       },
     ],
-    locale: siteMetadata.locale,
+    locale: siteConfig.locale,
     type: 'website',
   },
   twitter: {
     card: 'summary_large_image',
-    creator: `@${authorMetadata.social.twitter}`,
+    creator: `@${siteConfig.author.social.twitter}`,
   },
 };
 

src/app/projects/[slug]/page.tsx

@@ -1,9 +1,9 @@
 import type { Metadata, ResolvingMetadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { getAllProjects, getProject } from '~/content/project/client';
+import { getAllProjects, getProject } from '~/entities/project';
 
-import { ProjectPage } from './ProjectPage';
+import { ProjectPage } from '../components/ProjectPage';
 
 interface Props {
   params: { slug: string };

src/app/projects/[slug]/ProjectPage.tsx → src/app/projects/components/ProjectPage.tsx

@@ -7,9 +7,10 @@ import { Prose } from '~/components/Prose';
 import { Spacer } from '~/components/Spacer';
 import { TechStack } from '~/components/TechStack';
 
-import type { Project } from '~/content/project';
-import { DemoButton } from '~/content/project/components/DemoButton';
-import { SourceCodeButton } from '~/content/project/components/SourceCodeButton';
+import type { Project } from '~/entities/project';
+
+import { DemoButton } from './DemoButton';
+import { SourceCodeButton } from './SourceCodeButton';
 
 interface Props {
   project: Project;