Skip to content

Commit

Permalink
ui(frontend): add custom script url
Browse files Browse the repository at this point in the history
  • Loading branch information
634750802 committed Jul 19, 2024
1 parent fd28d4f commit 07e974b
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 0 deletions.
1 change: 1 addition & 0 deletions frontend/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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} />
</>
);
Expand Down
32 changes: 32 additions & 0 deletions frontend/app/src/components/html-viewer.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
38 changes: 38 additions & 0 deletions frontend/app/src/components/settings/WidgetSnippet.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 07e974b

Please sign in to comment.