methanol 0.0.0 → 0.0.2

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

@@ -0,0 +1,23 @@
+/* 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 () {
+	// render nothing on server side
+}

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

@@ -0,0 +1,95 @@
+/* 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 { signal, $ } from 'refui'
+
+const LightIcon = () => (
+	<svg
+		attr:width="18"
+		attr:height="18"
+		attr:viewBox="0 0 24 24"
+		attr:fill="none"
+		attr:stroke="currentColor"
+		attr:stroke-width="2"
+		attr:stroke-linecap="round"
+		attr:stroke-linejoin="round"
+	>
+		<circle attr:cx="12" attr:cy="12" attr:r="5"></circle>
+		<line attr:x1="12" attr:y1="1" attr:x2="12" attr:y2="3"></line>
+		<line attr:x1="12" attr:y1="21" attr:x2="12" attr:y2="23"></line>
+		<line attr:x1="4.22" attr:y1="4.22" attr:x2="5.64" attr:y2="5.64"></line>
+		<line attr:x1="18.36" attr:y1="18.36" attr:x2="19.78" attr:y2="19.78"></line>
+		<line attr:x1="1" attr:y1="12" attr:x2="3" attr:y2="12"></line>
+		<line attr:x1="21" attr:y1="12" attr:x2="23" attr:y2="12"></line>
+		<line attr:x1="4.22" attr:y1="19.78" attr:x2="5.64" attr:y2="18.36"></line>
+		<line attr:x1="18.36" attr:y1="5.64" attr:x2="19.78" attr:y2="4.22"></line>
+	</svg>
+)
+
+const DarkIcon = () => (
+	<svg
+		attr:width="18"
+		attr:height="18"
+		attr:viewBox="0 0 24 24"
+		attr:fill="none"
+		attr:stroke="currentColor"
+		attr:stroke-width="2"
+		attr:stroke-linecap="round"
+		attr:stroke-linejoin="round"
+	>
+		<path attr:d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+	</svg>
+)
+
+export default function () {
+	const theme = signal('dark')
+
+	// Initialize theme from localStorage or system preference
+	if (typeof window !== 'undefined') {
+		const savedTheme = localStorage.getItem('methanol-theme')
+		const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+		theme.value = savedTheme || systemTheme
+		document.documentElement.classList.toggle('light', theme.value === 'light')
+		document.documentElement.classList.toggle('dark', theme.value === 'dark')
+	}
+
+	const toggle = () => {
+		theme.value = theme.value === 'light' ? 'dark' : 'light'
+		localStorage.setItem('methanol-theme', theme.value)
+		document.documentElement.classList.toggle('light', theme.value === 'light')
+		document.documentElement.classList.toggle('dark', theme.value === 'dark')
+	}
+
+	const CurrentIcon = $(() => {
+		if (theme.value === 'light') {
+			return LightIcon
+		} else {
+			return DarkIcon
+		}
+	})
+
+	return (
+		<div class="theme-switch-container">
+			<button class="theme-switch-btn" on:click={toggle} attr:aria-label="Toggle theme">
+				<CurrentIcon />
+			</button>
+		</div>
+	)
+}

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

@@ -0,0 +1,23 @@
+/* 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 () {
+	// render nothing on server side
+}

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

@@ -0,0 +1,324 @@
+/* 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 { signal, $, t, If, For, onCondition } from 'refui'
+import { createPortal } from 'refui/extras'
+import { loadPagefind } from '/.methanol_virtual_module/pagefind.js'
+
+let keybindReady = false
+let cachedPagefind = null
+
+const resolveShortcutLabel = () => {
+	if (typeof navigator === 'undefined') return 'Ctrl+K'
+	const platform = navigator.platform || ''
+	const agent = navigator.userAgent || ''
+	const isMac = /Mac|iPhone|iPad|iPod/.test(platform) || /Mac OS X/.test(agent)
+	return isMac ? '⌘K' : 'Ctrl+K'
+}
+
+const ensurePagefind = async (options) => {
+	if (cachedPagefind) return cachedPagefind
+	const pagefind = await loadPagefind()
+	if (!pagefind) return null
+	if (pagefind.options) {
+		const nextOptions = { excerptLength: 30, ...(options || {}) }
+		await pagefind.options(nextOptions)
+	}
+	if (pagefind.init) {
+		await pagefind.init()
+	}
+	cachedPagefind = pagefind
+	return pagefind
+}
+
+export default function ({ options } = {}) {
+	const isOpen = signal(false)
+	const query = signal('')
+	const results = signal([])
+	const isLoading = signal(false)
+	const activeIndex = signal(-1)
+
+	const buttonRef = signal()
+	const inputRef = signal()
+	const resultIdPrefix = `search-result-${Math.random().toString(36).slice(2)}`
+	const activeMatch = onCondition(activeIndex)
+
+	let debounceTimer = null
+	const shortcutLabel = resolveShortcutLabel()
+	const [Inlet, Outlet] = createPortal()
+
+	const search = async (q) => {
+		isLoading.value = true
+		results.value = []
+		activeIndex.value = -1
+
+		const pagefind = await ensurePagefind(options)
+		if (!pagefind) {
+			isLoading.value = false
+			return
+		}
+
+		try {
+			const searchResult = await pagefind.search(q)
+			if (searchResult?.results?.length) {
+				const data = await Promise.all(searchResult.results.slice(0, 10).map((r) => r.data()))
+				results.value = data.map((value) => ({ value, el: signal() }))
+			}
+		} catch (err) {
+			console.error('Search error:', err)
+		} finally {
+			isLoading.value = false
+		}
+	}
+
+	const onInput = (event) => {
+		const value = event.target.value
+		query.value = value
+		if (debounceTimer) clearTimeout(debounceTimer)
+
+		if (!value.trim()) {
+			results.value = []
+			activeIndex.value = -1
+			return
+		}
+
+		debounceTimer = setTimeout(() => {
+			search(value)
+		}, 300)
+	}
+
+	const focusInput = () => {
+		if (inputRef.value) inputRef.value.focus()
+	}
+
+	const open = async () => {
+		isOpen.value = true
+		setTimeout(focusInput, 50)
+		await ensurePagefind(options)
+	}
+
+	const close = () => {
+		isOpen.value = false
+		query.value = ''
+		results.value = []
+		activeIndex.value = -1
+		if (debounceTimer) clearTimeout(debounceTimer)
+		if (inputRef.value) inputRef.value.blur()
+		if (buttonRef.value) buttonRef.value.focus()
+	}
+
+	const scrollActiveIntoView = () => {
+		setTimeout(() => {
+			const activeEl = results.value[activeIndex.value]?.el.value
+			if (activeEl) {
+				activeEl.scrollIntoView({ block: 'nearest' })
+			}
+		}, 0)
+	}
+
+	const onKeyDown = (event) => {
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			close()
+			return
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault()
+			if (results.value.length > 0) {
+				const nextIndex = activeIndex.value >= 0 ? (activeIndex.value + 1) % results.value.length : 0
+				activeIndex.value = nextIndex
+				scrollActiveIntoView()
+			}
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault()
+			if (results.value.length > 0) {
+				const nextIndex = activeIndex.value > 0 ? activeIndex.value - 1 : results.value.length - 1
+				activeIndex.value = nextIndex
+				scrollActiveIntoView()
+			}
+		} else if (event.key === 'Enter') {
+			event.preventDefault()
+			const selected = results.value[activeIndex.value]?.value
+			const fallback = results.value[0]?.value
+			const target = selected || fallback
+			if (target?.url) {
+				window.location.href = target.url
+				close()
+			}
+		}
+	}
+
+	const onResultKeyDown = (event, indexValue) => {
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			close()
+			return
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault()
+			const nextIndex = (indexValue + 1) % results.value.length
+			activeIndex.value = nextIndex
+			scrollActiveIntoView()
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault()
+			if (indexValue === 0) {
+				activeIndex.value = -1
+				focusInput()
+				return
+			}
+			const nextIndex = indexValue - 1
+			activeIndex.value = nextIndex
+			scrollActiveIntoView()
+		}
+	}
+
+	const showEmpty = $(() => !query.value)
+	const showNoResults = $(() => {
+		const _query = query.value
+		const _isLoading = isLoading.value
+		const _length = results.value.length
+		return _query && !_isLoading && _length === 0
+	})
+
+	if (typeof window !== 'undefined') {
+		window.__methanolSearchOpen = open
+		window.__methanolSearchClose = close
+	}
+
+	if (typeof window !== 'undefined' && !keybindReady) {
+		keybindReady = true
+		window.addEventListener('keydown', (event) => {
+			const key = event.key?.toLowerCase?.()
+			if ((event.metaKey || event.ctrlKey) && key === 'k') {
+				event.preventDefault()
+				if (isOpen.value) {
+					close()
+				} else {
+					open()
+				}
+			} else if (key === 'escape' && isOpen.value) {
+				close()
+			}
+		})
+	}
+
+	return (R) => {
+		R.render(document.body, Outlet)
+		return (
+			<button class="search-box" type="button" on:click={open} attr:aria-label="Open search" $ref={buttonRef}>
+				<svg
+					attr:width="16"
+					attr:height="16"
+					attr:viewBox="0 0 24 24"
+					attr:fill="none"
+					attr:stroke="currentColor"
+					attr:stroke-width="2"
+					attr:stroke-linecap="round"
+					attr:stroke-linejoin="round"
+				>
+					<circle attr:cx="11" attr:cy="11" attr:r="8"></circle>
+					<path attr:d="m21 21-4.3-4.3"></path>
+				</svg>
+				<span>Search</span>
+				<kbd>{shortcutLabel}</kbd>
+				<Inlet>
+					<div class="search-modal" class:open={isOpen} attr:inert={$(() => (isOpen.value ? null : ''))}>
+						<div class="search-modal__scrim" on:click={close}></div>
+						<div class="search-modal__panel">
+							<div class="search-input-wrapper">
+								<svg
+									attr:width="20"
+									attr:height="20"
+									attr:viewBox="0 0 24 24"
+									attr:fill="none"
+									attr:stroke="currentColor"
+									attr:stroke-width="2"
+									attr:stroke-linecap="round"
+									attr:stroke-linejoin="round"
+								>
+									<circle attr:cx="11" attr:cy="11" attr:r="8"></circle>
+									<path attr:d="m21 21-4.3-4.3"></path>
+								</svg>
+								<input
+									class="search-input"
+									type="text"
+									placeholder="Search documentation..."
+									value={query}
+									on:input={onInput}
+									on:keydown={onKeyDown}
+									attr:aria-activedescendant={$(() =>
+										activeIndex.value >= 0 ? `${resultIdPrefix}-${activeIndex.value}` : null
+									)}
+									attr:autocomplete="off"
+									attr:autocorrect="off"
+									attr:spellcheck="false"
+									$ref={inputRef}
+								/>
+							</div>
+							<div class="search-results">
+								<If condition={showEmpty}>{() => <div class="search-status">Type to start searching...</div>}</If>
+								<If condition={showNoResults}>
+									{() => <div class="search-status">No results found for "{query}"</div>}
+								</If>
+								<If condition={isLoading}>{() => <div class="search-status">Searching...</div>}</If>
+								<For entries={results} indexed>
+									{({ item: { value, el }, index }) => (
+										<a
+											class="search-result-item"
+											class:active={activeMatch(index)}
+											href={value.url}
+											on:click={close}
+											on:keydown={(event) => onResultKeyDown(event, index.value)}
+											on:focus={() => {
+												activeIndex.value = index.value
+											}}
+											attr:aria-selected={$(() => (activeIndex.value === index.value ? 'true' : 'false'))}
+											attr:id={t`${resultIdPrefix}-${index.value}`}
+											$ref={el}
+										>
+											<div class="search-result-title">
+												<svg
+													attr:width="14"
+													attr:height="14"
+													attr:viewBox="0 0 24 24"
+													attr:fill="none"
+													attr:stroke="currentColor"
+													attr:stroke-width="2"
+													attr:stroke-linecap="round"
+													attr:stroke-linejoin="round"
+												>
+													<path attr:d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+													<polyline attr:points="14 2 14 8 20 8"></polyline>
+												</svg>
+												{value?.meta?.title || value?.title || value?.url}
+											</div>
+											<div class="search-result-excerpt" innerHTML={value.excerpt || ''}></div>
+										</a>
+									)}
+								</For>
+							</div>
+						</div>
+					</div>
+				</Inlet>
+			</button>
+		)
+	}
+}

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

@@ -0,0 +1,40 @@
+/* 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 () {
+	return (
+		<button class="search-box" type="button" aria-label="Open search">
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<circle cx="11" cy="11" r="8"></circle>
+				<path d="m21 21-4.3-4.3"></path>
+			</svg>
+			<span>Search</span>
+		</button>
+	)
+}

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

@@ -0,0 +1,154 @@
+/* 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 { signal, t, useEffect } from 'refui'
+
+export default function (props, ...children) {
+	if (!children.length) {
+		return
+	}
+
+	const el = signal()
+	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)
+
+		if (!anchors.length) return
+
+		const scrollY = window.scrollY
+		const offset = 100 // Header offset
+
+		// Find all sections that are visible in the viewport
+		const visibleAnchors = new Set()
+		const windowHeight = window.innerHeight
+		const threshold = 100 // Header offset/buffer
+
+		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
+			
+			if (isVisible) {
+				visibleAnchors.add(anchor)
+			}
+		}
+
+		// Fallback: if somehow nothing is found, at least highlight the first one
+		if (visibleAnchors.size === 0 && anchors.length > 0) {
+			visibleAnchors.add(anchors[0])
+		}
+
+		// Update active class on links and find active range
+		let firstActiveLink = null
+		let lastActiveLink = null
+
+		links.forEach(l => {
+			const href = l.getAttribute('href')
+			const anchorId = href ? href.slice(1) : null
+			const anchor = anchors.find(a => a.id === anchorId)
+			if (visibleAnchors.has(anchor)) {
+				l.classList.add('active')
+				if (!firstActiveLink) firstActiveLink = l
+				lastActiveLink = l
+			} else {
+				l.classList.remove('active')
+			}
+		})
+
+		// Update indicator position
+		if (firstActiveLink && lastActiveLink) {
+			const containerRect = el.value.getBoundingClientRect()
+			const firstRect = firstActiveLink.getBoundingClientRect()
+			const lastRect = lastActiveLink.getBoundingClientRect()
+
+			const currentTop = firstRect.top - containerRect.top + el.value.scrollTop
+			const currentHeight = lastRect.bottom - firstRect.top
+
+			top.value = currentTop
+			height.value = currentHeight
+			opacity.value = 1
+
+			// Scroll into view logic
+			const indicatorTop = currentTop
+			const indicatorBottom = currentTop + currentHeight
+			const scrollTop = el.value.scrollTop
+			const clientHeight = el.value.clientHeight
+
+			if (indicatorTop < scrollTop + 20) {
+				el.value.scrollTo({ top: indicatorTop - 20, behavior: 'smooth' })
+			} else if (indicatorBottom > scrollTop + clientHeight - 20) {
+				el.value.scrollTo({ top: indicatorBottom - clientHeight + 20, behavior: 'smooth' })
+			}
+		} else {
+			opacity.value = 0
+		}
+	}
+
+	// Attach listeners
+	let ticking = false
+	const onScroll = () => {
+		if (!ticking) {
+			window.requestAnimationFrame(() => {
+				updateActive()
+				ticking = false
+			})
+			ticking = true
+		}
+	}
+	
+	// Wait for mount/layout
+	useEffect(() => {
+		updateActive()
+		window.addEventListener('scroll', onScroll, { passive: true })
+		window.addEventListener('resize', onScroll, { passive: true })
+		return () => {
+			window.removeEventListener('scroll', onScroll)
+			window.removeEventListener('resize', onScroll)
+		}
+	})
+
+	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">
+				<h4>On this page</h4>
+				<ul>{...children}</ul>
+			</div>
+		</aside>
+	)
+}