methanol 0.0.13 → 0.0.15

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

@@ -0,0 +1,65 @@
+/* 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, collectCollectionTitles } from './post-utils.js'
+import { formatDate } from '../src/date-utils.js'
+
+const renderPostCards = (posts = [], collectionTitles = {}) =>
+	posts.map((p) => {
+		const dateStr = formatDate(p.frontmatter?.date || p.stats?.createdAt)
+		const collectionLabel = p.collection ? collectionTitles?.[p.collection] || p.collection : ''
+		return (
+			<article class="post-item">
+				<div class="post-meta">
+					{dateStr && <span class="post-date">{dateStr}</span>}
+					{collectionLabel && <span class="post-categories"> &middot; {collectionLabel}</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 LayoutCollections = ({ PageContent, title, pages, pagesByRoute, navLinks, components }) => {
+	const { CollectionView } = components || {}
+	const filteredPosts = filterBlogPosts(pages, navLinks)
+	const staticPosts = mapStaticPosts(filteredPosts)
+	const collectionTitles = collectCollectionTitles(staticPosts, pagesByRoute)
+	const visiblePosts = staticPosts.slice(0, 10)
+	const staticCards = renderPostCards(visiblePosts, collectionTitles)
+	return (
+		<div class="categories-container">
+			<header class="post-header">
+				<h1 class="post-title">{title}</h1>
+			</header>
+			<div class="categories-content">
+				<PageContent />
+				{CollectionView ? (
+					<CollectionView collectionTitles={collectionTitles}>{...staticCards}</CollectionView>
+				) : (
+					<p>Error: CollectionView component not found.</p>
+				)}
+			</div>
+		</div>
+	)
+}

package/themes/blog/src/layout-home.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 } 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)
+		return (
+			<article class="post-item">
+				<div class="post-meta">{dateStr && <span class="post-date">{dateStr}</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 LayoutHome = ({ PageContent, pages, navLinks, components }) => {
+	const { PostList } = components || {}
+	const filteredPosts = filterBlogPosts(pages, navLinks)
+	const staticPosts = mapStaticPosts(filteredPosts)
+	const visiblePosts = staticPosts.slice(0, 10)
+	const hasMore = staticPosts.length > visiblePosts.length
+	const staticCards = renderPostCards(visiblePosts)
+	return (
+		<div class="home-container">
+			<div class="home-intro">
+				<PageContent />
+			</div>
+			<div class="post-list-wrapper">
+				{staticPosts.length > 0 ? (
+					PostList ? (
+						<PostList initialCount={10} hasMore={hasMore}>
+							{...staticCards}
+						</PostList>
+					) : (
+						<p>Error: PostList component not found.</p>
+					)
+				) : (
+					<p>No posts found.</p>
+				)}
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,42 @@
+/* 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'
+
+export const LayoutPost = ({ PageContent, title, page }) => {
+	return (
+		<article class="post-content">
+			<header class="post-header">
+				{page.frontmatter.date && <div class="post-meta">{new Date(page.frontmatter.date).toLocaleDateString()}</div>}
+				<h1 class="post-title">{title}</h1>
+				{page.frontmatter.categories && (
+					<div class="post-meta">
+						{Array.isArray(page.frontmatter.categories)
+							? page.frontmatter.categories.join(', ')
+							: page.frontmatter.categories}
+					</div>
+				)}
+			</header>
+			<div class="post-body">
+				<PageContent />
+			</div>
+		</article>
+	)
+}

package/themes/blog/src/page.jsx

@@ -0,0 +1,152 @@
+/* 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, DOCTYPE_HTML } from 'methanol'
+import { LayoutHome } from './layout-home.jsx'
+import { LayoutCategories } from './layout-categories.jsx'
+import { LayoutCollections } from './layout-collections.jsx'
+import { LayoutPost } from './layout-post.jsx'
+
+const Header = ({ siteName, navLinks, components, pagefindOptions }) => {
+	const { ThemeSearchBox } = components || {}
+	return (
+		<header class="blog-header">
+			<div class="container header-container">
+				<a href="/" class="blog-logo">
+					{siteName}
+				</a>
+				<div class="header-actions">
+					{ThemeSearchBox && <ThemeSearchBox options={pagefindOptions} />}
+					
+					<input type="checkbox" id="nav-toggle" class="nav-toggle" />
+					<label for="nav-toggle" class="nav-toggle-label">
+						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="3" y1="12" x2="21" y2="12"></line>
+							<line x1="3" y1="6" x2="21" y2="6"></line>
+							<line x1="3" y1="18" x2="21" y2="18"></line>
+						</svg>
+					</label>
+
+					<nav class="blog-nav">
+						{navLinks.map((link, i) => (
+							<a key={i} href={link.href}>
+								{link.label}
+							</a>
+						))}
+					</nav>
+				</div>
+			</div>
+		</header>
+	)
+}
+
+const Footer = ({ siteName }) => (
+	<footer class="blog-footer">
+		<div class="container">
+			<p>
+				&copy; {new Date().getFullYear()} {siteName}. Powered by <a href="https://methanol.sudoMaker.com">Methanol</a>.
+			</p>
+		</div>
+	</footer>
+)
+
+const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx, withBase }) => {
+	const page = ctx.page
+	const siteName = ctx.site.name || 'Methanol Blog'
+	const title = page.title || siteName
+
+	const isHome = page.routePath === '/'
+
+	const navLinks = page.frontmatter?.navLinks ||
+		ctx.pagesByRoute.get('/')?.frontmatter?.navLinks ||
+		ctx.site.navLinks || [
+			{ label: 'Home', href: '/' },
+			{ label: 'About', href: '/about' },
+			{ label: 'Categories', href: '/categories' },
+			{ label: 'Collections', href: '/collections' }
+		]
+	const resolvedNavLinks = navLinks.map((link) => {
+		const href = link?.href
+		if (typeof href === 'string' && href.startsWith('/')) {
+			return { ...link, href: withBase(href) }
+		}
+		return link
+	})
+
+	const isCategoriesPage = page.routePath === '/categories'
+	const isCollectionsPage = page.routePath === '/collections'
+
+	const pagefindEnabled = ctx.site.pagefind?.enabled !== false
+	const pagefindOptions = ctx.site.pagefind?.options || null
+
+	return (
+		<>
+			{DOCTYPE_HTML}
+			<html lang="en">
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+					<title>
+						{title} | {siteName}
+					</title>
+					<link rel="stylesheet" href="/.methanol_theme_blog/style.css" />
+					<ExtraHead />
+				</head>
+				<body>
+					<div class="layout">
+						<Header
+							siteName={siteName}
+							navLinks={resolvedNavLinks}
+							components={pagefindEnabled ? components : {}}
+							pagefindOptions={pagefindOptions}
+						/>
+						<main class="container main-content">
+							{isHome ? (
+								<LayoutHome PageContent={PageContent} pages={ctx.pages} navLinks={navLinks} components={components} />
+							) : isCategoriesPage ? (
+								<LayoutCategories
+									PageContent={PageContent}
+									title={title}
+									pages={ctx.pages}
+									navLinks={navLinks}
+									components={components}
+								/>
+							) : isCollectionsPage ? (
+								<LayoutCollections
+									PageContent={PageContent}
+									title={title}
+									pages={ctx.pages}
+									pagesByRoute={ctx.pagesByRoute}
+									navLinks={navLinks}
+									components={components}
+								/>
+							) : (
+								<LayoutPost PageContent={PageContent} title={title} page={page} />
+							)}
+						</main>
+						<Footer siteName={siteName} />
+					</div>
+				</body>
+			</html>
+		</>
+	)
+}
+
+export default PAGE_TEMPLATE

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

@@ -0,0 +1,83 @@
+/* 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 { extractExcerpt } from 'methanol'
+
+const isBlogPost = (page) => {
+	if (!page || page.hidden) return false
+	const href = page.routeHref
+	if (!href) return false
+	if (href === '/' || href === '/404' || href === '/offline') return false
+	if (href.startsWith('/.methanol')) return false
+	return true
+}
+
+export const filterBlogPosts = (pages, navLinks = []) => {
+	const excluded = new Set((navLinks || []).map((link) => link?.href).filter(Boolean))
+	const list = (pages || []).filter((page) => isBlogPost(page) && !excluded.has(page.routeHref))
+	list.sort((a, b) => {
+		const dateA = new Date(a.frontmatter?.date || a.stats?.createdAt || 0)
+		const dateB = new Date(b.frontmatter?.date || b.stats?.createdAt || 0)
+		return dateB - dateA
+	})
+	return list
+}
+
+export const getExcerpt = (page) => extractExcerpt(page)
+
+export const getCollection = (page) => {
+	if (!page?.dir) return null
+	return page.dir.split('/')[0]
+}
+
+export const mapStaticPosts = (posts = []) =>
+	posts.map((page) => ({
+		title: page.title,
+		routeHref: page.routeHref,
+		frontmatter: page.frontmatter || {},
+		stats: page.stats || {},
+		excerpt: getExcerpt(page),
+		collection: getCollection(page)
+	}))
+
+export const collectCategories = (posts = []) =>
+	Array.from(
+		new Set(
+			posts.flatMap((page) => {
+				const c = page.frontmatter?.categories
+				return Array.isArray(c) ? c : c ? [c] : []
+			})
+		)
+	).sort()
+
+export const collectCollectionTitles = (posts = [], pagesByRoute = new Map()) => {
+	const collectionTitles = {}
+	for (const collection of new Set(posts.map((p) => p.collection).filter(Boolean))) {
+		const routePath = `/${collection}/`
+		const entry = pagesByRoute?.get?.(routePath) || pagesByRoute?.get?.(`/${collection}`) || null
+		collectionTitles[collection] = entry?.title || collection
+	}
+	for (const key of Object.keys(collectionTitles).sort()) {
+		if (!collectionTitles[key]) {
+			collectionTitles[key] = key
+		}
+	}
+	return collectionTitles
+}

package/themes/default/sources/theme-prepare.js

@@ -59,4 +59,3 @@
 	}
 	document.addEventListener('pointerover', onHover, { capture: true, passive: true })
 })
-console.log('theme prep')

package/themes/default/src/page.jsx

@@ -254,7 +254,7 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 									<div class="page-meta-item">
 										Powered by{' '}
 										<a
-											href="https://github.com/SudoMaker/Methanol"
+											href="https://methanol.sudoMaker.com"
 											target="_blank"
 											rel="noopener noreferrer"
 											class="methanol-link"