Merge branch 'feature/landing_page' into develop

.vscode/extensions.json

@@ -9,6 +9,8 @@
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "svelte.svelte-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }

apps/website/.gitignore

@@ -0,0 +1,28 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Paraglide
+src/lib/paraglide
+
+project.inlang/cache

apps/website/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

apps/website/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

apps/website/eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+		// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+		"no-undef": 'off' }
+	},
+	{
+		files: [
+			'**/*.svelte',
+			'**/*.svelte.ts',
+			'**/*.svelte.js'
+		],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

apps/website/messages/en.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}

apps/website/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "website",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"mdsvex": "^0.12.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6"
+	},
+	"dependencies": {
+		"@inlang/paraglide-js": "^2.0.0"
+	}
+}

apps/website/project.inlang/project_id

@@ -0,0 +1 @@
+dv1iXGpHP2mMvuQQo4

apps/website/project.inlang/settings.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	},
+	"baseLocale": "en",
+	"locales": [
+		"en"
+	]
+}

apps/website/src/app.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';

apps/website/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

apps/website/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="%paraglide.lang%">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

apps/website/src/hooks.server.ts

@@ -0,0 +1,12 @@
+import type { Handle } from '@sveltejs/kit';
+import { paraglideMiddleware } from '$lib/paraglide/server';
+
+const handleParaglide: Handle = ({ event, resolve }) => paraglideMiddleware(event.request, ({ request, locale }) => {
+	event.request = request;
+
+	return resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('%paraglide.lang%', locale)
+	});
+});
+
+export const handle: Handle = handleParaglide;

apps/website/src/hooks.ts

@@ -0,0 +1,3 @@
+import { deLocalizeUrl } from '$lib/paraglide/runtime';
+
+export const reroute = (request) => deLocalizeUrl(request.url).pathname;

apps/website/src/lib/download-helper.ts

