methanol 0.0.18 → 0.0.20

package/themes/default/src/nav-tree.jsx

@@ -45,63 +45,78 @@ const toSignal = (i) => {
 	return sig
 }
 
-const NavTree = ({ nodes, depth }) => (
-	<For entries={nodes}>
-		{({ item }) => {
-			const node = read(item)
-			const { routeHref: href, routePath, type, name, isRoot } = node
-			const { title } = extract(item, 'title')
-
-			const isActive = matchCurrentPath(routePath)
-
-			if (type === 'directory') {
-				const label = title.or(name)
-				const { children } = extract(item, 'children')
-
-				const isOpen = $(() => {
-					if (depth < 1) {
-						return true
-					}
-					const _active = isActive.value
-					const _currentPath = currentPath.value
-					return _active || _currentPath.startsWith(routePath)
-				})
-
-				const header = href ? (
-					<a class={isActive.choose('nav-dir-link active', 'nav-dir-link')} href={href}>
-						{label}
-					</a>
-				) : (
-					<span class="nav-dir-label">{label}</span>
-				)
-
-				return (
-					<li class={isActive.choose('is-active', null)}>
-						<details class="sidebar-collapsible" open={isOpen.choose(true, null)}>
-							<summary class="sb-dir-header">{header}</summary>
-							<If condition={() => children.value.length}>
-								{() => (
-									<ul data-depth={depth + 1}>
-										<NavTree nodes={children} depth={depth + 1} />
-									</ul>
-								)}
-							</If>
-						</details>
-					</li>
-				)
-			} else {
-				const label = title.or(node.isIndex ? 'Home' : name)
-				return (
-					<li>
-						<a class={isActive.choose('active', null)} href={href}>
+const filterVisible = (items) => {
+	if (!Array.isArray(items)) return []
+	return items.filter(({ value: item }) => {
+		if (!item.hidden) {
+			return true
+		}
+
+		const _currentPath = currentPath.value
+		return _currentPath.startsWith(item.routePath)
+	})
+}
+
+const NavTree = ({ nodes, depth }) => {
+	const filtered = signal(nodes, filterVisible)
+	return (
+		<For entries={filtered}>
+			{({ item }) => {
+				const node = read(item)
+				const { routeHref: href, routePath, type, name, isRoot } = node
+				const { title } = extract(item, 'title')
+
+				const isActive = matchCurrentPath(routePath)
+
+				if (type === 'directory') {
+					const label = title.or(name)
+					const { children } = extract(item, 'children')
+
+					const isOpen = $(() => {
+						if (depth < 1) {
+							return true
+						}
+						const _active = isActive.value
+						const _currentPath = currentPath.value
+						return _active || _currentPath.startsWith(routePath)
+					})
+
+					const header = href ? (
+						<a class={isActive.choose('nav-dir-link active', 'nav-dir-link')} href={href}>
 							{label}
 						</a>
-					</li>
-				)
-			}
-		}}
-	</For>
-)
+					) : (
+						<span class="nav-dir-label">{label}</span>
+					)
+
+					return (
+						<li class={isActive.choose('is-active', null)}>
+							<details class="sidebar-collapsible" open={isOpen.choose(true, null)}>
+								<summary class="sb-dir-header">{header}</summary>
+								<If condition={() => children.value.length}>
+									{() => (
+										<ul data-depth={depth + 1}>
+											<NavTree nodes={children} depth={depth + 1} />
+										</ul>
+									)}
+								</If>
+							</details>
+						</li>
+					)
+				} else {
+					const label = title.or(node.isIndex ? 'Home' : name)
+					return (
+						<li>
+							<a class={isActive.choose('active', null)} href={href}>
+								{label}
+							</a>
+						</li>
+					)
+				}
+			}}
+		</For>
+	)
+}
 
 const rootNodes = signal()
 const rootTree = HTMLRenderer.createElement(NavTree, { nodes: rootNodes, depth: 0 })

package/themes/default/src/page.jsx

@@ -61,6 +61,10 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 	const htmlLang = typeof languageCode === 'string' && languageCode.trim() ? languageCode : 'en'
 	const pagefindEnabled = ctx.site.pagefind?.enabled !== false
 	const pagefindOptions = ctx.site.pagefind?.options || null
+	const feedInfo = ctx.site.feed
+	const rssHref = feedInfo?.enabled ? feedInfo.href : null
+	const feedType = feedInfo?.atom ? 'application/atom+xml' : 'application/rss+xml'
+	const feedLabel = feedInfo?.atom ? 'Atom' : 'RSS'
 	const repoBase = ctx.site.repoBase
 	const sourceUrl = pageFrontmatter.sourceURL
 	const editUrl = sourceUrl || (repoBase && page.relativePath ? new URL(page.relativePath, repoBase).href : null)
@@ -108,6 +112,8 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 				<head>
 					<meta charset="UTF-8" />
 					<meta name="viewport" content="width=device-width" />
+					<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+					<meta name="theme-color" content="#09090b" media="(prefers-color-scheme: dark)" />
 					<title>
 						{title} | {siteName}
 					</title>
@@ -122,6 +128,7 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 					{twitterTitle ? <meta name="twitter:title" content={twitterTitle} /> : null}
 					{twitterDescription ? <meta name="twitter:description" content={twitterDescription} /> : null}
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
+					{rssHref ? <link rel="alternate" type={feedType} title={`${siteName} ${feedLabel}`} href={rssHref} /> : null}
 					<link
 						rel="preload stylesheet"
 						as="style"
@@ -205,6 +212,24 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 								{languageSelector}
 								<ThemeColorSwitch />
 								<ThemeAccentSwitch />
+								{rssHref ? (
+									<a class="rss-link" href={rssHref} aria-label={feedLabel} title={feedLabel}>
+										<svg
+											width="18"
+											height="18"
+											viewBox="3 3 18 18"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path d="M4 11a9 9 0 0 1 9 9"></path>
+											<path d="M4 4a16 16 0 0 1 16 16"></path>
+											<circle cx="5" cy="19" r="1"></circle>
+										</svg>
+									</a>
+								) : null}
 							</div>
 						</aside>
 						<main class="main-content" data-pagefind-body={pagefindEnabled ? '' : null}>