update docs

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: [titoBouzout] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
+open_collective: tito-bouzout # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

package.json

@@ -10,7 +10,7 @@
 		"update": "npm update --include=dev --save && npm run dev"
 	},
 	"dependencies": {
-		"dom-flair": "^6.0.56",
+		"dom-flair": "^7.0.56",
 		"fflate": "^0.8.2",
 		"kompiler": "^7.0.157",
 		"pota": "^0.14.133",

src/lib/components/code/code.jsx

@@ -7,6 +7,7 @@ import { compress } from '../../compress.js'
 import { prettierConfig } from '../../prettier-config.js'
 
 import shikicss from './solid-shiki-textarea.css?raw'
+import { now } from 'pota/plugin/useTime'
 const shikiStyleSheet = sheet(shikicss)
 
 export function Code(props) {
@@ -120,9 +121,7 @@ function Preview(props) {
 					bool:editable={props.editable}
 				>
 					<section
-						attr:flair={
-							props.scroll === false ? 'no-scroll' : 'scroll'
-						}
+						flair={props.scroll === false ? 'no-scroll' : 'scroll'}
 						class={styles.shiki}
 					>
 						<shiki-textarea
@@ -153,34 +152,21 @@ window.addEventListener('message', function (e) {
 })
 
 function Render(props) {
-	let timeout = -1
 	return (
 		<section class={styles.frame}>
 			<iframe
 				/*loading="lazy"*/
 				title="Live Code Example"
 				name="Live Code Example"
 				ref={props.frame}
-				src={() => {
-					clearTimeout(timeout)
-					if (timeout) {
-						timeout = setTimeout(
-							() =>
-								props.frame()?.contentWindow.location.reload(true),
-							120,
-						)
-					} else {
-						timeout = 1
-					}
-					return (
-						'/pages/@playground/preview/index.html' +
-						(window.location.href.includes('playground')
-							? '?playground'
-							: '') +
-						'#' +
-						props.codeURL()
-					)
-				}}
+				src={() =>
+					'/pages/@playground/preview/index.html' +
+					(window.location.href.includes('playground')
+						? '?playground&t=' + now()
+						: '?t=' + now()) +
+					'#' +
+					props.codeURL()
+				}
 			/>
 		</section>
 	)

src/lib/components/headings.jsx

@@ -5,13 +5,18 @@ function encode(text) {
 	return encodeURIComponent(
 		text
 			.trim()
+			.replace(/\s+/g, ' ')
 			.replace(/^#\s+/, '')
 			.replace(/\s/g, '-')
 			.replace(/\//g, '-')
 			.replace(/-+/g, '-'),
 	)
 }
 
+function whitespace(text) {
+	return text.trim().replace(/\s+/g, ' ')
+}
+
 export function H2(props) {
 	const [URL, setURL] = signal('')
 	const [description, setDescription] = signal('')
@@ -21,13 +26,17 @@ export function H2(props) {
 			<h2 id={URL}>
 				<a
 					href={() => '#' + URL()}
-					onMount={element => setURL(encode(element.textContent))}
+					onMount={element => setURL(encode(element.innerText))}
 				>
 					{props.title}
 				</a>
 			</h2>
 			<Show when={props.children}>
-				<p onMount={element => setDescription(element.textContent)}>
+				<p
+					onMount={element =>
+						setDescription(whitespace(element.innerText))
+					}
+				>
 					{props.children}
 				</p>
 			</Show>
@@ -69,7 +78,7 @@ export function H3(props) {
 			<a
 				href={() => '#' + URL()}
 				onMount={element => {
-					setURL(encode(element.textContent))
+					setURL(encode(element.innerText))
 				}}
 			>
 				<span style="color:#58a6ff">#</span> {props.children}