Skip to content

Commit

Permalink
refactor website
Browse files Browse the repository at this point in the history
  • Loading branch information
@joeymalvinni
joeymalvinni committed Jul 23, 2024
1 parent 3ee86d4 commit f6ca9c4
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 1,648 deletions.
1 change: 0 additions & 1 deletion website/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,3 @@ export default function RootLayout({
</html>
);
}

108 changes: 69 additions & 39 deletions website/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,39 @@ const fetch_code = `fetch('https://api.ipify.org')
console.error(error);
});`;

// hard coded syntax highlighting generated by shiki
const webrtc_html: string = `<pre class="text-sm py-8 px-6 rounded-lg !bg-[#141417] border-[#1F2025] border-2" style="background-color:#292D3E;color:#babed8" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic">import</span><span style="color:#89DDFF"> {</span><span style="color:#BABED8"> get_ip</span><span style="color:#89DDFF"> }</span><span style="color:#89DDFF;font-style:italic"> from</span><span style="color:#89DDFF"> "</span><span style="color:#C3E88D">webrtc-ip</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF">get_ip</span><span style="color:#BABED8">()</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">then</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">(</span><span style="color:#BABED8;font-style:italic">my_ip</span><span style="color:#89DDFF">)</span><span style="color:#C792EA"> =></span><span style="color:#89DDFF"> {</span></span>
<span class="line"><span style="color:#BABED8"> console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">my_ip</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre>` satisfies TrustedHTML;

const fetch_html: string = `<pre style="background-color:#292D3E;color:#babed8" tabindex="0"><code><span class="line"><span style="color:#82AAFF">fetch</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">https://api.ipify.org</span><span style="color:#89DDFF">'</span><span style="color:#BABED8">)</span></span>
<span class="line"><span style="color:#89DDFF"> .</span><span style="color:#82AAFF">then</span><span style="color:#BABED8">(</span><span style="color:#BABED8;font-style:italic">response</span><span style="color:#C792EA"> =></span><span style="color:#89DDFF"> {</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic"> if</span><span style="color:#F07178"> (</span><span style="color:#89DDFF">!</span><span style="color:#BABED8">response</span><span style="color:#89DDFF">.</span><span style="color:#BABED8">ok</span><span style="color:#F07178">) </span><span style="color:#89DDFF">{</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic"> throw</span><span style="color:#89DDFF"> new</span><span style="color:#82AAFF"> Error</span><span style="color:#F07178">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">Request failed</span><span style="color:#89DDFF">'</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#89DDFF"> }</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic"> return</span><span style="color:#BABED8"> response</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">text</span><span style="color:#F07178">()</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#89DDFF"> }</span><span style="color:#BABED8">)</span></span>
<span class="line"><span style="color:#89DDFF"> .</span><span style="color:#82AAFF">then</span><span style="color:#BABED8">(</span><span style="color:#BABED8;font-style:italic">data</span><span style="color:#C792EA"> =></span><span style="color:#89DDFF"> {</span></span>
<span class="line"><span style="color:#BABED8"> console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">data</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#89DDFF"> }</span><span style="color:#BABED8">)</span></span>
<span class="line"><span style="color:#89DDFF"> .</span><span style="color:#82AAFF">catch</span><span style="color:#BABED8">(</span><span style="color:#BABED8;font-style:italic">error</span><span style="color:#C792EA"> =></span><span style="color:#89DDFF"> {</span></span>
<span class="line"><span style="color:#BABED8"> console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">error</span><span style="color:#F07178">(</span><span style="color:#BABED8">error</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#89DDFF"> }</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre>` satisfies TrustedHTML;


