tried to fix white screen

Author: Strahinja2112

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/lib/config/index.ts

@@ -1,3 +1,5 @@
 export const config = {
   title: "Electron Vite",
+  github: "https://github.com/Strahinja2112/electron-vite",
+  portfolio: "https://strahinja.vercel.app",
 };

src/main.ts

@@ -2,6 +2,7 @@ import { app, BrowserWindow } from "electron";
 import registerListeners from "./helpers/ipc/listeners-register";
 // "electron-squirrel-startup" seems broken when packaging with vite
 //import started from "electron-squirrel-startup";
+import { shell } from "electron";
 import path from "path";
 
 const inDevelopment = process.env.NODE_ENV === "development";
@@ -18,19 +19,31 @@ function createWindow() {
       contextIsolation: true,
       nodeIntegration: true,
       nodeIntegrationInSubFrames: false,
-
       preload: preload,
     },
     titleBarStyle: "hidden",
     alwaysOnTop: inDevelopment,
+    backgroundColor: "#09090b",
+  });
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url);
+    return {
+      action: "deny",
+    };
   });
+
   registerListeners(mainWindow);
 
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {
     mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
   }
+
+  // mainWindow.on("ready-to-show", () => {
+  //   mainWindow.show();
+  // });
 }
 
 app.whenReady().then(createWindow);

src/pages/home.tsx

@@ -1,19 +1,47 @@
-import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { config } from "@/lib/config";
+import { ChevronRight, Code2, Github } from "lucide-react";
 import React from "react";
 
 export default function HomePage() {
   return (
     <div className="flex flex-col items-center justify-between bg-background text-foreground">
       <main className="flex w-full flex-1 flex-col items-center justify-center px-8">
+        <Badge className="mb-8" variant="outline">
+          <a href={config.portfolio} target="_blank" className="flex items-center gap-2 pl-2">
+            <span>See developer portfolio</span>
+            <ChevronRight className="size-5" />
+          </a>
+        </Badge>
         <h2 className="text-5xl font-semibold">Welcome to the Home Page</h2>
         <p className="mt-4 text-center text-muted-foreground">
           This is a template for a desktop application built with Electron, Vite, ShadCN, and
           Tailwind CSS.
         </p>
         <div className="mt-8 flex space-x-4">
-          <Button>Get Started</Button>
-          <Button variant="secondary">Learn More</Button>
+          <a
+            href={config.github}
+            target="_blank"
+            className={buttonVariants({
+              className: "space-x-2",
+              variant: "secondary",
+            })}
+          >
+            <Github />
+            <span>See Code</span>
+          </a>
+          <a
+            href={`${config.portfolio}/project/electron-vite`}
+            target="_blank"
+            className={buttonVariants({
+              className: "space-x-2",
+              variant: "secondary",
+            })}
+          >
+            <Code2 />
+            <span>Learn More</span>
+          </a>
         </div>
       </main>
     </div>

src/styles/global.css

@@ -135,7 +135,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 240 10% 4%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
@@ -159,6 +159,12 @@
   }
 }
 
+#app,
+body,
+html {
+  background-color: hsl(var(--background));
+}
+
 @layer base {
   /* Custom Scrollbar Styles */
   ::-webkit-scrollbar {