replace getPostUrl with getContentUrl

vorant94 · Apr 13, 2024 · c991fa8 · c991fa8
1 parent be970b8
commit c991fa8
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 80 deletions.
diff --git a/packages/blog-ssr/src/content/models/content.model.ts b/packages/blog-ssr/src/content/models/content.model.ts
@@ -18,3 +18,18 @@ export enum PublishedAtFormat {
   SHORT = 'MMM dd',
   YEAR = 'yyyy',
 }
+
+export function getContentUrl(content: ContentModel): string {
+  return `/${content.path}`;
+}
+
+export function getContentAssetUrl(
+  content: ContentModel,
+  asset?: string | null | void,
+): string | undefined {
+  if (!asset) {
+    return;
+  }
+
+  return `${getContentUrl(content)}/${asset}`;
+}
diff --git a/packages/blog-ssr/src/home/handlers/rss.handler.tsx b/packages/blog-ssr/src/home/handlers/rss.handler.tsx
@@ -1,6 +1,7 @@
 import { profile } from '@/config/index.js';
+import { getContentUrl } from '@/content/index.js';
 import { contentType, statusCode } from '@/network/index.js';
-import { getPostUrl, queryAllPosts } from '@/posts/index.js';
+import { queryAllPosts } from '@/posts/index.js';
 import type { FastifyPluginAsync } from 'fastify';
 import RSS from 'rss';
 
@@ -19,7 +20,7 @@ export const rssHandler: FastifyPluginAsync = async function (app) {
         title: post.matter.title,
         description: post.matter.description,
         date: post.matter.publishedAt,
-        url: `${profile.baseUrl}${getPostUrl(post)}`,
+        url: `${profile.baseUrl}${getContentUrl(post)}`,
         categories: post.matter.tags,
         author: profile.email,
       });

diff --git a/packages/blog-ssr/src/posts/components/PinnedPosts.tsx b/packages/blog-ssr/src/posts/components/PinnedPosts.tsx
@@ -1,8 +1,8 @@
-import { PublishedAtFormat } from '@/content/index.js';
-import { ArchiveListItem, StandOut, cn } from '@/ui/index.js';
+import { getContentUrl, PublishedAtFormat } from '@/content/index.js';
+import { ArchiveListItem, cn, StandOut } from '@/ui/index.js';
 import { format } from 'date-fns';
 import type { FC } from 'react';