const Home: React.FC = () => {
const [code, setCode] = useState(webrtc_code);
const [isWebRTC, setIsWebRTC] = useState(true);
const [ip, setIp] = useState<string>("");
const [data, setData] = useState<{ name: string; time: number }[]>([]);
const [speedFactor, setSpeedFactor] = useState<number | null>(null);

const handleFetchClick = () => {
setCode(fetch_code);
setIsWebRTC(false);
};

const handleWebRTCClick = () => {
setCode(webrtc_code);
setIsWebRTC(true);
};

Expand Down Expand Up @@ -91,52 +110,63 @@ const Home: React.FC = () => {
}

return (
<main className="flex min-h-screen flex-col items-center bg-[#0E0F11] text-white">
<main className="flex min-h-screen flex-col items-center bg-[#0E0F11] text-white pb-32">
<h1 className="font-ibm text-4xl mt-32 mb-1 drop-shadow-[0px_0px_4px_#646E82]">WebRTC-IP Comparison</h1>
<h2 className="text-2xl">🌐 Enhanced IP address querying with WebRTC</h2>

<h3>{ip}</h3>
<div className="mt-12 px-32 pt-32 w-[50%] bg-[#111115] rounded-xl drop-shadow-[0px_1px_5px_#646584] border-2 border-[#343443]">
<div className="flex flex-row justify-between ">

<div className="mt-32 px-32 py-32 flex flex-row justify-between w-[50%] bg-[#111115] rounded-xl drop-shadow-[0px_1px_5px_#646584] border-2 border-[#343443]">
<div className="mr-32 w-[40%]">
<h1 className="text-white/30 text-2xl">WEBRTC-IP</h1>
<h2 className="text-2xl m-0 p-0 leading-none mb-8">
Up to {speedFactor ? speedFactor.toFixed(2) : "0"}x faster <br />
<span className="text-base text-[#C3C3C7] mt-0 p-0 leading-none">
than the average fetch request
</span>
</h2>

<Graph data={data} />
</div>
<div className="mr-32 w-[40%]">
<h1 className="text-white/30 text-2xl">WEBRTC-IP</h1>
<h2 className="text-2xl m-0 p-0 leading-none mb-8">
Up to {speedFactor ? speedFactor.toFixed(2) : "0"}x faster <br />
<span className="text-base text-[#C3C3C7] mt-0 p-0 leading-none">
than the average fetch request
</span>
</h2>

<div>
<div>
<Button
variant={isWebRTC ? "primary" : "secondary"}
className="mr-2 mt-2"
onClick={handleWebRTCClick}
>
WEBRTC-IP
</Button>
<Button
variant={!isWebRTC ? "primary" : "secondary"}
onClick={handleFetchClick}
>
FETCH
</Button>
<Graph data={data} />
</div>

<div className="mt-4 bg-[#0E0E10] text-sm">
<Code
code={code}
lang="tsx"
theme="material-theme-palenight"
/>
<div>
<div>
<Button
variant={isWebRTC ? "primary" : "secondary"}
className="mr-2 mt-2"
onClick={handleWebRTCClick}
>
WEBRTC-IP
</Button>
<Button
variant={!isWebRTC ? "primary" : "secondary"}
onClick={handleFetchClick}
>
FETCH
</Button>
</div>

<div className="mt-4 bg-[#0E0E10] text-sm">
{isWebRTC ?
<>
<Code
code={webrtc_code}
html={webrtc_html}
/>
</> : <>
<Code
code={fetch_code}
html={fetch_html}
/>
</>
}
</div>
</div>
</div>

<h3 className="mb-32 mt-4 text-left text-md font-ibm text-white/70">Your IP address: {ip}</h3>
</div>
</main>
</main >
);
}

Expand Down
Binary file added website/bun.lockb
View file
Binary file not shown.
11 changes: 0 additions & 11 deletions website/components/charts/graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,11 @@ import {
ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
{ name: "WebRTC", time: 30 },
{ name: "IPIFY", time: 120 },
{ name: "IPRegistry", time: 230 },
{ name: "JSONIP", time: 150 },
]

const chartConfig = {
time: {
label: "Time (ms)",
color: "#504EC2",
},
// mobile: {
// label: "Mobile",
// color: "#60a5fa",
// },
} satisfies ChartConfig

interface ComponentProps {
Expand Down
24 changes: 3 additions & 21 deletions website/components/ui/Code.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,15 @@
import React, { useState, useEffect } from 'react';
import { codeToHtml } from 'shiki';
import { transformerNotationHighlight, transformerNotationDiff } from '@shikijs/transformers';
import type { BundledLanguage, BundledTheme } from 'shiki';
import React, { useState } from 'react';
import CopyToClipboard from './CopyToClipboard';

type Props = {
html: string;
code: string;
lang?: BundledLanguage;
theme?: BundledTheme;
};

const Code: React.FC<Props> = ({ code, lang = 'javascript', theme = 'nord' }) => {
const [html, setHtml] = useState<string>(`<code>${code}</code>`);
const Code: React.FC<Props> = ({ html, code }) => {
const [isHovering, setIsHovered] = useState(false);
const onMouseEnter = () => setIsHovered(true);
const onMouseLeave = () => setIsHovered(false);

useEffect(() => {
const generateHtml = async () => {
const result = await codeToHtml(code, {
lang,
theme,
transformers: [transformerNotationHighlight(), transformerNotationDiff()],
});
setHtml(result);
};
generateHtml();
}, [code, lang, theme]);

return (
<div
className="relative rounded-lg max-w-xl"
Expand Down
Loading

0 comments on commit f6ca9c4

Please sign in to comment.