feat: update og image

Fizznoc · Nov 4, 2023 · 06668a9 · 06668a9
1 parent 203c81d
commit 06668a9
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -57,8 +57,8 @@ pnpm dev
 ## Roadmap
 
 - [x] ~Fix Vaul drawer for mobile sign in~  
+- [x] ~Update OG image~  
 - [ ] Add resend for subscriptions  
-- [ ] Update OG image  
 - [ ] Update documentation
 - [ ] Use Server Actions
 - [ ] Switch subscription plan

diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
@@ -12,6 +12,7 @@ const interBold = fetch(
   new URL("../../../assets/fonts/CalSans-SemiBold.ttf", import.meta.url)
 ).then((res) => res.arrayBuffer())
 
+
 export async function GET(req: Request) {
   try {
     const fontRegular = await interRegular
@@ -20,14 +21,16 @@ export async function GET(req: Request) {
     const url = new URL(req.url)
     const values = ogImageSchema.parse(Object.fromEntries(url.searchParams))
     const heading =
-      values.heading.length > 140
-        ? `${values.heading.substring(0, 140)}...`
+      values.heading.length > 80
+        ? `${values.heading.substring(0, 100)}...`
         : values.heading
 
     const { mode } = values
     const paint = mode === "dark" ? "#fff" : "#000"
 
-    const fontSize = heading.length > 100 ? "70px" : "100px"
+    const fontSize = heading.length > 80 ? "60px" : "80px"
+
+    const githubName = "mickasmt";
 
     return new ImageResponse(
       (
@@ -41,44 +44,31 @@ export async function GET(req: Request) {
                 : "white",
           }}
         >
-          <svg width="212" height="50" viewBox="0 0 212 50" fill="none">
-            <g clip-path="url(#a)" fill={paint}>
-              <path d="M99.715 9.784h26.128v4.823h-10.365v25.37h-5.182v-25.37h-10.58V9.784ZM56.746 9.784v4.823H35.803v7.757h16.842v4.823H35.803v7.967h20.943v4.823H30.62v-25.37h-.002V9.784h26.128ZM69.792 9.797H63.01l24.292 30.192h6.801L81.956 24.903 94.084 9.82l-6.782.01-8.742 10.856-8.768-10.89ZM76.751 31.363l-3.396-4.222L62.99 40.012h6.802l6.96-8.649Z" />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M30.802 39.977 6.478 9.77H0v30.193h5.182V16.225l19.11 23.752h6.51Z"
-              />
-              <path d="M127.008 39.792c-.38 0-.703-.131-.973-.394a1.267 1.267 0 0 1-.4-.959c-.004-.366.13-.681.4-.944.27-.263.593-.395.973-.395.365 0 .684.132.955.395.274.263.41.578.414.944-.004.25-.067.478-.193.682-.13.208-.295.37-.502.488a1.298 1.298 0 0 1-.674.183ZM135.853 27.073h2.296v8.847c-.003.814-.179 1.51-.523 2.094a3.477 3.477 0 0 1-1.447 1.346c-.614.311-1.334.47-2.152.47-.748 0-1.419-.135-2.016-.398a3.239 3.239 0 0 1-1.418-1.176c-.352-.519-.524-1.166-.524-1.941h2.301c.003.339.08.633.228.879.147.245.351.432.611.564.263.131.565.197.905.197.369 0 .685-.076.942-.232.256-.152.453-.38.59-.685.133-.301.203-.675.207-1.118v-8.847ZM147.598 30.533a1.67 1.67 0 0 0-.73-1.252c-.432-.301-.99-.45-1.675-.45-.481 0-.895.073-1.239.214-.345.146-.611.34-.794.585a1.423 1.423 0 0 0-.281.84c0 .264.063.492.186.683.123.193.288.356.502.487.211.135.446.246.703.336.259.09.519.166.779.228l1.197.294c.481.111.949.26 1.394.45.446.187.85.426 1.205.713.354.287.635.633.842 1.038.208.405.313.879.313 1.426 0 .737-.19 1.384-.573 1.944-.382.557-.933.993-1.657 1.308-.72.312-1.59.47-2.616.47-.99 0-1.854-.151-2.581-.456-.73-.301-1.299-.744-1.71-1.325-.41-.582-.632-1.29-.663-2.125h2.275c.032.436.172.8.411 1.094.242.29.558.505.945.65.389.142.825.215 1.306.215.502 0 .944-.076 1.327-.225.379-.149.678-.357.892-.626.218-.267.327-.582.33-.942-.003-.328-.102-.602-.292-.816-.193-.215-.459-.395-.8-.54a8.25 8.25 0 0 0-1.201-.39l-1.454-.368c-1.05-.266-1.882-.671-2.489-1.214-.611-.543-.913-1.263-.913-2.166 0-.74.203-1.391.615-1.948.407-.557.965-.99 1.671-1.298.709-.311 1.51-.463 2.401-.463.906 0 1.7.152 2.385.463.684.308 1.222.737 1.611 1.284a3.25 3.25 0 0 1 .605 1.882h-2.227Z" />
-            </g>
-            <path
-              d="M181.335 14.636V35h-5.528V19.727h-.119l-4.455 2.665v-4.693l5.011-3.063h5.091Zm12.136 20.642c-1.604 0-3.029-.275-4.276-.825-1.239-.557-2.214-1.322-2.923-2.297-.709-.974-1.067-2.094-1.074-3.36h5.568c.007.39.126.742.358 1.053.239.305.564.544.975.716.411.173.881.259 1.412.259.51 0 .961-.09 1.352-.269.391-.185.696-.44.915-.765.218-.325.325-.696.318-1.114a1.637 1.637 0 0 0-.378-1.094c-.252-.318-.606-.566-1.064-.745-.457-.18-.984-.269-1.581-.269h-2.068V22.75h2.068c.55 0 1.034-.09 1.452-.268.424-.18.752-.428.984-.746.239-.318.355-.683.348-1.094a1.824 1.824 0 0 0-.288-1.054 2.012 2.012 0 0 0-.835-.716c-.352-.172-.759-.258-1.223-.258-.504 0-.955.09-1.353.268a2.25 2.25 0 0 0-.924.746 1.891 1.891 0 0 0-.348 1.094h-5.29c.007-1.247.348-2.347 1.024-3.302.683-.954 1.617-1.703 2.804-2.247 1.187-.543 2.549-.815 4.087-.815 1.504 0 2.833.255 3.987.766 1.16.51 2.065 1.213 2.714 2.107.657.889.981 1.906.975 3.053.013 1.14-.378 2.075-1.174 2.804-.788.73-1.789 1.16-3.002 1.293v.159c1.644.179 2.88.683 3.708 1.511.829.822 1.237 1.856 1.223 3.102.007 1.194-.351 2.25-1.073 3.172-.716.922-1.714 1.644-2.993 2.168-1.273.524-2.741.785-4.405.785Z"
-              fill={paint}
-            />
-            <rect
-              x="163"
-              y="1"
-              width="48"
-              height="48"
-              rx="9"
-              stroke={paint}
-              stroke-width="2"
-            />
-            <defs>
-              <clipPath id="a">
-                <path fill={paint} d="M0 9.771h150v30.457H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-          <div tw="flex flex-col flex-1 py-10">
+          <div
+            tw="text-5xl"
+            style={{
+              fontFamily: "Cal Sans",
+              fontWeight: "normal",
+              position: "relative",
+              background: "linear-gradient(90deg, #6366f1, #a855f7 80%)",
+              backgroundClip: 'text',
+              color: 'transparent'
+            }}
+          >
+            SaaS Starter
+          </div>
+
+          <div tw="flex flex-col flex-1 py-16">
+            {/* Type : Blog or Doc */}
             <div
               tw="flex text-xl uppercase font-bold tracking-tight"
               style={{ fontFamily: "Inter", fontWeight: "normal" }}
             >
               {values.type}
             </div>
+            {/* Title */}
             <div
-              tw="flex leading-[1.1] text-[80px] font-bold"
+              tw="flex leading-[1.15] text-[80px] font-bold"
               style={{
                 fontFamily: "Cal Sans",
                 fontWeight: "bold",
@@ -89,13 +79,33 @@ export async function GET(req: Request) {
               {heading}
             </div>
           </div>
+
           <div tw="flex items-center w-full justify-between">
             <div
-              tw="flex text-xl"
+              tw="flex items-center text-xl"
               style={{ fontFamily: "Inter", fontWeight: "normal" }}
             >
-              tx.shadcn.com
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                alt="avatar"
+                width="65"
+                src={`https://github.com/${githubName}.png`}
+                style={{
+                  borderRadius: 128,
+                }}
+              />
+
+              <div tw="flex flex-col" style={{ marginLeft: "15px" }}>
+                <div
+                  tw="text-[22px]"
+                  style={{ fontFamily: "Cal Sans" }}
+                >
+                  {githubName}
+                </div>
+                <div>Open Source Designer</div>
+              </div>
             </div>
+
             <div
               tw="flex items-center text-xl"
               style={{ fontFamily: "Inter", fontWeight: "normal" }}
@@ -116,7 +126,7 @@ export async function GET(req: Request) {
                   stroke-linejoin="round"
                 />
               </svg>
-              <div tw="flex ml-2">github.com/shadcn/taxonomy</div>
+              <div tw="flex ml-2">github.com/mickasmt/next-saas-stripe-starter</div>
             </div>
           </div>
         </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,9 +22,13 @@ export const metadata = {
   keywords: [
     "Next.js",
     "React",
-    "Tailwind CSS",
-    "Server Components",
-    "Radix UI",
+    "Prisma",
+    "PlanetScale",
+    "Auth.js",
+    "shadcn ui",
+    "Resend",
+    "React Email",
+    "Stripe"
   ],
   authors: [
     {
@@ -45,8 +49,8 @@ export const metadata = {
     card: "summary_large_image",
     title: siteConfig.name,
     description: siteConfig.description,
-    images: [`${siteConfig.url}/og.jpg`],
-    creator: "@mickasmt",
+    images: [siteConfig.ogImage],
+    creator: "@miickasmt",
   },
   icons: {
     icon: "/favicon.ico",

diff --git a/app/opengraph-image.jpg b/app/opengraph-image.jpg
diff --git a/config/site.ts b/config/site.ts
@@ -6,7 +6,7 @@ const site_url = env.NEXT_PUBLIC_APP_URL;
 export const siteConfig: SiteConfig = {
   name: "SaaS Starter",
   description:
-    "An open source application built using the new router, server components and everything new in Next.js 14.",
+    "Get your project off to an explosive start with SaaS Starter! Harness the power of Next.js 14, Prisma, Planetscale, Auth.js, Resend, React Email, Shadcn/ui and Stripe to build your next big thing.",
   url: site_url,
   ogImage: `${site_url}/og.jpg`,
   links: {

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/og.jpg b/public/og.jpg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,6 +1,6 @@
 {
-  "name": "Taxonomy",
-  "short_name": "Taxonomy",
+  "name": "SaaS Starter",
+  "short_name": "SaaS Starter",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",