retypeset-odyssey 0.1.0

package/src/components/FloatingButtons.astro

@@ -0,0 +1,101 @@
+---
+import type { Language } from '@/i18n/config'
+import LanguageSwitcherIcon from '@/assets/icons/language-switcher.svg'
+import SearchIcon from '@/assets/icons/search-icon.svg'
+import ThemeToggleIcon from '@/assets/icons/theme-toggle.svg'
+import { moreLocales, themeConfig } from '@/config'
+import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
+import { ui } from '@/i18n/ui'
+import { getPageInfo } from '@/utils/page'
+
+interface Props {
+  supportedLangs?: Language[]
+}
+
+const {
+  light: { background: lightMode },
+  dark: { background: darkMode },
+} = themeConfig.color
+
+const { supportedLangs = [] } = Astro.props
+const currentPath = Astro.url.pathname
+const { currentLang } = getPageInfo(currentPath)
+const currentUI = ui[currentLang as keyof typeof ui] ?? {}
+
+const showLanguageSwitcher = moreLocales.length > 0
+const nextUrl = supportedLangs.length > 0
+  ? getNextSupportedLangPath(currentPath, supportedLangs)
+  : getNextGlobalLangPath(currentPath)
+---
+
+<div class="floating-container">
+  <!-- Action Buttons -->
+  <div class="floating-actions">
+    <button
+      id="search-button"
+      class="floating-btn"
+      aria-label={currentUI.search || 'Search'}
+    >
+      <SearchIcon aria-hidden="true" fill="currentColor" />
+    </button>
+
+    {showLanguageSwitcher && (
+      <a
+        id="language-switcher"
+        href={nextUrl}
+        class="floating-btn"
+        aria-label="Switch language"
+      >
+        <LanguageSwitcherIcon aria-hidden="true" fill="currentColor" />
+      </a>
+    )}
+
+    <button
+      id="theme-toggle-button"
+      class="floating-btn"
+      data-light-mode={lightMode}
+      data-dark-mode={darkMode}
+      aria-label="Toggle theme"
+    >
+      <ThemeToggleIcon aria-hidden="true" fill="currentColor" />
+    </button>
+  </div>
+</div>
+
+<style>
+.floating-container {
+  /* Mobile: absolute position at top right */
+  position: absolute;
+  right: 7.25vw;
+  top: 14.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  z-index: 50;
+}
+
+/* Desktop: fixed position on right side */
+@media (min-width: 1024px) {
+  .floating-container {
+    position: fixed;
+    bottom: min(10.27rem + 1.92vw, 12rem);
+    right: max(5rem, calc(50vw - 35rem));
+    top: auto;
+  }
+}
+
+.floating-actions {
+  --at-apply: 'flex flex-col gap-2';
+}
+
+.floating-btn {
+  --at-apply: 'w-10 h-10 flex items-center justify-center';
+  --at-apply: 'bg-background/80 backdrop-blur-sm rounded-lg shadow-sm';
+  --at-apply: 'border border-secondary/10';
+  --at-apply: 'c-secondary hover:c-primary transition-colors cursor-pointer';
+}
+
+.floating-btn svg {
+  --at-apply: 'w-5 h-5';
+}
+</style>

package/src/components/Footer.astro

