Basic Docs and publish.yml changes for pnpm v

2025-12-06 04:21:37 +00:00 · 2023-06-10 19:23:58 +05:30
parent 34c0233058
commit 8b2d6652dd
18 changed files with 250 additions and 274 deletions
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -16,7 +16,7 @@ jobs:
        name: Install pnpm
        id: pnpm-install
        with:
-          version: 7
+          version: 8.6.1
      - run: pnpm install
      - run: pnpm build
      #- run: pnpm test
--- a/README.md
+++ b/README.md
@@ -7,8 +7,9 @@ Dynamically generate Open Graph images from an HTML+CSS template or Svelte compo
 ```bash
 pnpm install -D @ethercorps/sveltekit-og
 ```
+
 > Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
-> 
+
 ```bash
 pnpm i -D url
 ```
@@ -69,7 +70,6 @@ Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Rem

 When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used.

-
 ## Styling

 Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css).
@@ -142,6 +142,7 @@ componentToImageResponse(
 ## Changelog

 ### v1.2.3 Update (Breaking Changes)
+
 > Now you have to install dependency by yourself which will make it easier to build for all plateforms.

 ```
--- a/examples/cf-workers-build/src/app.html
+++ b/examples/cf-workers-build/src/app.html
@@ -10,6 +10,6 @@
 		<div>%sveltekit.body%</div>
 	</body>
 	<script>
-		var global = global || window
+		var global = global || window;
 	</script>
 </html>
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.34.3",
+		"@playwright/test": "^1.35.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-vercel": "^2.4.3",
 		"@sveltejs/kit": "1.10.0",
@@ -30,6 +30,7 @@
 		"postcss": "^8.4.24",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
+		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
 		"svelte": "^3.59.1",
 		"svelte-check": "^2.10.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,8 +14,8 @@ dependencies:

 devDependencies:
  '@playwright/test':
-    specifier: ^1.34.3
-    version: 1.34.3
+    specifier: ^1.35.0
+    version: 1.35.0
  '@sveltejs/adapter-auto':
    specifier: next
    version: 1.0.0-next.91(@sveltejs/kit@1.10.0)
@@ -58,6 +58,9 @@ devDependencies:
  prettier-plugin-svelte:
    specifier: ^2.10.1
    version: 2.10.1(prettier@2.8.8)(svelte@3.59.1)
+  prism-svelte:
+    specifier: ^0.5.0
+    version: 0.5.0
  prismjs:
    specifier: ^1.29.0
    version: 1.29.0
@@ -418,13 +421,13 @@ packages:
      fastq: 1.15.0
    dev: true

-  /@playwright/test@1.34.3:
-    resolution: {integrity: sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==}
-    engines: {node: '>=14'}
+  /@playwright/test@1.35.0:
+    resolution: {integrity: sha512-6qXdd5edCBynOwsz1YcNfgX8tNWeuS9fxy5o59D0rvHXxRtjXRebB4gE4vFVfEMXl/z8zTnAzfOs7aQDEs8G4Q==}
+    engines: {node: '>=16'}
    hasBin: true
    dependencies:
-      '@types/node': 20.2.5
-      playwright-core: 1.34.3
+      '@types/node': 20.2.6
+      playwright-core: 1.35.0
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
@@ -560,8 +563,8 @@ packages:
    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
    dev: true

-  /@types/node@20.2.5:
-    resolution: {integrity: sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==}
+  /@types/node@20.2.6:
+    resolution: {integrity: sha512-GQBWUtGoefMEOx/vu+emHEHU5aw6JdDoEtZhoBrHFPZbA/YNRFfN996XbBASEWdvmLSLyv9FKYppYGyZjCaq/g==}
    dev: true

  /@types/pug@2.0.6:
@@ -572,7 +575,7 @@ packages:
    resolution: {integrity: sha512-jn7qwGFmJHwUSphV8zZneO3GmtlgLsmhs/LQyVvQbIIa+fzGMUiHI4HXJZL3FT8MJmgXWbLGiVVY7ElvHq6vDA==}
    deprecated: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
    dependencies:
-      sass: 1.62.1
+      sass: 1.63.3
    dev: true

  /@types/semver@7.5.0:
@@ -827,7 +830,7 @@ packages:
      postcss: ^8.1.0
    dependencies:
      browserslist: 4.21.7
-      caniuse-lite: 1.0.30001495
+      caniuse-lite: 1.0.30001498
      fraction.js: 4.2.0
      normalize-range: 0.1.2
      picocolors: 1.0.0
@@ -878,8 +881,8 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001495
-      electron-to-chromium: 1.4.423
+      caniuse-lite: 1.0.30001498
+      electron-to-chromium: 1.4.427
      node-releases: 2.0.12
      update-browserslist-db: 1.0.11(browserslist@4.21.7)
    dev: true
@@ -909,8 +912,8 @@ packages:
    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
    dev: false

-  /caniuse-lite@1.0.30001495:
-    resolution: {integrity: sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==}
+  /caniuse-lite@1.0.30001498:
+    resolution: {integrity: sha512-LFInN2zAwx3ANrGCDZ5AKKJroHqNKyjXitdV5zRIVIaQlXKj3GmxUKagoKsjqUfckpAObPCEWnk5EeMlyMWcgw==}
    dev: true

  /chalk@4.1.2:
@@ -1075,8 +1078,8 @@ packages:
      esutils: 2.0.3
    dev: true

-  /electron-to-chromium@1.4.423:
-    resolution: {integrity: sha512-y4A7YfQcDGPAeSWM1IuoWzXpg9RY1nwHzHSwRtCSQFp9FgAVDgdWlFf0RbdWfLWQ2WUI+bddUgk5RgTjqRE6FQ==}
+  /electron-to-chromium@1.4.427:
+    resolution: {integrity: sha512-HK3r9l+Jm8dYAm1ctXEWIC+hV60zfcjS9UA5BDlYvnI5S7PU/yytjpvSrTNrSSRRkuu3tDyZhdkwIczh+0DWaw==}
    dev: true

  /emoji-regex@10.2.1:
@@ -1930,9 +1933,9 @@ packages:
    engines: {node: '>= 6'}
    dev: true

-  /playwright-core@1.34.3:
-    resolution: {integrity: sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==}
-    engines: {node: '>=14'}
+  /playwright-core@1.35.0:
+    resolution: {integrity: sha512-muMXyPmIx/2DPrCHOD1H1ePT01o7OdKxKj2ebmCAYvqhUy+Y1bpal7B0rdoxros7YrXI294JT/DWw2LqyiqTPA==}
+    engines: {node: '>=16'}
    hasBin: true
    dev: true

@@ -2026,6 +2029,10 @@ packages:
    hasBin: true
    dev: true

+  /prism-svelte@0.5.0:
+    resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
+    dev: true
+
  /prismjs@1.29.0:
    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
    engines: {node: '>=6'}
@@ -2100,8 +2107,8 @@ packages:
      glob: 7.2.3
    dev: true

-  /rollup@3.24.0:
-    resolution: {integrity: sha512-OgraHOIg2YpHQTjl0/ymWfFNBEyPucB7lmhXrQUh38qNOegxLapSPFs9sNr0qKR75awW41D93XafoR2QfhBdUQ==}
+  /rollup@3.24.1:
+    resolution: {integrity: sha512-REHe5dx30ERBRFS0iENPHy+t6wtSEYkjrhwNsLyh3qpRaZ1+aylvMUdMBUHWUD/RjjLmLzEvY8Z9XRlpcdIkHA==}
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
@@ -2134,8 +2141,8 @@ packages:
      rimraf: 2.7.1
    dev: true

-  /sass@1.62.1:
-    resolution: {integrity: sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==}
+  /sass@1.63.3:
+    resolution: {integrity: sha512-ySdXN+DVpfwq49jG1+hmtDslYqpS7SkOR5GpF6o2bmb1RL/xS+wvPmegMvMywyfsmAV6p7TgwXYGrCZIFFbAHg==}
    engines: {node: '>=14.0.0'}
    hasBin: true
    dependencies:
@@ -2600,7 +2607,7 @@ packages:
    dependencies:
      esbuild: 0.17.19
      postcss: 8.4.24
-      rollup: 3.24.0
+      rollup: 3.24.1
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
--- a/src/components/AceEditor.svelte
+++ b/src/components/AceEditor.svelte
@@ -1,157 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, tick, onMount, onDestroy } from "svelte";
-  import * as ace from "brace";
-  import "brace/ext/emmet";
-  const EDITOR_ID = `svelte-ace-editor-div:${Math.floor(
-    Math.random() * 10000000000
-  )}`;
-  const dispatch = createEventDispatcher<{
-    init: ace.Editor;
-    input: string;
-    selectionChange: any;
-    blur: void;
-    changeMode: any;
-    commandKey: { err: any; hashId: any; keyCode: any };
-    copy: void;
-    cursorChange: void;
-    cut: void;
-    documentChange: { data: any };
-    focus: void;
-    paste: string;
-  }>();
-
-  /**
-   * translation of vue component to svelte:
-   * @link https://github.com/chairuosen/vue2-ace-editor/blob/91051422b36482eaf94271f1a263afa4b998f099/index.js
-   **/
-  export let value: string = ""; // String, required
-  export let lang: string = "json"; // String
-  export let theme: string = "chrome"; // String
-  export let height: string = "100%"; // null for 100, else integer, used as percent
-  export let width: string = "100%"; // null for 100, else integer, used as percent
-  export let options: any = {}; // Object
-  export let readonly: boolean = false;
-
-  let editor: ace.Editor;
-  let contentBackup: string = "";
-
-  const requireEditorPlugins = () => {};
-  requireEditorPlugins();
-
-  onDestroy(() => {
-    if (editor) {
-      editor.destroy();
-      editor.container.remove();
-    }
-  });
-
-  $: watchValue(value);
-  function watchValue(val: string) {
-    if (contentBackup !== val && editor && typeof val === "string") {
-      editor.session.setValue(val);
-      contentBackup = val;
-    }
-  }
-
-  $: watchTheme(theme);
-  function watchTheme(newTheme: string) {
-    if (editor) {
-      editor.setTheme("ace/theme/" + newTheme);
-    }
-  }
-
-  $: watchMode(lang);
-  function watchMode(newOption: any) {
-    if (editor) {
-      editor.getSession().setMode("ace/mode/" + newOption);
-    }
-  }
-
-  $: watchOptions(options);
-  function watchOptions(newOption: any) {
-    if (editor) {
-      editor.setOptions(newOption);
-    }
-  }
-
-  $: watchReadOnlyFlag(readonly);
-  function watchReadOnlyFlag(flag) {
-    if (editor) {
-      editor.setReadOnly(flag);
-    }
-  }
-
-  const resizeOnNextTick = () =>
-    tick().then(() => {
-      if (editor) {
-        editor.resize();
-      }
-    });
-
-  $: if (height !== null && width !== null) {
-    resizeOnNextTick();
-  }
-
-  onMount(() => {
-    lang = lang || "text";
-    theme = theme || "chrome";
-
-    editor = ace.edit(EDITOR_ID);
-
-    dispatch("init", editor);
-    editor.$blockScrolling = Infinity;
-    // editor.setOption("enableEmmet", true);
-    editor.getSession().setMode("ace/mode/" + lang);
-    editor.setTheme("ace/theme/" + theme);
-    editor.setValue(value, 1);
-    editor.setReadOnly(readonly)
-    contentBackup = value;
-    setEventCallBacks();
-    if (options) {
-      editor.setOptions(options);
-    }
-  });
-
-  const ValidPxDigitsRegEx = /^\d*$/;
-  function px(n: string): string {
-    if (ValidPxDigitsRegEx.test(n)) {
-      return n + "px";
-    }
-    return n;
-  }
-
-  function setEventCallBacks() {
-    editor.onBlur = () => dispatch("blur");
-    editor.onChangeMode = (obj) => dispatch("changeMode", obj);
-    editor.onCommandKey = (err, hashId, keyCode) =>
-      dispatch("commandKey", { err, hashId, keyCode });
-    editor.onCopy = () => dispatch("copy");
-    editor.onCursorChange = () => dispatch("cursorChange");
-    editor.onCut = () => {
-      const copyText = editor.getCopyText();
-      console.log("cut event : ", copyText);
-      editor.insert("");
-      dispatch("cut");
-    };
-    editor.onDocumentChange = (obj: { data: any }) =>
-      dispatch("documentChange", obj);
-    editor.onFocus = () => dispatch("focus");
-    editor.onPaste = (text) => {
-      console.log("paste event : ", text);
-      editor.insert(text);
-      dispatch("paste", text);
-    };
-    editor.onSelectionChange = (obj) => dispatch("selectionChange", obj);
-    editor.on("change", function () {
-      const content = editor.getValue();
-      value = content;
-      dispatch("input", content);
-      contentBackup = content;
-    });
-  }
-</script>
-
-<div style="width:{px(width)};">
-  <h1 class="font-bold mb-2">Editor</h1>
-  <div id={EDITOR_ID} style="width:{px(width)};" class="h-[80vh] rounded rounded-lg border border-gray-500"/>
-</div>
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -1,5 +1,5 @@
 <script>
-	let menuBar = false
+	let menuBar = false;
 </script>

 <!-- navbar goes here -->
@@ -9,28 +9,42 @@
 			<div class="flex space-x-4">
 				<!-- logo -->
 				<div>
-					<a href="#" class="flex items-center py-5 px-2 space-x-1 text-gray-700 hover:text-gray-900">
-						<svg
-							viewBox="0 0 75 65"
-							fill="black"
-							class="w-4 h-4 rotate-90"
+					<a
+						href="#"
+						class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900 space-x-3"
 					>
-							<path d="M37.59.25l36.95 64H.64l36.95-64z"></path>
+						<svg viewBox="0 0 75 65" fill="black" class="w-4 h-4 rotate-90">
+							<path d="M37.59.25l36.95 64H.64l36.95-64z" />
 						</svg>
-						<span class="font-bold">Sveltekit-OG Playground</span>
+						<span class="font-bold">Sveltekit-OG</span>
 					</a>
 				</div>
 			</div>

 			<!-- secondary nav -->
 			<div class="hidden md:flex items-center space-x-1">
-				<a href="https://github.com/etherCorps/sveltekit-og/#readme" target="_blank" rel="noreferrer" class="py-5 px-3 underline">Docs</a>
-				<a href="https://github.com/etherCorps/sveltekit-og" target="_blank" rel="noreferrer" class="py-5 px-3 underline">Github</a>
+				<a
+					href="https://github.com/etherCorps/sveltekit-og/#readme"
+					target="_blank"
+					rel="noreferrer"
+					class="py-5 px-3 underline">Docs</a
+				>
+				<a
+					href="https://github.com/etherCorps/sveltekit-og"
+					target="_blank"
+					rel="noreferrer"
+					class="py-5 px-3 underline">Github</a
+				>
 			</div>

 			<!-- mobile button goes here -->
 			<div class="md:hidden flex items-center">
-				<button class="mobile-menu-button" on:click={() => {menuBar = !menuBar}}>
+				<button
+					class="mobile-menu-button"
+					on:click={() => {
+						menuBar = !menuBar;
+					}}
+				>
 					<svg
 						class="w-6 h-6"
 						xmlns="http://www.w3.org/2000/svg"
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -34,16 +34,16 @@ const ImageResponse = async (htmlTemplate: string, optionsByUser: ImageResponseO

 	if (!initialized) {
 		await initSvgToPng();
-		initialized = true
+		initialized = true;
 	}

 	const defaultConfig: ConvertOptions = {
 		width: options.width, // optional
-		height: options.height, // optional
+		height: options.height // optional
 	};

 	if (Object.hasOwn(options, 'backgroundColor')) {
-		defaultConfig.backgroundColor = options.backgroundColor
+		defaultConfig.backgroundColor = options.backgroundColor;
 	}

 	const png = await svg2png(svg, defaultConfig);
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script>
 	import '../app.css';
-  import Navbar from "../components/Navbar.svelte";
+	import Navbar from '../components/Navbar.svelte';
 </script>
+
 <div class="max-h-screen">
 	<Navbar />
 	<slot />
 </div>
-
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,40 +1,129 @@
-<script lang="ts">
-  import AceEditor from "/src/components/AceEditor.svelte";
-  import "brace/mode/html";
-  import "brace/theme/chrome";
-  let text = "<h1>hii</h1>";
+<script>
+	import {base} from "$app/paths";
+	import Prism from 'prismjs';
+	import 'prism-svelte';
+	import 'prismjs/themes/prism-tomorrow.css';
+	const source = `
+/src/routes/new/+server.ts
+
+import { ImageResponse } from '@ethercorps/sveltekit-og';
+import type { RequestHandler } from '@sveltejs/kit';
+
+const template = \`
+ <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
+    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
+        <span>Ready to dive in?</span>
+        <span tw="text-indigo-600">Start your free trial today.</span>
+      </h2>
+      <div tw="mt-8 flex md:mt-0">
+        <div tw="flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
+        </div>
+        <div tw="ml-3 flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
+        </div>
+      </div>
+    </div>
+  </div>
+\`;
+
+const fontFile400 = await fetch(
+	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-400-normal.woff'
+);
+
+const fontFile700 = await fetch(
+	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff'
+);
+
+const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
+const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
+
+export const GET: RequestHandler = async () => {
+  return await ImageResponse(template, {
+				height: 250,
+				width: 500,
+				fonts: [
+						{
+							name: 'Inter Latin',
+							data: fontData400,
+							weight: 400
+						},
+						{
+							name: 'Inter Latin',
+							data: fontData700,
+							weight: 700
+						}
+				]
+		});
+};
+
+`;
+	const highlightedQuickEg = Prism.highlight(source, Prism.languages.svelte, 'svelte');
+
 </script>

-<div class="grid grid-cols-2 space-x-10 p-10">
-  <AceEditor style="border: solid"
-             on:selectionChange={(obj) => console.log(obj.detail)}
-             on:paste={(obj) => console.log(obj.detail)}
-             on:input={(obj) => console.log(obj.detail)}
-             on:focus={() => console.log('focus')}
-             on:documentChange={(obj) => console.log(`document change : ${obj.detail}`)}
-             on:cut={() => console.log('cut')}
-             on:cursorChange={() => console.log('cursor change')}
-             on:copy={() => console.log('copy')}
-             on:init={(editor) => console.log(editor.detail)}
-             on:commandKey={(obj) => console.log(obj.detail)}
-             on:changeMode={(obj) => console.log(`change mode : ${obj.detail}`)}
-             on:blur={() => console.log('blur')}
-             lang="html"
-             theme="chrome"
-             value={text}
-  />
-  <div class="grid grid-rows-2 mt-8 space-y-4">
-    <div class="common">
-      Editor Under Development
-    </div>
-    <div class="common">
-      Coming Soon...
-    </div>
-  </div>
-</div>
+<div class="mx-10 mt-5 space-y-5">
+	<section id="introduction" class="space-y-3">
+		<h1 class="font-bold text-2xl">Introduction</h1>
+		<p class="">
+			SvelteKit-OG is use to dynamically generate Open Graph images from an HTML+CSS template or
+			Svelte component using fast and efficient conversion from <br /> HTML > SVG > PNG. Based on Satori.
+			No headless browser required.
+		</p>
+	</section>

-<style>
-  .common {
-      @apply border border-gray-800 rounded p-5
-  }
-</style>
+	<section id="installation" class="space-y-4">
+		<h1 class="font-bold text-2xl">Installation</h1>
+		<p>
+			Use your favourite package manager and add <span class="bg-gray-100 px-2 py-1 rounded-full"
+				>@ethercorps/sveltekit-og</span
+			>
+			as your <span class="bg-gray-100 px-2 py-1 rounded-full">devDependency</span>.
+		</p>
+		<div id="pnpm-install-og">
+			Example:
+			<code class="border rounded-full bg-gray-100 px-3 py-1.5 text-gray-900">
+				pnpm i -D @ethercorps/sveltekit-og
+			</code>
+		</div>
+		<div class="border-x-4 border-gray-900 rounded-lg leading-9">
+			<p class="ml-2">
+				If you are using it on with <span class="bg-gray-100 px-2 py-1 rounded-full">
+					cloudflare pages
+				</span>
+				or <span class="bg-gray-100 px-2 py-1 rounded-full">cloudflare workers </span> then you have
+				to provide <span class="bg-gray-100 px-2 py-1 rounded-full">polyfills</span> for
+				<span class="bg-gray-100 px-2 py-1 rounded-full">url</span>. You can simply add it to your
+				<span class="bg-gray-100 px-2 py-1 rounded-full">devDependency</span>,
+				<br /> To install
+				<code class="border rounded-full bg-gray-100 px-3 py-1.5 text-gray-900">
+					pnpm i -D url
+				</code>
+			</p>
+		</div>
+	</section>
+	<section id="usage" class="space-y-3">
+		<h1 class="font-bold text-2xl">Usage</h1>
+		<p class="">
+			Create a file at <span class="bg-gray-100 px-2 py-1 rounded-full">
+				/src/routes/og/+server.ts
+			</span>. Alternatively, you can use JavaScript by removing the types from this example.
+		</p>
+		<div class="border-x-4 border-gray-900 rounded-lg w-fit px-2 leading-9">
+			<p class="ml-2">
+				Route can be anything but it should have only one file
+				<span class="bg-gray-100 px-2 py-1 rounded-full"> +server.ts </span>
+			</p>
+		</div>
+		<pre class="bg-gray-100 overflow-auto px-3 py-1.5 rounded-xl"><code class="" >{@html highlightedQuickEg}</code></pre>
+		<div class="border-x-4 border-gray-900 rounded-lg w-fit px-2 leading-9">
+			<p class="ml-2">
+				Then run <span class="bg-gray-100 px-2 py-1 rounded-full"> pnpm run dev </span> and visit <span class="bg-gray-100 px-2 py-1 rounded-full"> localhost:5173/og </span> to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes.
+			</p>
+		</div>
+		<h2 class="font-bold text-xl">
+			Image Output: <a target="_blank" rel="noreferrer" href="https://sveltekit-og.ethercorps.io/new"> Live </a>
+		</h2>
+	</section>
+</div>
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1 +1,13 @@
 export const ssr = false;
+
+const quickUseFile = import.meta.glob(['./new/+server.ts'], {as: 'raw'});
+
+export const load = async () => {
+    const module = Object.entries(quickUseFile).map(([k, v]) =>
+        v().then((result) => {
+            const segments = k.split('/');
+            return { filename: segments.slice(2).join('/'), source: result };
+        }));
+    const code = Promise.all(module);
+    return {code}
+};
--- a/src/routes/component-og/+server.ts
+++ b/src/routes/component-og/+server.ts
@@ -2,7 +2,9 @@ import OG from './OG.svelte';
 import { componentToImageResponse } from '$lib';
 import type { RequestHandler } from '@sveltejs/kit';

-const fontFile = await fetch('https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff');
+const fontFile = await fetch(
+	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff'
+);
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();

 export const GET: RequestHandler = async () => {
--- a/src/routes/new/+server.ts
+++ b/src/routes/new/+server.ts
@@ -1,3 +1,5 @@
+`/src/routes/new/+server.ts`
+
 import { ImageResponse } from '$lib';
 import type { RequestHandler } from '@sveltejs/kit';

@@ -19,8 +21,12 @@ const template = `
    </div>
  </div>
 `;
-const fontFile400 = await fetch('https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-400-normal.woff');
-const fontFile700 = await fetch('https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff');
+const fontFile400 = await fetch(
+	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-400-normal.woff'
+);
+const fontFile700 = await fetch(
+	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff'
+);
 const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
 const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();

--- a/static/logo.svg
+++ b/static/logo.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 75 65" fill="black" class="w-4 h-4 rotate-90">
+    <path d="M37.59.25l36.95 64H.64l36.95-64z" />
+</svg>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,13 +8,11 @@ const config: UserConfig = {
 	},
 	build: {
 		rollupOptions: {
-			external: ["@resvg/resvg-js"]
+			external: ['@resvg/resvg-js']
 		}
 	},
 	optimizeDeps: {
-		exclude: [
-			"@resvg/resvg-js"
-		]
+		exclude: ['@resvg/resvg-js']
 	}
 };