@astro-minimax/core 0.1.0

package/src/styles/global.css

@@ -0,0 +1,403 @@
+@import "tailwindcss";
+@import "./typography.css";
+@import "./code-blocks.css";
+@import "./components.css";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+:root,
+html[data-theme="light"] {
+  --background: #f7f3eb;
+  --surface: rgba(255, 255, 255, 0.82);
+  --surface-strong: rgba(255, 252, 247, 0.95);
+  --card: #efe8dc;
+  --foreground: #152334;
+  --foreground-soft: #5d6b80;
+  --muted: #e3ddd2;
+  --border: rgba(21, 35, 52, 0.12);
+  --accent: #0f766e;
+  --accent-soft: rgba(15, 118, 110, 0.14);
+  --shadow-elevated: rgba(15, 23, 42, 0.18);
+  --hero-orb-a: rgba(15, 118, 110, 0.22);
+  --hero-orb-b: rgba(245, 158, 11, 0.18);
+
+  --series-glow: rgba(15, 118, 110, 0.08);
+  --series-border: rgba(15, 118, 110, 0.22);
+  --series-bg-from: rgba(255, 255, 255, 0.7);
+  --series-bg-to: rgba(239, 232, 220, 0.5);
+  --series-pulse: rgba(15, 118, 110, 0.6);
+
+  --viz-bg: rgba(248, 250, 252, 0.8);
+  --viz-border: rgba(21, 35, 52, 0.1);
+  --viz-btn-bg: rgba(255, 255, 255, 0.9);
+  --viz-btn-hover: rgba(15, 118, 110, 0.1);
+}
+
+html[data-theme="dark"] {
+  --background: #0f172a;
+  --surface: rgba(15, 23, 42, 0.76);
+  --surface-strong: rgba(15, 23, 42, 0.92);
+  --card: #1e293b;
+  --foreground: #e7edf7;
+  --foreground-soft: #98a7be;
+  --muted: #223046;
+  --border: rgba(148, 163, 184, 0.18);
+  --accent: #5eead4;
+  --accent-soft: rgba(94, 234, 212, 0.16);
+  --shadow-elevated: rgba(2, 6, 23, 0.6);
+  --hero-orb-a: rgba(94, 234, 212, 0.18);
+  --hero-orb-b: rgba(251, 191, 36, 0.12);
+
+  --series-glow: rgba(94, 234, 212, 0.12);
+  --series-border: rgba(94, 234, 212, 0.3);
+  --series-bg-from: rgba(13, 27, 42, 0.9);
+  --series-bg-to: rgba(30, 41, 59, 0.6);
+  --series-pulse: rgba(94, 234, 212, 0.8);
+
+  --viz-bg: rgba(30, 41, 59, 0.5);
+  --viz-border: rgba(100, 116, 139, 0.2);
+  --viz-btn-bg: rgba(30, 41, 59, 0.9);
+  --viz-btn-hover: rgba(94, 234, 212, 0.15);
+}
+
+@theme inline {
+  --font-app:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas,
+    monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-foreground-soft: var(--foreground-soft);
+  --color-accent: var(--accent);
+  --color-card: var(--card);
+  --color-surface: var(--surface);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-shadow-elevated: var(--shadow-elevated);
+  --color-series-glow: var(--series-glow);
+  --color-series-border: var(--series-border);
+  --color-series-pulse: var(--series-pulse);
+  --color-viz-bg: var(--viz-bg);
+  --color-viz-border: var(--viz-border);
+  --color-viz-btn-bg: var(--viz-btn-bg);
+  --color-viz-btn-hover: var(--viz-btn-hover);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-accent/75;
+    scrollbar-width: auto;
+    scrollbar-color: var(--color-muted) transparent;
+  }
+  html {
+    @apply overflow-y-scroll scroll-smooth;
+  }
+  body {
+    @apply flex min-h-svh flex-col bg-background font-app text-foreground selection:bg-accent/75 selection:text-background;
+    transition:
+      background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  header,
+  footer,
+  main {
+    transition:
+      background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  a,
+  button {
+    @apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@utility max-w-app {
+  @apply max-w-3xl;
+}
+
+@utility app-layout {
+  @apply mx-auto w-full max-w-app px-4;
+}
+
+.active-nav {
+  @apply underline decoration-wavy decoration-2 underline-offset-8;
+}
+
+:target {
+  scroll-margin-block: 1rem;
+}
+
+/* ===== Reading Mode ===== */
+body.reading-mode header,
+body.reading-mode footer,
+body.reading-mode [id="back-button"],
+body.reading-mode .floating-toc-container,
+body.reading-mode #sticky-header {
+  display: none !important;
+}
+
+body.reading-mode main {
+  max-width: 65ch;
+  margin-inline: auto;
+  padding-top: 2rem;
+}
+
+body.reading-mode .app-prose {
+  font-size: 1.125rem;
+  line-height: 1.85;
+}
+
+body.reading-mode .post-actions,
+body.reading-mode .share-links,
+body.reading-mode [data-pagefind-ignore] {
+  display: none !important;
+}
+
+/* ===== Dark Mode h5/h6 Override ===== */
+html[data-theme="dark"] .app-prose h5,
+html[data-theme="dark"] .app-prose h6,
+html[data-theme="dark"] .prose h5,
+html[data-theme="dark"] .prose h6 {
+  color: #f0f6fc !important;
+}
+
+/* ===== View Transitions - Circular Expansion ===== */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+}
+
+html.dark-transition::view-transition-old(root) {
+  z-index: 9999;
+}
+
+html.dark-transition::view-transition-new(root) {
+  z-index: 1;
+}
+
+@keyframes circle-expand {
+  0% {
+    clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%));
+    opacity: 0.9;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    clip-path: circle(150% at var(--theme-x, 50%) var(--theme-y, 50%));
+    opacity: 1;
+  }
+}
+
+html.theme-transition::view-transition-new(root) {
+  animation: circle-expand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html.theme-transition.dark-transition::view-transition-old(root) {
+  animation: circle-expand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html.theme-transition.dark-transition::view-transition-new(root) {
+  animation: none;
+}
+
+html.no-view-transitions {
+  --transition-duration: 0.25s;
+}
+
+html.no-view-transitions body,
+html.no-view-transitions header,
+html.no-view-transitions footer,
+html.no-view-transitions main {
+  transition:
+    background-color var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
+    color var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
+    border-color var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== Theme Toggle Button ===== */
+#theme-btn {
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.2s ease-out;
+}
+
+#theme-btn::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  pointer-events: none;
+}
+
+html:not([data-theme="dark"]) #theme-btn::after {
+  box-shadow: 0 0 20px 4px rgba(0, 108, 172, 0.3);
+}
+html[data-theme="dark"] #theme-btn::after {
+  box-shadow: 0 0 20px 4px rgba(255, 107, 1, 0.3);
+}
+#theme-btn:hover::after {
+  opacity: 1;
+}
+#theme-btn:active {
+  transform: scale(0.92);
+}
+#theme-btn::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.4s ease-out;
+  opacity: 0;
+}
+#theme-btn:active::before {
+  width: 200%;
+  height: 200%;
+  opacity: 0.15;
+}
+html:not([data-theme="dark"]) #theme-btn:active::before {
+  background: radial-gradient(circle, rgba(0, 108, 172, 0.3) 0%, transparent 70%);
+}
+html[data-theme="dark"] #theme-btn:active::before {
+  background: radial-gradient(circle, rgba(255, 107, 1, 0.3) 0%, transparent 70%);
+}
+#theme-btn svg {
+  transition:
+    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.3s ease-out,
+    color 0.3s ease-out;
+}
+#theme-btn .icon-moon {
+  transform: scale(1) rotate(0deg);
+}
+#theme-btn .icon-sun {
+  transform: scale(0) rotate(-180deg);
+}
+html[data-theme="dark"] #theme-btn .icon-moon {
+  transform: scale(0) rotate(180deg);
+}
+html[data-theme="dark"] #theme-btn .icon-sun {
+  transform: scale(1) rotate(0deg);
+}
+
+/* ===== Reduced Motion ===== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  #theme-btn:active {
+    transform: scale(0.95);
+  }
+}
+
+html.theme-transition {
+  --page-scale: 0.995;
+}
+html.theme-transition body {
+  overflow-x: hidden;
+}
+
+/* ===== Print Styles ===== */
+@media print {
+  body {
+    background: #fff !important;
+    color: #000 !important;
+    font-size: 12pt;
+  }
+  header,
+  footer,
+  nav,
+  #floating-actions,
+  #ai-chat-panel,
+  #ai-chat-toggle-fab,
+  #sticky-header,
+  #back-button,
+  .floating-toc-container,
+  .post-actions,
+  .share-links,
+  .code-copy,
+  .code-collapse-toggle,
+  .code-collapse-fade,
+  #lightbox-overlay,
+  [data-pagefind-ignore] {
+    display: none !important;
+  }
+  main {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  a {
+    color: #000 !important;
+    text-decoration: underline;
+  }
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    color: #666;
+  }
+  a[href^="#"]::after,
+  a[href^="javascript"]::after {
+    content: "";
+  }
+  pre {
+    white-space: pre-wrap !important;
+    border: 1px solid #ccc !important;
+    background: #f5f5f5 !important;
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+  h1,
+  h2,
+  h3,
+  h4 {
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+  .app-prose {
+    max-width: 100% !important;
+  }
+}
+
+.card,
+[class*="card"],
+article,
+.prose {
+  transition:
+    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/src/styles/typography.css

@@ -0,0 +1,149 @@
+@plugin "@tailwindcss/typography";
+
+@layer base {
+  /* ===== Override default Tailwind Typography styles ===== */
+  .app-prose {
+    @apply prose;
+
+    /* 所有标题使用 foreground 颜色 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    th {
+      @apply mb-3 text-foreground;
+    }
+
+    h3 {
+      @apply italic;
+    }
+
+    p,
+    strong,
+    ol,
+    ul,
+    figcaption,
+    table,
+    code {
+      @apply text-foreground;
+    }
+
+    a {
+      @apply wrap-break-word text-foreground underline decoration-dashed underline-offset-4 hover:text-accent focus-visible:no-underline;
+    }
+
+    ul {
+      @apply overflow-x-clip;
+    }
+
+    li {
+      @apply marker:text-accent;
+    }
+
+    hr {
+      @apply border-border;
+    }
+
+    img {
+      @apply mx-auto border border-border;
+    }
+
+    figcaption {
+      @apply opacity-75;
+    }
+
+    table {
+      th,
+      td {
+        @apply border border-border p-2;
+      }
+
+      th {
+        @apply py-1.5;
+      }
+
+      code {
+        @apply break-all sm:break-normal;
+      }
+    }
+
+    code {
+      @apply rounded bg-muted/75 p-1 wrap-break-word text-foreground before:content-none after:content-none;
+    }
+
+    .astro-code code {
+      @apply flex-[1_0_100%] bg-inherit p-0;
+    }
+
+    blockquote {
+      @apply border-s-accent/80 wrap-break-word opacity-80;
+    }
+
+    .heading-anchor {
+      @apply mr-1.5 text-accent/50 no-underline opacity-0 transition-opacity;
+    }
+
+    h1:hover .heading-anchor,
+    h2:hover .heading-anchor,
+    h3:hover .heading-anchor,
+    h4:hover .heading-anchor,
+    h5:hover .heading-anchor,
+    h6:hover .heading-anchor,
+    .heading-anchor:focus {
+      @apply opacity-100;
+    }
+
+    details {
+      @apply inline-block cursor-pointer text-foreground select-none [&_p]:hidden [&_ul]:my-0!;
+    }
+
+    summary {
+      @apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
+    }
+
+    pre {
+      @apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-dashed;
+    }
+  }
+
+  /* ===== Code Blocks & Syntax Highlighting ===== */
+  .astro-code {
+    @apply bg-background text-(--shiki-light);
+  }
+
+  .astro-code span {
+    @apply text-(--shiki-light);
+  }
+
+  html[data-theme="dark"] .astro-code {
+    @apply bg-background text-(--shiki-dark);
+  }
+
+  html[data-theme="dark"] .astro-code span {
+    @apply text-(--shiki-dark);
+  }
+
+  /* Shiki transformer styles: diff, highlight, word-highlight */
+  .astro-code .line.diff.add {
+    @apply relative inline-block w-full bg-green-400/20;
+  }
+  .astro-code .line.diff.add::after {
+    content: "+";
+    @apply absolute left-1 text-green-500;
+  }
+  .astro-code .line.diff.remove {
+    @apply relative inline-block w-full bg-red-500/20;
+  }
+  .astro-code .line.diff.remove::after {
+    content: "-";
+    @apply absolute left-1 text-red-500;
+  }
+  .astro-code .line.highlighted {
+    @apply inline-block w-full bg-slate-400/20;
+  }
+  .astro-code .highlighted-word {
+    @apply rounded-sm border border-border px-0.5 py-px;
+  }
+}

package/src/types.ts

@@ -0,0 +1,89 @@
+/**
+ * @astro-minimax/core - Type definitions
+ *
+ * Consumer projects must provide a `src/config.ts` that exports a `SITE` object
+ * conforming to the `SiteConfig` interface below.
+ */
+
+export interface NavItem {
+  key: string;
+  enabled: boolean;
+}
+
+export interface EditPostConfig {
+  enabled: boolean;
+  text: string;
+  url: string;
+}
+
+export interface FeaturesConfig {
+  tags?: boolean;
+  categories?: boolean;
+  series?: boolean;
+  archives?: boolean;
+  friends?: boolean;
+  projects?: boolean;
+  search?: boolean;
+  darkMode?: boolean;
+  ai?: boolean;
+  waline?: boolean;
+  sponsor?: boolean;
+}
+
+export interface WalineConfig {
+  serverURL: string;
+}
+
+export interface AiConfig {
+  apiKey?: string;
+  baseURL?: string;
+  model?: string;
+  systemPrompt?: string;
+}
+
+export interface SponsorItem {
+  platform: string;
+  qrcode: string;
+  hint: string;
+}
+
+export interface SponsorConfig {
+  items: SponsorItem[];
+}
+
+export interface CopyrightConfig {
+  license: string;
+  url: string;
+}
+
+export interface UmamiConfig {
+  websiteId: string;
+  src: string;
+}
+
+export interface SiteConfig {
+  website: string;
+  author: string;
+  profile?: string;
+  desc: string;
+  title: string;
+  ogImage?: string;
+  postPerIndex?: number;
+  postPerPage?: number;
+  scheduledPostMargin?: number;
+  showBackButton?: boolean;
+  showArchives?: boolean;
+  startDate?: string;
+  editPost?: EditPostConfig;
+  dynamicOgImage?: boolean;
+  dir?: "ltr" | "rtl";
+  lang?: string;
+  timezone?: string;
+  features?: FeaturesConfig;
+  nav?: { items: NavItem[] };
+  umami?: UmamiConfig;
+  waline?: WalineConfig;
+  ai?: AiConfig;
+  sponsor?: SponsorConfig;
+  copyright?: CopyrightConfig;
+}

package/src/utils/generateOgImages.ts

@@ -0,0 +1,38 @@
+import { type CollectionEntry } from "astro:content";
+import postOgImage from "./og-templates/post";
+import siteOgImage from "./og-templates/site";
+
+// Lazy-load resvg only when needed (build time)
+// This allows the module to be externalized for Cloudflare Workers
+let ResvgClass: typeof import("@resvg/resvg-js").Resvg | null = null;
+
+async function getResvg() {
+  if (!ResvgClass) {
+    try {
+      const module = await import("@resvg/resvg-js");
+      ResvgClass = module.Resvg;
+    } catch {
+      throw new Error(
+        "@resvg/resvg-js is not available. OG images must be prerendered at build time."
+      );
+    }
+  }
+  return ResvgClass;
+}
+
+async function svgBufferToPngBuffer(svg: string) {
+  const Resvg = await getResvg();
+  const resvg = new Resvg(svg);
+  const pngData = resvg.render();
+  return pngData.asPng();
+}
+
+export async function generateOgImageForPost(post: CollectionEntry<"blog">) {
+  const svg = await postOgImage(post);
+  return svgBufferToPngBuffer(svg);
+}
+
+export async function generateOgImageForSite() {
+  const svg = await siteOgImage();
+  return svgBufferToPngBuffer(svg);
+}

package/src/utils/getCategoryPath.ts

@@ -0,0 +1,23 @@
+/**
+ * Build category URL path segments for routing.
+ * "教程/Rust" → ["教程", "Rust"] for page 1, ["教程", "Rust", "2"] for page 2
+ */
+export function getCategoryPathSegments(category: string, page = 1): string[] {
+  const parts = category.split("/");
+  if (page <= 1) return parts;
+  return [...parts, String(page)];
+}
+
+/**
+ * Build full category URL for links (each segment encoded).
+ * "教程/Rust" → "/zh/categories/教程/Rust/" or "/zh/categories/教程/Rust/2/"
+ */
+export function getCategoryUrl(
+  lang: string,
+  category: string,
+  page = 1
+): string {
+  const segments = getCategoryPathSegments(category, page);
+  const encoded = segments.map((p) => encodeURIComponent(p)).join("/");
+  return `/${lang}/categories/${encoded}/`;
+}