retypeset-odyssey 0.1.0

package/src/components/PostDate.astro

@@ -0,0 +1,80 @@
+---
+import type { ThemeConfig } from '@/types'
+import { themeConfig } from '@/config'
+import { isJournalPage, isNotePage, isPostPage } from '@/utils/page'
+
+type DateFormat = ThemeConfig['global']['dateFormat']
+
+interface Props {
+  date: Date
+  updatedDate?: Date
+  minutes: number
+}
+
+const { date, updatedDate, minutes } = Astro.props
+const { dateFormat: format } = themeConfig.global
+const isArticle = isPostPage(Astro.url.pathname) || isNotePage(Astro.url.pathname) || isJournalPage(Astro.url.pathname)
+const timeSpacingClass = isArticle ? 'ml-1.75' : 'ml-1.5'
+
+function formatDate(date: Date, format: DateFormat) {
+  if (format === 'YYYY-MM-DD') {
+    return date.toISOString().split('T')[0]
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: format === 'MMM D YYYY' || format === 'D MMM YYYY' ? 'short' : '2-digit',
+    day: format === 'MMM D YYYY' || format === 'D MMM YYYY' ? 'numeric' : '2-digit',
+  }
+
+  switch (format) {
+    // US date format: 04-13-2025
+    case 'MM-DD-YYYY':
+      return date.toLocaleDateString('en-US', options).replace(/\//g, '-')
+
+    // European date format: 13-04-2025
+    case 'DD-MM-YYYY':
+      return date.toLocaleDateString('en-GB', options).replace(/\//g, '-')
+
+    // US month text format: Apr 13 2025
+    case 'MMM D YYYY':
+      return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }).replace(',', '')
+
+    // British month text format: 13 Apr 2025
+    case 'D MMM YYYY':
+      return date.toLocaleDateString('en-GB', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }).replace(',', '')
+
+    // Default to ISO format
+    default:
+      return date.toISOString().split('T')[0]
+  }
+}
+---
+
+<!-- published date -->
+<time datetime={date.toISOString().split('T')[0]}>
+  {formatDate(date, format)}
+</time>
+
+<!-- updated date -->
+{updatedDate && (
+  <time
+    datetime={updatedDate.toISOString().split('T')[0]}
+    class={timeSpacingClass}
+  >
+    updated {formatDate(updatedDate, format)}
+  </time>
+)}
+
+<!-- reading time -->
+<span class={timeSpacingClass}>
+  {minutes} min
+</span>

package/src/components/PostList.astro

@@ -0,0 +1,87 @@
+---
+import type { Language } from '@/i18n/config'
+import type { Post } from '@/types'
+import PinIcon from '@/assets/icons/pin-icon.svg'
+import PostDate from '@/components/PostDate.astro'
+import { getPostPath } from '@/i18n/path'
+import { getPostDescription } from '@/utils/description'
+import { getPostSlug } from '@/utils/content'
+import { isHomePage } from '@/utils/page'
+
+export interface Props {
+  posts: Post[]
+  lang: Language
+  pinned?: boolean
+}
+
+const { posts, lang, pinned = false } = Astro.props
+const isHome = isHomePage(Astro.url.pathname)
+---
+
+<ul>
+  {posts.map((post) => {
+    const slug = getPostSlug(post)
+
+    return (
+      <li
+        class:list={[
+          'mb-5.5',
+          isHome ? 'lg:mb-10' : '',
+        ]}
+      >
+        {/* post title */}
+        <h3 class="inline transition-colors hover:c-primary">
+          <a
+            class:list={[
+              'cjk:tracking-wide',
+              isHome ? 'lg:font-medium lg:text-4.5' : '',
+            ]}
+            href={getPostPath(slug, lang)}
+            transition:name={`post-${slug}${lang ? `-${lang}` : ''}`}
+            data-disable-theme-toggle-transition
+          >
+            {post.data.title}
+          </a>
+          {/* pinned icon */}
+          {pinned && (
+            <PinIcon
+              aria-hidden="true"
+              class="ml-0.25em inline-block aspect-square w-0.98em translate-y--0.1em lg:(w-1.05em translate-y--0.15em)"
+              fill="currentColor"
+            />
+          )}
+        </h3>
+
+        {/* mobile post time */}
+        <div
+          class="py-0.8 text-3.5 font-time lg:hidden"
+          transition:name={`time-${slug}${lang ? `-${lang}` : ''}`}
+          data-disable-theme-toggle-transition
+        >
+          <PostDate
+            date={post.data.published}
+            minutes={post.remarkPluginFrontmatter.minutes}
+          />
+        </div>
+
+        {/* desktop post time */}
+        <div class="hidden text-3.65 font-time lg:(ml-2.5 inline)">
+          <PostDate
+            date={post.data.published}
+            minutes={post.remarkPluginFrontmatter.minutes}
+          />
+        </div>
+
+        {/* desktop post description */}
+        {isHome && (
+          <div
+            class="heti hidden"
+            lg="mt-2.25 block"
+          >
+            <p>{getPostDescription(post, 'list')}</p>
+          </div>
+        )}
+      </li>
+    )
+  })}
+</ul>

