retypeset-odyssey 0.1.0

package/src/styles/markdown.css

@@ -0,0 +1,276 @@
+/*!
+ * Markdown Styles
+ * Project: https://github.com/sivan/heti
+ * Source: https://unpkg.com/heti/umd/heti.min.css
+ */
+
+/* Global Styles */
+.heti {
+  --at-apply: 'break-words leading-normal hyphens-auto cjk:tracking-wide';
+}
+
+/* Customized Post Title */
+.heti .post-title {
+  --at-apply: 'mb-2 mt-0 text-8.5 font-bold lg:text-9';
+}
+
+/* Headings */
+.heti :where(h1, h2, h3, h4, h5, h6) {
+  --at-apply: 'mb-4 mt-1.5em scroll-mt-20 font-semibold';
+}
+.heti :where(h1) {
+  --at-apply: 'text-7 c-primary';
+}
+.heti :where(h2) {
+  --at-apply: 'text-6 c-primary';
+}
+.heti :where(h3) {
+  --at-apply: 'text-5';
+}
+.heti :where(h4) {
+  --at-apply: 'text-4.5';
+}
+.heti :where(h5) {
+  --at-apply: 'text-4';
+}
+.heti :where(h6) {
+  --at-apply: 'font-normal';
+}
+.heti :where(h1, h2, h3) {
+  --at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-wider';
+}
+.heti :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
+  --at-apply: 'mt-4';
+}
+
+/* Paragraphs */
+.heti :where(p:not(.no-heti):not(.no-heti *)) {
+  --at-apply: 'mb-4 text-pretty cjk:text-justify';
+}
+
+/* Links */
+.heti :where(a:not(.no-heti):not(.no-heti *)) {
+  --at-apply: 'font-semibold tracking-normal underline underline-0.075em decoration-secondary/80 underline-offset-0.1em cjk:break-all';
+  --at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
+}
+
+/* Images */
+.heti :where(img:not(.no-heti):not(.no-heti *)) {
+  --at-apply: 'mx-auto cursor-zoom-in';
+}
+.heti :where(img:not(figure img):not(.no-heti):not(.no-heti *)) {
+  --at-apply: 'my-6';
+}
+.heti :where(figure) {
+  --at-apply: 'my-6 w-full';
+}
+.heti :where(figcaption) {
+  --at-apply: 'mt-2.5 text-center text-sm c-secondary/80';
+}
+.heti :is(h1, h2, h3, h4, h5, h6, img, figure) + :is(img, figure) {
+  --at-apply: 'mt-4';
+}
+.heti :is(img, figure):has(+ :is(img, figure)) {
+  --at-apply: 'mb-4';
+}
+
+/* Code Blocks */
+.heti :where(pre) {
+  --at-apply: 'overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
+  scrollbar-width: thin;
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
+  transition: scrollbar-color 0.3s ease-out;
+}
+.heti :where(pre):hover {
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
+}
+.heti pre code {
+  --at-apply: 'border-none bg-transparent p-0';
+}
+html.dark .heti pre span {
+  --at-apply: 'text-[var(--shiki-dark)]!';
+}
+.heti .code-block-wrapper {
+  --at-apply: 'my-6 relative';
+}
+.heti :is(h1, h2, h3, h4, h5, h6, .code-block-wrapper) + .code-block-wrapper {
+  --at-apply: 'mt-4';
+}
+.heti .code-block-wrapper:has(+ .code-block-wrapper) {
+  --at-apply: 'mb-4';
+}
+
+/* Inline Code */
+.heti :where(code) {
+  --at-apply: 'uno-round-border bg-secondary/5 px-0.4em py-0.15em text-0.85em tracking-normal cjk:break-all';
+  counter-reset: line;
+}
+.heti code span.line {
+  --at-apply: 'relative pl-8';
+}
+.heti code span.line::before {
+  --at-apply: 'absolute left-0 w-4 c-secondary/40 leading-1.9em';
+  content: counter(line);
+  counter-increment: line;
+  direction: rtl;
+}
+
+/* Blockquotes */
+.heti :where(blockquote) {
+  --at-apply: 'my-6 border-l-4 border-secondary/25 border-solid px-4 py-0.5 c-secondary/80';
+}
+.heti blockquote[class*="admonition-"] {
+  --at-apply: 'py-1.5 c-secondary';
+}
+.heti blockquote blockquote {
+  --at-apply: 'py-0';
+}
+.heti blockquote > :first-child {
+  --at-apply: 'mt-0';
+}
+.heti blockquote > :last-child {
+  --at-apply: 'mb-0';
+}
+.heti :is(h1, h2, h3, h4, h5, h6, blockquote) + blockquote {
+  --at-apply: 'mt-4';
+}
+.heti blockquote:has(+ blockquote) {
+  --at-apply: 'mb-4';
+}
+
+/* Tables */
+.heti :where(table) {
+  --at-apply: 'my-6 box-border block max-w-full table-fixed overflow-x-auto';
+  scrollbar-width: thin;
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
+  transition: scrollbar-color 0.3s ease-out;
+}
+.heti :where(table):hover {
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
+}
+.heti :where(th, td) {
+  --at-apply: 'border-b border-b-secondary/25 px-3 pb-1.5';
+}
+.heti tr :where(td:first-child, th:first-child) {
+  --at-apply: 'pl-0';
+}
+.heti tr :where(td:last-child, th:last-child) {
+  --at-apply: 'pr-0';
+}
+.heti :where(td) {
+  --at-apply: 'pt-1.5';
+}
+.heti tr:last-child :where(td) {
+  --at-apply: 'border-b-0';
+}
+.heti :is(h1, h2, h3, h4, h5, h6, table) + table {
+  --at-apply: 'mt-4';
+}
+.heti table:has(+ table) {
+  --at-apply: 'mb-4';
+}
+
+/* Lists */
+.heti :where(ul, ol) {
+  --at-apply: 'my-6 pl-2em';
+}
+.heti :where(ul, ol) :where(ul, ol) {
+  --at-apply: 'mb-0.25em mt-0';
+}
+.heti :where(ul) {
+  --at-apply: 'list-disc';
+}
+.heti :where(ol) {
+  --at-apply: 'list-decimal';
+}
+.heti :where(ul, ol) :where(ul) {
+  --at-apply: 'list-circle';
+}
+.heti :where(ul, ol) :where(ul, ol) :where(ul) {
+  --at-apply: 'list-square';
+}
+.heti :where(li) {
+  --at-apply: 'mt-0.25em list-unset';
+}
+.heti :is(h1, h2, h3, h4, h5, h6, ul, ol) + :is(ul, ol) {
+  --at-apply: 'mt-4';
+}
+.heti :is(ul, ol):has(+ :is(ul, ol)) {
+  --at-apply: 'mb-4';
+}
+
+/* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+.heti :where(sub, sup) {
+  --at-apply: 'relative mx-0.1em align-baseline text-0.75em';
+}
+.heti :where(sub) {
+  --at-apply: 'bottom--0.25em';
+}
+.heti :where(sup) {
+  --at-apply: 'top--0.5em';
+}
+
+/* Abbreviations */
+.heti :where(abbr[title]) {
+  --at-apply: 'cursor-help border-b-1 border-secondary border-dotted pb-0.25 no-underline';
+}
+
+/* Wavy Underline */
+.heti :where(u) {
+  --at-apply: 'underline decoration-red-400 underline-offset-0.25em decoration-wavy';
+}
+html.dark .heti :where(u) {
+  --at-apply: 'decoration-red-400/60';
+}
+
+/* Keyboard Input */
+.heti :where(kbd) {
+  --at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-normal';
+  --at-apply: 'uno-round-border border-secondary/40 c-secondary';
+}
+
+/* Highlighted Text */
+.heti :where(mark) {
+  --at-apply: 'bg-highlight py-0.65 text-inherit';
+}
+
+/* Footnotes */
+.heti :where(sub, sup) :where(a) {
+  --at-apply: 'no-underline';
+}
+.heti :where(sup):target,
+.heti :where(sup) a:target {
+  --at-apply: 'bg-highlight';
+}
+.heti .data-footnote-backref {
+  --at-apply: 'font-serif no-underline';
+}
+
+/* Horizontal Rules */
+.heti :where(hr) {
+  --at-apply: 'mb-10.5 mt-14.5 h-auto border-none text-center';
+}
+.heti :where(hr)::before {
+  --at-apply: 'whitespace-pre text-6 c-secondary/25 font-serif';
+  content: "*   *   *";
+}
+
+/* Bold */
+.heti :where(b, strong) {
+  --at-apply: 'font-semibold';
+}
+
+/* Italic */
+.heti :where(em) {
+  --at-apply: 'italic';
+}
+
+/* Cite */
+.heti :where(cite) {
+  --at-apply: 'cjk:not-italic';
+}
+
+/* Quotes */
+.heti :where(q:is(:lang(zh), :lang(ja), :lang(ko))) {
+  quotes: "「" "」" "『" "』";
+}

