From c991fa8bad63611fe4f354a3ec869c8803a6d667 Mon Sep 17 00:00:00 2001 From: Mordechai Dror Date: Sat, 13 Apr 2024 16:05:23 +0300 Subject: [PATCH] replace getPostUrl with getContentUrl --- .../src/content/models/content.model.ts | 15 +++++++++ .../src/home/handlers/rss.handler.tsx | 5 +-- .../src/posts/components/PinnedPosts.tsx | 8 ++--- .../posts/components/PostTiledListItem.tsx | 26 +++++++-------- .../src/posts/components/RelatedPosts.tsx | 6 ++-- .../src/posts/handlers/post.handler.tsx | 32 ++++++++++--------- .../src/posts/handlers/posts.handler.tsx | 5 ++- .../src/posts/handlers/tag.handler.tsx | 5 ++- .../blog-ssr/src/posts/models/post.model.ts | 25 --------------- .../components/ProjectTiledGridCell.tsx | 11 +++---- .../components/ProjectTiledListItem.tsx | 9 +++--- 11 files changed, 67 insertions(+), 80 deletions(-) diff --git a/packages/blog-ssr/src/content/models/content.model.ts b/packages/blog-ssr/src/content/models/content.model.ts index 1a133f53..bec8f8a1 100644 --- 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 index 87875207..8d7433c2 100644 --- 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 index 8736c225..49eac306 100644 --- 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 = function ({ posts }) { return ( @@ -17,7 +17,7 @@ export const PinnedPosts: FC = function ({ posts }) { diff --git a/packages/blog-ssr/src/posts/components/PostTiledListItem.tsx b/packages/blog-ssr/src/posts/components/PostTiledListItem.tsx index 85d24db3..09788e90 100644 --- 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 = function ({ post, }) { - const cover = getPostCover(post); - return (
  • {/* adding display: flex here breaks inline-block hack from below */}
    @@ -34,12 +32,12 @@ export const PostTiledListItem: FC = function ({ {format(post.matter.publishedAt, PublishedAtFormat.FULL)}
    - {cover && ( + {isPostWithCover(post) && ( )} diff --git a/packages/blog-ssr/src/posts/components/RelatedPosts.tsx b/packages/blog-ssr/src/posts/components/RelatedPosts.tsx index a00f0a2f..b0d99c96 100644 --- 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 = function ({ posts }) { return ( @@ -31,7 +31,7 @@ export const RelatedPosts: FC = function ({ posts }) { key={post.id} left={post.matter.title} right={format(post.matter.publishedAt, PublishedAtFormat.SHORT)} - href={getPostUrl(post)} + href={getContentUrl(post)} /> ))} diff --git a/packages/blog-ssr/src/posts/handlers/post.handler.tsx b/packages/blog-ssr/src/posts/handlers/post.handler.tsx index a5e1d15e..c3f437a8 100644 --- 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) { + currentPath={getContentUrl(data)}>
    - {cover && ( + {isPostWithCover(data) && (
    )} diff --git a/packages/blog-ssr/src/posts/handlers/posts.handler.tsx b/packages/blog-ssr/src/posts/handlers/posts.handler.tsx index ecf6f07d..c2286c1c 100644 --- 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)} /> ))} diff --git a/packages/blog-ssr/src/posts/handlers/tag.handler.tsx b/packages/blog-ssr/src/posts/handlers/tag.handler.tsx index ccbda1b4..9bc25a11 100644 --- 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)} /> ))} diff --git a/packages/blog-ssr/src/posts/models/post.model.ts b/packages/blog-ssr/src/posts/models/post.model.ts index 126a3769..1d00e48d 100644 --- 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 index b7b00dac..0f5ad030 100644 --- 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 = 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', )}>
    = 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>