Merge pull request #1 from shield-auth/develop

vercel deploy pipeline, imgae and font optimization added

Author: BadgerBloke

.github/workflows/cd.yml

@@ -0,0 +1,20 @@
+# vercel-deploy.yml
+name: Deploy to vercel on merge
+
+on:
+  push:
+    branches:
+      - trunk
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.ACCESS_TOKEN }}
+          vercel-args: "--prod"
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
+          vercel-project-id: ${{ secrets.VERCEL_PROJ_ID}}

.github/workflows/vercel-deploy.yml

@@ -0,0 +1,26 @@
+# vercel-pull-request.yml
+name: Create vercel preview URL on pull request
+on:
+  pull_request:
+    branches:
+      - trunk
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v20
+        id: vercel-deploy
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.ACCESS_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJ_ID }}
+      - name: preview-url
+        run: |
+          echo ${{ steps.vercel-deploy.outputs.preview-url }}

.github/workflows/vercel-pull-request.yml

@@ -2,7 +2,6 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  output: "export",
 };
 
 export default nextConfig;

bun.lockb

@@ -13,22 +13,23 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.453.0",
-    "next": "15.0.1",
+    "lucide-react": "^0.454.0",
+    "next": "15.0.2",
     "next-themes": "^0.3.0",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^15.0.2",
     "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^20",
+    "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "15.0.1",
+    "eslint-config-next": "15.0.2",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }

next.config.ts

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package.json

@@ -1,19 +1,15 @@
 import "./globals.css";
 
 import type { Metadata, Viewport } from "next";
-import localFont from "next/font/local";
+import { Roboto_Slab } from "next/font/google";
 import { ThemeProvider } from "~/components/providers/theme-provider";
 import { CLIENT } from "~/lib/constants/config";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const robotoSlab = Roboto_Slab({
+  weight: ["100", "300", "400", "500", "700", "900"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-roboto-slab",
 });
 
 export const viewport: Viewport = {
@@ -24,6 +20,7 @@ export const viewport: Viewport = {
 };
 
 export const metadata: Metadata = {
+  metadataBase: new URL(CLIENT.host),
   title: CLIENT.title,
   description: CLIENT.description,
   robots: "index, follow",
@@ -33,7 +30,6 @@ export const metadata: Metadata = {
   openGraph: {
     images: `${CLIENT.host}/og-image.png`,
     type: "website",
-    url: "https://shield.rs",
     locale: "en_US",
     siteName: CLIENT.name,
     title: CLIENT.title,
@@ -60,7 +56,7 @@ export default function RootLayout({
         <meta charSet="utf-8" />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} flex flex-col min-h-svh antialiased bg-background-base overflow-x-hidden`}
+        className={`${robotoSlab.variable} flex flex-col min-h-svh antialiased bg-background-base overflow-x-hidden`}
       >
         <ThemeProvider
           attribute="class"

src/app/globals.css

@@ -18,7 +18,7 @@ export default function Home() {
   return (
     <div className="relative">
       <div className="absolute -z-10 aspect-auto w-full flex justify-center xl:-top-40 antialiased">
-        <Image src={ellipse} alt="ellipse" className="w-full" />
+        <Image priority src={ellipse} alt="ellipse" className="w-full" />
       </div>
       <main className="container text-center">
         <section className="flex flex-col w-full items-center justify-center py-16 lg:py-36 gap-10">

src/app/layout.tsx

@@ -2,7 +2,14 @@ import Image from "next/image";
 import logo from "~/components/assets/logo.svg";
 
 const Logo = () => {
-  return <Image src={logo} alt="shield logo" className="w-full aspect-auto" />;
+  return (
+    <Image
+      priority
+      src={logo}
+      alt="shield logo"
+      className="w-full aspect-auto"
+    />
+  );
 };
 
 export default Logo;

src/app/page.tsx

@@ -18,7 +18,7 @@ const config: Config = {
     },
     extend: {
       fontFamily: {
-        "roboto-slab": ["Roboto Slab", "serif"],
+        "roboto-slab": "var(--font-roboto-slab)",
       },
       minHeight: {
         screenLessNav: "calc(100dvh - 60px)",