methanol 0.0.3 → 0.0.5

package/README.md

@@ -2,7 +2,7 @@
 
 Opinionated MDX-first static site generator powered by rEFui + Vite.
 
-For full documentation and examples, see the `methanol-docs` project.
+For full documentation and examples, visit [Methanol Docs](https://methanol.netlify.app/).
 
 ## Quick start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "methanol",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Static site generator powered by rEFui and MDX",
   "main": "./index.js",
   "type": "module",

package/src/build-system.js

@@ -174,7 +174,7 @@ export const runViteBuild = async (entry, htmlCache) => {
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
-		base: './',
+		base: '/',
 		publicDir: state.STATIC_DIR === false ? false : state.STATIC_DIR,
 		build: {
 			outDir: state.DIST_DIR,

package/src/preview-server.js

@@ -29,7 +29,7 @@ export const runVitePreview = async () => {
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
-		base: './',
+		base: '/',
 		build: {
 			outDir: state.DIST_DIR
 		}

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

@@ -29,19 +29,21 @@ export default function (props, ...children) {
 	const top = signal(0)
 	const height = signal(0)
 	const opacity = signal(0)
-	
+
 	const updateActive = () => {
 		if (!el.value) return
-		
+
 		const links = Array.from(el.value.querySelectorAll('a'))
 		if (!links.length) return
 
 		// Map links to their corresponding content anchors
-		const anchors = links.map(link => {
-			const href = link.getAttribute('href')
-			if (!href || !href.startsWith('#')) return null
-			return document.getElementById(href.slice(1))
-		}).filter(Boolean)
+		const anchors = links
+			.map((link) => {
+				const href = link.getAttribute('href')
+				if (!href || !href.startsWith('#')) return null
+				return document.getElementById(href.slice(1))
+			})
+			.filter(Boolean)
 
 		if (!anchors.length) return
 
@@ -56,13 +58,13 @@ export default function (props, ...children) {
 		for (let i = 0; i < anchors.length; i++) {
 			const anchor = anchors[i]
 			const nextAnchor = anchors[i + 1]
-			
+
 			const sectionStart = anchor.offsetTop - threshold
 			const sectionEnd = nextAnchor ? nextAnchor.offsetTop - threshold : document.body.offsetHeight
 
 			// A section is visible if its range overlaps with the viewport [scrollY, scrollY + windowHeight]
-			const isVisible = sectionStart < (scrollY + windowHeight - threshold) && sectionEnd > scrollY
-			
+			const isVisible = sectionStart < scrollY + windowHeight - threshold && sectionEnd > scrollY
+
 			if (isVisible) {
 				visibleAnchors.add(anchor)
 			}
@@ -77,10 +79,10 @@ export default function (props, ...children) {
 		let firstActiveLink = null
 		let lastActiveLink = null
 
-		links.forEach(l => {
+		links.forEach((l) => {
 			const href = l.getAttribute('href')
 			const anchorId = href ? href.slice(1) : null
-			const anchor = anchors.find(a => a.id === anchorId)
+			const anchor = anchors.find((a) => a.id === anchorId)
 			if (visibleAnchors.has(anchor)) {
 				l.classList.add('active')
 				if (!firstActiveLink) firstActiveLink = l
@@ -130,7 +132,7 @@ export default function (props, ...children) {
 			ticking = true
 		}
 	}
-	
+
 	// Wait for mount/layout
 	useEffect(() => {
 		updateActive()
@@ -144,9 +146,14 @@ export default function (props, ...children) {
 
 	return (
 		<aside class="toc-panel" $ref={el}>
-			<div class="toc-indicator" style:top={t`${top}px`} style:height={t`${height}px`} style:opacity={t`${opacity}`}></div>
+			<div
+				class="toc-indicator"
+				style:top={t`${top}px`}
+				style:height={t`${height}px`}
+				style:opacity={t`${opacity}`}
+			></div>
 			<div class="toc">
-				<h4>On this page</h4>
+				<div class="toc-heading">On this page</div>
 				<ul>{...children}</ul>
 			</div>
 		</aside>

package/themes/default/components/ThemeToCContainer.static.jsx

@@ -53,7 +53,7 @@ export default function (props, ...children) {
 	return (
 		<aside class="toc-panel">
 			<div class="toc">
-				<h4>On this page</h4>
+				<div class="toc-heading">On this page</div>
 				<ul>{...children}</ul>
 			</div>
 		</aside>

package/themes/default/heading.jsx

@@ -21,7 +21,7 @@
 export function heading(Tag) {
 	return (props, ...children) => (
 		<Tag {...props}>
-			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-hidden />}
+			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-label={`Link to ${props.id}`}/>}
 			{...children}
 		</Tag>
 	)

package/themes/default/page.jsx

@@ -86,7 +86,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	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 excerpt = pageFrontmatter.excerpt ?? null
+	const excerpt = pageFrontmatter.excerpt ?? `${title} | ${siteName} - Powered by Methanol`
 	const ogTitle = pageFrontmatter.ogTitle ?? null
 	const ogDescription = pageFrontmatter.ogDescription ?? null
 	const ogImage = pageFrontmatter.ogImage ?? null
@@ -100,8 +100,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const nextPage = siblings?.next || null
 	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
 	const currentLanguageHref = ctx.language?.href || ctx.language?.routePath || null
-	const languageCode =
-		pageFrontmatter.langCode ?? rootFrontmatter.langCode ?? ctx.language?.code ?? 'en'
+	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
@@ -153,7 +152,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					</title>
 					{baseHref ? <base href={baseHref} /> : null}
 					<link rel="icon" href={favicon} />
-					{excerpt ? <meta name="description" content={excerpt} /> : null}
+					<meta name="description" content={excerpt} />
 					{ogTitle ? <meta property="og:title" content={ogTitle} /> : null}
 					{ogDescription ? <meta property="og:description" content={ogDescription} /> : null}
 					{ogImage ? <meta property="og:image" content={ogImage} /> : null}
@@ -201,11 +200,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						</svg>
 					</label>
 					{pagefindEnabled ? (
-						<button
-							class="search-toggle-label"
-							aria-label="Open search"
-							onclick="window.__methanolSearchOpen()"
-						>
+						<button class="search-toggle-label" aria-label="Open search" onclick="window.__methanolSearchOpen()">
 							<svg
 								width="24"
 								height="24"
@@ -249,7 +244,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						<aside class="sidebar">
 							<div class="sidebar-header">
 								<div class="logo">
-									<img src={logo} />
+									<img src={logo} alt="logo" fetchpriority="high"/>
 									<span>{siteName}</span>
 								</div>
 								{pagefindEnabled ? <ThemeSearchBox options={pagefindOptions} /> : null}
@@ -272,7 +267,9 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 											<span class="page-nav-label">Previous</span>
 											<span class="page-nav-title">{prevPage.title || prevPage.routePath}</span>
 										</a>
-									) : <div class="page-nav-spacer"></div>}
+									) : (
+										<div class="page-nav-spacer"></div>
+									)}
 									{nextPage ? (
 										<a class="page-nav-card next" href={nextPage.routeHref || nextPage.routePath}>
 											<span class="page-nav-label">Next</span>
@@ -283,11 +280,17 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							) : null}
 							{page ? (
 								<footer class="page-meta">
+									<div class="page-meta-item">Updated: {page.updatedAt || '-'}</div>
 									<div class="page-meta-item">
-										Updated: {page.updatedAt || '-'}
-									</div>
-									<div class="page-meta-item">
-										Powered by <a href="https://github.com/SudoMaker/Methanol" target="_blank" rel="noopener noreferrer" class="methanol-link">Methanol</a>
+										Powered by{' '}
+										<a
+											href="https://github.com/SudoMaker/Methanol"
+											target="_blank"
+											rel="noopener noreferrer"
+											class="methanol-link"
+										>
+											Methanol
+										</a>
 									</div>
 								</footer>
 							) : null}

package/themes/default/sources/style.css

@@ -1105,7 +1105,7 @@ a {
 }
 
 .toc {
-	h4 {
+	.toc-heading {
 		margin: 0 0 1rem 0.5rem;
 		font-size: 0.8rem;
 		font-weight: 600;