TriliumNext · eliandoran · Jun 17, 2025 · Jun 17, 2025 · Jun 17, 2025 · Jun 17, 2025
diff --git a/apps/website/src/app.css b/apps/website/src/app.css
@@ -1,2 +1,10 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+main a {
+    text-decoration: revert;
+}
+
+a.rounded-full, a.rounded-xl {
+    text-decoration: none;
+}
diff --git a/apps/website/src/app.html b/apps/website/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/apps/website/src/lib/download-helper.ts b/apps/website/src/lib/download-helper.ts
@@ -41,6 +41,14 @@ export const downloadMatrix: DownloadMatrix = {
                 },
                 zip: {
                     name: "Portable (.zip)"
+                },
+                scoop: {
+                    name: "Scoop",
+                    url: "https://scoop.sh/#/apps?q=triliumnext"
+                },
+                winget: {
+                    name: "Winget",
+                    url: "https://github.com/microsoft/winget-pkgs/tree/master/manifests/t/TriliumNext/Notes/"
                 }
             }
         },
@@ -66,6 +74,14 @@ export const downloadMatrix: DownloadMatrix = {
                 },
                 zip: {
                     name: "Portable (.zip)"
+                },
+                nixpkgs: {
+                    name: "nixpkgs",
+                    url: "https://search.nixos.org/packages?query=trilium-next"
+                },
+                aur: {
+                    name: "AUR",
+                    url: "https://aur.archlinux.org/packages/triliumnext-bin"
                 }
             }
         },
@@ -107,6 +123,10 @@ export const downloadMatrix: DownloadMatrix = {
                     name: "ARM (.tar.xz)",
                     url: `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-Server-v${version}-linux-arm64.tar.xz`
                 },
