ui(frontend): add custom script url

frontend/Dockerfile

@@ -32,6 +32,7 @@ COPY . .
 
 ENV BASE_URL ""
 ENV NEXT_PUBLIC_BASE_URL ""
+ENV SITE_URL ""
 
 RUN rm -f app/.env
 RUN echo BASE_URL=${BASE_URL:-'""'} >> app/.env.production

frontend/app/src/app/(main)/(admin)/site-settings/custom_js/page.tsx

@@ -1,11 +1,16 @@
 import { getAllSiteSettings } from '@/api/site-settings';
 import { CustomJsSettings } from '@/components/settings/CustomJsSettings';
+import { WidgetSnippet } from '@/components/settings/WidgetSnippet';
 
 export default async function CustomJsSettingsPage () {
   const settings = await getAllSiteSettings();
 
   return (
     <>
+      <section className="max-w-screen-md space-y-2 mb-8">
+        <WidgetSnippet />
+        <p className="text-muted-foreground text-xs">Copy this HTML fragment to your page.</p>
+      </section>
       <CustomJsSettings schema={settings} />
     </>
   );

frontend/app/src/components/html-viewer.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import Highlight from 'highlight.js/lib/core';
+import html from 'highlight.js/lib/languages/xml';
+import { useEffect, useState } from 'react';
+import './code-theme.scss';
+
+export interface HtmlViewerProps {
+  content: string;
+  mime: string;
+}
+
+Highlight.registerLanguage('html', html);
+
+export function HtmlViewer ({ value: propValue }: { value: string }) {
+  const [value, setValue] = useState(() => propValue.replaceAll('<', '&lt;'));
+
+  useEffect(() => {
+    setValue(propValue);
+    try {
+      const { value: result } = Highlight.highlight('html', propValue);
+      setValue(result);
+    } catch {
+    }
+  }, [propValue]);
+
+  return (
+    <code>
+      <pre className="whitespace-pre-wrap text-xs font-mono" dangerouslySetInnerHTML={{ __html: value }} />
+    </code>
+  );
+}

frontend/app/src/components/settings/WidgetSnippet.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { HtmlViewer } from '@/components/html-viewer';
+import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+
+const base = process.env.SITE_URL || '';
+
+export function WidgetSnippet () {
+  const [copied, setCopied] = useState(false);
+
+  const [url, setUrl] = useState(base + '/widget.js');
+
+  const script = `<script src="${url}" async></script>`
+
+  useEffect(() => {
+    if (!process.env.SITE_URL) {
+      setUrl(location.origin + '/widget.js');
+    }
+  }, []);
+
+  return (
+    <div className="rounded-lg p-2 border mb-4 relative bg-foreground/5">
+      <div className='text-xs font-mono opacity-30 select-none'>&lt;<span className='hljs-name'>html</span>&gt;</div>
+      <div className='text-xs font-mono opacity-30 select-none'>&lt;<span className="hljs-name">body</span>&gt;</div>
+      <div className='text-xs font-mono opacity-30 select-none whitespace-pre'>  ...</div>
+      <HtmlViewer value={`  ${script}`} />
+      <div className="text-xs font-mono opacity-30 select-none">&lt;/<span className="hljs-name">body</span>&gt;</div>
+      <div className='text-xs font-mono opacity-30 select-none'>&lt;/<span className='hljs-name'>html</span>&gt;</div>
+      <Button variant="secondary" size='sm' className='absolute top-0.5 right-0.5 select-none' onClick={() => {
+        navigator.clipboard.writeText(script);
+        setCopied(true);
+      }}>
+        {copied ? 'Copied' : 'Copy'}
+      </Button>
+    </div>
+  );
+}