package/src/components/SearchModal.astro

@@ -0,0 +1,340 @@
+---
+import { ui } from '@/i18n/ui'
+import { getPageInfo } from '@/utils/page'
+
+const { currentLang } = getPageInfo(Astro.url.pathname)
+const currentUI = ui[currentLang as keyof typeof ui] ?? {}
+---
+
+<dialog id="search-modal" class="search-modal">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h2 class="modal-title">{currentUI.search || 'Search'}</h2>
+      <button id="close-search-modal" class="close-btn" aria-label="Close">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <div id="search-container" data-placeholder={currentUI.searchPlaceholder} data-no-results={currentUI.searchNoResults} data-results-found={currentUI.searchResultsFound}></div>
+  </div>
+</dialog>
+
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+<script is:inline src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
+
+<script>
+let pagefindInitialized = false;
+
+function initPagefind() {
+  if (pagefindInitialized) return;
+  if (typeof PagefindUI === 'undefined') return;
+
+  const container = document.getElementById('search-container');
+  const placeholder = container?.dataset.placeholder || 'Type to search...';
+
+  new PagefindUI({
+    element: '#search-container',
+    showImages: false,
+    showSubResults: true
+  });
+
+  // Set placeholder after initialization
+  setTimeout(() => {
+    const input = document.querySelector('.pagefind-ui__search-input') as HTMLInputElement;
+    if (input) input.placeholder = placeholder;
+  }, 50);
+
+  pagefindInitialized = true;
+}
+
+function openSearchModal() {
+  const modal = document.getElementById('search-modal') as HTMLDialogElement;
+  if (modal) {
+    modal.showModal();
+    initPagefind();
+    setTimeout(() => {
+      const input = modal.querySelector('.pagefind-ui__search-input') as HTMLInputElement;
+      input?.focus();
+    }, 100);
+  }
+}
+
+function closeSearchModal() {
+  const modal = document.getElementById('search-modal') as HTMLDialogElement;
+  modal?.close();
+}
+
+document.addEventListener('click', (e) => {
+  const target = e.target as Element;
+  if (target.closest('#search-button')) {
+    e.preventDefault();
+    openSearchModal();
+  }
+  if (target.closest('#close-search-modal')) {
+    closeSearchModal();
+  }
+});
+
+document.getElementById('search-modal')?.addEventListener('click', (e) => {
+  const modal = e.currentTarget as HTMLDialogElement;
+  const rect = modal.getBoundingClientRect();
+  if (
+    e.clientX < rect.left ||
+    e.clientX > rect.right ||
+    e.clientY < rect.top ||
+    e.clientY > rect.bottom
+  ) {
+    closeSearchModal();
+  }
+});
+
+(window as any).openSearchModal = openSearchModal;
+</script>
+
+<style is:global>
+/* Modal Base */
+.search-modal {
+  padding: 0;
+  border: none;
+  border-radius: 12px;
+  max-width: 600px;
+  width: 90vw;
+  background: transparent;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.search-modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  background: var(--c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Header */
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--c-divider, rgba(128, 128, 128, 0.2));
+}
+
+.modal-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-text-1);
+  margin: 0;
+}
+
+.close-btn {
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--c-text-2);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s, background 0.2s;
+}
+
+.close-btn:hover {
+  color: var(--c-text-1);
+  background: rgba(128, 128, 128, 0.1);
+}
+
+/* Pagefind Container */
+#search-container {
+  padding: 0;
+}
+
+/* Pagefind UI Overrides */
+.search-modal .pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: var(--c-primary, #3b82f6);
+  --pagefind-ui-text: var(--c-text-1);
+  --pagefind-ui-background: var(--c-bg);
+  --pagefind-ui-border: var(--c-divider, rgba(128, 128, 128, 0.2));
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 8px;
+  --pagefind-ui-font: inherit;
+}
+
+.search-modal .pagefind-ui__form {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--c-divider, rgba(128, 128, 128, 0.2));
+}
+
+.search-modal .pagefind-ui__search-input {
+  font-size: 0.95rem !important;
+  padding: 0.625rem 1rem !important;
+  height: auto !important;
+  background: var(--c-bg-soft, rgba(128, 128, 128, 0.05)) !important;
+  border: 1px solid var(--c-divider, rgba(128, 128, 128, 0.2)) !important;
+  border-radius: 8px !important;
+  color: var(--c-text-1) !important;
+  transition: border-color 0.2s, box-shadow 0.2s !important;
+}
+
+.search-modal .pagefind-ui__search-input:focus {
+  outline: none !important;
+  border-color: var(--c-primary, #3b82f6) !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+}
+
+.search-modal .pagefind-ui__search-input::placeholder {
+  color: var(--c-text-3, rgba(128, 128, 128, 0.6)) !important;
+}
+
+.search-modal .pagefind-ui__search-clear {
+  padding: 0.5rem !important;
+  right: 0.5rem !important;
+  color: var(--c-text-3) !important;
+  background: transparent !important;
+}
+
+.search-modal .pagefind-ui__search-clear:hover {
+  color: var(--c-text-1) !important;
+}
+
+/* Results Area */
+.search-modal .pagefind-ui__results-area {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.search-modal .pagefind-ui__message {
+  padding: 1rem 1.25rem !important;
+  font-size: 0.875rem !important;
+  color: var(--c-text-2) !important;
+  border-bottom: 1px solid var(--c-divider, rgba(128, 128, 128, 0.2)) !important;
+}
+
+.search-modal .pagefind-ui__results {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding: 0 !important;
+}
+
+/* Individual Result */
+.search-modal .pagefind-ui__result {
+  padding: 1rem 1.25rem !important;
+  border-bottom: 1px solid var(--c-divider, rgba(128, 128, 128, 0.1)) !important;
+  transition: background 0.15s !important;
+}
+
+.search-modal .pagefind-ui__result:hover {
+  background: var(--c-bg-soft, rgba(128, 128, 128, 0.05)) !important;
+}
+
+.search-modal .pagefind-ui__result:last-child {
+  border-bottom: none !important;
+}
+
+.search-modal .pagefind-ui__result-inner {
+  padding: 0 !important;
+}
+
+.search-modal .pagefind-ui__result-title {
+  margin-bottom: 0.375rem !important;
+}
+
+.search-modal .pagefind-ui__result-link {
+  color: var(--c-text-1) !important;
+  font-weight: 600 !important;
+  font-size: 0.95rem !important;
+  text-decoration: none !important;
+  transition: color 0.15s !important;
+}
+
+.search-modal .pagefind-ui__result-link:hover {
+  color: var(--c-primary, #3b82f6) !important;
+}
+
+.search-modal .pagefind-ui__result-link::before {
+  content: "▸ " !important;
+  color: var(--c-text-3) !important;
+}
+
+.search-modal .pagefind-ui__result-excerpt {
+  font-size: 0.85rem !important;
+  line-height: 1.5 !important;
+  color: var(--c-text-2) !important;
+  margin-top: 0.25rem !important;
+}
+
+/* Highlight */
+.search-modal .pagefind-ui__result-excerpt mark,
+.search-modal mark {
+  background: rgba(250, 204, 21, 0.4) !important;
+  color: inherit !important;
+  padding: 0.1em 0.2em !important;
+  border-radius: 2px !important;
+}
+
+/* Sub Results */
+.search-modal .pagefind-ui__result-nested {
+  margin-left: 1rem !important;
+  padding-left: 0.75rem !important;
+  border-left: 2px solid var(--c-divider, rgba(128, 128, 128, 0.2)) !important;
+  margin-top: 0.5rem !important;
+}
+
+.search-modal .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+  content: "⤷ " !important;
+}
+
+/* Button */
+.search-modal .pagefind-ui__button {
+  margin: 1rem 1.25rem !important;
+  padding: 0.625rem 1rem !important;
+  background: var(--c-bg-soft, rgba(128, 128, 128, 0.05)) !important;
+  border: 1px solid var(--c-divider, rgba(128, 128, 128, 0.2)) !important;
+  border-radius: 8px !important;
+  color: var(--c-text-2) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+  transition: all 0.15s !important;
+}
+
+.search-modal .pagefind-ui__button:hover {
+  background: var(--c-bg-mute, rgba(128, 128, 128, 0.1)) !important;
+  color: var(--c-text-1) !important;
+}
+
+/* Hide default drawer toggle */
+.search-modal .pagefind-ui__drawer {
+  display: none !important;
+}
+
+/* Loading state */
+.search-modal .pagefind-ui__loading {
+  padding: 2rem 1.25rem !important;
+  text-align: center !important;
+  color: var(--c-text-3) !important;
+}
+
+/* Scrollbar styling */
+.search-modal .pagefind-ui__results::-webkit-scrollbar {
+  width: 6px;
+}
+
+.search-modal .pagefind-ui__results::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.search-modal .pagefind-ui__results::-webkit-scrollbar-thumb {
+  background: var(--c-divider, rgba(128, 128, 128, 0.3));
+  border-radius: 3px;
+}
+
+.search-modal .pagefind-ui__results::-webkit-scrollbar-thumb:hover {
+  background: var(--c-text-3, rgba(128, 128, 128, 0.5));
+}
+</style>

package/src/components/TagList.astro

@@ -0,0 +1,135 @@
+---
+import type { Language } from '@/i18n/config'
+import { getTagPath } from '@/i18n/path'
+
+interface TagWithCount {
+  name: string
+  count: number
+}
+
+interface Props {
+  tags: string[] | TagWithCount[]
+  currentTag?: string
+  lang: Language
+  cloudStyle?: boolean
+}
+
+const { tags, currentTag = '', lang, cloudStyle = false } = Astro.props
+
+// Normalize tags to TagWithCount format
+const normalizedTags: TagWithCount[] = tags.map(tag =>
+  typeof tag === 'string' ? { name: tag, count: 1 } : tag
+)
+
+// Calculate min/max for scaling
+const counts = normalizedTags.map(t => t.count)
+const maxCount = Math.max(...counts)
+const minCount = Math.min(...counts)
+const countRange = maxCount - minCount || 1
+
+// Shuffle tags for cloud style (using seeded random for SSR consistency)
+function seededShuffle<T>(array: T[], seed: number): T[] {
+  const result = [...array]
+  let currentSeed = seed
+  const random = () => {
+    currentSeed = (currentSeed * 9301 + 49297) % 233280
+    return currentSeed / 233280
+  }
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1))
+    ;[result[i], result[j]] = [result[j], result[i]]
+  }
+  return result
+}
+
+const displayTags = cloudStyle
+  ? seededShuffle(normalizedTags, 42)
+  : normalizedTags
+
+// Helper to calculate styles based on count ratio
+function getTagStyles(count: number) {
+  const ratio = (count - minCount) / countRange
+  const fontSize = 0.85 + ratio * 0.5 // 0.85rem to 1.35rem
+  const lightness = 55 - ratio * 30 // 55% to 25% (lighter to darker)
+  return { fontSize, lightness, ratio }
+}
+---
+
+{cloudStyle ? (
+  <div class="no-heti flex flex-wrap gap-3 justify-center items-center">
+    {displayTags.map(tag => {
+      const { fontSize, lightness } = getTagStyles(tag.count)
+      const isActive = currentTag === tag.name
+      return (
+        <a
+          href={getTagPath(tag.name, lang)}
+          class="tag-cloud-item"
+          style={`--tag-size: ${fontSize}rem; --tag-lightness: ${lightness}%;`}
+          data-active={isActive ? 'true' : undefined}
+        >
+          {tag.name}
+        </a>
+      )
+    })}
+  </div>
+) : (
+  <div class="no-heti flex flex-wrap gap-x-3 gap-y-3.2">
+    {displayTags.map(tag => (
+      <a
+        href={getTagPath(tag.name, lang)}
+        class:list={[
+          'relative inline-block border border-secondary/25 rounded-full px-3.2 py-0.7 ring-secondary/80',
+          'transition-[colors,box-shadow] ease-out hover:(border-secondary/80 c-primary font-medium ring-0.2)',
+          currentTag === tag.name
+            ? 'border-secondary/80 c-primary font-medium ring-0.2'
+            : 'ring-0',
+        ]}
+      >
+        <span class="absolute inset-0 flex items-center justify-center whitespace-nowrap transition-font-weight">
+          {tag.name}
+        </span>
+        <span
+          class="inline-block font-medium opacity-0"
+          aria-hidden="true"
+        >
+          {tag.name}
+        </span>
+      </a>
+    ))}
+  </div>
+)}
+
+<style>
+  .tag-cloud-item {
+    display: inline-block;
+    padding: 0.5em 1em;
+    font-size: var(--tag-size);
+    color: oklch(var(--tag-lightness) 0.005 298);
+    border: 1px solid oklch(var(--tag-lightness) 0.005 298 / 0.4);
+    border-radius: 1.5em;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+
+  .tag-cloud-item:hover {
+    transform: scale(1.08);
+    box-shadow: 0 2px 8px oklch(25% 0.005 298 / 0.15);
+    border-color: oklch(var(--tag-lightness) 0.005 298 / 0.8);
+  }
+
+  .tag-cloud-item[data-active="true"] {
+    border-color: oklch(var(--tag-lightness) 0.005 298 / 0.8);
+    font-weight: 500;
+  }
+
+  :global(.dark) .tag-cloud-item {
+    color: oklch(calc(100% - var(--tag-lightness) + 15%) 0.005 298);
+    border-color: oklch(calc(100% - var(--tag-lightness) + 15%) 0.005 298 / 0.4);
+  }
+
+  :global(.dark) .tag-cloud-item:hover {
+    box-shadow: 0 2px 8px oklch(92% 0.005 298 / 0.15);
+    border-color: oklch(calc(100% - var(--tag-lightness) + 15%) 0.005 298 / 0.8);
+  }
+</style>

package/src/components/Widgets/BackButton.astro

@@ -0,0 +1,43 @@
+---
+import GoBackIcon from '@/assets/icons/go-back.svg';
+---
+
+<button
+  id="back-button"
+  class="hidden"
+  lg="absolute left--10 top-3.8 block aspect-square w-4.5 c-secondary/60 transition-colors ease-out hover:c-primary active:scale-90!"
+  type="button"
+  aria-label="Go back"
+>
+  <GoBackIcon
+    aria-hidden="true"
+    fill="currentColor"
+  />
+</button>
+
+<!-- Go Back Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script>
+function handleBackButtonClick(e: MouseEvent) {
+  if (!(e.target instanceof Element)) {
+    return
+  }
+
+  if (!e.target.closest('#back-button')) {
+    return
+  }
+
+  // Navigate back if history exists
+  if (window.history.length > 1) {
+    window.history.back()
+    return
+  }
+
+  // Fallback to homepage
+  const siteTitleLink = document.getElementById('site-title-link')
+  if (siteTitleLink) {
+    siteTitleLink.click()
+  }
+}
+
+document.addEventListener('click', handleBackButtonClick)
+</script>