aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorMohamedBassem <me@mbassem.com>2025-04-06 22:57:07 +0100
committerMohamedBassem <me@mbassem.com>2025-04-06 22:57:07 +0100
commit3f2d3560dc04dbee23237d896c1325389035c738 (patch)
treee683bade56297162394075d7ad306c4578ea3c99 /apps
parent4e32b409a925136ed575b32abe3c8d6028dbc1fb (diff)
downloadkarakeep-3f2d3560dc04dbee23237d896c1325389035c738.tar.zst
refactor: Migrate the landing page from nextjs to vite
Diffstat (limited to 'apps')
-rw-r--r--apps/landing/app/layout.tsx27
-rw-r--r--apps/landing/components.json2
-rw-r--r--apps/landing/components/HoarderLogo.tsx9
-rw-r--r--apps/landing/index.html40
-rw-r--r--apps/landing/next-env.d.ts5
-rw-r--r--apps/landing/next.config.mjs15
-rw-r--r--apps/landing/package.json24
-rw-r--r--apps/landing/public/icons/apple-icon.png (renamed from apps/landing/app/apple-icon.png)bin3476 -> 3476 bytes
-rw-r--r--apps/landing/public/icons/favicon.ico (renamed from apps/landing/app/favicon.ico)bin15086 -> 15086 bytes
-rw-r--r--apps/landing/public/icons/icon.png (renamed from apps/landing/app/icon.png)bin3476 -> 3476 bytes
-rw-r--r--apps/landing/public/opengraph-image.png (renamed from apps/landing/app/opengraph-image.png)bin3195946 -> 3195946 bytes
-rw-r--r--apps/landing/public/twitter-image.png (renamed from apps/landing/app/twitter-image.png)bin3195946 -> 3195946 bytes
-rw-r--r--apps/landing/src/App.tsx13
-rw-r--r--apps/landing/src/Homepage.tsx (renamed from apps/landing/app/page.tsx)83
-rw-r--r--apps/landing/src/Privacy.tsx (renamed from apps/landing/app/privacy/page.tsx)0
-rw-r--r--apps/landing/src/main.tsx9
-rw-r--r--apps/landing/tsconfig.json7
-rw-r--r--apps/landing/vite-env.d.ts2
-rw-r--r--apps/landing/vite.config.ts14
19 files changed, 129 insertions, 121 deletions
diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx
deleted file mode 100644
index e655a770..00000000
--- a/apps/landing/app/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-import "@hoarder/tailwind-config/globals.css";
-
-import React from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
- title: "Karakeep",
- metadataBase: new URL("https://karakeep.app"),
- description:
- "The Bookmark Everything app. Hoard links, notes, and images and they will get automatically tagged AI.",
-};
-
-export default async function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return (
- <html lang="en">
- <body className={inter.className}>{children}</body>
- </html>
- );
-}
diff --git a/apps/landing/components.json b/apps/landing/components.json
index fa674c93..698ac253 100644
--- a/apps/landing/components.json
+++ b/apps/landing/components.json
@@ -5,7 +5,7 @@
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
- "css": "app/globals.css",
+ "css": "src/styles.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
diff --git a/apps/landing/components/HoarderLogo.tsx b/apps/landing/components/HoarderLogo.tsx
deleted file mode 100644
index 94c201e9..00000000
--- a/apps/landing/components/HoarderLogo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import KarakeepFull from "@/public/icons/karakeep-full.svg";
-
-export default function HoarderLogo({ height }: { height: number }) {
- return (
- <span className="flex items-center">
- <KarakeepFull height={height} className={`fill-foreground`} />
- </span>
- );
-}
diff --git a/apps/landing/index.html b/apps/landing/index.html
new file mode 100644
index 00000000..266bc2f6
--- /dev/null
+++ b/apps/landing/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta
+ name="description"
+ content="The Bookmark Everything app. Hoard links, notes, and images and they will get automatically tagged AI."
+ />
+ <meta property="og:title" content="Karakeep" />
+ <meta
+ property="og:description"
+ content="The Bookmark Everything app. Hoard links, notes, and images and they will get automatically tagged AI."
+ />
+ <meta property="og:image:type" content="image/png" />
+ <meta property="og:image:width" content="3624" />
+ <meta property="og:image:height" content="1956" />
+ <meta
+ property="og:image"
+ content="https://karakeep.app/opengraph-image.png"
+ />
+ <meta name="twitter:card" content="summary_large_image" />
+ <meta name="twitter:title" content="Karakeep" />
+ <meta
+ name="twitter:description"
+ content="The Bookmark Everything app. Hoard links, notes, and images and they will get automatically tagged AI."
+ />
+ <meta name="twitter:image:type" content="image/png" />
+ <meta name="twitter:image:width" content="3624" />
+ <meta name="twitter:image:height" content="1956" />
+ <meta
+ name="twitter:image"
+ content="https://karakeep.app/twitter-image.png"
+ />
+ <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
+ <link href="/src/styles.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/apps/landing/next-env.d.ts b/apps/landing/next-env.d.ts
deleted file mode 100644
index 40c3d680..00000000
--- a/apps/landing/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/landing/next.config.mjs b/apps/landing/next.config.mjs
deleted file mode 100644
index c9153017..00000000
--- a/apps/landing/next.config.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
- webpack: (config) => {
- config.module.rules.push({
- test: /\.svg$/,
- use: ["@svgr/webpack"],
- });
- return config;
- },
- /** We already do linting and typechecking as separate tasks in CI */
- eslint: { ignoreDuringBuilds: true },
- typescript: { ignoreBuildErrors: true },
-};
-
-export default nextConfig;
diff --git a/apps/landing/package.json b/apps/landing/package.json
index b6eff4bc..73971f0e 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -5,15 +5,14 @@
"private": true,
"type": "module",
"scripts": {
- "dev": "next dev",
- "clean": "git clean -xdf .next .turbo node_modules",
- "build": "next build",
- "start": "next start",
- "lint": "next lint",
- "typecheck": "tsc --noEmit",
- "format": "prettier --check . --ignore-path ../../.gitignore",
- "format:fix": "prettier --write . --ignore-path ../../.gitignore",
- "lint:fix": "next lint --fix"
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview",
+ "lint": "eslint .",
+ "lint:fix": "eslint . --fix",
+ "format": "prettier . --ignore-path ../../.prettierignore",
+ "format:fix": "prettier . --ignore-path ../../.prettierignore --write",
+ "typecheck": "tsc --noEmit"
},
"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
@@ -21,7 +20,6 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"lucide-react": "^0.330.0",
- "next": "14.2.25",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-select": "^5.8.0",
@@ -37,15 +35,17 @@
"@tailwindcss/typography": "^0.5.10",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
+ "@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
- "tailwindcss": "^3.4.1"
+ "tailwindcss": "^3.4.1",
+ "vite": "^5.1.0",
+ "vite-plugin-svgr": "^4.3.0"
},
"eslintConfig": {
"root": true,
"extends": [
"@hoarder/eslint-config/base",
- "@hoarder/eslint-config/nextjs",
"@hoarder/eslint-config/react"
]
},
diff --git a/apps/landing/app/apple-icon.png b/apps/landing/public/icons/apple-icon.png
index 8b600d2f..8b600d2f 100644
--- a/apps/landing/app/apple-icon.png
+++ b/apps/landing/public/icons/apple-icon.png
Binary files differ
diff --git a/apps/landing/app/favicon.ico b/apps/landing/public/icons/favicon.ico
index d940a939..d940a939 100644
--- a/apps/landing/app/favicon.ico
+++ b/apps/landing/public/icons/favicon.ico
Binary files differ
diff --git a/apps/landing/app/icon.png b/apps/landing/public/icons/icon.png
index 3dcfd34c..3dcfd34c 100644
--- a/apps/landing/app/icon.png
+++ b/apps/landing/public/icons/icon.png
Binary files differ
diff --git a/apps/landing/app/opengraph-image.png b/apps/landing/public/opengraph-image.png
index b0dce115..b0dce115 100644
--- a/apps/landing/app/opengraph-image.png
+++ b/apps/landing/public/opengraph-image.png
Binary files differ
diff --git a/apps/landing/app/twitter-image.png b/apps/landing/public/twitter-image.png
index b0dce115..b0dce115 100644
--- a/apps/landing/app/twitter-image.png
+++ b/apps/landing/public/twitter-image.png
Binary files differ
diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
new file mode 100644
index 00000000..06a1e5b8
--- /dev/null
+++ b/apps/landing/src/App.tsx
@@ -0,0 +1,13 @@
+import Homepage from "@/src/Homepage";
+import Privacy from "@/src/Privacy";
+
+import "@hoarder/tailwind-config/globals.css";
+
+export default function App() {
+ // Poor man router
+ if (window.location.pathname === "/privacy") {
+ return <Privacy />;
+ }
+
+ return <Homepage />;
+}
diff --git a/apps/landing/app/page.tsx b/apps/landing/src/Homepage.tsx
index 88fc1b03..85290a26 100644
--- a/apps/landing/app/page.tsx
+++ b/apps/landing/src/Homepage.tsx
@@ -1,13 +1,5 @@
-import Image from "next/image";
-import Link from "next/link";
-import HoarderLogo from "@/components/HoarderLogo";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
-import appStoreBadge from "@/public/app-store-badge.png";
-import chromeExtensionBadge from "@/public/chrome-extension-badge.png";
-import firefoxAddonBadge from "@/public/firefox-addon.png";
-import playStoreBadge from "@/public/google-play-badge.webp";
-import screenshot from "@/public/hero.webp";
import {
ArrowDownNarrowWide,
Bookmark,
@@ -20,7 +12,14 @@ import {
WalletCards,
} from "lucide-react";
-const GITHUB_LINK = "https://github.com/hoarder-app/hoarder";
+import appStoreBadge from "/app-store-badge.png?url";
+import chromeExtensionBadge from "/chrome-extension-badge.png?url";
+import firefoxAddonBadge from "/firefox-addon.png?url";
+import playStoreBadge from "/google-play-badge.webp?url";
+import screenshot from "/hero.webp?url";
+import Logo from "/icons/karakeep-full.svg?url";
+
+const GITHUB_LINK = "https://github.com/karakeep-app/karakeep";
const DOCS_LINK = "https://docs.karakeep.app";
const DEMO_LINK = "https://try.karakeep.app";
@@ -88,37 +87,32 @@ const featuresList = [
{
icon: SunMoon,
title: "Dark Mode",
- description: "Hoarder supports dark mode for better reading experience.",
+ description: "Karakeep supports dark mode for better reading experience.",
},
];
function NavBar() {
return (
<div className="flex justify-between px-3 py-4">
- <HoarderLogo height={38} />
+ <img src={Logo} alt="logo" className="w-36" />
<div className="hidden items-center gap-6 sm:flex">
- <Link
- href={DOCS_LINK}
- className="flex justify-center gap-2 text-center"
- >
+ <a href={DOCS_LINK} className="flex justify-center gap-2 text-center">
Docs
- </Link>
- <Link
- href={GITHUB_LINK}
- className="flex justify-center gap-2 text-center"
- >
+ </a>
+ <a href={GITHUB_LINK} className="flex justify-center gap-2 text-center">
GitHub
- </Link>
- <Link
+ </a>
+ <a
href={DEMO_LINK}
target="_blank"
className={cn(
"text flex h-full w-28 gap-2",
buttonVariants({ variant: "default" }),
)}
+ rel="noreferrer"
>
Try Demo
- </Link>
+ </a>
</div>
</div>
);
@@ -137,33 +131,35 @@ function Hero() {
</h1>
<div className="mx-auto w-full gap-2 text-base md:w-3/6">
<p className="text-center text-gray-600">
- Quickly save links, notes, and images and hoarder will automatically
- tag them for you using AI for faster retrieval. Built for the data
- hoarders out there!
+ Quickly save links, notes, and images and karakeep will
+ automatically tag them for you using AI for faster retrieval. Built
+ for the data hoarders out there!
</p>
</div>
</div>
<div className="flex h-10 gap-4">
- <Link
+ <a
href={DEMO_LINK}
target="_blank"
className={cn(
"text flex w-28 gap-2",
buttonVariants({ variant: "default", size: "lg" }),
)}
+ rel="noreferrer"
>
Try Demo
- </Link>
- <Link
+ </a>
+ <a
href={GITHUB_LINK}
target="_blank"
className={cn(
"flex gap-2",
buttonVariants({ variant: "outline", size: "lg" }),
)}
+ rel="noreferrer"
>
<Github /> GitHub
- </Link>
+ </a>
</div>
</div>
);
@@ -181,17 +177,18 @@ function Platforms() {
<div className="mt-6 flex flex-wrap items-center justify-center gap-6 px-6">
{platforms.map((platform) => (
<div key={platform.name}>
- <Link
+ <a
href={platform.url}
target="_blank"
className="flex items-center justify-center gap-2"
+ rel="noreferrer"
>
- <Image
+ <img
className="h-12 w-auto rounded-md"
alt={platform.name}
src={platform.badge}
/>
- </Link>
+ </a>
</div>
))}
</div>
@@ -222,20 +219,14 @@ function Features() {
function Footer() {
return (
<div className="flex items-center justify-between bg-black px-10 py-6 text-sm text-gray-300">
- <div>© 2024 karakeep.app</div>
+ <div>© 2024-2025 karakeep.app</div>
<div className="flex items-center gap-6">
- <Link
- href={DOCS_LINK}
- className="flex justify-center gap-2 text-center"
- >
+ <a href={DOCS_LINK} className="flex justify-center gap-2 text-center">
Docs
- </Link>
- <Link
- href={GITHUB_LINK}
- className="flex justify-center gap-2 text-center"
- >
+ </a>
+ <a href={GITHUB_LINK} className="flex justify-center gap-2 text-center">
GitHub
- </Link>
+ </a>
</div>
</div>
);
@@ -244,12 +235,12 @@ function Footer() {
function Screenshots() {
return (
<div className="mx-auto mt-6 w-10/12">
- <Image alt="screenshot" src={screenshot} />
+ <img alt="screenshot" src={screenshot} />
</div>
);
}
-export default function LandingPage() {
+export default function Homepage() {
return (
<div className="flex min-h-screen flex-col">
<div className="container flex flex-col pb-10">
diff --git a/apps/landing/app/privacy/page.tsx b/apps/landing/src/Privacy.tsx
index 366a0395..366a0395 100644
--- a/apps/landing/app/privacy/page.tsx
+++ b/apps/landing/src/Privacy.tsx
diff --git a/apps/landing/src/main.tsx b/apps/landing/src/main.tsx
new file mode 100644
index 00000000..ed52e896
--- /dev/null
+++ b/apps/landing/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import App from "@/src/App";
+import { createRoot } from "react-dom/client";
+
+createRoot(document.getElementById("root")!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+);
diff --git a/apps/landing/tsconfig.json b/apps/landing/tsconfig.json
index db90cf17..71752aad 100644
--- a/apps/landing/tsconfig.json
+++ b/apps/landing/tsconfig.json
@@ -3,15 +3,10 @@
"extends": "@hoarder/tsconfig/base.json",
"compilerOptions": {
"baseUrl": ".",
- "plugins": [
- {
- "name": "next"
- }
- ],
"paths": {
"@/*": ["./*"]
}
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vite.config.ts"],
"exclude": ["node_modules"]
}
diff --git a/apps/landing/vite-env.d.ts b/apps/landing/vite-env.d.ts
new file mode 100644
index 00000000..ee9857a6
--- /dev/null
+++ b/apps/landing/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite/client" />
diff --git a/apps/landing/vite.config.ts b/apps/landing/vite.config.ts
new file mode 100644
index 00000000..4f4273b6
--- /dev/null
+++ b/apps/landing/vite.config.ts
@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from "node:url";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import svgr from "vite-plugin-svgr";
+
+// https://vite.dev/config/
+export default defineConfig({
+ resolve: {
+ alias: {
+ "@/": fileURLToPath(new URL("./", import.meta.url)),
+ },
+ },
+ plugins: [react(), svgr()],
+});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 11:20:56 +0000