@@ -0,0 +1,74 @@
+---
+import { themeConfig } from '@/config'
+import { getLangFromPath } from '@/i18n/lang'
+import { getLocalizedPath } from '@/i18n/path'
+
+const { author } = themeConfig.site
+const { links, startYear } = themeConfig.footer
+
+const currentYear = new Date().getFullYear()
+const year = Number(startYear) === currentYear
+  ? startYear
+  : `${startYear}-${currentYear}`
+
+const currentLang = getLangFromPath(Astro.url.pathname)
+const socialLinks = links.map(({ name, url }) => {
+  const isRSS = url === '/atom.xml' || url === '/rss.xml'
+  const isEmail = /^[\w.-]+@[\w.-]+\.[a-z]{2,}$/i.test(url)
+
+  if (isRSS) {
+    const localizedPath = getLocalizedPath(url, currentLang)
+    const href = import.meta.env.DEV
+      ? localizedPath
+      : localizedPath.slice(0, -1)
+
+    return {
+      name,
+      href,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    }
+  }
+
+  if (isEmail) {
+    const href = `mailto:${url}`
+    return {
+      name,
+      href,
+      'data-umami-event': 'outbound-link-click',
+      'data-umami-event-url': href,
+    }
+  }
+
+  return {
+    name,
+    'href': url,
+    'target': '_blank',
+    'rel': 'noopener noreferrer',
+    'data-umami-event': 'outbound-link-click',
+    'data-umami-event-url': url,
+  }
+})
+---
+
+<footer
+  class="text-3 leading-1.25em font-navbar"
+  lg="uno-desktop-column bottom-20 text-3.5"
+>
+  <p>
+    {socialLinks.map((link, index) => (
+      <>
+        <a class="highlight-hover py-0.8 transition-colors after:bottom-0.35em hover:c-primary" {...link}>{link.name}</a>
+        {index < socialLinks.length - 1 && '/'}
+      </>
+    ))}
+  </p>
+
+  <p>
+    © {year} {author}
+  </p>
+
+  <p>
+    Powered by <a class="highlight-hover py-0.8 transition-colors after:bottom-0.35em hover:c-primary" href="https://astro.build/" target="_blank" rel="noopener noreferrer" data-umami-event="outbound-link-click" data-umami-event-url="https://astro.build/">Astro</a> and <a class="highlight-hover py-0.8 transition-colors after:bottom-0.35em hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer" data-umami-event="outbound-link-click" data-umami-event-url="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
+  </p>
+</footer>

package/src/components/Header.astro

@@ -0,0 +1,62 @@
+---
+import { themeConfig } from '@/config'
+import { ui } from '@/i18n/ui'
+import { getPageInfo } from '@/utils/page'
+
+const { currentLang, getLocalizedPath, isPost, isNote, isJournal } = getPageInfo(Astro.url.pathname)
+const isArticle = isPost || isNote || isJournal
+const { title, subtitle, i18nTitle } = themeConfig.site
+
+const currentUI = ui[currentLang as keyof typeof ui] ?? {}
+const headerTitle = i18nTitle ? currentUI.title : title
+const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
+
+const TitleTag = isArticle ? 'h2' : 'h1'
+const SubtitleTag = isArticle ? 'div' : 'h2'
+---
+
+<header
+  class:list={[
+    'lg:(uno-desktop-column top-20) cjk:tracking-wide',
+    isArticle
+    ? 'mb-10.8'
+    : 'mb-10.5',
+  ]}
+>
+  <TitleTag
+    class:list={[
+      'font-bold font-title',
+      isArticle
+        ? `mb-2.8 mt-3 text-5.375 c-secondary lg:(mb-1.8 mt-0 text-9 c-primary)`
+        : `mb-1.8 w-75% text-8 c-primary lg:(w-full text-9)`,
+    ]}
+  >
+    <!-- Fix text cropping issues during view transition on iOS by adding a div tag -->
+    <div
+      class="box-content inline-block pr-1"
+      transition:name={`site-title-${currentLang}`}
+      data-disable-theme-toggle-transition
+    >
+      <a
+        id="site-title-link"
+        href={getLocalizedPath('/')}
+      >
+          {headerTitle}
+      </a>
+    </div>
+  </TitleTag>
+
+  {headerSubtitle && (
+    <SubtitleTag
+      class:list={[
+        'text-3.5 c-secondary font-navbar lg:text-4',
+        isArticle
+        ? `op-0 lg:op-100`
+        : 'w-75% lg:w-full',
+      ]}
+      aria-hidden={isArticle}
+    >
+      {headerSubtitle}
+    </SubtitleTag>
+  )}
+</header>

package/src/components/JournalList.astro