@@ -0,0 +1,174 @@
+import rootPackageJson from '../../../../package.json';
+
+export type App = "desktop" | "server";
+
+export type Architecture = 'x64' | 'arm64';
+
+export type Platform = 'macos' | 'windows' | 'linux';
+
+let version = rootPackageJson.version;
+
+export interface DownloadInfo {
+    recommended?: boolean;
+    name: string;
+    url?: string;
+}
+
+export interface DownloadMatrixEntry {
+    title: Record<Architecture, string> | string;
+    description: Record<Architecture, string> | string;
+    downloads: Record<string, DownloadInfo>;
+}
+
+type DownloadMatrix = Record<App, Record<Platform, DownloadMatrixEntry>>;
+
+// Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
+export const downloadMatrix: DownloadMatrix = {
+    desktop: {
+        windows: {
+            title: {
+                x64: "Windows 64-bit",
+                arm64: "Windows on ARM"
+            },
+            description: {
+                x64: "Compatible with Intel or AMD devices running Windows 10 and 11.",
+                arm64: "Compatible with ARM devices (e.g. with Qualcomm Snapdragon).",
+            },
+            downloads: {
+                exe: {
+                    recommended: true,
+                    name: "Download Installer (.exe)"
+                },
+                zip: {
+                    name: "Portable (.zip)"
+                }
+            }
+        },
+        linux: {
+            title: {
+                x64: "Linux 64-bit",
+                arm64: "Linux on ARM"
+            },
+            description: {
+                x64: "For most Linux distributions, compatible with x86_64 architecture.",
+                arm64: "For ARM-based Linux distributions, compatible with aarch64 architecture.",
+            },
+            downloads: {
+                deb: {
+                    recommended: true,
+                    name: "Download .deb"
+                },
+                rpm: {
+                    name: ".rpm"
+                },
+                flatpak: {
+                    name: ".flatpak"
+                },
+                zip: {
+                    name: "Portable (.zip)"
+                }
+            }
+        },
+        macos: {
+            title: {
+                x64: "macOS for Intel",
+                arm64: "macOS for Apple Silicon"
+            },
+            description: {
+                x64: "For Intel-based Macs running macOS Big Sur or later.",
+                arm64: "For Apple Silicon Macs such as those with M1 and M2 chips.",
+            },
+            downloads: {
+                dmg: {
+                    recommended: true,
+                    name: "Download Installer (.dmg)"
+                },
+                zip: {
+                    name: "Portable (.zip)"
+                }
+            }
+        }
+    },
+    server: {
+        linux: {
+            title: "Self-hosted (Linux)",
+            description: "Deploy Trilium Notes on your own server or VPS, compatible with most Linux distributions.",
+            downloads: {
+                docker: {
+                    recommended: true,
+                    name: "View on Docker Hub",
+                    url: "https://hub.docker.com/r/triliumnext/notes"
+                },
+                tarX64: {
+                    name: "x86 (.tar.xz)",
+                    url: `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-Server-v${version}-linux-x64.tar.xz`
+                },
+                tarArm64: {
+                    name: "ARM (.tar.xz)",
+                    url: `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-Server-v${version}-linux-arm64.tar.xz`
+                },
+            }
+        },
+        pikapod: {
+            title: "Paid hosting",
+            description: "Trilium Notes hosted on PikaPods, a paid service for easy access and management.",
+            downloads: {
+                pikapod: {
+                    recommended: true,
+                    name: "Set up on PikaPods",
+                    url: "https://www.pikapods.com/pods?run=trilium-next"
+                },
+                triliumcc: {
+                    name: "Alternatively see trilium.cc",
+                    url: "https://trilium.cc/"
+                }
+            }
+        }
+    }
+};
+
+export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string {
+    if (app === "desktop") {
+        return `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-v${version}-${platform}-${architecture}.${format}`;
+    } else if (app === "server") {
+        return downloadMatrix.server[platform].downloads[format].url ?? "#";
+    } else {
+        return "#";
+    }
+}
+
+export function getArchitecture(): Architecture {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
+        return 'arm64';
+    }
+
+    return "x64";
+}
+
+function getPlatform(): Platform {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes('macintosh') || userAgent.includes('mac os x')) {
+        return "mac";
+    } else if (userAgent.includes('windows') || userAgent.includes('win32')) {
+        return "windows";
+    } else {
+        return "linux";
+    }
+}
+
+export function getRecommendedDownload() {
+    const architecture = getArchitecture();
+    const platform = getPlatform();
+
+    const downloadInfo = downloadMatrix.desktop[platform]?.downloads;
+    const recommendedDownload = Object.entries(downloadInfo || {}).find(d => d[1].recommended);
+    const format = recommendedDownload?.[0];
+    const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
+
+    return {
+        architecture,
+        platform,
+        url
+    }
+}

apps/website/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

apps/website/src/routes/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import '../app.css';
+    import Header from './header.svelte';
+	
+	let { children } = $props();
+</script>
+
+<Header />
+
+{@render children()}
+
+<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
+    &copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/>    &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
+</footer>

apps/website/src/routes/+page.svelte