-import { getPostUrl, type PostModel } from '../models/post.model.js';
+import { type PostModel } from '../models/post.model.js';
 
 export const PinnedPosts: FC<PinnedPostsProps> = function ({ posts }) {
   return (
@@ -17,7 +17,7 @@ export const PinnedPosts: FC<PinnedPostsProps> = function ({ posts }) {
             <ArchiveListItem
               left={post.matter.title}
               right={format(post.matter.publishedAt, PublishedAtFormat.SHORT)}
-              href={getPostUrl(post)}
+              href={getContentUrl(post)}
               className={cn(`flex-1 !py-0`)}
             />
           </span>

diff --git a/packages/blog-ssr/src/posts/components/PostTiledListItem.tsx b/packages/blog-ssr/src/posts/components/PostTiledListItem.tsx
@@ -1,25 +1,23 @@
-import { PublishedAtFormat } from '@/content/index.js';
-import { Caption, Link, ThemedImage, Title, cn } from '@/ui/index.js';
+import {
+  getContentAssetUrl,
+  getContentUrl,
+  PublishedAtFormat,
+} from '@/content/index.js';
+import { Caption, cn, Link, ThemedImage, Title } from '@/ui/index.js';
 import { format } from 'date-fns';
 import type { FC } from 'react';
-import {
-  getPostCover,
-  getPostUrl,
-  type PostModel,
-} from '../models/post.model.js';
+import { isPostWithCover, type PostModel } from '../models/post.model.js';
 
 export const PostTiledListItem: FC<PostTiledListItemProps> = function ({
   post,
 }) {
-  const cover = getPostCover(post);
-
   return (
     <li
       className={cn(
         'flex flex-col text-medium rounded-md duration-100 border border-transparent group cursor-pointer hover:border-slate-300 hover:dark:border-slate-600 hover:shadow-md hover:scale-105',
       )}>
       <Link
-        href={getPostUrl(post)}
+        href={getContentUrl(post)}
         className={cn('flex items-center p-3')}>
         {/* adding display: flex here breaks inline-block hack from below */}
         <div className={cn('flex-1 overflow-hidden')}>
@@ -34,12 +32,12 @@ export const PostTiledListItem: FC<PostTiledListItemProps> = function ({
             {format(post.matter.publishedAt, PublishedAtFormat.FULL)}
           </Caption>
         </div>
-        {cover && (
+        {isPostWithCover(post) && (
           <ThemedImage
             className="h-20 w-20 object-scale-down"
-            src={cover.coverImage}
-            srcDark={cover.coverImageDark}
-            alt={cover.coverImageAlt}
+            src={getContentAssetUrl(post, post.matter.coverImage)}
+            srcDark={getContentAssetUrl(post, post.matter.coverImageDark)}
+            alt={post.matter.coverImageAlt}
           />
         )}
       </Link>

diff --git a/packages/blog-ssr/src/posts/components/RelatedPosts.tsx b/packages/blog-ssr/src/posts/components/RelatedPosts.tsx
@@ -1,4 +1,4 @@
-import { PublishedAtFormat } from '@/content/index.js';
+import { getContentUrl, PublishedAtFormat } from '@/content/index.js';
 import {
   ArchiveList,
   ArchiveListItem,
@@ -8,7 +8,7 @@ import {
 } from '@/ui/index.js';
 import { format } from 'date-fns';
 import type { FC } from 'react';
-import { getPostUrl, type PostModel } from '../models/post.model.js';
+import { type PostModel } from '../models/post.model.js';
 
 export const RelatedPosts: FC<RelatedPostsProps> = function ({ posts }) {
   return (
@@ -31,7 +31,7 @@ export const RelatedPosts: FC<RelatedPostsProps> = function ({ posts }) {
               key={post.id}
               left={post.matter.title}
               right={format(post.matter.publishedAt, PublishedAtFormat.SHORT)}
-              href={getPostUrl(post)}
+              href={getContentUrl(post)}
             />
           ))}
         </ArchiveList>

diff --git a/packages/blog-ssr/src/posts/handlers/post.handler.tsx b/packages/blog-ssr/src/posts/handlers/post.handler.tsx
@@ -1,25 +1,25 @@
-import { PublishedAtFormat } from '@/content/index.js';
+import {
+  getContentAssetUrl,
+  getContentUrl,
+  PublishedAtFormat,
+} from '@/content/index.js';
 import { isErrnoException } from '@/filesystem/index.js';
 import { contentType, sendNotFound, statusCode } from '@/network/index.js';
 import {
   Caption,
+  cn,
   DefaultLayout,
+  render,
   Text,
   ThemedImage,
   Title,
-  cn,
-  render,
 } from '@/ui/index.js';
 import { format } from 'date-fns';
 import type { FastifyPluginAsync } from 'fastify';
 import type { VFile } from 'vfile';
 import { RelatedPosts } from '../components/RelatedPosts.js';
 import { Tag } from '../components/Tag.js';
-import {
-  getPostCover,
-  getPostUrl,
-  type PostModel,
-} from '../models/post.model.js';
+import { isPostWithCover, type PostModel } from '../models/post.model.js';
 import { queryPost, queryPostsBulk } from '../utils/post.query.js';
 
 export const postHandler: FastifyPluginAsync = async function (app) {
@@ -39,7 +39,6 @@ export const postHandler: FastifyPluginAsync = async function (app) {
 
       // TODO: make VFile generic, didn't work first time, because Vfile.data is type and not interface
       const data = post.data as PostModel;
-      const cover = getPostCover(data);
       const relatedPosts = data.matter.related
         ? await queryPostsBulk(data.matter.related)
         : [];
@@ -52,16 +51,19 @@ export const postHandler: FastifyPluginAsync = async function (app) {
             <DefaultLayout
               title={data.matter.title}
               description={data.matter.description}
-              image={cover?.coverImage}
+              image={getContentAssetUrl(data, data.matter?.coverImage)}
               type={`article`}
-              currentPath={getPostUrl(data)}>
+              currentPath={getContentUrl(data)}>
               <div className={cn(`flex flex-col gap-6`)}>
-                {cover && (
+                {isPostWithCover(data) && (
                   <div className={cn(`self-center`)}>
                     <ThemedImage
-                      src={cover.coverImage}
-                      srcDark={cover.coverImageDark}
-                      alt={cover.coverImageAlt}
+                      src={getContentAssetUrl(data, data.matter.coverImage)}
+                      srcDark={getContentAssetUrl(
+                        data,
+                        data.matter.coverImageDark,
+                      )}
+                      alt={data.matter.coverImageAlt}
                     />
                   </div>
                 )}

diff --git a/packages/blog-ssr/src/posts/handlers/posts.handler.tsx b/packages/blog-ssr/src/posts/handlers/posts.handler.tsx
@@ -1,4 +1,4 @@
-import { PublishedAtFormat } from '@/content/index.js';
+import { getContentUrl, PublishedAtFormat } from '@/content/index.js';
 import { contentType, statusCode } from '@/network/index.js';
 import {
   ArchiveList,
@@ -9,7 +9,6 @@ import {
 import { format } from 'date-fns';
 import type { FastifyPluginAsync } from 'fastify';
 import { groupBy } from 'lodash-es';
-import { getPostUrl } from '../models/post.model.js';
 import { queryAllPosts } from '../utils/post.query.js';
 
 export const postsHandler: FastifyPluginAsync = async function (app) {
@@ -41,7 +40,7 @@ export const postsHandler: FastifyPluginAsync = async function (app) {
                       post.matter.publishedAt,
                       PublishedAtFormat.SHORT,
                     )}
-                    href={getPostUrl(post)}
+                    href={getContentUrl(post)}
                   />
                 ))}
               </ArchiveList>

diff --git a/packages/blog-ssr/src/posts/handlers/tag.handler.tsx b/packages/blog-ssr/src/posts/handlers/tag.handler.tsx
@@ -1,4 +1,4 @@
-import { PublishedAtFormat } from '@/content/index.js';
+import { getContentUrl, PublishedAtFormat } from '@/content/index.js';
 import { contentType, statusCode } from '@/network/index.js';
 import {
   ArchiveList,
@@ -8,7 +8,6 @@ import {
 } from '@/ui/index.js';
 import { format } from 'date-fns';
 import type { FastifyPluginAsync } from 'fastify';
-import { getPostUrl } from '../models/post.model.js';
 import { queryAllPosts } from '../utils/post.query.js';
 
 export const tagHandler: FastifyPluginAsync = async function (app) {
@@ -36,7 +35,7 @@ export const tagHandler: FastifyPluginAsync = async function (app) {
                     post.matter.publishedAt,
                     PublishedAtFormat.SHORT,
                   )}
-                  href={getPostUrl(post)}
+                  href={getContentUrl(post)}
                 />
               ))}
             </ArchiveList>

diff --git a/packages/blog-ssr/src/posts/models/post.model.ts b/packages/blog-ssr/src/posts/models/post.model.ts
@@ -31,28 +31,3 @@ export interface PostWithCoverModel extends PostModel {
 export function isPostWithCover(post: PostModel): post is PostWithCoverModel {
   return 'coverImage' in post.matter;
 }
-
-export function getPostUrl(post: PostModel): string {
-  return `/posts/${post.id}`;
-}
-
-export function getPostCover(
-  post: PostModel,
-):
-  | Pick<
-      PostWithCoverModel['matter'],
-      'coverImage' | 'coverImageDark' | 'coverImageAlt'
-    >
-  | undefined {
-  if (!isPostWithCover(post)) {
-    return;
-  }
-
-  return {
-    coverImage: `/posts/${post.id}/${post.matter.coverImage}`,
-    coverImageDark: post.matter.coverImageDark
-      ? `/posts/${post.id}/${post.matter.coverImageDark}`
-      : null,
-    coverImageAlt: post.matter.coverImageAlt,
-  };
-}
diff --git a/packages/blog-ssr/src/projects/components/ProjectTiledGridCell.tsx b/packages/blog-ssr/src/projects/components/ProjectTiledGridCell.tsx
@@ -1,3 +1,4 @@
+import { getContentAssetUrl, getContentUrl } from '@/content/index.js';
 import { Caption, Link, ThemedImage, Title, cn } from '@/ui/index.js';
 import type { FC } from 'react';
 import type { ProjectModel } from '../models/project.model.js';
@@ -12,16 +13,12 @@ export const ProjectTiledGridCell: FC<ProjectTiledGridCellProps> = function ({
         'flex h-24 items-center justify-center relative overflow-hidden rounded-md duration-100 border border-transparent group cursor-pointer hover:border-slate-300 hover:dark:border-slate-600 hover:shadow-md hover:scale-105',
       )}>
       <Link
-        href={`/projects/${project.id}`}
+        href={getContentUrl(project)}
         className={cn('flex items-center p-3 gap-2')}>
         <ThemedImage
           className={cn('h-12 w-12 object-scale-down')}
-          src={`/projects/${project.id}/${project.matter.logo}`}
-          srcDark={
-            project.matter.logoDark
-              ? `/projects/${project.id}/${project.matter.logoDark}`
-              : null
-          }
+          src={getContentAssetUrl(project, project.matter.logo)}
+          srcDark={getContentAssetUrl(project, project.matter.logoDark)}
         />
         <div className={cn('flex-1')}>
           <Title

diff --git a/packages/blog-ssr/src/projects/components/ProjectTiledListItem.tsx b/packages/blog-ssr/src/projects/components/ProjectTiledListItem.tsx
@@ -1,3 +1,4 @@
+import { getContentAssetUrl, getContentUrl } from '@/content/index.js';
 import {
   ButtonLink,
   Caption,
@@ -22,8 +23,8 @@ export const ProjectTiledListItem: FC<ProjectTiledListItemProps> = function ({
   return (
     <Card
       style={{
-        '--bg-image-url': `url(/projects/${project.id}/${project.matter.logo})`,
-        '--bg-image-dark-url': `url(/projects/${project.id}/${project.matter.logoDark})`,
+        '--bg-image-url': `url(${getContentAssetUrl(project, project.matter.logo)})`,
+        '--bg-image-dark-url': `url(${getContentAssetUrl(project, project.matter.logoDark)})`,
       }}
       className={cn(
         'flex-1 flex-col bg-[image:var(--bg-image-url)] dark:bg-[image:var(--bg-image-dark-url)] bg-right bg-no-repeat bg-[length:auto_200%]',
@@ -36,7 +37,7 @@ export const ProjectTiledListItem: FC<ProjectTiledListItemProps> = function ({
         />
       }>
       <div className="flex gap-2 items-center z-10">
-        <Link href={`/projects/${project.id}`}>
+        <Link href={getContentUrl(project)}>
           <Title
             base="h6"
             className={cn('hover:text-inherit')}>
@@ -65,7 +66,7 @@ export const ProjectTiledListItem: FC<ProjectTiledListItemProps> = function ({
                 key={changelog.id}>
                 <Link
                   size="sm"
-                  href={`/projects/${project.id}/changelogs/${changelog.id}`}>
+                  href={getContentUrl(changelog)}>
                   v{changelog.matter.version}
                 </Link>
               </li>