@solidjs/start 0.7.0 → 0.7.2

package/dist/shared/dev-overlay/CodeView.jsx

@@ -0,0 +1,71 @@
+import { getHighlighterCore, loadWasm } from 'shikiji/core';
+import { createEffect, createResource } from 'solid-js';
+import url from 'shikiji/onig.wasm?url';
+import langJS from 'shikiji/langs/javascript.mjs';
+import langJSX from 'shikiji/langs/jsx.mjs';
+import langTSX from 'shikiji/langs/tsx.mjs';
+import langTS from 'shikiji/langs/typescript.mjs';
+import darkPlus from 'shikiji/themes/dark-plus.mjs';
+let HIGHLIGHTER;
+async function loadHighlighter() {
+    if (!HIGHLIGHTER) {
+        await loadWasm(await fetch(url));
+        HIGHLIGHTER = await getHighlighterCore({
+            themes: [
+                darkPlus,
+            ],
+            langs: [
+                langJS,
+                langJSX,
+                langTS,
+                langTSX,
+            ],
+        });
+    }
+    return HIGHLIGHTER;
+}
+const RANGE = 8;
+export function CodeView(props) {
+    const lines = () => props.content.split('\n').map((item, index) => ({
+        index: index + 1,
+        line: item,
+    }));
+    const minLine = () => Math.max(props.line - (1 + RANGE), 0);
+    const maxLine = () => Math.min(props.line + RANGE, lines().length - 1);
+    let ref;
+    const [data] = createResource(() => (lines()
+        .slice(minLine(), maxLine())
+        .map(item => item.line)
+        .join('\n')), async (value) => {
+        const highlighter = await loadHighlighter();
+        const fileExtension = props.fileName
+            .split(/[#?]/)[0]
+            .split('.')
+            .pop()
+            ?.trim();
+        let lang = fileExtension;
+        if (fileExtension === 'mjs' || fileExtension === 'cjs') {
+            lang = 'js';
+        }
+        return highlighter.codeToHtml(value, {
+            theme: 'dark-plus',
+            lang,
+        });
+    });
+    createEffect(() => {
+        const result = data();
+        if (ref && result) {
+            ref.innerHTML = result;
+            const lines = ref.querySelectorAll('span[class="line"]');
+            for (let i = 0, len = lines.length; i < len; i++) {
+                const el = lines[i];
+                if ((props.line - minLine() - 1) === i) {
+                    el.classList.add('dev-overlay-error-line');
+                }
+            }
+        }
+    });
+    return <div ref={ref} class="dev-overlay-code-view" style={{
+            '--dev-overlay-code-view-start': minLine() + 1,
+        }}/>;
+}

package/dist/shared/dev-overlay/DevOverlayDialog.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import './styles.css';
+export declare function classNames(...classes: (string | boolean | undefined)[]): string;
+interface DevOverlayDialogProps {
+    errors: any[];
+    resetError: () => void;
+}
+export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Element;
+export {};

package/dist/shared/dev-overlay/DevOverlayDialog.jsx

@@ -0,0 +1,209 @@
+// @refresh skip
+import ErrorStackParser from 'error-stack-parser';
+import * as htmlToImage from 'html-to-image';
+import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from 'terracotta';
+import info from '../../../package.json';
+import { CodeView } from './CodeView';
+import { createStackFrame } from './createStackFrame';
+import download from './download';
+import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon } from './icons';
+import './styles.css';
+export function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+function ErrorInfo(props) {
+    return (<Show when={props.error instanceof Error && props.error} keyed fallback={<span>{props.error.toString()}</span>}>
+      {(current) => (<span class="dev-overlay-error-info">
+          <span class="dev-overlay-error-info-name">{current.name}</span>
+          <span class="dev-overlay-error-info-message">{current.message}</span>
+        </span>)}
+    </Show>);
+}
+function getFileName(source) {
+    try {
+        const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
+        const paths = path.pathname.split('/');
+        return paths[paths.length - 1];
+    }
+    catch (error) {
+        return getFileName(`/${source}`);
+    }
+}
+function getFilePath(source) {
+    const line = source.line ? `:${source.line}` : '';
+    const column = source.column ? `:${source.column}` : '';
+    return `${getFileName(source.source)}${line}${column}`;
+}
+function CodeFallback() {
+    return <div class="dev-overlay-stack-frames-code-fallback">
+    <span>Source not available.</span>
+  </div>;
+}
+function StackFramesContent(props) {
+    const stackframes = ErrorStackParser.parse(props.error);
+    const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
+    return (<div class="dev-overlay-stack-frames-content">
+        <div class="dev-overlay-stack-frames-code">
+            <ErrorBoundary fallback={null}>
+              {(() => {
+            const data = createStackFrame(selectedFrame(), () => props.isCompiled);
+            return (<Suspense fallback={<CodeFallback />}>
+                    <Show when={data()} keyed fallback={<CodeFallback />}>
+                      {(source) => (<>
+                          <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
+                          <div class="dev-overlay-stack-frames-code-container">
+                            <CodeView fileName={source.source} line={source.line} content={source.content}/>
+                          </div>
+                        </>)}
+                    </Show>
+                  </Suspense>);
+        })()}
+            </ErrorBoundary>
+        </div>
+        <Select class="dev-overlay-stack-frames" value={selectedFrame()} onChange={setSelectedFrame}>
+          <For each={stackframes}>
+            {(current) => (<ErrorBoundary fallback={(<div class="dev-overlay-stack-frame">
+                <span class="dev-overlay-stack-frame-function">{current.functionName ?? '<anonymous>'}</span>
+                <span class="dev-overlay-stack-frame-file">{getFilePath({
+                    source: current.getFileName(),
+                    content: '',
+                    line: current.getLineNumber(),
+                    column: current.getColumnNumber(),
+                    name: current.getFunctionName(),
+                })}</span>
+              </div>)}>
+              {(() => {
+                const data = createStackFrame(current, () => props.isCompiled);
+                return (<Suspense>
+                    <Show when={data()} keyed>
+                      {(source) => (<SelectOption class="dev-overlay-stack-frame" value={current}>
+                          <span class="dev-overlay-stack-frame-function">{source.name ?? '<anonymous>'}</span>
+                          <span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
+                        </SelectOption>)}
+                    </Show>
+                  </Suspense>);
+            })()}
+            </ErrorBoundary>)}
+          </For>
+        </Select>
+      </div>);
+}
+function StackFrames(props) {
+    return (<Show when={props.error instanceof Error && props.error} keyed>
+      {(current) => (<StackFramesContent error={current} isCompiled={props.isCompiled}/>)}
+    </Show>);
+}
+const ISSUE_THREAD = 'https://github.com/solidjs/solid-start/issues/new';
+const DISCORD_INVITE = 'https://discord.com/invite/solidjs';
+export default function DevOverlayDialog(props) {
+    const [currentPage, setCurrentPage] = createSignal(1);
+    const [isCompiled, setIsCompiled] = createSignal(false);
+    const length = createMemo(() => props.errors.length);
+    const truncated = createMemo(() => {
+        return Math.min(currentPage(), length());
+    });
+    function goPrev() {
+        setCurrentPage((c) => {
+            if (c > 1) {
+                return c - 1;
+            }
+            return length();
+        });
+    }
+    function goNext() {
+        setCurrentPage((c) => {
+            if (c < length()) {
+                return c + 1;
+            }
+            return 1;
+        });
+    }
+    function toggleIsCompiled() {
+        setIsCompiled((c) => !c);
+    }
+    const [panel, setPanel] = createSignal();
+    function downloadScreenshot() {
+        const current = panel();
+        if (current) {
+            htmlToImage.toPng(current, {
+                style: {
+                    transform: 'scale(0.75)',
+                },
+            }).then((url) => {
+                download(url, 'start-screenshot.png');
+            });
+        }
+    }
+    function redirectToGithub() {
+        const url = new URL(ISSUE_THREAD);
+        url.searchParams.append('labels', 'bug');
+        url.searchParams.append('labels', 'needs+triage');
+        url.searchParams.append('template', 'bug.yml');
+        url.searchParams.append('title', `[Bug?]:` + props.errors[truncated() - 1].toString());
+        window.open(url, '_blank').focus();
+    }
+    function redirectToDiscord() {
+        window.open(DISCORD_INVITE, '_blank').focus();
+    }
+    return (<Portal>
+      <Dialog class="dev-overlay" isOpen>
+        <div>
+          <DialogOverlay class="dev-overlay-background"/>
+          <DialogPanel ref={setPanel} class="dev-overlay-panel-container">
+            <div class="dev-overlay-panel">
+              <div class="dev-overlay-navbar">
+                <div class="dev-overlay-navbar-left">
+                  <div class="dev-overlay-version">
+                    <div>
+                      <SolidStartIcon title="Solid Start Version"/>
+                    </div>
+                    <span>{info.version}</span>
+                  </div>
+                  <Show when={props.errors.length > 1}>
+                    <div class="dev-overlay-pagination">
+                      <button class="dev-overlay-button" onClick={goPrev} type="button">
+                        <ArrowLeftIcon title="Go Previous"/>
+                      </button>
+                      <div class="dev-overlay-page-counter">
+                        {`${truncated()} of ${props.errors.length}`}
+                      </div>
+                      <button class="dev-overlay-button" onClick={goNext} type="button">
+                        <ArrowRightIcon title="Go Next"/>
+                      </button>
+                    </div>
+                  </Show>
+                </div>
+                <div class="dev-overlay-controls">
+                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
+                    <GithubIcon title="Create an issue thread on Github"/>
+                  </button>
+                  <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
+                    <DiscordIcon title="Join our Discord Channel"/>
+                  </button>
+                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
+                    <CameraIcon title="Capture Error Overlay"/>
+                  </button>
+                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
+                    <Show when={isCompiled()} fallback={(<ViewOriginalIcon title="View Original Source"/>)}>
+                      <ViewCompiledIcon title="View Compiled Source"/>
+                    </Show>
+                  </button>
+                  <button class="dev-overlay-button" onClick={props.resetError} type="button">
+                    <RefreshIcon title="Reset Error"/>
+                  </button>
+                </div>
+              </div>
+              <Show when={props.errors[truncated() - 1]} keyed>
+                {(current) => (<div class="dev-overlay-content">
+                    <ErrorInfo error={current}/>
+                    <StackFrames error={current} isCompiled={isCompiled()}/>
+                  </div>)}
+              </Show>
+            </div>
+          </DialogPanel>
+        </div>
+      </Dialog>
+    </Portal>);
+}

package/dist/shared/dev-overlay/createStackFrame.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from "solid-js";
+export interface StackFrameSource {
+    content: string;
+    source: string;
+    name?: string;
+    line: number;
+    column: number;
+}
+export declare function createStackFrame(stackframe: StackFrame, isCompiled: () => boolean): Accessor<StackFrameSource>;

package/dist/shared/dev-overlay/createStackFrame.js

@@ -0,0 +1,56 @@
+import { createMemo, createResource } from "solid-js";
+import getSourceMap from "./get-source-map";
+function getActualFileSource(path) {
+    if (path.startsWith('file://')) {
+        return '/_build/@fs' + path.substring('file://'.length);
+    }
+    return path;
+}
+export function createStackFrame(stackframe, isCompiled) {
+    const [data] = createResource(() => ({
+        fileName: stackframe.fileName,
+        line: stackframe.lineNumber,
+        column: stackframe.columnNumber,
+        functionName: stackframe.functionName,
+    }), async (source) => {
+        if (!source.fileName) {
+            return null;
+        }
+        const response = await fetch(getActualFileSource(source.fileName));
+        if (!response.ok) {
+            return null;
+        }
+        const content = await response.text();
+        const sourceMap = await getSourceMap(source.fileName, content);
+        return {
+            source,
+            content,
+            sourceMap,
+        };
+    });
+    const info = createMemo(() => {
+        const current = data();
+        if (!current) {
+            return undefined;
+        }
+        const { source, content, sourceMap } = current;
+        if (!isCompiled() && source.line && source.column && sourceMap) {
+            const result = sourceMap.originalPositionFor({
+                line: source.line,
+                column: source.column,
+            });
+            return {
+                ...result,
+                content: sourceMap.sourceContentFor(result.source),
+            };
+        }
+        return {
+            source: source.fileName,
+            line: source.line,
+            column: source.column,
+            name: source.functionName,
+            content,
+        };
+    });
+    return info;
+}

package/dist/shared/dev-overlay/download.d.ts

@@ -0,0 +1 @@
+export default function download(dataurl: string, filename: string): void;

package/dist/shared/dev-overlay/download.js

@@ -0,0 +1,6 @@
+export default function download(dataurl, filename) {
+    const link = document.createElement("a");
+    link.href = dataurl;
+    link.download = filename;
+    link.click();
+}

package/dist/shared/dev-overlay/get-source-map.d.ts

@@ -0,0 +1,2 @@
+import { SourceMapConsumer } from 'source-map-js';
+export default function getSourceMap(url: string, content: string): Promise<SourceMapConsumer | null>;

package/dist/shared/dev-overlay/get-source-map.js

@@ -0,0 +1,25 @@
+import { SourceMapConsumer } from 'source-map-js';
+const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
+const SOURCEMAP_REGEX = /(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/;
+export default async function getSourceMap(url, content) {
+    const lines = content.split('\n');
+    let sourceMapUrl;
+    for (let i = lines.length - 1; i >= 0 && !sourceMapUrl; i--) {
+        const result = lines[i].match(SOURCEMAP_REGEX);
+        if (result) {
+            sourceMapUrl = result[1];
+        }
+    }
+    if (!sourceMapUrl) {
+        return null;
+    }
+    if (!(INLINE_SOURCEMAP_REGEX.test(sourceMapUrl) || sourceMapUrl.startsWith('/'))) {
+        // Resolve path if it's a relative access
+        const parsedURL = url.split('/');
+        parsedURL[parsedURL.length - 1] = sourceMapUrl;
+        sourceMapUrl = parsedURL.join('/');
+    }
+    const response = await fetch(sourceMapUrl);
+    const rawSourceMap = await response.json();
+    return new SourceMapConsumer(rawSourceMap);
+}

package/dist/shared/dev-overlay/icons.d.ts

@@ -0,0 +1,28 @@
+import type { JSX } from 'solid-js';
+export declare function ArrowRightIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function ArrowLeftIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function RefreshIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function ViewCompiledIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function ViewOriginalIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function CameraIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function DiscordIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function GithubIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;
+export declare function SolidStartIcon(props: JSX.IntrinsicElements['svg'] & {
+    title: string;
+}): JSX.Element;

package/{shared/dev-overlay/icons.tsx → dist/shared/dev-overlay/icons.jsx}

@@ -1,191 +1,55 @@
-// @refresh skip
-import type { JSX } from 'solid-js';
-
-export function ArrowRightIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
+export function ArrowRightIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <title>{props.title}</title>
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M14 5l7 7m0 0l-7 7m7-7H3"
-      />
-    </svg>
-  );
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
+    </svg>);
 }
