-
+
+
+}
diff --git a/apps/dashboard/src/components/OgSplash.tsx b/apps/dashboard/src/components/OgSplash.tsx
new file mode 100644
index 0000000..873bc45
--- /dev/null
+++ b/apps/dashboard/src/components/OgSplash.tsx
@@ -0,0 +1,118 @@
+'use client'
+import type { MouseEvent, ReactNode } from "react";
+import { Suspense, useEffect, useState } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { INITIAL_ELEMENTS, createElementId } from "../lib/elements";
+import type { OGElement } from "../lib/types";
+import { OgEditor } from "./OgEditor";
+import { DeleteIcon } from "./icons/DeleteIcon";
+import { AddIcon } from "./icons/AddIcon";
+import { OgImage } from "./OgImage";
+import { ArrowRightIcon } from "./icons/ArrowRightIcon";
+import { CustomLink } from "./CustomLink";
+
+interface OgImageWrapperProps {
+ href: string
+ elements?: OGElement[]
+ children?: ReactNode
+ deletable?: (event: MouseEvent) => void
+}
+
+function OgImageWrapper({ href, elements, children, deletable }: OgImageWrapperProps) {
+ return (
+
+ {elements ? (
+ ([])
+
+ useEffect(() => {
+ const images = Object.keys(localStorage).reduce((acc, current) => {
+ if (current.startsWith('og-')) {
+ acc.push({
+ id: current,
+ content: JSON.parse(localStorage.getItem(current) || '[]') as OGElement[]
+ })
+ }
+
+ return acc
+ }, [])
+
+ setOgImages(images)
+ }, [])
+
+ function deleteOgImage(ogImage: string) {
+ return function onClick(event: MouseEvent) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ localStorage.removeItem(ogImage)
+ setOgImages(ogImages.filter(({ id }) => id !== ogImage))
+ }
+ }
+
+ return (
+ <>
+ ) {
+ return (
+
+ )
+}
diff --git a/apps/dashboard/src/components/icons/ArrowRightIcon.tsx b/apps/dashboard/src/components/icons/ArrowRightIcon.tsx
new file mode 100644
index 0000000..a1ad0a0
--- /dev/null
+++ b/apps/dashboard/src/components/icons/ArrowRightIcon.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+
+export function ArrowRightIcon(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/apps/dashboard/src/lib/elements.ts b/apps/dashboard/src/lib/elements.ts
index ac54b25..dff865e 100644
--- a/apps/dashboard/src/lib/elements.ts
+++ b/apps/dashboard/src/lib/elements.ts
@@ -2,6 +2,29 @@ import type { CSSProperties } from "react";
import type { OGElement } from "./types";
import { hexToRgba } from "./colors";
+/**
+ * The initial elements to render in the editor.
+ *
+ * It only contains a single element, a white background that
+ * takes the entire width and height of the editor.
+ */
+export const INITIAL_ELEMENTS: OGElement[] = [
+ {
+ id: createElementId(),
+ tag: 'div',
+ name: 'Box',
+ x: 0,
+ y: 0,
+ width: 1200,
+ height: 630,
+ visible: true,
+ rotate: 0,
+ opacity: 100,
+ backgroundColor: '#ffffff',
+ },
+]
+
+
export function createElementId() {
return Math.random().toString(36).substr(2, 9);
}
diff --git a/apps/dashboard/src/lib/fonts.ts b/apps/dashboard/src/lib/fonts.ts
index cf9ee66..799414a 100644
--- a/apps/dashboard/src/lib/fonts.ts
+++ b/apps/dashboard/src/lib/fonts.ts
@@ -1,3 +1,5 @@
+import type { OGElement } from "./types"
+
export const FONTS = [
'Roboto',
'Open Sans',
@@ -46,3 +48,28 @@ export function maybeLoadFont(font: string, weight: number) {
document.head.appendChild(link)
}
+/**
+ * Load all fonts used in the given elements from Bunny Fonts. The fonts are
+ * returned as an `ArrayBuffer`, along with the font name and weight.
+ */
+export async function loadFonts(elements: OGElement[]) {
+ // TODO: dedupe fonts
+ return Promise.all(elements.filter(element => element.tag === 'p' || element.tag === 'span').map(async element => {
+ // @ts-expect-error -- wrong inference
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access -- wrong inference
+ const fontName = element.fontFamily.toLowerCase().replace(' ', '-')
+ // @ts-expect-error -- wrong inference
+ const data = await fetch(`https://fonts.bunny.net/${fontName}/files/${fontName}-latin-${element.fontWeight}-normal.woff`).then(response => response.arrayBuffer())
+
+ return {
+ // @ts-expect-error -- wrong inference
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- wrong inference
+ name: element.fontFamily,
+ data,
+ // @ts-expect-error -- wrong inference
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- wrong inference
+ weight: element.fontWeight,
+ }
+ }))
+}
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26b9543..74060bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
react-dom:
specifier: ^18
version: 18.2.0(react@18.2.0)
+ react-promise-suspense:
+ specifier: ^0.3.4
+ version: 0.3.4
satori:
specifier: ^0.10.11
version: 0.10.11
@@ -2040,6 +2043,10 @@ packages:
strip-final-newline: 3.0.0
dev: true
+ /fast-deep-equal@2.0.1:
+ resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+ dev: false
+
/fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true
@@ -3345,6 +3352,12 @@ packages:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: true
+ /react-promise-suspense@0.3.4:
+ resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
+ dependencies:
+ fast-deep-equal: 2.0.1
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
{width}x{height}
@@ -268,7 +273,7 @@ export function OgEditor({ initialElements, width, height }: OgProviderProps) {
-
+
diff --git a/apps/dashboard/src/components/OgImage.tsx b/apps/dashboard/src/components/OgImage.tsx
new file mode 100644
index 0000000..20d9dd7
--- /dev/null
+++ b/apps/dashboard/src/components/OgImage.tsx
@@ -0,0 +1,39 @@
+import usePromise from "react-promise-suspense"
+import { createElementStyle } from "../lib/elements"
+import { exportToSvg } from "../lib/export"
+import { loadFonts } from "../lib/fonts"
+import type { OGElement } from "../lib/types"
+
+async function loadOgImage(elements: OGElement[]) {
+ const fonts = await loadFonts(elements)
+ const reactLike = {
+ type: 'div',
+ props: {
+ style: {
+ display: 'flex',
+ width: '100%',
+ height: '100%',
+ },
+ children: elements.map(element => ({
+ type: element.tag,
+ props: {
+ style: createElementStyle(element),
+ ...(element.tag === 'p' ? { children: element.content } : {}),
+ },
+ }))
+ }
+ }
+
+ const svg = await exportToSvg(reactLike, fonts)
+ return `data:image/svg+xml;base64,${btoa(svg)}`
+}
+
+interface OgImageProps {
+ elements: OGElement[]
+}
+
+export function OgImage({ elements }: OgImageProps) {
+ const src = usePromise(loadOgImage, [elements])
+
+ return
+
+ )}
+
+ )
+}
diff --git a/apps/dashboard/src/components/RightPanel/ModificationsSection.tsx b/apps/dashboard/src/components/RightPanel/ModificationsSection.tsx
index 977fef6..5d2f658 100644
--- a/apps/dashboard/src/components/RightPanel/ModificationsSection.tsx
+++ b/apps/dashboard/src/components/RightPanel/ModificationsSection.tsx
@@ -1,5 +1,5 @@
import type { OGElement } from "../../lib/types";
-import { Button } from "../Button";
+import { Button } from "../forms/Button";
import { useOg } from "../OgEditor";
import { DeleteIcon } from "../icons/DeleteIcon";
diff --git a/apps/dashboard/src/components/icons/ArrowLeftIcon.tsx b/apps/dashboard/src/components/icons/ArrowLeftIcon.tsx
new file mode 100644
index 0000000..341fe0c
--- /dev/null
+++ b/apps/dashboard/src/components/icons/ArrowLeftIcon.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+
+export function ArrowLeftIcon(props: SVGProps
+
+
+
+
+
+
+ Templates
+
+
+
+
+
+
+ My OG images
+
+
+
+ {ogImages.map(ogImage => {
+ return (
+
+