methanol 0.0.6 → 0.0.8

package/themes/default/components/LinkButton.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 default function LinkButton({
+	children,
+	variant = 'primary', // primary, secondary, outline, ghost
+	size = 'md', // sm, md, lg
+	class: className = '',
+	...props
+}) {
+	const classes = ['link-button', `link-button--${variant}`, `link-button--${size}`, className]
+		.filter(Boolean)
+		.join(' ')
+
+	return (
+		<a class={classes} {...props}>
+			{children}
+		</a>
+	)
+}

package/themes/default/components/ThemeSearchBox.client.jsx

@@ -20,7 +20,13 @@
 
 import { signal, $, t, If, For, onCondition } from 'refui'
 import { createPortal } from 'refui/extras'
-import { loadPagefind } from '/.methanol_virtual_module/pagefind.js'
+
+let pagefindModule = null
+const loadPagefindModule = async () => {
+	if (pagefindModule) return pagefindModule
+	pagefindModule = import('methanol:pagefind-loader')
+	return pagefindModule
+}
 
 let keybindReady = false
 let cachedPagefind = null
@@ -35,7 +41,8 @@ const resolveShortcutLabel = () => {
 
 const ensurePagefind = async (options) => {
 	if (cachedPagefind) return cachedPagefind
-	const pagefind = await loadPagefind()
+	const module = await loadPagefindModule()
+	const pagefind = await module?.loadPagefind?.()
 	if (!pagefind) return null
 	if (pagefind.options) {
 		const nextOptions = { excerptLength: 30, ...(options || {}) }

package/themes/default/page.jsx

@@ -27,11 +27,11 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	const items = []
 	let hasActive = false
 	for (const node of nodes) {
-		const nodeRoute = node.routeHref || node.routePath || ''
+		const nodeRoute = node.routeHref || ''
 		if (node.type === 'directory') {
 			const label = node.title || node.name
 			const isActive = nodeRoute === currentRoute
-			const href = node.routePath ? encodeURI(node.routeHref || node.routePath) : null
+			const href = node.routeHref
 			const childResult = renderPageTree(node.children || [], currentRoute, depth + 1)
 			const isOpen = depth < 1 || isActive || childResult.hasActive
 			if (isOpen) hasActive = true
@@ -55,7 +55,7 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 		const label = node.title || (node.isIndex ? 'Home' : node.name)
 		const isActive = nodeRoute === currentRoute
 		if (isActive) hasActive = true
-		const href = encodeURI(node.routeHref || node.routePath)
+		const href = node.routeHref
 		items.push(
 			<li>
 				<a class={isActive ? 'active' : null} href={href}>
@@ -67,45 +67,49 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	return { items, hasActive }
 }
 
-const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
+const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 	const page = ctx.page
 	const pagesByRoute = ctx.pagesByRoute
 	const pages = ctx.pages || []
 	const pagesTree = ctx.pagesTree || []
-	const siteName = ctx.site?.name || 'Methanol Site'
-	const title = page?.title || siteName
-	const currentRoute = page?.routeHref || page?.routePath || ''
-	const baseHref = page?.routePath === '/404' ? ctx.site?.base || '/' : null
-	const toc = page?.toc?.length ? renderToc(page.toc) : null
+	const siteName = ctx.site.name || 'Methanol Site'
+	const title = page.title || siteName
+	const currentRoute = page.routeHref || ''
+	const baseHref = page.routeHref === '/404' ? ctx.site.base || '/' : null
+	const toc = page.toc?.length ? renderToc(page.toc) : null
 	const hasToc = Boolean(toc)
 	const layoutClass = hasToc ? 'layout-container' : 'layout-container no-toc'
 	const tree = renderPageTree(pagesTree, currentRoute, 0)
 	const { ThemeSearchBox, ThemeColorSwitch, ThemeAccentSwitch, ThemeToCContainer } = components
-	const rootPage = pagesByRoute?.get?.('/') || pages.find((entry) => entry.routePath === '/')
-	const pageFrontmatter = page?.frontmatter || {}
-	const rootFrontmatter = rootPage?.frontmatter || {}
+	const rootPage = pagesByRoute.get('/') || pages.find((entry) => entry.routeHref === '/')
+	const pageFrontmatter = page.frontmatter || {}
+	const rootFrontmatter = rootPage.frontmatter || {}
 	const themeLogo = '/logo.png'
 	const themeFavIcon = '/favicon.png'
-	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site?.logo ?? themeLogo
-	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site?.favicon ?? themeFavIcon
+	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site.logo ?? themeLogo
+	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site.favicon ?? themeFavIcon
 	const excerpt = pageFrontmatter.excerpt ?? `${title} | ${siteName} - Powered by Methanol`
-	const ogTitle = pageFrontmatter.ogTitle ?? null
-	const ogDescription = pageFrontmatter.ogDescription ?? null
+	const _ogTitle = pageFrontmatter.ogTitle ?? title ?? null
+	const ogTitle = _ogTitle ? `${_ogTitle} | ${siteName}` : null
+	const ogDescription = pageFrontmatter.ogDescription ?? excerpt ?? null
 	const ogImage = pageFrontmatter.ogImage ?? null
 	const ogUrl = pageFrontmatter.ogUrl ?? null
 	const twitterTitle = pageFrontmatter.twitterTitle ?? ogTitle
 	const twitterDescription = pageFrontmatter.twitterDescription ?? ogDescription ?? excerpt
 	const twitterImage = pageFrontmatter.twitterImage ?? ogImage
 	const twitterCard = pageFrontmatter.twitterCard ?? (twitterImage ? 'summary_large_image' : null)
-	const siblings = typeof page?.getSiblings === 'function' ? page.getSiblings() : null
+	const siblings = page.getSiblings()
 	const prevPage = siblings?.prev || null
 	const nextPage = siblings?.next || null
 	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
-	const currentLanguageHref = ctx.language?.href || ctx.language?.routePath || null
+	const currentLanguageHref = ctx.language?.href || ctx.language?.routeHref || null
 	const languageCode = pageFrontmatter.langCode ?? rootFrontmatter.langCode ?? ctx.language?.code ?? 'en'
 	const htmlLang = typeof languageCode === 'string' && languageCode.trim() ? languageCode : 'en'
-	const pagefindEnabled = ctx.site?.pagefind?.enabled !== false
-	const pagefindOptions = ctx.site?.pagefind?.options || null
+	const pagefindEnabled = ctx.site.pagefind?.enabled !== false
+	const pagefindOptions = ctx.site.pagefind?.options || null
+	const repoBase = ctx.site.repoBase
+	const sourceUrl = pageFrontmatter.sourceURL
+	const editUrl = sourceUrl || (repoBase && page.relativePath ? new URL(page.relativePath, repoBase).href : null)
 	const languageSelector = languages.length ? (
 		<div class="lang-switch-wrapper">
 			<select
@@ -115,7 +119,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 				value={currentLanguageHref || undefined}
 			>
 				{languages.map((lang) => {
-					const optionValue = lang.href || lang.routePath
+					const optionValue = lang.href || lang.routeHref
 					const isSelected = optionValue && optionValue === currentLanguageHref
 					return (
 						<option value={optionValue} selected={isSelected ? true : null}>
@@ -164,7 +168,11 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					{twitterDescription ? <meta name="twitter:description" content={twitterDescription} /> : null}
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
 					<ExtraHead />
-					<link rel="preload stylesheet" as="style" href="/.methanol_theme_default/style.css" />
+					<link
+						rel="preload stylesheet"
+						as="style"
+						href="/.methanol_theme_default/style.css"
+					/>
 					<script src="/theme-prepare.js"></script>
 				</head>
 				<body>
@@ -245,28 +253,49 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							</div>
 						</aside>
 						<main class="main-content" data-pagefind-body={pagefindEnabled ? '' : null}>
-							<Page />
+							<PageContent />
 							{prevPage || nextPage ? (
 								<nav class="page-nav">
 									{prevPage ? (
-										<a class="page-nav-card prev" href={prevPage.routeHref || prevPage.routePath}>
+										<a
+											class="page-nav-card prev"
+											href={prevPage.routeHref}
+										>
 											<span class="page-nav-label">Previous</span>
-											<span class="page-nav-title">{prevPage.title || prevPage.routePath}</span>
+											<span class="page-nav-title">{prevPage.title || prevPage.routeHref}</span>
 										</a>
 									) : (
 										<div class="page-nav-spacer"></div>
 									)}
 									{nextPage ? (
-										<a class="page-nav-card next" href={nextPage.routeHref || nextPage.routePath}>
+										<a
+											class="page-nav-card next"
+											href={nextPage.routeHref}
+										>
 											<span class="page-nav-label">Next</span>
-											<span class="page-nav-title">{nextPage.title || nextPage.routePath}</span>
+											<span class="page-nav-title">{nextPage.title || nextPage.routeHref}</span>
 										</a>
 									) : null}
 								</nav>
 							) : null}
 							{page ? (
 								<footer class="page-meta">
-									<div class="page-meta-item">Updated: {page.updatedAt || '-'}</div>
+									<div class="page-meta-item">
+										{editUrl ? (
+											<>
+												<a
+													href={editUrl}
+													target="_blank"
+													rel="noopener noreferrer"
+													class="page-meta-link"
+												>
+													Edit this page
+												</a>
+												<span style="margin: 0 0.5rem; opacity: 0.5;">•</span>
+											</>
+										) : null}
+										Updated: {page.updatedAt || '-'}
+									</div>
 									<div class="page-meta-item">
 										Powered by{' '}
 										<a

package/themes/default/sources/style.css

@@ -1374,11 +1374,11 @@ a {
 	align-items: center;
 }
 
+.page-meta-link,
 .methanol-link {
 	font-weight: 600;
 	color: var(--text);
 	text-decoration: none !important;
-	margin-left: 0.25rem;
 	transition: all 0.2s ease;
 	border-bottom: 1px solid transparent;
 
@@ -1388,6 +1388,10 @@ a {
 	}
 }
 
+.methanol-link {
+	margin-left: 0.25rem;
+}
+
 @media (max-width: 640px) {
 	.page-meta {
 		flex-direction: column;
@@ -1627,6 +1631,110 @@ a {
 	}
 }
 
+/* --- Components --- */
+
+.link-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 600;
+	border-radius: 999px;
+	text-decoration: none !important;
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	cursor: pointer;
+	line-height: 1;
+	gap: 0.5rem;
+	white-space: nowrap;
+}
+
+.link-button:active {
+	transform: scale(0.96);
+}
+
+/* Variants */
+.link-button--primary {
+	background-color: var(--accent);
+	color: var(--accent-foreground);
+	border: 1px solid transparent;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+	&:hover {
+		opacity: 0.9;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+		transform: translateY(-1px);
+	}
+}
+
+.link-button--secondary {
+	background-color: var(--surface-elevated);
+	color: var(--text);
+	border: 1px solid var(--border);
+
+	&:hover {
+		background-color: var(--surface-muted);
+		border-color: var(--muted);
+	}
+}
+
+.link-button--outline {
+	background-color: transparent;
+	color: var(--text);
+	border: 1px solid var(--border);
+
+	&:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+		background-color: var(--accent-soft);
+	}
+}
+
+.link-button--ghost {
+	background-color: transparent;
+	color: var(--muted);
+	border: 1px solid transparent;
+
+	&:hover {
+		color: var(--accent);
+		background-color: var(--accent-soft);
+	}
+}
+
+/* Sizes */
+.link-button--sm {
+	padding: 0.375rem 0.75rem;
+	font-size: 0.85rem;
+}
+
+.link-button--md {
+	padding: 0.625rem 1.25rem;
+	font-size: 0.95rem;
+}
+
+.link-button--lg {
+	padding: 0.875rem 1.75rem;
+	font-size: 1.1rem;
+}
+
+.button-group {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin: 1.5rem 0;
+	align-items: center;
+}
+
+.button-group--left {
+	justify-content: flex-start;
+}
+
+.button-group--center {
+	justify-content: center;
+}
+
+.button-group--right {
+	justify-content: flex-end;
+}
+
 /* --- View Transitions --- */
 
 @view-transition {