chore: update dependencies, enhance theme configuration, and improve layout structure

- Bump versions of several dependencies including @astrojs/mdx, astro, and vite.
- Refactor theme configuration to include code themes for light and dark modes.
- Update layout structure for better responsiveness and clarity.
- Enable JavaScript in TypeScript configuration for broader compatibility.
- Add new font styles and improve font-face definitions.
- Clean up unused imports and commented-out code in index.astro.
- Introduce global type definitions for Attributify attributes in JSX.

astro.config.ts

@@ -1,5 +1,3 @@
-// Plugins
-import type { ThemeConfig } from './src/types'
 import mdx from '@astrojs/mdx'
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
@@ -7,21 +5,21 @@ import { transformerCopyButton } from '@rehype-pretty/transformers'
 import compress from 'astro-compress'
 import robotsTxt from 'astro-robots-txt'
 import { defineConfig } from 'astro/config'
-// Rehype
+// Rehype plugins
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeComponents from 'rehype-components'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
-// Remark
+// Remark plugins
 import remarkDirective from 'remark-directive'
 import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-directives'
 import remarkMath from 'remark-math'
 import remarkSectionize from 'remark-sectionize'
-// Markdown Extensions
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
+// Local plugins
 import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.mjs'
 import { GithubCardComponent } from './src/plugins/rehype-component-github-card.mjs'
 import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.js'
@@ -29,8 +27,9 @@ import { remarkExcerpt } from './src/plugins/remark-excerpt.js'
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
 import { langMap } from './src/utils/ui'
 
-const { url }: { url: ThemeConfig['site']['url'] } = themeConfig.site
-const { locale }: { locale: ThemeConfig['global']['locale'] } = themeConfig.global
+const { url } = themeConfig.site
+const { light, dark } = themeConfig.color
+const { locale } = themeConfig.global
 
 export default defineConfig({
   site: url,
@@ -43,32 +42,21 @@ export default defineConfig({
     defaultLocale: locale,
   },
   integrations: [
+    UnoCSS({ injectReset: true }),
+    mdx(),
     partytown({
       config: {
         forward: ['dataLayer.push'],
       },
     }),
-    UnoCSS({ injectReset: true }),
-    mdx(),
-    sitemap({
-      changefreq: 'weekly',
-      priority: 0.7,
-      lastmod: new Date(),
-    }),
+    sitemap(),
     robotsTxt({
-      policy: [{ userAgent: '*', allow: '/' }],
       sitemap: true,
     }),
     compress({
       HTML: {
         'html-minifier-terser': {
           removeAttributeQuotes: false,
-          collapseWhitespace: true,
-          removeComments: true,
-          removeEmptyAttributes: true,
-          removeRedundantAttributes: true,
-          minifyCSS: true,
-          minifyJS: true,
           removeScriptTypeAttributes: true,
           removeStyleLinkTypeAttributes: true,
           sortAttributes: true,
@@ -80,21 +68,23 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       remarkMath,
+      remarkDirective,
+      remarkGithubAdmonitionsToDirectives,
+      parseDirectiveNode,
+      remarkSectionize,
       remarkReadingTime,
       remarkExcerpt,
-      remarkSectionize,
-      remarkGithubAdmonitionsToDirectives,
-      remarkDirective,
-      parseDirectiveNode,
     ],
     rehypePlugins: [
-      rehypeKatex,
       rehypeSlug,
+      rehypeKatex,
       [
         rehypePrettyCode,
         {
-          // TODO: Add auto theme switcher
-          theme: 'github-dark',
+          theme: {
+            dark: dark.codeTheme,
+            light: light.codeTheme,
+          },
           transformers: [
             transformerCopyButton({
               visibility: 'hover',
@@ -116,11 +106,11 @@ export default defineConfig({
         {
           components: {
             github: GithubCardComponent,
-            note: (props, children) => AdmonitionComponent(props, 'note', children),
-            tip: (props, children) => AdmonitionComponent(props, 'tip', children),
-            important: (props, children) => AdmonitionComponent(props, 'important', children),
-            caution: (props, children) => AdmonitionComponent(props, 'caution', children),
-            warning: (props, children) => AdmonitionComponent(props, 'warning', children),
+            note: (properties: { 'has-directive-label'?: boolean }, children: any[]) => AdmonitionComponent(properties, children, 'note'),
+            tip: (properties: { 'has-directive-label'?: boolean }, children: any[]) => AdmonitionComponent(properties, children, 'tip'),
+            important: (properties: { 'has-directive-label'?: boolean }, children: any[]) => AdmonitionComponent(properties, children, 'important'),
+            caution: (properties: { 'has-directive-label'?: boolean }, children: any[]) => AdmonitionComponent(properties, children, 'caution'),
+            warning: (properties: { 'has-directive-label'?: boolean }, children: any[]) => AdmonitionComponent(properties, children, 'warning'),
           },
         },
       ],