@@ -0,0 +1,56 @@
+---
+import type { Language } from '@/i18n/config'
+import type { Journal } from '@/types'
+import PostDate from '@/components/PostDate.astro'
+import { getJournalPath } from '@/i18n/path'
+import { getJournalDescription } from '@/utils/description'
+import { getJournalSlug } from '@/utils/content'
+
+export interface Props {
+  journals: Journal[]
+  lang: Language
+}
+
+const { journals, lang } = Astro.props
+---
+
+<ul>
+  {journals.map((journal) => {
+    const slug = getJournalSlug(journal)
+
+    return (
+      <li class="mb-5.5 lg:mb-7.5">
+        {/* journal title */}
+        <h3 class="inline transition-colors hover:c-primary">
+          <a
+            class="cjk:tracking-wide lg:font-medium lg:text-4.25"
+            href={getJournalPath(slug, lang)}
+            transition:name={`journal-${slug}${lang ? `-${lang}` : ''}`}
+            data-disable-theme-toggle-transition
+          >
+            {journal.data.title}
+          </a>
+        </h3>
+
+        {/* journal time */}
+        <div
+          class="py-0.8 text-3.5 font-time"
+          transition:name={`journal-time-${slug}${lang ? `-${lang}` : ''}`}
+          data-disable-theme-toggle-transition
+        >
+          <PostDate
+            date={journal.data.published}
+            updatedDate={journal.data.updated}
+            minutes={journal.remarkPluginFrontmatter.minutes}
+          />
+        </div>
+
+        {/* journal description */}
+        <div class="heti hidden lg:block">
+          <p>{getJournalDescription(journal, 'list')}</p>
+        </div>
+      </li>
+    )
+  })}
+</ul>
+

package/src/components/Navbar.astro