+                nixos: {
+                    name: "NixOS module",
+                    url: "https://search.nixos.org/options?query=trilium-server"
+                }
             }
         },
         pikapod: {
@@ -129,7 +149,8 @@ export const downloadMatrix: DownloadMatrix = {
 
 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}`;
+        return downloadMatrix.desktop[platform]?.downloads[format].url ??
+            `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 {

diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte
@@ -5,10 +5,16 @@
 	let { children } = $props();
 </script>
 
+<body class="dark:bg-black dark:text-white">
+
 <Header />
 
+<main>
 {@render children()}
+</main>
 
-<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
+<footer class="container max-w-screen mx-0 w-full bg-white dark:bg-gray-900 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>
+</footer>
+
+</body>
diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
@@ -1,8 +1,16 @@
 <script>
     import DownloadNow from "./download-now.svelte";
+    import FeatureBlock from "./feature-block.svelte";
 </script>
 
-<section class="relative overflow-hidden bg-gradient-to-br from-white to-violet-50">
+<svelte:head>
+    <title>Trilium Notes</title>
+    <!-- TODO: description?
+    	<meta name="description" content="This is where the description goes for search engines" />
+    -->
+</svelte:head>
+
+<section class="relative overflow-hidden bg-gradient-to-br from-white dark:from-black to-violet-50 dark:to-violet-900">
     <!-- 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>
@@ -15,10 +23,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">
+                <h2 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Organize Your Thoughts.<br/> Build Your Knowledge.</h2>
+                <p class="text-lg mb-6 text-gray-700 dark:text-gray-300">
                     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.
+                    <!-- TODO: remove the squiggly autocorrect lines in the screenshot!! -->
+                    <!-- TODO: dark mode screenshot -->
                 </p>
                 <div class="flex items-center gap-6">
                     <DownloadNow big />                    
@@ -40,48 +50,72 @@
     <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>
+        <FeatureBlock
+            imgSrc="/note-types/canvas.png"
+            imgAlt="Canvas Note Screenshot"
+            title="Canvas Notes"
+            text="Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning."
+            />
+
+        <FeatureBlock
+            imgSrc="/note-types/mermaid.png"
+            imgAlt="Mermaid Diagram Screenshot"
+            title="Mermaid Diagrams"
+            text="Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes."
+            />
+
+        <FeatureBlock
+            imgSrc="/note-types/geo-map.png"
+            imgAlt="Geo Map Screenshot"
+            title="Geo Maps"
+            text="Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps."
+            />
+
+        <FeatureBlock
+            imgSrc="/note-types/mind-map.png"
+            imgAlt="Mind Map Screenshot"
+            title="Mind Maps"
+            text="Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir."
+            />
+    </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>
+    <h2 class="text-3xl font-bold text-center mb-12">Technical Features</h2>
 
-        <!-- 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 class="grid md:grid-cols-2 gap-10">
+        <FeatureBlock
+            imgSrc="/technical-features/sync-server.png"
+            imgAlt="TODO"
+            title="Synchronization Server"
+            text="Seamless mirroring of changes acroll all devices."
+            />
+
+        <FeatureBlock
+            imgSrc="/technical-features/cross-platform.png"
+            imgAlt="TODO, maybe some icons"
+            title="Cross-platform App + Web UI"
+            text="Use as Electron application or in your browser."
+            />
+
+        <FeatureBlock
+            imgSrc="/technical-features/scripting.png"
+            imgAlt="TODO"
+            title="Scripting"
+            text="Custom UI widgets and a REST API for automation."
+            />
+
+        <FeatureBlock
+            imgSrc="/technical-features/grafana-metrics.png"
+            imgAlt="Mind Map Screenshot"
+            title="Grafana Metrics"
+            text="Measure database metrics over time."
+            />
     </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">
+    <div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700 dark:text-gray-300">
         <!-- Organization & Navigation -->
         <div>
             <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3>
@@ -109,7 +143,6 @@
             <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>
@@ -120,24 +153,22 @@
             <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">
+<section class="bg-violet-50 dark:bg-black 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>
+        <p class="text-lg text-gray-700 dark:text-gray-200 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">
+            <a href="download" 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>

diff --git a/apps/website/src/routes/download/+page.svelte b/apps/website/src/routes/download/+page.svelte
@@ -7,13 +7,20 @@
     let architecture = getArchitecture();
 </script>
 
-<div class="bg-gray-50 py-20">
+<svelte:head>
+    <title>Trilium Notes: Download</title>
+    <!-- TODO: description?
+    	<meta name="description" content="This is where the description goes for search engines" />
+    -->
+</svelte:head>
+
+<div class="bg-gray-50 dark:bg-black 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>
+        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white 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>
+            <span class="text-gray-600 dark:text-gray-300 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
@@ -28,7 +35,7 @@
 
         <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 textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
                 {@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"
@@ -39,11 +46,11 @@
     </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>
+        <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white 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 textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
                 {@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"
@@ -53,4 +60,6 @@
         </div>
     </section>
 
+    <!-- TODO: mention mobile support here? (alpha Android app / mobile web view) -->
+
 </div>
diff --git a/apps/website/src/routes/download/download-card.svelte b/apps/website/src/routes/download/download-card.svelte
@@ -11,16 +11,16 @@
     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">
+<div class="bg-white dark:bg-gray-900 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>                
+    <p class="text-gray-700 dark:text-gray-200 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">
+        <div class="flex flex-wrap 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}

diff --git a/apps/website/src/routes/feature-block.svelte b/apps/website/src/routes/feature-block.svelte
@@ -0,0 +1,14 @@
+<script>
+    export let imgSrc = "/404.png";
+	export let imgAlt = "screenshot";
+	export let title = "title";
+	export let text = "text";
+</script>
+
+<div class="bg-white dark:bg-gray-900 rounded-xl shadow overflow-hidden">
+    <img src="{imgSrc}" alt="{imgAlt}" class="w-full h-56 object-cover object-top">
+    <div class="p-6">
+        <h3 class="text-xl font-semibold mb-2">{title}</h3>
+        <p class="text-gray-600 dark:text-gray-300">{text}</p>
+    </div>
+</div>
diff --git a/apps/website/src/routes/header.svelte b/apps/website/src/routes/header.svelte
@@ -2,7 +2,7 @@
     import DownloadNow from "./download-now.svelte";
 
 </script>
-<header class="header bg-white sticky top-0 z-50 shadow">
+<header class="header bg-white dark:bg-gray-900 sticky dark:text-white 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">

diff --git a/apps/website/static/favicon.png b/apps/website/static/favicon.png
diff --git a/apps/website/static/favicon.png b/apps/website/static/favicon.png
@@ -0,0 +1 @@
+../../../apps/client/src/assets/icon.png
diff --git a/apps/website/static/technical-features/grafana-metrics.png b/apps/website/static/technical-features/grafana-metrics.png
@@ -0,0 +1 @@
+../../../../docs/User Guide/User Guide/Advanced Usage/1_Metrics_image.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../../../docs/User Guide/User Guide/Advanced Usage/1_Metrics_image.png