polishing

packages/blog/astro.config.mjs

@@ -11,7 +11,7 @@ import rehypeAddClasses from 'rehype-add-classes';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
-import { PROFILE } from './src/shared/Profile';
+import { PROFILE } from './src/shared/profile';
 
 function readingTimePlugin() {
   return function (tree, { data }) {

packages/blog/package.json

@@ -15,10 +15,10 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.0.7",
-    "@astrojs/rss": "4.0.0",
+    "@astrojs/rss": "4.0.1",
     "@astrojs/sitemap": "^3.0.3",
     "@astrojs/tailwind": "^5.0.3",
-    "@fontsource/open-sans": "^5.0.17",
+    "@fontsource/open-sans": "^5.0.18",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@tailwindcss/typography": "^0.5.10",
     "@vercel/analytics": "^1.1.1",
@@ -38,21 +38,21 @@
     "tailwindcss": "^3.3.6"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.3.1",
+    "@astrojs/check": "^0.3.2",
     "@astrojs/upgrade": "^0.2.1",
     "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
-    "astro": "4.0.2",
+    "astro": "4.0.4",
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
     "postcss-nested": "^6.0.1",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "prettier-plugin-astro": "^0.12.2",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.9",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   }
 }

packages/blog/src/shared/components/atoms/Badge.tsx → packages/blog/src/components/atoms/Badge.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME, type ThemedColor } from '../../shared/theme';
 
 export function Badge({
   hashValue = '',
@@ -10,7 +10,7 @@ export function Badge({
   return (
     <span
       className={classNames(
-        THEME.text,
+        ...THEME.primaryText,
         'inline-flex items-center rounded-full text-xs px-2.5 py-0.5 font-semibold',
         ...colors,
       )}>
@@ -32,7 +32,7 @@ function hashToColor(value: string): readonly [string, string] {
   return COLORS[hash % COLORS.length];
 }
 
-const COLORS = [
+const COLORS: ThemedColor<string>[] = [
   ['bg-slate-100', 'dark:bg-slate-800'],
   ['bg-gray-100', 'dark:bg-gray-800'],
   ['bg-zinc-100', 'dark:bg-zinc-800'],
@@ -55,4 +55,4 @@ const COLORS = [
   ['bg-fuchsia-100', 'dark:bg-fuchsia-800'],
   ['bg-pink-100', 'dark:bg-pink-800'],
   ['bg-rose-100', 'dark:bg-rose-800'],
-] as const;
+];

packages/blog/src/shared/components/atoms/Body.tsx → packages/blog/src/components/atoms/Body.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export function Body({
   children,
   level = 'md',
 }: PropsWithChildren<BodyProps>): ReactElement {
   return (
     <span
-      className={classNames(THEME.text, {
+      className={classNames(...THEME.primaryText, {
         'text-sm font-light': level === 'sm',
       })}>
       {children}

packages/blog/src/components/atoms/Caption.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { THEME } from '../../shared/theme';
+
+export function Caption({ children }: PropsWithChildren): ReactElement {
+  return (
+    <span className={classNames('text-sm', THEME.secondaryText)}>
+      {children}
+    </span>
+  );
+}
+
+export interface CaptionPros {}

packages/blog/src/shared/components/atoms/Card.tsx → packages/blog/src/components/atoms/Card.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export interface CardProps
   extends Pick<HTMLAttributes<HTMLDivElement>, 'className'> {}
@@ -12,8 +12,8 @@ export function Card({
   return (
     <div
       className={classNames(
-        THEME.border,
-        THEME.background,
+        ...THEME.border,
+        ...THEME.background,
         'border rounded-md p-5 flex gap-3',
         className,
       )}>

packages/blog/src/shared/components/atoms/Divider.tsx → packages/blog/src/components/atoms/Divider.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { PropsWithChildren } from 'react';
 import { type ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export function Divider({
   isRight = true,
@@ -11,7 +11,7 @@ export function Divider({
   return (
     <div className="relative flex py-5 items-center">
       {isLeft && (
-        <div className={classNames(THEME.border, 'flex-grow border-t')} />
+        <div className={classNames(...THEME.border, 'flex-grow border-t')} />
       )}
       <div
         className={classNames('flex-shrink', {
@@ -21,7 +21,7 @@ export function Divider({
         {children}
       </div>
       {isRight && (
-        <div className={classNames(THEME.border, 'flex-grow border-t')} />
+        <div className={classNames(...THEME.border, 'flex-grow border-t')} />
       )}
     </div>
   );

packages/blog/src/shared/components/atoms/Headline.tsx → packages/blog/src/components/atoms/Headline.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export function Headline({
   children,
 }: PropsWithChildren<HeadlineProps>): ReactElement {
   return (
-    <h3 className={classNames('text-2xl font-semibold', THEME.text)}>
+    <h3 className={classNames('text-2xl font-semibold', ...THEME.primaryText)}>
       {children}
     </h3>
   );

packages/blog/src/shared/components/atoms/Link.tsx → packages/blog/src/components/atoms/Link.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 import { type ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
 

packages/blog/src/shared/components/atoms/NavLink.tsx → packages/blog/src/components/atoms/NavLink.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 import { type ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
-import { Link } from './Link.tsx';
+import { THEME } from '../../shared/theme.ts';
+import { Link } from './Link';
 
 export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   isActive?: boolean;

packages/blog/src/shared/components/atoms/Strong.tsx → packages/blog/src/components/atoms/Strong.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export function Strong({
   children,
 }: PropsWithChildren<StrongProps>): ReactElement {
   return (
-    <strong className={classNames(THEME.text, 'font-semibold')}>
+    <strong className={classNames(...THEME.primaryText, 'font-semibold')}>
       {children}
     </strong>
   );

packages/blog/src/shared/components/atoms/Title.tsx → packages/blog/src/components/atoms/Title.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
+import { THEME } from '../../shared/theme';
 
 export function Title({
   children,
   inline,
 }: PropsWithChildren<TitleProps>): ReactElement {
   return (
     <h6
-      className={classNames(THEME.text, 'text-lg font-medium', {
+      className={classNames(...THEME.primaryText, 'text-lg font-medium', {
         'inline-block': inline,
         'mb-0': inline,
       })}>

packages/blog/src/shared/components/molecules/PostGridItem.tsx → packages/blog/src/components/molecules/PostGridItem.tsx

@@ -1,7 +1,7 @@
 import type { CollectionEntry } from 'astro:content';
 import type { ReactElement } from 'react';
-import { PostsService } from '../../PostsService.ts';
-import { Card } from '../atoms/Card.tsx';
+import { PostsService } from '../../shared/posts.service';
+import { Card } from '../atoms/Card';
 
 export interface PostListItemProps {
   post: CollectionEntry<'posts'>;

packages/blog/src/shared/components/molecules/PostListItem.tsx → packages/blog/src/components/molecules/PostListItem.tsx

@@ -1,8 +1,9 @@
 import type { CollectionEntry } from 'astro:content';
 import classNames from 'classnames';
 import type { HTMLAttributes, ReactElement } from 'react';
-import { PostsService } from '../../PostsService';
-import { THEME } from '../../Theme.ts';
+import { PostsService } from '../../shared/posts.service';
+import { THEME } from '../../shared/theme';
+
 export function PostListItem({
   className,
   post,
@@ -12,12 +13,12 @@ export function PostListItem({
     <a
       href={PostsService.getFullPath(post)}
       className={classNames(
-        THEME.text,
+        ...THEME.primaryText,
         THEME.linkDecoration,
         'flex gap-3 items-center hover:text-cyan-500',
         className,
       )}>
-      <span className="flex-1 truncate">{post.data.title}</span>
+      <span className="flexyarn -1 truncate">{post.data.title}</span>
       <span className="whitespace-nowrap text-xs">
         {PostsService.formatPublishedAt(post, publishedAtFormat)}
       </span>

packages/blog/src/shared/components/organisms/Footer.tsx → packages/blog/src/components/organisms/Footer.tsx

@@ -1,15 +1,16 @@
 import classNames from 'classnames';
 import type { ReactElement } from 'react';
-import { PROFILE } from '../../Profile';
-import { THEME } from '../../Theme.ts';
+import { PROFILE } from '../../shared/profile';
+import { THEME } from '../../shared/theme';
 import { Icon } from '../atoms/Icon';
 
 export function Footer(): ReactElement {
   return (
     <footer
       className={classNames(
-        'flex gap-1 items-center p-4 border-t text-slate-500',
-        THEME.border,
+        'flex gap-1 items-center p-4 border-t',
+        ...THEME.border,
+        THEME.secondaryText,
       )}>
       <span className="text-sm">{PROFILE.copyright}</span>
 

packages/blog/src/shared/components/organisms/Header.tsx → packages/blog/src/components/organisms/Header.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import type { ReactElement } from 'react';
-import { PROFILE } from '../../Profile';
-import { THEME } from '../../Theme.ts';
-import { NavLink } from '../atoms/NavLink.tsx';
-import { ThemedImage } from '../atoms/ThemedImage.tsx';
+import { PROFILE } from '../../shared/profile';
+import { THEME } from '../../shared/theme';
+import { NavLink } from '../atoms/NavLink';
+import { ThemedImage } from '../atoms/ThemedImage';
 import HeaderLogo from './HeaderLogo.webp?url';
 import HeaderLogoDark from './HeaderLogoDark.webp?url';
 
@@ -12,7 +12,7 @@ export function Header({ currentPath }: HeaderProps): ReactElement {
     <header
       className={classNames(
         'flex gap-1 items-center p-4 border-b',
-        THEME.border,
+        ...THEME.border,
       )}>
       <nav>
         <a href="/">

packages/blog/src/shared/components/organisms/Intro.tsx → packages/blog/src/components/organisms/Intro.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
-import { PROFILE } from '../../Profile';
+import { PROFILE } from '../../shared/profile';
 import { Body } from '../atoms/Body';
-import { Strong } from '../atoms/Strong.tsx';
+import { Strong } from '../atoms/Strong';
 import { ThemedImage } from '../atoms/ThemedImage';
 import { StandOut } from '../molecules/StandOut';
 import IntroLogo from './IntroLogo.webp?url';

packages/blog/src/shared/components/organisms/Meta.tsx → packages/blog/src/components/organisms/Meta.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { PROFILE } from '../../Profile.ts';
+import { PROFILE } from '../../shared/profile';
 
 export function Meta({ title = PROFILE.title }: MetaProps): ReactElement {
   const fullTitle = title === PROFILE.title ? title : `vorant94 | ${title}`;

packages/blog/src/shared/components/organisms/PostFrontmatter.tsx → packages/blog/src/components/organisms/PostFrontmatter.tsx

@@ -1,8 +1,8 @@
 import type { CollectionEntry } from 'astro:content';
 import type { ReactElement } from 'react';
-import { PostsService } from '../../PostsService.ts';
-import { Badge } from '../atoms/Badge.tsx';
-import { Caption } from '../atoms/Caption.tsx';
+import { PostsService } from '../../shared/posts.service';
+import { Badge } from '../atoms/Badge';
+import { Caption } from '../atoms/Caption';
 
 export interface PostFrontmatterProps {
   post: CollectionEntry<'posts'>;

packages/blog/src/shared/components/organisms/RelatedPosts.tsx → packages/blog/src/components/organisms/RelatedPosts.tsx

@@ -1,7 +1,8 @@
 import type { CollectionEntry } from 'astro:content';
+import classNames from 'classnames';
 import type { ReactElement } from 'react';
-import { THEME } from '../../Theme.ts';
-import { Title } from '../atoms/Title.tsx';
+import { THEME } from '../../shared/theme';
+import { Title } from '../atoms/Title';
 import { StandOut } from '../molecules/StandOut';
 import { PostList } from './PostList';
 import './RelatedPosts.module.css';
@@ -13,7 +14,7 @@ export interface RelatedPostsProps {
 export function RelatedPosts({ posts }: RelatedPostsProps): ReactElement {
   return (
     <StandOut className="flex-col">
-      <details className={THEME.text}>
+      <details className={classNames(...THEME.primaryText)}>
         <summary className="hover:cursor-pointer">
           <Title inline={true}>
             <span className="pl-2">Related posts</span>

packages/blog/src/shared/components/organisms/Seo.tsx → packages/blog/src/components/organisms/Seo.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { PROFILE } from '../../Profile.ts';
+import { PROFILE } from '../../shared/profile';
 
 export function Seo({
   currentPath,

packages/blog/src/shared/components/templates/Layout.astro → packages/blog/src/components/templates/Layout.astro

@@ -2,9 +2,9 @@
 import { Header } from '../organisms/Header';
 import { Footer } from '../organisms/Footer';
 import { Background } from '../molecules/Background';
-import { removeTrailingSlash } from '../../utils/RemoveTrailingSlash';
+import { removeTrailingSlash } from '../../shared/remove-trailing-slash';
 import { Analytics } from '@vercel/analytics/react';
-import { THEME } from '../../Theme';
+import { THEME } from '../../shared/theme';
 import { Seo } from '../organisms/Seo';
 import { Meta } from '../organisms/Meta';
 
@@ -37,7 +37,7 @@ const currentPath = removeTrailingSlash(Astro.url.pathname);
   </head>
   <body
     class:list={[
-      THEME.background,
+      ...THEME.background,
       'flex flex-col min-h-[calc(100dvh)] mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl',
     ]}>
     {isProd && <Analytics client:only="react" />}