hopinc
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+.yarn
+.yarnrc.yml
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,3 @@
-module.exports = {
-	extends: 'next/core-web-vitals',
-};
+module.exports = {
+	extends: 'next/core-web-vitals',
+};
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
-*.log
-.yarn/*
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-node_modules
-.next
+*.log
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+node_modules
+.next
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+
+
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1 @@
-pages/**/*.mdx
+pages/**/*.mdx
diff --git a/.prettierrc b/.prettierrc
@@ -1,11 +1,11 @@
-{
-  "$schema": "http://json.schemastore.org/prettierrc",
-  "singleQuote": true,
-  "semi": true,
-  "printWidth": 80,
-  "trailingComma": "all",
-  "arrowParens": "avoid",
-  "bracketSpacing": false,
-  "useTabs": true,
-  "quoteProps": "consistent"
-}
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "singleQuote": true,
+  "semi": true,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "useTabs": true,
+  "quoteProps": "consistent"
+}
diff --git a/assets/BrandVectors.tsx b/assets/BrandVectors.tsx
@@ -1,22 +1,14 @@
-import {SVGProps} from 'react';
-
-export const HopLogo = (props: SVGProps<SVGSVGElement>) => (
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" {...props}>
-		<g id="a1c6c63a-e459-44a3-b4b7-af910ae95872" data-name="Layer 2">
-			<g id="fa506414-24b2-4115-bfea-5ced8b49bd02" data-name="Layer 1">
-				<path
-					d="M30,20a30.09,30.09,0,0,0-10,1.71V0H0V80H20V50a10,10,0,0,1,20,0V80H60V50A30,30,0,0,0,30,20Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M80,20a30,30,0,1,0,30,30A30,30,0,0,0,80,20Zm0,40A10,10,0,1,1,90,50,10,10,0,0,1,80,60Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M130,20a30,30,0,0,0-30,30v50h20V78.29A30,30,0,1,0,130,20Zm0,40a10,10,0,1,1,10-10A10,10,0,0,1,130,60Z"
-					fill="currentColor"
-				/>
-			</g>
-		</g>
-	</svg>
-);
+import {SVGProps} from 'react';
+
+export const DatalinkLogo = (props: SVGProps<SVGSVGElement>) => (
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" {...props}>
+	<title>logo</title>
+	<defs>
+		<image  width="532" height="466" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhQAAAHSCAMAAACD/aLjAAAAAXNSR0IB2cksfwAAAvpQTFRFEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISeIt/fAAAAP50Uk5T//fu5N3OyruyopKCcmJOOCAKAPTbwIVnSykH/uK+mnZMIgL1zHNDEuGvfUcP1p9mKgHqrW8x7KhkH9lGBvOsF/3BbRzHdB5o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"/>
+	</defs>
+	<style>
+	</style>
+	<use id="White copy" href="#img1" x="234" y="267"/>
+</svg>
+);
+
diff --git a/components/client.tsx b/components/client.tsx
@@ -1,13 +1,13 @@
-import dynamic from 'next/dynamic';
-import {ReactNode} from 'react';
-
-export const NoSSR = dynamic(
-	async () => {
-		function Component(props: {children: ReactNode}) {
-			return <>{props.children}</>;
-		}
-
-		return Component;
-	},
-	{ssr: false},
-);
+import dynamic from 'next/dynamic';
+import {ReactNode} from 'react';
+
+export const NoSSR = dynamic(
+	async () => {
+		function Component(props: {children: ReactNode}) {
+			return <>{props.children}</>;
+		}
+
+		return Component;
+	},
+	{ssr: false},
+);
diff --git a/components/code.module.css b/components/code.module.css
@@ -1,3 +1,3 @@
-.code__container [data-rehype-pretty-code-fragment] > pre {
-	margin: 0;
-}
+.code__container [data-rehype-pretty-code-fragment] > pre {
+	margin: 0;
+}
diff --git a/components/code.tsx b/components/code.tsx
@@ -1,73 +1,104 @@
-import {Children, ReactElement} from 'react';
-import clsx from 'clsx';
-import styles from './code.module.css';
-import {useCurrentLanguage} from '../context/code';
-
-export interface Props {
-	children: ReactElement[];
-}
-
-export function Code(props: Props) {
-	const children = Children.map(props.children, child => {
-		const language = child.props.children.props.children.props[
-			'data-language'
-		] as string;
-
-		return {
-			language,
-			Component: child,
-		};
-	});
-
-	const [activeLanguage, setActiveLanguage] = useCurrentLanguage(
-		children.map(child => child.language),
-	);
-
-	return (
-		<div
-			className={clsx(
-				'flex flex-col my-5 dark:bg-black rounded-lg space-y-2 p-3 border border-neutral-100 dark:border-neutral-900',
-				styles.code__container,
-			)}
-		>
-			<div className="flex max-w-full overflow-x-auto divide-x divide-neutral-100 dark:divide-neutral-800">
-				{children.map(child => {
-					const active = activeLanguage === child.language;
-
-					return (
-						<div
-							key={child.language}
-							className="px-3 first-of-type:pl-0 last-of-type:pr-0"
-						>
-							<button
-								className={clsx(
-									'transition-colors px-6 py-1 text-xs uppercase tracking-widest inline-block rounded-md',
-									{
-										'bg-primary-500 text-primary-50 dark:bg-neutral-800':
-											active,
-										'hover:bg-neutral-100 dark:hover:bg-neutral-900': !active,
-									},
-								)}
-								onClick={() => setActiveLanguage(child.language)}
-							>
-								{child.language}
-							</button>
-						</div>
-					);
-				})}
-			</div>
-
-			<div>
-				{children.map(child => {
-					const active = activeLanguage === child.language;
-
-					return (
-						<div key={child.language} className={active ? 'block' : 'hidden'}>
-							{child.Component}
-						</div>
-					);
-				})}
-			</div>
-		</div>
-	);
-}
+import {Children, ReactElement, useMemo} from 'react';
+import clsx from 'clsx';
+import styles from './code.module.css';
+import {useCurrentLanguage} from '../context/code';
+
+export interface Props {
+	children: ReactElement[];
+}
+
+export function Code(props: Props) {
+	const children = useMemo(() => {
+		return Children.map(props.children, child => {
+			if (Array.isArray(child.props.children)) {
+				if (child.props.children.length !== 2) {
+					throw new Error(
+						'Code component must have exactly two children, title and codeblock',
+					);
+				}
+
+				const title = child.props.children[0].props.children as string;
+
+				const language = child.props.children[1].props.children.props[
+					'data-language'
+				] as string;
+
+				return {
+					title,
+					language,
+					Component: child.props.children[1],
+				};
+			}
+
+			const language = child.props.children.props.children.props[
+				'data-language'
+			] as string;
+
+			return {
+				language,
+				Component: child,
+			};
+		});
+	}, [props.children]);
+
+	const [activeLanguage, setActiveLanguage] = useCurrentLanguage(
+		children.map(child => child.language),
+	);
+
+	const activeTitle =
+		children.find(child => child.language === activeLanguage)?.title ?? null;
+
+	return (
+		<div
+			className={clsx(
+				'flex flex-col my-5 dark:bg-black rounded-lg space-y-2 p-3 border border-neutral-100 dark:border-neutral-900',
+				styles.code__container,
+			)}
+		>
+			<div className="flex max-w-full items-center space-x-2 overflow-x-auto justify-between">
+				{children.map(child => {
+					const active = activeLanguage === child.language;
+
+					return (
+						<div
+							key={child.language}
+							className="px-3 first-of-type:pl-0 last-of-type:pr-0"
+						>
+							<button
+								className={clsx(
+									'transition-colors px-6 py-1 text-xs uppercase tracking-widest inline-block rounded-md',
+									{
+										'bg-primary-500 text-primary-50 dark:bg-neutral-800':
+											active,
+										'hover:bg-neutral-100 dark:hover:bg-neutral-900': !active,
+									},
+								)}
+								onClick={() => setActiveLanguage(child.language)}
+							>
+								{child.language}
+							</button>
+						</div>
+					);
+				})}
+
+				{activeTitle && (
+					<p className="text-neutral-500 dark:text-neutral-400">
+						{activeTitle}
+					</p>
+				)}
+			</div>
+
+			<div>
+				{children.map(child => {
+					const active = activeLanguage === child.language;
+
+					return (
+						<div key={child.language} className={active ? 'block' : 'hidden'}>
+							{child.Component}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}