Skip to content
This repository was archived by the owner on Jun 24, 2025. It is now read-only.

Commit b9daca5

Browse files
eliandoraneliandoran
authored
website: favicon / dark mode / more content (#2343)
2 parents c6c48d8 + 6c2a228 commit b9daca5

File tree

11 files changed

+147
-57
lines changed

11 files changed

+147
-57
lines changed

‎apps/website/src/app.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
11
@import 'tailwindcss';
22
@plugin '@tailwindcss/typography';
3+
4+
main a {
5+
text-decoration: revert;
6+
}
7+
8+
a.rounded-full, a.rounded-xl {
9+
text-decoration: none;
10+
}

‎apps/website/src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
%sveltekit.head%
88
</head>
99
<body data-sveltekit-preload-data="hover">
10-
<div style="display: contents">%sveltekit.body%</div>
10+
%sveltekit.body%
1111
</body>
1212
</html>

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ export const downloadMatrix: DownloadMatrix = {
4141
},
4242
zip: {
4343
name: "Portable (.zip)"
44+
},
45+
scoop: {
46+
name: "Scoop",
47+
url: "https://scoop.sh/#/apps?q=triliumnext"
48+
},
49+
winget: {
50+
name: "Winget",
51+
url: "https://github.com/microsoft/winget-pkgs/tree/master/manifests/t/TriliumNext/Notes/"
4452
}
4553
}
4654
},
@@ -66,6 +74,14 @@ export const downloadMatrix: DownloadMatrix = {
6674
},
6775
zip: {
6876
name: "Portable (.zip)"
77+
},
78+
nixpkgs: {
79+
name: "nixpkgs",
80+
url: "https://search.nixos.org/packages?query=trilium-next"
81+
},
82+
aur: {
83+
name: "AUR",
84+
url: "https://aur.archlinux.org/packages/triliumnext-bin"
6985
}
7086
}
7187
},
@@ -107,6 +123,10 @@ export const downloadMatrix: DownloadMatrix = {
107123
name: "ARM (.tar.xz)",
108124
url: `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-Server-v${version}-linux-arm64.tar.xz`
109125
},
126+
nixos: {
127+
name: "NixOS module",
128+
url: "https://search.nixos.org/options?query=trilium-server"
129+
}
110130
}
111131
},
112132
pikapod: {
@@ -129,7 +149,8 @@ export const downloadMatrix: DownloadMatrix = {
129149

130150
export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string {
131151
if (app === "desktop") {
132-
return `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-v${version}-${platform}-${architecture}.${format}`;
152+
return downloadMatrix.desktop[platform]?.downloads[format].url ??
153+
`https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-v${version}-${platform}-${architecture}.${format}`;
133154
} else if (app === "server") {
134155
return downloadMatrix.server[platform]?.downloads[format].url ?? "#";
135156
} else {

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,16 @@
55
let { children } = $props();
66
</script>
77

8+
<body class="dark:bg-black dark:text-white">
9+
810
<Header />
911

12+
<main>
1013
{@render children()}
14+
</main>
1115

12-
<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
16+
<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">
1317
&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>.
14-
</footer>
18+
</footer>
19+
20+
</body>

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

Lines changed: 74 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<script>
22
import DownloadNow from "./download-now.svelte";
3+
import FeatureBlock from "./feature-block.svelte";
34
</script>
45

5-
<section class="relative overflow-hidden bg-gradient-to-br from-white to-violet-50">
6+
<svelte:head>
7+
<title>Trilium Notes</title>
8+
<!-- TODO: description?
9+
<meta name="description" content="This is where the description goes for search engines" />
10+
-->
11+
</svelte:head>
12+
13+
<section class="relative overflow-hidden bg-gradient-to-br from-white dark:from-black to-violet-50 dark:to-violet-900">
614
<!-- Bokeh background circles -->
715
<div class="absolute inset-0 pointer-events-none z-0">
816
<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 @@
1523

1624
<!-- Left: Text Content -->
1725
<div class="md:w-1/3">
18-
<h2 class="text-4xl font-bold mb-4 text-gray-900">Organize Your Thoughts.<br/> Build Your Knowledge.</h2>
19-
<p class="text-lg mb-6 text-gray-700">
26+
<h2 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Organize Your Thoughts.<br/> Build Your Knowledge.</h2>
27+
<p class="text-lg mb-6 text-gray-700 dark:text-gray-300">
2028
Trilium Notes helps you build and organize complex personal knowledge bases effortlessly.
2129
Its unique tree structure, rich editing tools, and powerful search features make managing your information intuitive and flexible.
30+
<!-- TODO: remove the squiggly autocorrect lines in the screenshot!! -->
31+
<!-- TODO: dark mode screenshot -->
2232
</p>
2333
<div class="flex items-center gap-6">
2434
<DownloadNow big />
@@ -40,48 +50,72 @@
4050
<h2 class="text-3xl font-bold text-center mb-12">Beyond Text: Smarter Note Types</h2>
4151

4252
<div class="grid md:grid-cols-2 gap-10">
43-
<!-- Canvas Notes -->
44-
<div class="bg-white rounded-xl shadow overflow-hidden">
45-
<img src="/note-types/canvas.png" alt="Canvas Note Screenshot" class="w-full h-56 object-cover object-top">
46-
<div class="p-6">
47-
<h3 class="text-xl font-semibold mb-2">Canvas Notes</h3>
48-
<p class="text-gray-600">Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning.</p>
49-
</div>
50-
</div>
51-
52-
<!-- Mermaid Diagrams -->
53-
<div class="bg-white rounded-xl shadow overflow-hidden">
54-
<img src="/note-types/mermaid.png" alt="Mermaid Diagram Screenshot" class="w-full h-56 object-cover object-top">
55-
<div class="p-6">
56-
<h3 class="text-xl font-semibold mb-2">Mermaid Diagrams</h3>
57-
<p class="text-gray-600">Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes.</p>
58-
</div>
59-
</div>
53+
<FeatureBlock
54+
imgSrc="/note-types/canvas.png"
55+
imgAlt="Canvas Note Screenshot"
56+
title="Canvas Notes"
57+
text="Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning."
58+
/>
59+
60+
<FeatureBlock
61+
imgSrc="/note-types/mermaid.png"
62+
imgAlt="Mermaid Diagram Screenshot"
63+
title="Mermaid Diagrams"
64+
text="Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes."
65+
/>
66+
67+
<FeatureBlock
68+
imgSrc="/note-types/geo-map.png"
69+
imgAlt="Geo Map Screenshot"
70+
title="Geo Maps"
71+
text="Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps."
72+
/>
73+
74+
<FeatureBlock
75+
imgSrc="/note-types/mind-map.png"
76+
imgAlt="Mind Map Screenshot"
77+
title="Mind Maps"
78+
text="Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir."
79+
/>
80+
</div>
6081

61-
<!-- Geo Maps -->
62-
<div class="bg-white rounded-xl shadow overflow-hidden">
63-
<img src="/note-types/geo-map.png" alt="Geo Map Screenshot" class="w-full h-56 object-cover">
64-
<div class="p-6">
65-
<h3 class="text-xl font-semibold mb-2">Geo Maps</h3>
66-
<p class="text-gray-600">Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps.</p>
67-
</div>
68-
</div>
82+
<h2 class="text-3xl font-bold text-center mb-12">Technical Features</h2>
6983

70-
<!-- Mind Maps -->
71-
<div class="bg-white rounded-xl shadow overflow-hidden">
72-
<img src="/note-types/mind-map.png" alt="Mind Map Screenshot" class="w-full h-56 object-cover">
73-
<div class="p-6">
74-
<h3 class="text-xl font-semibold mb-2">Mind Maps</h3>
75-
<p class="text-gray-600">Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir.</p>
76-
</div>
77-
</div>
84+
<div class="grid md:grid-cols-2 gap-10">
85+
<FeatureBlock
86+
imgSrc="/technical-features/sync-server.png"
87+
imgAlt="TODO"
88+
title="Synchronization Server"
89+
text="Seamless mirroring of changes acroll all devices."
90+
/>
91+
92+
<FeatureBlock
93+
imgSrc="/technical-features/cross-platform.png"
94+
imgAlt="TODO, maybe some icons"
95+
title="Cross-platform App + Web UI"
96+
text="Use as Electron application or in your browser."
97+
/>
98+
99+
<FeatureBlock
100+
imgSrc="/technical-features/scripting.png"
101+
imgAlt="TODO"
102+
title="Scripting"
103+
text="Custom UI widgets and a REST API for automation."
104+
/>
105+
106+
<FeatureBlock
107+
imgSrc="/technical-features/grafana-metrics.png"
108+
imgAlt="Mind Map Screenshot"
109+
title="Grafana Metrics"
110+
text="Measure database metrics over time."
111+
/>
78112
</div>
79113
</section>
80114

81115
<section class="mt-20 max-w-6xl mx-auto px-4">
82116
<h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2>
83117

84-
<div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700">
118+
<div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700 dark:text-gray-300">
85119
<!-- Organization & Navigation -->
86120
<div>
87121
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3>
@@ -109,7 +143,6 @@
109143
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Security & Sync</h3>
110144
<ul class="list-disc list-inside space-y-3">
111145
<li>Direct OpenID and TOTP integration for secure login.</li>
112-
<li>Synchronization with self-hosted and third-party servers.</li>
113146
<li>Strong note encryption with per-note granularity.</li>
114147
<li>Sharing notes publicly on the internet.</li>
115148
</ul>
@@ -120,24 +153,22 @@
120153
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Advanced & Customization</h3>
121154
<ul class="list-disc list-inside space-y-3">
122155
<li>Relation maps and link maps to visualize notes.</li>
123-
<li>Scripting support and REST API for automation.</li>
124156
<li>Touch-optimized mobile frontend and dark/user themes.</li>
125157
<li>Customizable UI with sidebar buttons and user widgets.</li>
126-
<li>Metrics with Grafana dashboard integration.</li>
127158
<li>Scales efficiently beyond 100,000 notes.</li>
128159
</ul>
129160
</div>
130161
</div>
131162
</section>
132163

133164

134-
<section class="bg-violet-50 py-16 mt-24">
165+
<section class="bg-violet-50 dark:bg-black py-16 mt-24">
135166
<div class="container mx-auto text-center px-4">
136167
<h2 class="text-3xl font-bold mb-4">Ready to get started with Trilium Notes?</h2>
137-
<p class="text-lg text-gray-700 mb-8">Build your personal knowledge base with powerful features and full privacy.</p>
168+
<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>
138169

139170
<div class="flex justify-center gap-6">
140-
<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">
171+
<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">
141172
Download Now
142173
</a>
143174
</div>

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,20 @@
77
let architecture = getArchitecture();
88
</script>
99

10-
<div class="bg-gray-50 py-20">
10+
<svelte:head>
11+
<title>Trilium Notes: Download</title>
12+
<!-- TODO: description?
13+
<meta name="description" content="This is where the description goes for search engines" />
14+
-->
15+
</svelte:head>
16+
17+
<div class="bg-gray-50 dark:bg-black py-20">
1118
<section class="max-w-6xl mx-auto px-4">
12-
<h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Download the desktop application</h2>
19+
<h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">Download the desktop application</h2>
1320

1421
<!-- Architecture pill selector -->
1522
<div class="col-span-3 flex justify-center items-center gap-3 mb-6">
16-
<span class="text-gray-600 font-medium mr-2">Architecture:</span>
23+
<span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Architecture:</span>
1724
<div class="inline-flex bg-violet-100 rounded-full shadow p-1">
1825
{#each architectures as arch}
1926
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
@@ -28,7 +35,7 @@
2835

2936
<div class="grid md:grid-cols-3 gap-10">
3037
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
31-
{@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
38+
{@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
3239
{@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
3340
{@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
3441
<DownloadCard app="desktop"
@@ -39,11 +46,11 @@
3946
</section>
4047

4148
<section class="max-w-4xl mx-auto px-4 mt-10">
42-
<h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2>
49+
<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>
4350

4451
<div class="grid md:grid-cols-2 gap-10">
4552
{#each Object.entries(downloadMatrix.server) as [platformId, platform]}
46-
{@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800")}
53+
{@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
4754
{@const bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
4855
{@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
4956
<DownloadCard app="server"
@@ -53,4 +60,6 @@
5360
</div>
5461
</section>
5562

63+
<!-- TODO: mention mobile support here? (alpha Android app / mobile web view) -->
64+
5665
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@
1111
const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
1212
</script>
1313

14-
<div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
14+
<div class="bg-white dark:bg-gray-900 border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
1515
<h3 class="text-2xl font-semibold {textColor} mb-2">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3>
16-
<p class="text-gray-700 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p>
16+
<p class="text-gray-700 dark:text-gray-200 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p>
1717
<div class="space-y-2 mt-auto w-full">
1818
{#if recommended}
1919
<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">
2020
{recommended[1].name}
2121
</a>
2222
{/if}
23-
<div class="flex justify-center gap-4 text-sm {textColor} mt-2">
23+
<div class="flex flex-wrap justify-center gap-4 text-sm {textColor} mt-2">
2424
{#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
2525
<a href={buildDownloadUrl(app, platformId as Platform, format, architecture)} class="hover:underline block">
2626
{download.name}

‎apps/website/src/routes/feature-block.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
export let imgSrc = "/404.png";
3+
export let imgAlt = "screenshot";
4+
export let title = "title";
5+
export let text = "text";
6+
</script>
7+
8+
<div class="bg-white dark:bg-gray-900 rounded-xl shadow overflow-hidden">
9+
<img src="{imgSrc}" alt="{imgAlt}" class="w-full h-56 object-cover object-top">
10+
<div class="p-6">
11+
<h3 class="text-xl font-semibold mb-2">{title}</h3>
12+
<p class="text-gray-600 dark:text-gray-300">{text}</p>
13+
</div>
14+
</div>

‎apps/website/src/routes/header.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import DownloadNow from "./download-now.svelte";
33
44
</script>
5-
<header class="header bg-white sticky top-0 z-50 shadow">
5+
<header class="header bg-white dark:bg-gray-900 sticky dark:text-white top-0 z-50 shadow">
66
<div class="container mx-auto flex items-center py-4">
77
<a href="/" class="flex items-center gap-x-2 w-100">
88
<img src="icon-color.svg" alt="Trilium Notes Logo" class="w-12 h-12">

‎apps/website/static/favicon.png‎

-1.53 KB
Binary file not shown.

0 commit comments

Comments
 (0)