@@ -0,0 +1,145 @@
+<script>
+    import DownloadNow from "./download-now.svelte";
+</script>
+
+<section class="relative overflow-hidden bg-gradient-to-br from-white to-violet-50">
+    <!-- Bokeh background circles -->
+    <div class="absolute inset-0 pointer-events-none z-0">
+        <div class="absolute w-72 h-72 bg-violet-300 opacity-30 rounded-full blur-3xl top-[-50px] left-[-80px]"></div>
+        <div class="absolute w-96 h-96 bg-pink-200 opacity-20 rounded-full blur-3xl bottom-[-100px] right-[-60px]"></div>
+        <div class="absolute w-64 h-64 bg-indigo-200 opacity-20 rounded-full blur-2xl top-[200px] left-[50%] transform -translate-x-1/2"></div>
+    </div>
+
+    <div class="relative z-10 container mx-auto pt-24 pb-24 px-4">
+        <div class="flex flex-col md:flex-row items-center md:justify-between gap-12">
+
+            <!-- Left: Text Content -->
+            <div class="md:w-1/3">
+                <h2 class="text-4xl font-bold mb-4 text-gray-900">Organize Your Thoughts.<br/> Build Your Knowledge.</h2>
+                <p class="text-lg mb-6 text-gray-700">
+                    Trilium Notes helps you build and organize complex personal knowledge bases effortlessly.  
+                    Its unique tree structure, rich editing tools, and powerful search features make managing your information intuitive and flexible.
+                </p>
+                <div class="flex items-center gap-6">
+                    <DownloadNow big />                    
+                    <a href="/download" class="font-medium text-violet-700 hover:underline">
+                        More platforms
+                    </a>
+                </div>
+            </div>
+
+            <!-- Right: Screenshot -->
+            <div class="md:w-2/3">
+                <img src="screenshots/desktop-win.png" alt="Screenshot of the app on desktop Windows" class="w-full rounded-xl shadow-lg">
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="mt-20 max-w-6xl mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-12">Beyond Text: Smarter Note Types</h2>
+
+    <div class="grid md:grid-cols-2 gap-10">
+        <!-- Canvas Notes -->
+        <div class="bg-white rounded-xl shadow overflow-hidden">
+            <img src="/note-types/canvas.png" alt="Canvas Note Screenshot" class="w-full h-56 object-cover object-top">
+            <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2">Canvas Notes</h3>
+                <p class="text-gray-600">Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning.</p>
+            </div>
+        </div>
+
+        <!-- Mermaid Diagrams -->
+        <div class="bg-white rounded-xl shadow overflow-hidden">
+            <img src="/note-types/mermaid.png" alt="Mermaid Diagram Screenshot" class="w-full h-56 object-cover object-top">
+            <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2">Mermaid Diagrams</h3>
+                <p class="text-gray-600">Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes.</p>
+            </div>
+        </div>
+
+        <!-- Geo Maps -->
+        <div class="bg-white rounded-xl shadow overflow-hidden">
+            <img src="/note-types/geo-map.png" alt="Geo Map Screenshot" class="w-full h-56 object-cover">
+            <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2">Geo Maps</h3>
+                <p class="text-gray-600">Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps.</p>
+            </div>
+        </div>
+
+        <!-- Mind Maps -->
+        <div class="bg-white rounded-xl shadow overflow-hidden">
+            <img src="/note-types/mind-map.png" alt="Mind Map Screenshot" class="w-full h-56 object-cover">
+            <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2">Mind Maps</h3>
+                <p class="text-gray-600">Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="mt-20 max-w-6xl mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2>
+
+    <div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700">
+        <!-- Organization & Navigation -->
+        <div>
+            <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3>
+            <ul class="list-disc list-inside space-y-3">
+                <li>Arbitrarily deep note tree with cloning support.</li>
+                <li>Fast navigation, full-text search, and note hoisting.</li>
+                <li>Note attributes for organization, querying, and scripting.</li>
+                <li>Seamless note versioning.</li>
+            </ul>
+        </div>
+
+        <!-- Editing & Content -->
+        <div>
+            <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Editing & Content</h3>
+            <ul class="list-disc list-inside space-y-3">
+                <li>Rich WYSIWYG editor with tables, images, math, and markdown autoformat.</li>
+                <li>Source code editing with syntax highlighting.</li>
+                <li>Evernote and Markdown import/export.</li>
+                <li>Web Clipper for easy saving of web content.</li>
+            </ul>
+        </div>
+
+        <!-- Security & Sync -->
+        <div>
+            <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Security & Sync</h3>
+            <ul class="list-disc list-inside space-y-3">
+                <li>Direct OpenID and TOTP integration for secure login.</li>
+                <li>Synchronization with self-hosted and third-party servers.</li>
+                <li>Strong note encryption with per-note granularity.</li>
+                <li>Sharing notes publicly on the internet.</li>
+            </ul>
+        </div>
+
+        <!-- Advanced & Customization -->
+        <div>
+            <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Advanced & Customization</h3>
+            <ul class="list-disc list-inside space-y-3">
+                <li>Relation maps and link maps to visualize notes.</li>
+                <li>Scripting support and REST API for automation.</li>
+                <li>Touch-optimized mobile frontend and dark/user themes.</li>
+                <li>Customizable UI with sidebar buttons and user widgets.</li>
+                <li>Metrics with Grafana dashboard integration.</li>
+                <li>Scales efficiently beyond 100,000 notes.</li>
+            </ul>
+        </div>
+    </div>
+</section>
+
+
+<section class="bg-violet-50 py-16 mt-24">
+    <div class="container mx-auto text-center px-4">
+        <h2 class="text-3xl font-bold mb-4">Ready to get started with Trilium Notes?</h2>
+        <p class="text-lg text-gray-700 mb-8">Build your personal knowledge base with powerful features and full privacy.</p>
+
+        <div class="flex justify-center gap-6">
+            <a href="#" class="py-3 px-6 bg-violet-600 text-white font-semibold rounded-full shadow hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
+                Download Now
+            </a>
+        </div>
+    </div>
+</section>

