methanol 0.0.14 → 0.0.15

package/themes/blog/sources/style.css

@@ -0,0 +1,579 @@
+@import '@wooorm/starry-night/style/core';
+
+html {
+    scroll-behavior: smooth;
+}
+
+:root {
+	--bg: #ffffff;
+	--text: #111827;
+	--text-muted: #6b7280;
+	--primary: #2563eb;
+	--primary-soft: #eff6ff;
+	--border: #f3f4f6;
+	--bg-soft: #f9fafb;
+	--selection-bg: #dbeafe;
+	
+	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	--max-width: 820px;
+    --container-px: 1.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #030712;
+		--text: #f9fafb;
+		--text-muted: #9ca3af;
+		--primary: #60a5fa;
+		--primary-soft: #1e3a8a33;
+		--border: #1f2937;
+		--bg-soft: #111827;
+		--selection-bg: #1e3a8a;
+	}
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+::selection {
+	background: var(--selection-bg);
+}
+
+body {
+	margin: 0;
+	font-family: var(--font-sans);
+	background: var(--bg);
+	color: var(--text);
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+	transition: all 0.2s;
+}
+
+.container {
+	max-width: var(--max-width);
+	margin: 0 auto;
+	padding: 0 var(--container-px);
+	width: 100%;
+}
+
+/* Header */
+.blog-header {
+	padding: 1.5rem 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 2rem;
+    background: var(--bg);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.header-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1.5rem;
+}
+
+.blog-logo {
+	font-size: 1.25rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+    flex-shrink: 0;
+}
+
+.blog-nav {
+	display: flex;
+	gap: 1.25rem;
+}
+
+.blog-nav a {
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: var(--text-muted);
+    white-space: nowrap;
+}
+
+.blog-nav a:hover {
+	color: var(--primary);
+}
+
+/* Nav Toggle */
+.nav-toggle {
+	display: none;
+}
+
+.nav-toggle-label {
+	display: none;
+	cursor: pointer;
+	color: var(--text-muted);
+	padding: 0.25rem;
+}
+
+.nav-toggle-label:hover {
+	color: var(--text);
+}
+
+/* Search Box */
+.search-box {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.35rem 0.5rem;
+	background: transparent;
+	border: none;
+	color: var(--text-muted);
+	font-size: 0.85rem;
+	cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    min-width: 8.5rem; /* Reserve space for icon + Search + kbd */
+    justify-content: flex-start;
+}
+
+.search-box:hover {
+    color: var(--text);
+}
+
+.search-box kbd {
+    font-family: inherit;
+    font-size: 0.75rem;
+    opacity: 0.5;
+    background: var(--bg-soft);
+    padding: 0 0.25rem;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    display: inline-flex;
+    justify-content: center;
+}
+
+/* Post Items */
+.post-list {
+	display: flex;
+	flex-direction: column;
+	gap: 3.5rem;
+}
+
+.post-item {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.post-meta {
+	font-size: 0.875rem;
+	color: var(--text-muted);
+	font-weight: 500;
+}
+
+.post-item-title {
+	margin: 0;
+	font-size: 1.75rem;
+	line-height: 1.25;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+}
+
+.post-item-title a:hover {
+	color: var(--primary);
+}
+
+.post-excerpt {
+    color: var(--text-muted);
+    font-size: 1.05rem;
+    line-height: 1.6;
+    margin-top: 0.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Categories/Collections Buttons */
+.category-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-bottom: 2.5rem;
+}
+
+.category-tag {
+	padding: 0.4rem 0.9rem;
+	background: var(--bg-soft);
+	border: 1px solid var(--border);
+	border-radius: 99px;
+	color: var(--text-muted);
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.category-tag:hover {
+	border-color: var(--primary);
+	color: var(--primary);
+}
+
+.category-tag.active {
+	background: var(--primary);
+	color: #fff;
+	border-color: var(--primary);
+}
+
+/* Post Content */
+.post-header {
+	margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.post-title,
+.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
+    position: relative;
+}
+
+.post-title {
+	font-size: 2.5rem;
+	line-height: 1.2;
+	margin: 0.5rem 0 1rem;
+	font-weight: 800;
+	letter-spacing: -0.03em;
+}
+
+.post-body {
+	font-size: 1.125rem;
+	line-height: 1.75;
+}
+
+.post-body h2 {
+	margin-top: 3rem;
+	margin-bottom: 1rem;
+    font-weight: 700;
+}
+
+.post-body p { margin-bottom: 1.5rem; }
+
+.post-body img {
+	max-width: 100%;
+	border-radius: 12px;
+	margin: 2.5rem 0;
+}
+
+.post-body blockquote {
+	border-left: 4px solid var(--primary);
+	margin: 2rem 0;
+	padding: 0.5rem 0 0.5rem 1.5rem;
+	color: var(--text-muted);
+	font-style: italic;
+    background: var(--bg-soft);
+}
+
+.post-body table {
+	display: block;
+	width: 100%;
+	width: max-content;
+	max-width: 100%;
+	overflow: auto;
+	margin-top: 0;
+	margin-bottom: 2rem;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+
+.post-body table tr {
+	background-color: var(--bg);
+	border-top: 1px solid var(--border);
+}
+
+.post-body table tr:nth-child(2n) {
+	background-color: var(--bg-soft);
+}
+
+.post-body table th,
+.post-body table td {
+	padding: 6px 13px;
+	border: 1px solid var(--border);
+}
+
+.post-body table th {
+	font-weight: 600;
+}
+
+.post-body pre {
+	background: var(--bg-soft);
+	padding: 1.25rem;
+	border-radius: 12px;
+	overflow-x: auto;
+	border: 1px solid var(--border);
+    margin: 2rem 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+
+.post-body :not(pre) > code {
+	background: var(--bg-soft);
+	padding: 0.2em 0.4em;
+	font-size: 0.85em;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+}
+
+/* Heading Anchors */
+.heading-anchor {
+	text-decoration: none;
+	color: var(--text-muted);
+    position: absolute;
+    right: 100%;
+    padding-right: 0.5rem;
+	opacity: 0;
+	transition: opacity 0.2s;
+    font-weight: 400;
+    user-select: none;
+}
+
+.heading-anchor::before { content: "#"; }
+
+.post-title:hover .heading-anchor,
+.post-title:active .heading-anchor,
+h1:hover .heading-anchor, h1:active .heading-anchor,
+h2:hover .heading-anchor, h2:active .heading-anchor,
+h3:hover .heading-anchor, h3:active .heading-anchor,
+h4:hover .heading-anchor, h4:active .heading-anchor,
+h5:hover .heading-anchor, h5:active .heading-anchor,
+h6:hover .heading-anchor, h6:active .heading-anchor {
+	opacity: 1;
+}
+
+/* Search Modal */
+.search-modal {
+	position: fixed;
+	inset: 0;
+	display: none;
+	align-items: flex-start;
+	justify-content: center;
+	z-index: 100;
+	padding-top: 15vh;
+}
+
+.search-modal.open { display: flex; }
+
+.search-modal__scrim {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(4px);
+}
+
+.search-modal__panel {
+	position: relative;
+	width: min(600px, 92vw);
+	max-height: 60vh;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 16px;
+	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.search-input-wrapper {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 1.25rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.search-input {
+	flex: 1;
+	background: transparent;
+	border: none;
+	font-size: 1.125rem;
+	color: var(--text);
+	outline: none;
+}
+
+.search-results {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0.75rem;
+}
+
+.search-result-item {
+	display: block;
+	padding: 1rem;
+	border-radius: 10px;
+	margin-bottom: 0.25rem;
+}
+
+.search-result-item:hover, .search-result-item.active {
+	background: var(--bg-soft);
+}
+
+.search-result-title {
+	font-weight: 600;
+	color: var(--primary);
+	margin-bottom: 0.25rem;
+}
+
+.search-result-excerpt {
+	font-size: 0.875rem;
+	color: var(--text-muted);
+}
+
+.search-result-excerpt mark {
+    background: var(--primary-soft);
+    color: var(--primary);
+    border-radius: 2px;
+}
+
+.search-status {
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+/* Pagination */
+.pagination-container {
+	margin-top: 4rem;
+    display: flex;
+    justify-content: center;
+}
+
+.load-more-btn {
+	background: var(--bg);
+	border: 1px solid var(--border);
+	padding: 0.75rem 2rem;
+	font-size: 0.95rem;
+	font-weight: 600;
+	cursor: pointer;
+	color: var(--text);
+    border-radius: 99px;
+    transition: all 0.2s;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.load-more-btn:hover {
+	border-color: var(--primary);
+    color: var(--primary);
+    background: var(--primary-soft);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.load-more-btn:active {
+    transform: translateY(0);
+}
+
+/* Footer */
+.blog-footer {
+	padding: 4rem 0;
+	border-top: 1px solid var(--border);
+	text-align: center;
+	color: var(--text-muted);
+	font-size: 0.875rem;
+    margin-top: 4rem;
+}
+
+.blog-footer a {
+    color: var(--text);
+    font-weight: 500;
+}
+
+.blog-footer a[href*="methanol"] {
+    color: var(--primary);
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .heading-anchor {
+        position: relative;
+        right: auto;
+        padding-right: 0.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-toggle-label {
+		display: flex;
+		align-items: center;
+	}
+
+	.blog-nav {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background: var(--bg);
+		border-bottom: 1px solid var(--border);
+		flex-direction: column;
+		gap: 0;
+		padding: 1rem 0;
+		transform: translateY(-1rem);
+		opacity: 0;
+		visibility: hidden;
+		transition: all 0.2s ease;
+        z-index: 40;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.blog-nav a {
+		padding: 0.75rem var(--container-px);
+		width: 100%;
+		border-bottom: 1px solid transparent;
+	}
+
+	.nav-toggle:checked ~ .blog-nav {
+		transform: translateY(0);
+		opacity: 1;
+		visibility: visible;
+	}
+    
+    .nav-toggle:checked ~ .nav-toggle-label {
+        color: var(--primary);
+    }
+}
+
+@media (max-width: 640px) {
+    .blog-header { padding: 1rem 0; }
+    .header-container { gap: 1rem; }
+    .header-actions { gap: 0.75rem; }
+    
+    .search-box {
+        padding: 0;
+        width: 2.25rem;
+        height: 2.25rem;
+        min-width: 2.25rem;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+    .search-box span, .search-box kbd {
+        display: none;
+    }
+    
+    .post-item-title { font-size: 1.5rem; }
+    .post-title { font-size: 2rem; }
+    .search-modal__panel { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding-top: 0; }
+}

package/themes/blog/src/date-utils.js

@@ -0,0 +1,28 @@
+/* Copyright Yukino Song, SudoMaker Ltd.
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const pad = (value) => String(value).padStart(2, '0')
+
+export const formatDate = (value) => {
+	if (!value) return ''
+	const date = value instanceof Date ? value : new Date(value)
+	if (Number.isNaN(date.valueOf())) return ''
+	return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())}`
+}

package/themes/blog/src/heading.jsx

@@ -0,0 +1,37 @@
+/* Copyright Yukino Song, SudoMaker Ltd.
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function heading(Tag) {
+	return (props, ...children) => (
+		<Tag {...props}>
+			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-label={`Link to ${props.id}`} />}
+			{...children}
+		</Tag>
+	)
+}
+
+export function createHeadings() {
+	return Object.fromEntries(
+		[1, 2, 3, 4, 5, 6].map((i) => {
+			const tag = `h${i}`
+			return [tag, heading(tag)]
+		})
+	)
+}

package/themes/blog/src/layout-categories.jsx

@@ -0,0 +1,66 @@
+/* Copyright Yukino Song, SudoMaker Ltd.
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { HTMLRenderer as R } from 'methanol'
+import { filterBlogPosts, mapStaticPosts, collectCategories } from './post-utils.js'
+import { formatDate } from '../src/date-utils.js'
+
+const renderPostCards = (posts = []) =>
+	posts.map((p) => {
+		const dateStr = formatDate(p.frontmatter?.date || p.stats?.createdAt)
+		const categories = p.frontmatter?.categories
+		const categoryLabel = Array.isArray(categories) ? categories.join(', ') : categories || ''
+		return (
+			<article class="post-item">
+				<div class="post-meta">
+					{dateStr && <span class="post-date">{dateStr}</span>}
+					{categoryLabel && <span class="post-categories"> &middot; {categoryLabel}</span>}
+				</div>
+				<h2 class="post-item-title">
+					<a href={p.routeHref}>{p.title || 'Untitled'}</a>
+				</h2>
+				<div class="post-excerpt">{p.excerpt || p.frontmatter?.excerpt || 'No excerpt available.'}</div>
+			</article>
+		)
+	})
+
+export const LayoutCategories = ({ PageContent, title, pages, navLinks, components }) => {
+	const { CategoryView } = components || {}
+	const filteredPosts = filterBlogPosts(pages, navLinks)
+	const staticPosts = mapStaticPosts(filteredPosts)
+	const categories = collectCategories(filteredPosts)
+	const visiblePosts = staticPosts.slice(0, 10)
+	const staticCards = renderPostCards(visiblePosts)
+	return (
+		<div class="categories-container">
+			<header class="post-header">
+				<h1 class="post-title">{title}</h1>
+			</header>
+			<div class="categories-content">
+				<PageContent />
+				{CategoryView ? (
+					<CategoryView categories={categories}>{...staticCards}</CategoryView>
+				) : (
+					<p>Error: CategoryView component not found.</p>
+				)}
+			</div>
+		</div>
+	)
+}