feat: seo (#80)

QuiiBz · Apr 7, 2024 · 8a3b60a · 8a3b60a
1 parent 2c3d1d2
commit 8a3b60a
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
     <img alt="" height="200px" src="https://github.com/QuiiBz/ogstudio/blob/main/assets/icon.png" />
   </picture>
   <br />
-  <b>OG Studio</b>: Figma-like OG (Open Graph) Image builder
+  <b>OG Studio</b>: Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor
 </p>
 
 ---
@@ -12,11 +12,16 @@
 
 ## About
 
-⚠️ Heavily WIP
+OG Studio is an open source project and website that allows you to easily create Open Graph (abriviatted as OG) images for your own websites. OG images are used to represent your website when shared on social media platforms like X (Twitter), Facebook, LinkedIn, etc. You can choose from a variety of templates, customize them, and export them to SVG, PNG, or to a URL.
+
+Powered by [Satori](https://github.com/vercel/satori) and [resvg-wasm](https://github.com/yisibl/resvg-js).
 
 ## Features
 
-TODO
+- **Figma-like editor**: Create and edit your OG images with an intuitive visual editor
+- **Templates**: Choose from a variety of templates to get started
+- **SVG, PNG, URL export**: Export your OG images to SVG, PNG, or to a URL
+- **Dynamic texts**: Add dynamic texts to your OG images, that will be generated on-the-fly. Ideal for blog posts, product pages, etc.
 
 ## Contributing
 

diff --git a/apps/dashboard/src/app/(splash)/login/page.tsx b/apps/dashboard/src/app/(splash)/login/page.tsx
@@ -4,8 +4,7 @@ import { GitHubIcon } from "../../../components/icons/GitHubIcon";
 import { GoogleIcon } from "../../../components/icons/GoogleIcon";
 
 export const metadata = {
-  title: "Templates - OG Studio",
-  description: "Sign in to export your images and sync them across devices.",
+  title: "Sign in - OG Studio",
 };
 
 export const dynamic = "force-static";

diff --git a/apps/dashboard/src/app/(splash)/my-images/page.tsx b/apps/dashboard/src/app/(splash)/my-images/page.tsx
@@ -2,7 +2,6 @@ import { MyImagesSplash } from "../../../components/Splash/MyImagesSplash";
 
 export const metadata = {
   title: "My images - OG Studio",
-  description: "My Open Graph images.",
 };
 
 export const dynamic = "force-static";

diff --git a/apps/dashboard/src/app/(splash)/page.tsx b/apps/dashboard/src/app/(splash)/page.tsx
@@ -1,10 +1,5 @@
 import { HomeSplash } from "../../components/Splash/HomeSplash";
 
-export const metadata = {
-  title: "OG Studio",
-  description: "Figma-like OG (Open Graph) Image builder.",
-};
-
 export const dynamic = "force-static";
 
 export default function Home() {

diff --git a/apps/dashboard/src/app/(splash)/templates/[name]/page.tsx b/apps/dashboard/src/app/(splash)/templates/[name]/page.tsx
@@ -19,7 +19,7 @@ export function generateMetadata({ params: { name } }: TemplateProps) {
 
   return {
     title: `${template?.name} template - OG Studio`,
-    description: "Pre-made Open Graph image templates.",
+    description: template?.description,
   };
 }
 

diff --git a/apps/dashboard/src/app/editor/[image]/page.tsx b/apps/dashboard/src/app/editor/[image]/page.tsx
@@ -2,7 +2,6 @@ import { Editor } from "../../../components/Editor";
 
 export const metadata = {
   title: "Editor - OG Studio",
-  description: "Figma-like OG (Open Graph) Image builder.",
 };
 
 export const dynamic = "force-static";

diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
@@ -5,6 +5,17 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Providers } from "../components/Providers";
 import "./globals.css";
 
+export const metadata = {
+  title: "OG Studio",
+  description:
+    "Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.",
+  openGraph: {
+    images: [
+      "https://github.com/QuiiBz/ogstudio/blob/main/assets/builder.jpeg?raw=true",
+    ],
+  },
+};
+
 const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({

diff --git a/apps/dashboard/src/components/Splash/TemplateSplash.tsx b/apps/dashboard/src/components/Splash/TemplateSplash.tsx
@@ -15,7 +15,7 @@ export function TemplateSplash({ template }: TemplateSplashProps) {
       <Flex align="center" justify="between">
         <Text size="5">{template.name} template</Text>
         <Button asChild color="gray" radius="full" variant="ghost">
-          <Link href="/">
+          <Link href="/templates">
             <ArrowLeftIcon />
             Back
           </Link>

diff --git a/apps/dashboard/src/components/Splash/index.tsx b/apps/dashboard/src/components/Splash/index.tsx
@@ -88,7 +88,7 @@ export function Splash({ children }: OgSplashProps) {
             </Button>
           </Flex>
           <Text as="p" className="w-2/3" size="2">
-            Create static or dynamic Open Graph images with an intuitive,
+            Create static or dynamic OG (Open Graph) images with an intuitive,
             Figma-like visual editor. Browse ready-to-use templates, and export
             your images to SVG/PNG or to a dynamic URL.
           </Text>

diff --git a/apps/dashboard/src/lib/templates.ts b/apps/dashboard/src/lib/templates.ts
@@ -106,6 +106,88 @@ export const TEMPLATES = [
       },
     ],
   },
+  {
+    name: "AI Startup",
+    description:
+      "A futuristic Open Graph image with a dark background and subtle colors.",
+    elements: [
+      {
+        tag: "div",
+        id: createElementId(),
+        name: "Box",
+        width: 1200,
+        height: 630,
+        visible: true,
+        rotate: 0,
+        backgroundColor: "#050d26",
+        x: 0,
+        y: 0,
+        blur: 0,
+      },
+      {
+        tag: "div",
+        id: createElementId(),
+        name: "Rounded box",
+        width: 569,
+        height: 502,
+        visible: true,
+        rotate: 0,
+        backgroundColor: "#0c3df040",
+        radius: 999,
+        x: -149,
+        y: 348,
+        blur: 100,
+      },
+      {
+        tag: "div",
+        id: createElementId(),
+        name: "Rounded box",
+        width: 569,
+        height: 502,
+        visible: true,
+        rotate: 0,
+        backgroundColor: "#0cf0e940",
+        radius: 999,
+        x: 994,
+        y: 297,
+        blur: 100,
+      },
+      {
+        tag: "div",
+        id: createElementId(),
+        name: "Rounded box",
+        width: 569,
+        height: 502,
+        visible: true,
+        rotate: 0,
+        backgroundColor: "#f00cd140",
+        radius: 999,
+        x: 538,
+        y: -388,
+        blur: 100,
+      },
+      {
+        tag: "p",
+        id: createElementId(),
+        name: "Text",
+        width: 1161,
+        height: 186,
+        visible: true,
+        rotate: 0,
+        content: "AI startup",
+        color: "#ffffff",
+        fontFamily: "Raleway",
+        fontWeight: 400,
+        lineHeight: 1,
+        letterSpacing: 0,
+        fontSize: 140,
+        align: "center",
+        x: 13,
+        y: 220,
+        blur: 0,
+      },
+    ],
+  },
   {
     name: "Space",
     description: