@refrakt-md/svelte 0.9.3 → 0.9.5

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@refrakt-md/svelte",
 	"description": "Svelte renderer for refrakt.md content",
-	"version": "0.9.3",
+	"version": "0.9.5",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -27,9 +27,9 @@
 	],
 	"dependencies": {
 		"@markdoc/markdoc": "0.4.0",
-		"@refrakt-md/behaviors": "0.9.3",
-		"@refrakt-md/transform": "0.9.3",
-		"@refrakt-md/types": "0.9.3"
+		"@refrakt-md/behaviors": "0.9.5",
+		"@refrakt-md/transform": "0.9.5",
+		"@refrakt-md/types": "0.9.5"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/Renderer.svelte

@@ -121,6 +121,8 @@
 		</ElementOverride>
 	{:else if node.name === 'svg'}
 		{@html svgToHtml(node)}
+	{:else if VOID_ELEMENTS.has(node.name)}
+		<svelte:element this={node.name} {...htmlAttrs(node.attributes)} />
 	{:else}
 		<svelte:element this={node.name} {...htmlAttrs(node.attributes)}>
 			{#each node.children as child}

package/src/ThemeShell.svelte

@@ -108,25 +108,32 @@
 	{#if page.seo?.og.title}
 		<title>{page.seo.og.title}</title>
 		<meta property="og:title" content={page.seo.og.title} />
+		<meta name="twitter:title" content={page.seo.og.title} />
 	{:else if page.title}
 		<title>{page.title}</title>
 	{/if}
 	{#if page.seo?.og.description}
 		<meta name="description" content={page.seo.og.description} />
 		<meta property="og:description" content={page.seo.og.description} />
+		<meta name="twitter:description" content={page.seo.og.description} />
 	{:else if page.description}
 		<meta name="description" content={page.description} />
 	{/if}
 	{#if page.seo?.og.image}
 		<meta property="og:image" content={page.seo.og.image} />
 		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:image" content={page.seo.og.image} />
+	{:else}
+		<meta name="twitter:card" content="summary" />
 	{/if}
 	{#if page.seo?.og.url}
+		<link rel="canonical" href={page.seo.og.url} />
 		<meta property="og:url" content={page.seo.og.url} />
 	{/if}
 	{#if page.seo?.og.type}
 		<meta property="og:type" content={page.seo.og.type} />
 	{/if}
+	<meta property="og:site_name" content={theme.manifest.siteName ?? 'refrakt.md'} />
 	{#if page.seo}
 		{#each page.seo.jsonLd as schema}
 			{@html `<script type="application/ld+json">${JSON.stringify(schema)}</script>`}
@@ -139,7 +146,7 @@
 		{@const tree = layoutTransform(layoutEntry, page, 'rf')}
 		<Renderer node={tree} />
 	{:else if layoutEntry}
-		<svelte:component this={layoutEntry}
+		<layoutEntry
 			title={page.title}
 			description={page.description}
 			frontmatter={page.frontmatter}
@@ -148,6 +155,6 @@
 			pages={page.pages}
 			url={page.url}
 			headings={page.headings}
-		/>
+		></layoutEntry>
 	{/if}
 {/key}

package/src/elements.ts

@@ -1,9 +1,5 @@
 import type { ElementOverrides } from './context.js';
-import Table from './elements/Table.svelte';
-import Pre from './elements/Pre.svelte';
 
-/** Base element overrides — functional enhancements for HTML elements */
-export const elements: ElementOverrides = {
-	'table': Table,
-	'pre': Pre,
-};
+/** Base element overrides — empty by default. User-defined overrides can be
+ *  registered via setElementOverrides(). */
+export const elements: ElementOverrides = {};

package/src/elements/Pre.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '../types.js';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const isCodeBlock = 'data-language' in (tag.attributes || {});
-
-	let preEl: HTMLPreElement;
-	let copied = $state(false);
-	let timer: ReturnType<typeof setTimeout>;
-
-	function copy() {
-		const text = preEl.textContent ?? '';
-		navigator.clipboard.writeText(text);
-		copied = true;
-		clearTimeout(timer);
-		timer = setTimeout(() => copied = false, 2000);
-	}
-</script>
-
-{#if isCodeBlock}
-	<div class="rf-codeblock">
-		<pre bind:this={preEl} {...tag.attributes}>{@render children()}</pre>
-		<button class="rf-codeblock__copy" class:rf-codeblock__copy--copied={copied} onclick={copy} aria-label="Copy code">
-			{#if copied}
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<polyline points="20 6 9 17 4 12" />
-				</svg>
-			{:else}
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-					<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-				</svg>
-			{/if}
-		</button>
-	</div>
-{:else}
-	<pre {...tag.attributes}>{@render children()}</pre>
-{/if}
-
-<style>
-	.rf-codeblock {
-		position: relative;
-	}
-	.rf-codeblock :global(pre) {
-		margin: 0;
-	}
-	.rf-codeblock__copy {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		border-radius: var(--rf-radius-sm);
-		background: transparent;
-		color: var(--rf-color-code-text, #e2e8f0);
-		cursor: pointer;
-		opacity: 0;
-		transition: opacity 150ms ease, background-color 150ms ease;
-	}
-	.rf-codeblock:hover .rf-codeblock__copy {
-		opacity: 0.6;
-	}
-	.rf-codeblock__copy:hover {
-		opacity: 1 !important;
-		background: rgba(255, 255, 255, 0.1);
-	}
-	.rf-codeblock__copy--copied {
-		opacity: 1 !important;
-		color: var(--rf-color-success, #4ade80);
-	}
-</style>

package/src/elements/Table.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '../types.js';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-</script>
-
-<div class="rf-table-wrapper">
-	<table {...tag.attributes}>
-		{@render children()}
-	</table>
-</div>