group theme constants into THEME_CONFIG object, move types from const…

…ants to types/constants.ts

docs/todo3.md

@@ -315,4 +315,6 @@ refactor rss and json feed
 ProjectCard and test markdown
 PostCardSmall
 extract types from constants
+update yarn scripts for eslint, prettier, types
+404 page design
 ```

src/components/ThemeScript.astro

@@ -4,8 +4,8 @@ import * as themeConstants from '@/constants/themes';
 
 {/* Inlined to avoid flash of white content. */}
 <script is:inline define:vars={{ themeConstants }}>
-  const { LOCAL_STORAGE_THEME_KEY, MODES, THEME_ATTRIBUTE, THEME_CHANGE_EVENT, THEMES } =
-    themeConstants;
+  const { MODES, THEMES, THEME_CONFIG } = themeConstants;
+  const { THEME_ATTRIBUTE, THEME_CHANGE_EVENT, LOCAL_STORAGE_THEME_KEY } = THEME_CONFIG;
 
   // this is JavaScript, not TypeScript
   const defaultThemes = { light: THEMES[0], dark: THEMES[1] };

src/components/ThemeToggle.astro

@@ -11,7 +11,9 @@ import { Icon } from 'astro-icon/components';
 <script>
   import { getNextTheme } from 'utils/dom';
 
-  import { THEME_CHANGE_EVENT } from '@/constants/themes';
+  import { THEME_CONFIG } from '@/constants/themes';
+
+  const { THEME_CHANGE_EVENT } = THEME_CONFIG;
 
   class ThemeToggle extends HTMLElement {
     #controller: AbortController | undefined;

src/constants/collections.ts

@@ -54,8 +54,6 @@ export const CATEGORIES = [
   },
 ] as const;
 
-export type CategoryType = (typeof CATEGORIES)[number];
-
 // use imported images here
 export const DEFAULTS_POST = {
   TITLE: DEFAULT_METADATA.title,

src/constants/navigation.ts

@@ -31,5 +31,3 @@ export const NAVIGATION_ITEMS = [
   //   path: ROUTES.RESUME,
   // },
 ] as const;
-
-export type NavigationItem = (typeof NAVIGATION_ITEMS)[number];

src/constants/themes.ts

@@ -1,5 +1,3 @@
-export type Theme = (typeof THEMES)[number];
-
 export const MODES = {
   dark: 'dark',
   light: 'light',
@@ -29,8 +27,9 @@ export const THEMES = [
   },
 ] as const;
 
-export const MODE_CLASS = 'dark' as const;
-export const THEME_ATTRIBUTE = 'data-theme' as const;
-export const THEME_CHANGE_EVENT = 'theme-change' as const;
-
-export const LOCAL_STORAGE_THEME_KEY = 'theme' as const;
+export const THEME_CONFIG = {
+  MODE_CLASS: 'dark',
+  THEME_ATTRIBUTE: 'data-theme',
+  THEME_CHANGE_EVENT: 'theme-change',
+  LOCAL_STORAGE_THEME_KEY: 'theme',
+} as const;

src/modules/post/category.ts

@@ -1,7 +1,7 @@
 import { CATEGORIES } from '@/constants/collections';
 import { ROUTES } from '@/constants/routes';
 
-import type { CategoryType } from '@/constants/collections';
+import type { CategoryType } from '@/types/constants';
 import type { Filter, FilterLink, PostCollection } from '@/types/post';
 
 export const getAllCategories = (posts: PostCollection[]): string[] =>

src/types/constants.ts

@@ -0,0 +1,12 @@
+import type { CATEGORIES } from '@/constants/collections';
+import type { PAGE_METADATA } from '@/constants/metadata';
+import type { NAVIGATION_ITEMS } from '@/constants/navigation';
+import type { THEMES } from '@/constants/themes';
+
+export type CategoryType = (typeof CATEGORIES)[number];
+
+export type PageMetadataKey = keyof typeof PAGE_METADATA;
+
+export type NavigationItem = (typeof NAVIGATION_ITEMS)[number];
+
+export type Theme = (typeof THEMES)[number];

src/utils/dom.ts

@@ -1,6 +1,8 @@
-import { DEFAULT_THEMES, MODE_CLASS, MODES, THEME_ATTRIBUTE, THEMES } from '@/constants/themes';
+import { DEFAULT_THEMES, MODES, THEME_CONFIG, THEMES } from '@/constants/themes';
 
-import type { Theme } from '@/constants/themes';
+import type { Theme } from '@/types/constants';
+
+const { MODE_CLASS, THEME_ATTRIBUTE } = THEME_CONFIG;
 
 export const getCurrentMode = () =>
   document.documentElement.classList.contains(MODE_CLASS) ? MODES.dark : MODES.light;

src/utils/metadata.ts

@@ -1,8 +1,8 @@
 import { DEFAULT_METADATA, dotSeparator, PAGE_METADATA } from '@/constants/metadata';
 import { getOpenGraphImagePath } from './open-graph-image';
 
-import type { PageMetadataKey } from '@/constants/metadata';
 import type { Metadata } from '@/types/common';
+import type { PageMetadataKey } from '@/types/constants';
 
 export const getPageMetadata = (path: PageMetadataKey): Metadata => {
   const image = getOpenGraphImagePath(path);

src/utils/navigation.ts

@@ -1,7 +1,7 @@
 import { NAVIGATION_ITEMS } from '@/constants/navigation';
 import { ROUTES } from '@/constants/routes';
 
-import type { NavigationItem } from '@/constants/navigation';
+import type { NavigationItem } from '@/types/constants';
 
 export const getActiveNavItemPath = (routePathname: string): NavigationItem['path'] | undefined => {
   let activeNavItem: NavigationItem | undefined = undefined;