methanol 0.0.7 → 0.0.8

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,27 +67,27 @@ 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 ?? title ?? null
 	const ogTitle = _ogTitle ? `${_ogTitle} | ${siteName}` : null
@@ -98,15 +98,18 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	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
@@ -116,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}>
@@ -165,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>
@@ -246,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;