-
-export function ArrowLeftIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
+export function ArrowLeftIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <title>{props.title}</title>
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M10 19l-7-7m0 0l7-7m-7 7h18"
-      />
-    </svg>
-  );
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+    </svg>);
 }
-
-export function RefreshIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
+export function RefreshIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <title>{props.title}</title>
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-      />
-    </svg>
-  );
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+    </svg>);
 }
-
-export function ViewCompiledIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
+export function ViewCompiledIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <title>{props.title}</title>
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-      />
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-      />
-    </svg>
-  );
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+    </svg>);
 }
-
-export function ViewOriginalIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
+export function ViewOriginalIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <title>{props.title}</title>
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-      />
-    </svg>
-  );
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+    </svg>);
 }
-
-export function CameraIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      stroke="none"
-      {...props}
-    >
+export function CameraIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="none" {...props}>
       <title>{props.title}</title>
-      <path 
-        d="M12 9a3.75 3.75 0 1 0 0 7.5A3.75 3.75 0 0 0 12 9Z"
-      />
-      <path
-        fill-rule="evenodd"
-        d="M9.344 3.071a49.52 49.52 0 0 1 5.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 0 0 1.11-.71l.822-1.315a2.942 2.942 0 0 1 2.332-1.39ZM6.75 12.75a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0Zm12-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  );
+      <path d="M12 9a3.75 3.75 0 1 0 0 7.5A3.75 3.75 0 0 0 12 9Z"/>
+      <path fill-rule="evenodd" d="M9.344 3.071a49.52 49.52 0 0 1 5.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 0 0 1.11-.71l.822-1.315a2.942 2.942 0 0 1 2.332-1.39ZM6.75 12.75a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0Zm12-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/>
+    </svg>);
 }
-
-
-export function DiscordIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      stroke="none"
-      {...props}
-    >
+export function DiscordIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="none" {...props}>
       <title>{props.title}</title>
       <path d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"></path>
-    </svg>
-  );
+    </svg>);
 }
-
-export function GithubIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      stroke="none"
-      {...props}
-    >
+export function GithubIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="none" {...props}>
       <title>{props.title}</title>
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path>
-    </svg>
-  );
+    </svg>);
 }
-
-export function SolidStartIcon(
-  props: JSX.IntrinsicElements['svg'] & { title: string },
-): JSX.Element {
-  return (
-    <svg
-      viewBox="0 0 701 701"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+export function SolidStartIcon(props) {
+    return (<svg viewBox="0 0 701 701" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <title>{props.title}</title>
       <g filter="url(#filter0_d_1_2)">
       <rect width="693" height="693" transform="translate(4)" fill="white"/>
@@ -282,7 +146,5 @@ export function SolidStartIcon(
       <stop offset="1" stop-color="#79CFFF"/>
       </linearGradient>
       </defs>
-    </svg>
-  );
+    </svg>);
 }
-