apps/website/src/routes/demo/+page.svelte

@@ -0,0 +1 @@
+<a href="/demo/paraglide">paraglide</a>

apps/website/src/routes/demo/paraglide/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { setLocale } from '$lib/paraglide/runtime';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { m } from '$lib/paraglide/messages.js';
+</script>
+
+
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+<div>
+	<button onclick={() => setLocale('en')}>en</button>
+</div><p>
+If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a> for a better i18n experience.
+</p>

apps/website/src/routes/download-now.svelte

@@ -0,0 +1,18 @@
+<script>
+    import { getRecommendedDownload } from "$lib/download-helper";
+
+    export let big = false;
+    const { url, platform, architecture } = getRecommendedDownload();
+</script>
+
+{#if url}
+    <a href="{url}"
+        class:text-xl={big}
+        class:py-4={big}
+        class="py-2 px-5 bg-violet-600 text-white font-semibold rounded-xl shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
+        Download now
+        <span class="text-sm text-gray-300">
+            ({platform} {architecture})
+        </span>
+    </a>
+{/if}

apps/website/src/routes/download/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import type { Platform } from "$lib/download-helper";
+    import { downloadMatrix, getArchitecture } from "$lib/download-helper";
+    import DownloadCard from "./download-card.svelte";
+
+    let architectures = ["x64", "arm64"] as const;
+    let architecture = getArchitecture();
+</script>
+
+<div class="bg-gray-50 py-20">
+    <section class="max-w-6xl mx-auto px-4">
+        <h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Download the desktop application</h2>
+    
+        <!-- Architecture pill selector -->
+        <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
+            <span class="text-gray-600 font-medium mr-2">Architecture:</span>
+            <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
+                {#each architectures as arch}            
+                    <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
+                        text-violet-700 border-violet-700
+                        aria-pressed:bg-violet-700 aria-pressed:text-violet-100
+                        " aria-pressed={architecture === arch} on:click={() => architecture = arch}>
+                        {arch}
+                    </button>
+                {/each}
+            </div>
+        </div>
+    
+        <div class="grid md:grid-cols-3 gap-10">
+            {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
+                {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
+                {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
+                {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
+                <DownloadCard app="desktop"
+                    {textColor} {bgColor} {hoverColor}
+                    {platform} {architecture} platformId={platformId as Platform} />
+            {/each}
+        </div>
+    </section>
+
+    <section class="max-w-4xl mx-auto px-4 mt-10">
+        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2>
+
+        <div class="grid md:grid-cols-2 gap-10">
+            {#each Object.entries(downloadMatrix.server) as [platformId, platform]}
+                {@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800")}
+                {@const bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
+                {@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
+                <DownloadCard app="server"
+                    {textColor} {bgColor} {hoverColor}
+                    {platform} {architecture} platformId={platformId as Platform} />
+            {/each}
+        </div>
+    </section>
+
+</div>

apps/website/src/routes/download/download-card.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { buildDownloadUrl, type Architecture, type DownloadMatrixEntry, type Platform, type App } from "$lib/download-helper";
+
+    export let app: App = "desktop";
+    export let platformId: Platform;
+    export let platform: DownloadMatrixEntry;
+    export let textColor: string;
+    export let bgColor: string;
+    export let hoverColor: string;
+    export let architecture: Architecture | null = null;
+    const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
+</script>
+
+<div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
+    <h3 class="text-2xl font-semibold {textColor} mb-2">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3>
+    <p class="text-gray-700 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p>                
+    <div class="space-y-2 mt-auto w-full">
+        {#if recommended}
+            <a href={buildDownloadUrl(app, platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">
+                {recommended[1].name}
+            </a>
+        {/if}
+        <div class="flex justify-center gap-4 text-sm {textColor} mt-2">
+            {#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
+                <a href={buildDownloadUrl(app, platformId as Platform, format, architecture)} class="hover:underline block">
+                    {download.name}
+                </a>
+            {/each}
+        </div>
+    </div>
+</div>

apps/website/src/routes/header.svelte

@@ -0,0 +1,23 @@
+<script>
+    import DownloadNow from "./download-now.svelte";
+
+</script>
+<header class="header bg-white sticky top-0 z-50 shadow">
+    <div class="container mx-auto flex items-center py-4">
+        <a href="/" class="flex items-center gap-x-2 w-100">
+            <img src="icon-color.svg" alt="Trilium Notes Logo" class="w-12 h-12">
+            <span class="text-2xl">Trilium Notes</span>
+        </a>
+
+        <div class="group w-full">
+            <nav class="header-nav">
+                <ul class="flex items-center justify-end gap-4">
+                    <li><a href="/">User Guide</a></li>
+                    <li><a href="/">Technical Guide</a></li>
+                    <li><a href="/" class="text-violet-500">Support us</a></li>
+                    <li><DownloadNow /></li>
+                </ul>                
+            </nav>
+        </div>
+    </div>
+</header>

apps/website/static/icon-color.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>TriliumNext Notes</title>
+	<style type="text/css">
+		.st0{fill:#95C980;}
+		.st1{fill:#72B755;}
+		.st2{fill:#4FA52B;}
+		.st3{fill:#EE8C89;}
+		.st4{fill:#E96562;}
+		.st5{fill:#E33F3B;}
+		.st6{fill:#EFB075;}
+		.st7{fill:#E99547;}
+		.st8{fill:#E47B19;}
+	</style>
+	<g>
+		<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
+		<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
+		<path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
+	
+		<path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
+		<path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
+		<path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
+
+		<path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
+		<path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
+		<path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
+	</g>
+</svg>

apps/website/svelte.config.js

@@ -0,0 +1,11 @@
+import { mdsvex } from 'mdsvex';
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+	preprocess: [vitePreprocess(), mdsvex()],
+	kit: { adapter: adapter() },
+	extensions: ['.svelte', '.svx']
+};
+
+export default config;

apps/website/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

apps/website/vite.config.ts

@@ -0,0 +1,15 @@
+import tailwindcss from '@tailwindcss/vite';
+import { paraglideVitePlugin } from '@inlang/paraglide-js';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+		paraglideVitePlugin({
+			project: './project.inlang',
+			outdir: './src/lib/paraglide'
+		})
+	]
+});

package.json

@@ -102,7 +102,10 @@
       "nanoid@>=4.0.0 <5.0.9": ">=5.0.9",
       "dompurify@<3.2.4": ">=3.2.4",
       "esbuild@<=0.24.2": ">=0.25.0"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   },
   "nx": {
     "name": "triliumnext"