necessary changes

2024-09-03 00:37:40 +05:30
parent 71f3146cf7 386c04bf47
commit 72292d7501
23 changed files with 7311 additions and 214 deletions
--- a/src/components/branding-assets.tsx
+++ b/src/components/branding-assets.tsx
@@ -16,7 +16,7 @@ export function BrandingAssets() {
        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 mt-10 w-full">
          {LOGO_COLORS.map((color) => (
            <div key={color} className="flex flex-col items-center">
-              <img src={`/logos/zen-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
+              <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
              <div className="flex items-center my-2">
                <a
                  href={`/logos/zen-${color}.svg`}
@@ -38,7 +38,7 @@ export function BrandingAssets() {
        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 mt-10 w-full">
          {LOGO_COLORS.map((color) => (
            <div key={color} className="flex flex-col items-center">
-              <img src={`/logos/zen-alpha-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
+              <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-alpha-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
              <div className="flex items-center my-2">
                <a
                  href={`/logos/zen-alpha-${color}.svg`}
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { addDownload } from "@/lib/db";
 import { useState, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
@@ -158,7 +157,6 @@ export default function DownloadPage() {
      window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
    }
    setHasDownloaded(true);
-    addDownload(releaseTarget);
    throwConfetti();
  };

@@ -221,16 +219,16 @@ export default function DownloadPage() {
                web with Zen!
              </p>
              <div className="flex font-bold mt-5 items-center justify-between mx-auto">
-                <Link href="https://github.com/zen-browser">Source Code</Link>
-                <Link
+                <a href="https://github.com/zen-browser">Source Code</a>
+                <a
                  className="ml-5"
                  href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
                >
                  Donate
-                </Link>
-                <Link className="ml-5" href="/release-notes/latest">
+                </a>
+                <a className="ml-5" href="/release-notes/latest">
                  Release Notes
-                </Link>
+                </a>
              </div>
              {selectedPlatform === "MacOS" && (
                <div className="mt-12 flex flex-col items-start border justify-between rounded-md bg-background p-5">
@@ -570,13 +568,13 @@ export default function DownloadPage() {
                <InfoCircledIcon className="size-4 mr-2" />
                <p className="text-muted-foreground">
                  Confused about which build to choose?{" "}
-                  <Link
+                  <a
                    href="https://docs.zen-browser.app/guides/generic-optimized"
                    target="_blank"
                    className="text-blue-400"
                  >
                    System requirements
-                  </Link>
+                  </a>
                  .
                </p>
              </div>
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -150,11 +150,11 @@ export default function Features() {
                  </a>
                </p>
              </div>
-              <Link href="/download">
+              <a href="/download">
                <Button className="mt-4 rounded-full p-5 ml-auto">
                  Download Zen now!
                </Button>
-              </Link>
+              </a>
            </div>
            <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
              {COLORS.map((color) => (
@@ -190,14 +190,14 @@ export default function Features() {
                  Killer feature
                </div>
              </div>
-              <Link href="/download">
+              <a href="/download">
                <Button className="mt-4 rounded-full p-5 ml-4">
                  Download Zen now!
                </Button>
-              </Link>
+              </a>
            </div>
            <img
-              src="/compact-mode.png"
+              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png"
              className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600"
            />
          </div>
@@ -207,7 +207,7 @@ export default function Features() {
            <div className="font-bold text-md">
              What makes Zen Browser different?
            </div>
-            <img src="/favicon.ico" className="ml-auto w-7 h-7" />
+            <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/favicon.ico" className="ml-auto w-7 h-7" />
          </div>
          <div className="h-full w-full flex items-center justify-center">
            <Table className="w-full">
@@ -220,7 +220,7 @@ export default function Features() {
                    <span className="">How Zen compares to other browsers</span>
                  </TableHead>
                  <TableHead className="py-2 font-bold text-center">
-                    <Image
+                    <img
                      height={32}
                      width={32}
                      src="/favicon.ico"
@@ -230,20 +230,20 @@ export default function Features() {
                    Zen
                  </TableHead>
                  <TableHead className="py-2 pl-4 lg:pr-0 pr-2 font-bold text-center opacity-60">
-                    <Image
+                    <img
                      height={32}
                      width={32}
-                      src="/floorp.png"
+                      src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/floorp.png"
                      className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7"
                      alt="floorp"
                    />
                    Floorp
                  </TableHead>
                  <TableHead className="py-2 pl-0 font-bold text-center opacity-60">
-                    <Image
+                    <img
                      height={32}
                      width={32}
-                      src="/librewolf.png"
+                      src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/librewolf.png"
                      className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7"
                      alt="librewolf"
                    />
@@ -382,21 +382,21 @@ export default function Features() {
          <div className="relative p-16 border-r-2 flex flex-col items-center justify-center row-span-2 col-span-2">
            <div className="relative w-full h-full flex items-center justify-center">
              <img
-                src="/split-view.png"
+                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/split-view.png"
                className={ny(
                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                  feature === 0 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
                )}
              />
              <img
-                src="/workspaces.png"
+                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/workspaces.png"
                className={ny(
                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                  feature === 1 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
                )}
              />
              <img
-                src="/sidebar.png"
+                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/sidebar.png"
                className={ny(
                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                  feature === 2 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -6,13 +6,13 @@ export default function Footer() {
  return (
    <div className="font-medium flex-col md:flex-row px-10 md:px-0 border-t w-full border-grey py-10 mt-10 flex justify-center align-center">
      Zen Browser © {new Date().getFullYear()} - Made with ❤️ by the Zen team.
-      <Link
+      <a
        href={"https://github.com/zen-browser"}
        target="_blank"
        className="mt-5 md:mt-0 md:ml-2 font-bold"
      >
        Source Code
-      </Link>
+      </a>
    </div>
  );
 }
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -20,7 +20,7 @@ export default function Header() {
        id="hero"
        className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
      >
-        <Link href="/download">
+        <a href="/download">
          <AnimatedGradientText>
            🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "}
            <span
@@ -32,7 +32,7 @@ export default function Header() {
            </span>
            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
          </AnimatedGradientText>
-        </Link>
+        </a>
        <h1 className="animate-fade-in -translate-y-4 text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-8xl dark:from-white dark:to-white/40">
          Zen is the best way
          <br className="hidden md:block" /> to browse the web.
@@ -42,14 +42,14 @@ export default function Header() {
          <br className="hidden md:block" /> We care about your experience, not
          your data.
        </p>
-        <Link href="/download">
+        <a href="/download">
        <Button
          className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
        >
          <span>Download Zen Now </span>
          <ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
        </Button>
-        </Link>
+        </a>
        <div
          ref={ref}
          className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"
@@ -67,17 +67,17 @@ export default function Header() {
              colorTo="var(--color-two)"
            />

-            <Image
+            <img
              width={1500}
              height={700}
-              src="/browser-dark.png"
+              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
              alt="browser Image"
              className="relative hidden rounded-[inherit] border object-contain dark:block"
            />
-            <Image
+            <img
              width={1500}
              height={700}
-              src="/browser-light.png"
+              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"
              alt="browser Image"
              className="relative block rounded-[inherit]  border object-contain dark:hidden"
            />
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -14,7 +14,7 @@ export default function Logo({ withText, ...props }: any) {
  }, []);
  return (
    <div className="flex items-center m-0" {...props}>
-      <Image src={`/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
+      <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
      {withText && <span className="text-2xl font-bold ml-2">zen</span>}
    </div>
  );
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -94,8 +94,8 @@ function MobileLink({
 }: MobileLinkProps) {
   const router = useRouter()
   return (
-      <Link
-         href={href}
+      <a
+         href={href.toString()}
         onClick={() => {
            router.push(href.toString())
            onOpenChange?.(false)
@@ -104,6 +104,6 @@ function MobileLink({
         {...props}
      >
         {children}
-      </Link>
+      </a>
   )
 }
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -64,7 +64,7 @@ export function Navigation() {
              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                <li className="row-span-3">
                  <NavigationMenuLink asChild>
-                    <Link
+                    <a
                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                      href="/"
                    >
@@ -76,7 +76,7 @@ export function Navigation() {
                        Firefox based browser with a focus on privacy and
                        customization.
                      </p>
-                    </Link>
+                    </a>
                  </NavigationMenuLink>
                </li>
                <ListItem href="/download" title="Download">
--- a/src/components/release-note.tsx
+++ b/src/components/release-note.tsx
@@ -15,12 +15,12 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
        </p>
        <p className="text-md mt-4 text-muted-foreground">
          If you encounter any issues, please report them on{" "}
-          <Link
+          <a
            href="https://github.com/zen-browser/desktop/issues/"
            className="text-underline text-blue-500"
          >
            the issues page
-          </Link>
+          </a>
          . Thanks everyone for your feedback! ❤️
        </p>
        {data.extra && (
@@ -81,13 +81,13 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
                <li key={index} className="mt-1 text-muted-foreground">
                  {fix.description}
                  {fix.issue && (
-                    <Link
+                    <a
                      href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
                      target="_blank"
                      className="ml-1 text-blue-500"
                    >
                      issue #{fix.issue}
-                    </Link>
+                    </a>
                  )}
                </li>
              ))}
@@ -96,9 +96,9 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
        )}
      </div>
      <div className="flex flex-wrap items-center justify-center">
-        <Link href="/download">
+        <a href="/download">
          <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
-        </Link>
+        </a>
      </div>
    </div>
  );
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -20,7 +20,7 @@ export default function ThemeCard({
      if (event.target instanceof HTMLAnchorElement) return;
      window.open(`/themes/${theme.id}`, "_self");
    }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
-      <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
+      <img src={theme.image} alt={theme.name} width={500} height={500}
      className="w-full h-32 object-cover rounded-lg border shadow" />
      <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
      <div className="flex mt-2">
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -1,4 +1,4 @@
-"use client";
+
 import Image from "next/image";
 import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
@@ -6,11 +6,8 @@ import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
 import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
-import { useParams } from "next/navigation";

-export default async function ThemePage() {
-  const params = useParams<{ theme: string }>();
-  const { theme: themeID } = params;
+export default async function ThemePage({ themeID }: { themeID: string }) {

  const theme = await getThemeFromId(themeID);
  if (!theme) {
@@ -22,11 +19,11 @@ export default async function ThemePage() {
  return (
    <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
      <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
-        <div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
+        <a className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" href="/themes">
          <ChevronLeft className="w-4 h-4 mr-1" />
          <h3 className="text-md">Go back</h3>
-        </div>
-        <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
+        </a>
+        <img src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
        <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
        <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
        {theme.homepage && (