@@ -0,0 +1,69 @@
+---
+import { ui } from '@/i18n/ui'
+import { getPageInfo } from '@/utils/page'
+
+const { currentLang, isHome, isPost, isNote, isJournal, isTag, isAbout, getLocalizedPath } = getPageInfo(Astro.url.pathname)
+const currentUI = ui[currentLang as keyof typeof ui] ?? {}
+
+const isPostActive = isHome || isPost
+const isNoteActive = isNote
+const isJournalActive = isJournal
+const isTagActive = isTag
+const isAboutActive = isAbout
+
+function getNavItemClass(isActive: boolean) {
+  return isActive
+    ? 'highlight-static c-primary font-bold after:bottom-0.7em'
+    : 'highlight-hover transition-[colors,font-weight] after:bottom-0.7em hover:(c-primary font-bold)'
+}
+
+const navItems = [
+  {
+    href: '/',
+    label: currentUI.posts,
+    className: getNavItemClass(isPostActive),
+  },
+  {
+    href: '/notes/',
+    label: currentUI.notes ?? 'Notes',
+    className: getNavItemClass(isNoteActive),
+  },
+  {
+    href: '/journals/',
+    label: currentUI.journals ?? 'Journal',
+    className: getNavItemClass(isJournalActive),
+  },
+  {
+    href: '/tags/',
+    label: currentUI.tags,
+    className: getNavItemClass(isTagActive),
+  },
+  {
+    href: '/about/',
+    label: currentUI.about,
+    className: getNavItemClass(isAboutActive),
+  },
+]
+---
+
+<nav
+  aria-label="Site Navigation"
+  class:list={[
+    'mb-10.5 text-3.6 font-semibold leading-2.45em font-navbar',
+    'lg:(uno-desktop-column text-4 bottom-[min(9.04rem+3.85vw,12.5rem)]) cjk:tracking-wide',
+    (isPost || isNote || isJournal) ? 'hidden lg:block' : '',
+  ]}
+>
+  <ul>
+    {navItems.map(item => (
+      <li>
+        <a
+          href={getLocalizedPath(item.href)}
+          class={item.className}
+        >
+          {item.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>

package/src/components/NoteList.astro

@@ -0,0 +1,56 @@
+---
+import type { Language } from '@/i18n/config'
+import type { Note } from '@/types'
+import PostDate from '@/components/PostDate.astro'
+import { getNotePath } from '@/i18n/path'
+import { getNoteDescription } from '@/utils/description'
+import { getNoteSlug } from '@/utils/content'
+
+export interface Props {
+  notes: Note[]
+  lang: Language
+}
+
+const { notes, lang } = Astro.props
+---
+
+<ul>
+  {notes.map((note) => {
+    const slug = getNoteSlug(note)
+
+    return (
+      <li class="mb-5.5 lg:mb-7.5">
+        {/* note title */}
+        <h3 class="inline transition-colors hover:c-primary">
+          <a
+            class="cjk:tracking-wide lg:font-medium lg:text-4.25"
+            href={getNotePath(slug, lang)}
+            transition:name={`note-${slug}${lang ? `-${lang}` : ''}`}
+            data-disable-theme-toggle-transition
+          >
+            {note.data.title}
+          </a>
+        </h3>
+
+        {/* note time */}
+        <div
+          class="py-0.8 text-3.5 font-time"
+          transition:name={`note-time-${slug}${lang ? `-${lang}` : ''}`}
+          data-disable-theme-toggle-transition
+        >
+          <PostDate
+            date={note.data.published}
+            updatedDate={note.data.updated}
+            minutes={note.remarkPluginFrontmatter.minutes}
+          />
+        </div>
+
+        {/* note description */}
+        <div class="heti hidden lg:block">
+          <p>{getNoteDescription(note, 'list')}</p>
+        </div>
+      </li>
+    )
+  })}
+</ul>
+

package/src/components/Pagination.astro

@@ -0,0 +1,267 @@
+---
+interface Props {
+  currentPage: number
+  totalPages: number
+  baseUrl: string
+  pagePrefix?: string
+}
+
+const { currentPage, totalPages, baseUrl, pagePrefix } = Astro.props
+
+// Generate page URL - page 1 has no suffix, others have /2, /3, etc.
+function getPageUrl(page: number): string {
+  if (page === 1) {
+    return baseUrl
+  }
+  // Remove trailing slash from baseUrl if present, then add page number
+  const cleanBase = baseUrl.replace(/\/$/, '')
+  return pagePrefix
+    ? `${cleanBase}/${pagePrefix}/${page}`
+    : `${cleanBase}/${page}`
+}
+
+const hasPrev = currentPage > 1
+const hasNext = currentPage < totalPages
+const prevUrl = hasPrev ? getPageUrl(currentPage - 1) : null
+const nextUrl = hasNext ? getPageUrl(currentPage + 1) : null
+
+// Generate visible page numbers (show max 5 pages around current)
+function getVisiblePages(): number[] {
+  const pages: number[] = []
+  const maxVisible = 5
+  let start = Math.max(1, currentPage - Math.floor(maxVisible / 2))
+  let end = Math.min(totalPages, start + maxVisible - 1)
+
+  // Adjust start if we're near the end
+  if (end - start + 1 < maxVisible) {
+    start = Math.max(1, end - maxVisible + 1)
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+  return pages
+}
+
+const visiblePages = getVisiblePages()
+---
+
+{totalPages > 1 && (
+  <nav
+    class="pagination"
+    aria-label="Pagination"
+    data-base-url={baseUrl}
+    data-total-pages={totalPages}
+    data-page-prefix={pagePrefix}
+  >
+    <div class="pagination-inner">
+      {/* Previous button */}
+      {hasPrev ? (
+        <a href={prevUrl} class="pagination-btn" aria-label="Previous page">
+          <span class="pagination-arrow">‹</span>
+          <span class="pagination-text">Prev</span>
+        </a>
+      ) : (
+        <span class="pagination-btn disabled" aria-disabled="true">
+          <span class="pagination-arrow">‹</span>
+          <span class="pagination-text">Prev</span>
+        </span>
+      )}
+
+      {/* Page numbers */}
+      <div class="pagination-pages">
+        {visiblePages[0] > 1 && (
+          <>
+            <a href={getPageUrl(1)} class="pagination-page">1</a>
+            {visiblePages[0] > 2 && (
+              <div class="pagination-ellipsis-wrapper">
+                <button type="button" class="pagination-ellipsis" aria-label="Jump to page">•••</button>
+                <input
+                  type="number"
+                  class="pagination-input"
+                  min="1"
+                  max={totalPages}
+                  placeholder="Go"
+                  aria-label="Enter page number"
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {visiblePages.map(page => (
+          page === currentPage ? (
+            <span class="pagination-page current" aria-current="page">{page}</span>
+          ) : (
+            <a href={getPageUrl(page)} class="pagination-page">{page}</a>
+          )
+        ))}
+
+        {visiblePages[visiblePages.length - 1] < totalPages && (
+          <>
+            {visiblePages[visiblePages.length - 1] < totalPages - 1 && (
+              <div class="pagination-ellipsis-wrapper">
+                <button type="button" class="pagination-ellipsis" aria-label="Jump to page">•••</button>
+                <input
+                  type="number"
+                  class="pagination-input"
+                  min="1"
+                  max={totalPages}
+                  placeholder="Go"
+                  aria-label="Enter page number"
+                />
+              </div>
+            )}
+            <a href={getPageUrl(totalPages)} class="pagination-page">{totalPages}</a>
+          </>
+        )}
+      </div>
+
+      {/* Next button */}
+      {hasNext ? (
+        <a href={nextUrl} class="pagination-btn" aria-label="Next page">
+          <span class="pagination-text">Next</span>
+          <span class="pagination-arrow">›</span>
+        </a>
+      ) : (
+        <span class="pagination-btn disabled" aria-disabled="true">
+          <span class="pagination-text">Next</span>
+          <span class="pagination-arrow">›</span>
+        </span>
+      )}
+    </div>
+  </nav>
+)}
+
+<style>
+.pagination {
+  --at-apply: 'mt-10 mb-6';
+}
+
+.pagination-inner {
+  --at-apply: 'flex items-center justify-center gap-0';
+}
+
+.pagination-btn {
+  --at-apply: 'flex items-center gap-1 px-3 py-2 text-sm c-secondary hover:c-primary transition-colors duration-200';
+  letter-spacing: 0.05em;
+}
+
+.pagination-btn.disabled {
+  --at-apply: 'c-tertiary/35 cursor-not-allowed hover:c-tertiary/35';
+}
+
+.pagination-arrow {
+  --at-apply: 'text-base';
+}
+
+.pagination-text {
+  --at-apply: 'hidden sm:inline';
+}
+
+.pagination-pages {
+  --at-apply: 'flex items-center gap-0 border-l border-r border-secondary/30';
+}
+
+.pagination-page {
+  --at-apply: 'min-w-9 h-9 flex items-center justify-center text-sm c-secondary hover:c-primary transition-colors duration-200 font-serif';
+}
+
+.pagination-page.current {
+  --at-apply: 'c-primary font-semibold';
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1.5px;
+}
+
+.pagination-ellipsis-wrapper {
+  --at-apply: 'relative';
+}
+
+.pagination-ellipsis {
+  --at-apply: 'min-w-8 h-9 flex items-center justify-center text-sm c-tertiary hover:c-primary cursor-pointer transition-colors duration-200 border-none bg-transparent';
+  letter-spacing: 0.1em;
+}
+
+.pagination-ellipsis.hidden {
+  --at-apply: 'invisible w-0 min-w-0 overflow-hidden';
+}
+
+.pagination-input {
+  --at-apply: 'absolute top-0 left-0 w-12 h-9 text-sm text-center rounded c-primary bg-secondary/10 border border-secondary/30 outline-none transition-all duration-200 opacity-0 invisible font-serif';
+}
+
+.pagination-input:focus {
+  --at-apply: 'border-primary/60';
+}
+
+.pagination-input.active {
+  --at-apply: 'opacity-100 visible';
+}
+
+/* Hide number input spinners */
+.pagination-input::-webkit-outer-spin-button,
+.pagination-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.pagination-input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>
+
+<script>
+document.addEventListener('astro:page-load', initPagination);
+document.addEventListener('DOMContentLoaded', initPagination);
+
+function initPagination() {
+  const nav = document.querySelector('.pagination') as HTMLElement | null;
+  if (!nav) return;
+
+  const baseUrl = nav.dataset.baseUrl || '';
+  const totalPages = parseInt(nav.dataset.totalPages || '1', 10);
+  const pagePrefix = nav.dataset.pagePrefix || '';
+
+  document.querySelectorAll('.pagination-ellipsis').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const wrapper = btn.closest('.pagination-ellipsis-wrapper');
+      const input = wrapper?.querySelector('.pagination-input') as HTMLInputElement | null;
+      if (!input) return;
+
+      btn.classList.add('hidden');
+      input.classList.add('active');
+      input.focus();
+    });
+  });
+
+  document.querySelectorAll<HTMLInputElement>('.pagination-input').forEach(input => {
+    const wrapper = input.closest('.pagination-ellipsis-wrapper');
+    const btn = wrapper?.querySelector('.pagination-ellipsis');
+
+    input.addEventListener('blur', () => {
+      input.classList.remove('active');
+      input.value = '';
+      btn?.classList.remove('hidden');
+    });
+
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const page = parseInt(input.value, 10);
+        if (page >= 1 && page <= totalPages) {
+          const cleanBase = baseUrl.replace(/\/$/, '');
+          const url = page === 1
+            ? baseUrl
+            : pagePrefix
+              ? `${cleanBase}/${pagePrefix}/${page}`
+              : `${cleanBase}/${page}`;
+          window.location.href = url;
+        }
+      } else if (e.key === 'Escape') {
+        input.blur();
+      }
+    });
+  });
+}
+</script>