package/src/styles/transition.css

@@ -0,0 +1,173 @@
+/* View Transition */
+@keyframes reveal {
+  from {
+    clip-path: inset(var(--from));
+  }
+}
+
+::view-transition-new(theme-toggle-transition) {
+  z-index: 99;
+  clip-path: inset(0 0 0 0);
+  animation: reveal 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+::view-transition-old(theme-toggle-transition) {
+  z-index: -1;
+  animation: none;
+}
+
+html.dark {
+  --from: 0 0 100% 0;
+}
+html:not(.dark) {
+  --from: 100% 0 0 0;
+}
+
+/* Disable animations for special elements during theme switching */
+html[data-theme-changing] [data-disable-theme-toggle-transition] {
+  view-transition-name: none !important;
+}
+
+/* Content Progressive Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1535px) {
+  #toc-container {
+    opacity: 0;
+    animation: fadeInUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+    animation-delay: 0.1s;
+  }
+}
+
+@media (min-width: 1024px) {
+  #post-date {
+    opacity: 0;
+    animation: fadeInUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+    animation-delay: 0.1s;
+  }
+}
+
+#post-content > * {
+  opacity: 0;
+  animation: fadeInUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+
+#post-content > *:nth-child(1) { animation-delay: 0.15s; }
+#post-content > *:nth-child(2) { animation-delay: 0.2s; }
+#post-content > *:nth-child(3) { animation-delay: 0.25s; }
+#post-content > *:nth-child(4) { animation-delay: 0.3s; }
+#post-content > *:nth-child(5) { animation-delay: 0.35s; }
+#post-content > *:nth-child(6) { animation-delay: 0.4s; }
+#post-content > *:nth-child(7) { animation-delay: 0.45s; }
+#post-content > *:nth-child(8) { animation-delay: 0.5s; }
+#post-content > *:nth-child(9) { animation-delay: 0.55s; }
+#post-content > *:nth-child(10) { animation-delay: 0.6s; }
+#post-content > *:nth-child(11) { animation-delay: 0.65s; }
+#post-content > *:nth-child(12) { animation-delay: 0.7s; }
+#post-content > *:nth-child(13) { animation-delay: 0.75s; }
+#post-content > *:nth-child(14) { animation-delay: 0.8s; }
+#post-content > *:nth-child(15) { animation-delay: 0.85s; }
+#post-content > *:nth-child(n+16) { animation-delay: 0.9s; }
+
+@media (max-width: 767px) {
+  #post-content > *:nth-child(n+8) {
+    opacity: 1;
+    transform: translateY(0);
+    animation: none;
+  }
+}
+
+/* TOC Progressive Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+@keyframes fadeInUpMini {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (min-width: 1535px) {
+  #toc-desktop-icon {
+    opacity: 0;
+    animation: fadeInUpMini 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+    animation-delay: 0.175s;
+  }
+
+  #toc-links-list > * {
+    opacity: 0;
+    animation: fadeInUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+  }
+
+
+  #toc-links-list > *:nth-child(1) { animation-delay: 0.175s; }
+  #toc-links-list > *:nth-child(2) { animation-delay: 0.2s; }
+  #toc-links-list > *:nth-child(3) { animation-delay: 0.225s; }
+  #toc-links-list > *:nth-child(4) { animation-delay: 0.25s; }
+  #toc-links-list > *:nth-child(5) { animation-delay: 0.275s; }
+  #toc-links-list > *:nth-child(6) { animation-delay: 0.3s; }
+  #toc-links-list > *:nth-child(7) { animation-delay: 0.325s; }
+  #toc-links-list > *:nth-child(8) { animation-delay: 0.35s; }
+  #toc-links-list > *:nth-child(9) { animation-delay: 0.375s; }
+  #toc-links-list > *:nth-child(10) { animation-delay: 0.4s; }
+  #toc-links-list > *:nth-child(11) { animation-delay: 0.425s; }
+  #toc-links-list > *:nth-child(12) { animation-delay: 0.45s; }
+  #toc-links-list > *:nth-child(13) { animation-delay: 0.475s; }
+  #toc-links-list > *:nth-child(14) { animation-delay: 0.5s; }
+  #toc-links-list > *:nth-child(15) { animation-delay: 0.525s; }
+  #toc-links-list > *:nth-child(16) { animation-delay: 0.55s; }
+  #toc-links-list > *:nth-child(17) { animation-delay: 0.575s; }
+  #toc-links-list > *:nth-child(18) { animation-delay: 0.6s; }
+  #toc-links-list > *:nth-child(n+19) { animation-delay: 0.625s; }
+}
+
+/* Back Button Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 1024px) {
+  #back-button {
+    opacity: 0;
+    animation: fadeInLeft 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+    animation-delay: 0.2s;
+  }
+}
+
+/* Fallback Transition >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+html.reduce-motion {
+  --at-apply: 'transition-colors duration-300 ease-out';
+
+  .highlight-hover,
+  .highlight-static {
+    --at-apply: 'transition-inherit';
+  }
+
+  #toc-container,
+  #post-date,
+  #post-content > *,
+  #toc-desktop-icon,
+  #toc-links-list > *,
+  #back-button {
+    opacity: 1;
+    transform: translate(0);
+    animation: none;
+  }
+}

package/src/types/global.d.ts

@@ -0,0 +1,22 @@
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+declare global {
+  namespace astroHTML.JSX {
+    interface HTMLAttributes extends AttributifyAttributes {}
+  }
+
+  interface Window {
+    webkitAudioContext: typeof AudioContext
+  }
+  interface Document {
+    startViewTransition: (updateCallback: () => void) => ViewTransition
+  }
+
+  interface ViewTransition {
+    finished: Promise<void>
+    ready: Promise<void>
+    updateCallbackDone: Promise<void>
+  }
+}
+
+export {}

package/src/types/index.d.ts

@@ -0,0 +1,111 @@
+import type { CollectionEntry } from 'astro:content'
+import type { Language } from '@/i18n/config'
+
+export type Post = CollectionEntry<'posts'> & {
+  remarkPluginFrontmatter: {
+    minutes: number
+  }
+}
+
+export type Note = CollectionEntry<'notes'> & {
+  remarkPluginFrontmatter: {
+    minutes: number
+  }
+}
+
+export type Journal = CollectionEntry<'journals'> & {
+  remarkPluginFrontmatter: {
+    minutes: number
+  }
+}
+
+// The runtime shape is now derived from the Zod schema in config-schema.ts.
+// The interface below is kept for editor tooling / docs and is structurally
+// compatible with the inferred type.
+export interface ThemeConfig {
+  site: {
+    title: string
+    subtitle: string
+    description: string
+    i18nTitle: boolean
+    author: string
+    url: string
+    base: string
+    favicon: string
+  }
+  color: {
+    mode: 'light' | 'dark' | 'auto'
+    light: {
+      primary: string
+      secondary: string
+      background: string
+      highlight: string
+    }
+    dark: {
+      primary: string
+      secondary: string
+      background: string
+      highlight: string
+    }
+  }
+  global: {
+    locale: Language
+    moreLocales: Language[]
+    fontStyle: 'sans' | 'serif'
+    dateFormat: 'YYYY-MM-DD' | 'MM-DD-YYYY' | 'DD-MM-YYYY' | 'MMM D YYYY' | 'D MMM YYYY'
+    toc: boolean
+    katex: boolean
+    reduceMotion: boolean
+  }
+  comment: {
+    enabled: boolean
+    giscus?: {
+      repo?: string
+      repoId?: string
+      category?: string
+      categoryId?: string
+      mapping?: 'pathname' | 'url' | 'title' | 'og:title'
+      strict?: '0' | '1'
+      reactionsEnabled?: '0' | '1'
+      emitMetadata?: '0' | '1'
+      inputPosition?: 'top' | 'bottom'
+    }
+    twikoo?: {
+      envId?: string
+    }
+    waline?: {
+      serverURL?: string
+      emoji?: string[]
+      search?: boolean
+      imageUploader?: boolean
+    }
+  }
+  seo?: {
+    twitterID?: string
+    verification?: {
+      google?: string
+      bing?: string
+      yandex?: string
+      baidu?: string
+    }
+    googleAnalyticsID?: string
+    umamiAnalyticsID?: string
+    follow?: {
+      feedID?: string
+      userID?: string
+    }
+    apiflashKey?: string
+  }
+  footer: {
+    links: {
+      name: string
+      url: string
+    }[]
+    startYear: number
+  }
+  preload?: {
+    imageHostURL?: string
+    customGoogleAnalyticsJS?: string
+    customUmamiAnalyticsJS?: string
+  }
+}

package/src/utils/cache.ts

@@ -0,0 +1,32 @@
+/**
+ * Memoizes an async function, caching results by arguments
+ *
+ * @param fn - The async function to memoize
+ * @returns Memoized function that caches results
+ */
+export function memoize<Args extends any[], T>(
+  fn: (...args: Args) => Promise<T>,
+): (...args: Args) => Promise<T> {
+  const cache = new Map<string, Promise<T>>()
+
+  return async (...args: Args): Promise<T> => {
+    // Generate cache key from function arguments
+    const key = JSON.stringify(args)
+
+    // Return cached promise if it exists
+    if (cache.has(key)) {
+      return cache.get(key)!
+    }
+
+    // Execute the original function and cache the promise
+    const promise = fn(...args)
+    cache.set(key, promise)
+
+    // Remove failed promises from cache to allow retry
+    promise.catch(() => {
+      cache.delete(key)
+    })
+
+    return promise
+  }
+}