methanol 0.0.0 → 0.0.1

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

@@ -0,0 +1,287 @@
+/* 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, $, If, For } 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 inputRef = signal()
+
+	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
+			}
+		} 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)
+	}
+
+	const scrollActiveIntoView = () => {
+		setTimeout(() => {
+			const activeEl = document.querySelector('.search-result-item[aria-selected="true"]')
+			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) {
+				activeIndex.value = (activeIndex.value + 1) % results.value.length
+				scrollActiveIntoView()
+			}
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault()
+			if (results.value.length > 0) {
+				activeIndex.value = (activeIndex.value - 1 + results.value.length) % results.value.length
+				scrollActiveIntoView()
+			}
+		} else if (event.key === 'Enter') {
+			event.preventDefault()
+			const selected = results.value[activeIndex.value]
+			const fallback = results.value[0]
+			const target = selected || fallback
+			if (target?.url) {
+				window.location.href = target.url
+				close()
+			}
+		}
+	}
+
+	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} aria-label="Open search">
+					<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:aria-hidden={$(() => (isOpen.value ? null : 'true'))}
+					>
+						<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: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} track="url" indexed={true}>
+									{({ item, index }) => (
+										<a
+											class="search-result-item"
+											href={item.url}
+											on:click={close}
+											attr:aria-selected={$(() => (activeIndex.value === index.value ? 'true' : 'false'))}
+										>
+											<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>
+												{item?.meta?.title || item?.title || item?.url}
+											</div>
+											<div class="search-result-excerpt" innerHTML={item.excerpt || ''}></div>
+										</a>
+									)}
+								</For>
+							</div>
+						</div>
+					</div>
+				</Inlet>
+				</button>
+		)
+	}
+}

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

@@ -0,0 +1,41 @@
+/* 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>
+			<kbd>Ctrl+K</kbd>
+		</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>
+	)
+}

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

@@ -0,0 +1,61 @@
+/* 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.
+ */
+
+const buildTocItems = (items = []) => {
+	const nodes = []
+	for (const item of items) {
+		const childNodes = item?.children?.length ? buildTocItems(item.children) : []
+		const children = childNodes.length ? <ul>{childNodes}</ul> : null
+		if (item.depth < 2 || item.depth > 4) {
+			if (childNodes.length) {
+				nodes.push(...childNodes)
+			}
+			continue
+		}
+		nodes.push(
+			<li class={`toc-depth-${item.depth}`}>
+				<a href={`#${item.id}`}>{item.value}</a>
+				{children}
+			</li>
+		)
+	}
+	return nodes
+}
+
+export const renderToc = (toc = []) => {
+	const items = buildTocItems(toc)
+	if (!items.length) return null
+	return items
+}
+
+export default function (props, ...children) {
+	if (!children.length) {
+		return
+	}
+
+	return (
+		<aside class="toc-panel">
+			<div class="toc">
+				<h4>On this page</h4>
+				<ul>{...children}</ul>
+			</div>
+		</aside>
+	)
+}

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

@@ -0,0 +1,84 @@
+/* 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'
+
+export default function (props, ...children) {
+	const el = signal()
+	const copied = signal(false)
+
+	const copy = async function () {
+		if (el.value) {
+			try {
+				await navigator.clipboard.writeText(el.value.textContent)
+				copied.value = true
+				setTimeout(() => {
+					copied.value = false
+				}, 2000)
+			} catch (err) {
+				console.error('Failed to copy: ', err)
+			}
+		}
+	}
+
+	const Btn = copied.choose(
+		() => (
+			<svg
+				attr:width="14"
+				attr:height="14"
+				attr:viewBox="0 0 24 24"
+				attr:fill="none"
+				attr:stroke="currentColor"
+				attr:stroke-width="2.5"
+				attr:stroke-linecap="round"
+				attr:stroke-linejoin="round"
+				class="text-accent"
+			>
+				<polyline attr:points="20 6 9 17 4 12"></polyline>
+			</svg>
+		),
+		() => (
+			<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"
+			>
+				<rect attr:x="9" attr:y="9" attr:width="13" attr:height="13" attr:rx="2" attr:ry="2"></rect>
+				<path attr:d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+			</svg>
+		)
+	)
+
+	return (
+		<div class="code-block-container">
+			<button class="copy-btn" on:click={copy} aria-label="Copy code">
+				<Btn />
+			</button>
+			<pre {...props} $ref={el}>
+				{...children}
+			</pre>
+		</div>
+	)
+}

package/themes/default/components/pre.jsx

@@ -0,0 +1,27 @@
+/* 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 (props, ...children) {
+	return (
+		<div class="code-block-container">
+			<pre {...props}>{...children}</pre>
+		</div>
+	)
+}

package/themes/default/heading.jsx

@@ -0,0 +1,35 @@
+/* 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 function heading(Tag) {
+	return (props, ...children) => (
+		<Tag {...props}>
+			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-hidden />}
+			{...children}
+		</Tag>
+	)
+}
+
+export function createHeadings() {
+	return Object.fromEntries([1,2,3,4,5,6].map((i) => {
+		const tag = `h${i}`
+		return [tag, heading(tag)]
+	}))
+}