sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

website: favicon / dark mode / more content (#2343)

pull/2349/head
Elian Doran 2025-06-17 21:38:24 +07:00 committed by GitHub
parent c6c48d84ab 6c2a228267
commit b9daca5b9c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 147 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/website/src/app.css
Unescape Escape View File

@ -1,2 +1,10 @@
@import 'tailwindcss'; @import 'tailwindcss';
@plugin '@tailwindcss/typography'; @plugin '@tailwindcss/typography';
main a {
text-decoration: revert;
}
a.rounded-full, a.rounded-xl {
text-decoration: none;
}

2
apps/website/src/app.html
Unescape Escape View File

@ -7,6 +7,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> %sveltekit.body%
</body> </body>
</html> </html>

23
apps/website/src/lib/download-helper.ts
Unescape Escape View File

@ -41,6 +41,14 @@ export const downloadMatrix: DownloadMatrix = {
}, },
zip: { zip: {
name: "Portable (.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: { zip: {
name: "Portable (.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)", name: "ARM (.tar.xz)",
url: `https://github.com/TriliumNext/Notes/releases/download/v${version}/TriliumNextNotes-Server-v${version}-linux-arm64.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: { pikapod: {
@ -129,7 +149,8 @@ export const downloadMatrix: DownloadMatrix = {
export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string { export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string {
if (app === "desktop") { 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") { } else if (app === "server") {
return downloadMatrix.server[platform]?.downloads[format].url ?? "#"; return downloadMatrix.server[platform]?.downloads[format].url ?? "#";
} else { } else {

10
apps/website/src/routes/+layout.svelte
Unescape Escape View File

@ -5,10 +5,16 @@
let { children } = $props(); let { children } = $props();
</script> </script>
<body class="dark:bg-black dark:text-white">
<Header /> <Header />
<main>
{@render children()} {@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>. &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>

117
apps/website/src/routes/+page.svelte
Unescape Escape View File

@ -1,8 +1,16 @@
<script> <script>
import DownloadNow from "./download-now.svelte"; import DownloadNow from "./download-now.svelte";
import FeatureBlock from "./feature-block.svelte";
</script> </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 --> <!-- Bokeh background circles -->
<div class="absolute inset-0 pointer-events-none z-0"> <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-72 h-72 bg-violet-300 opacity-30 rounded-full blur-3xl top-[-50px] left-[-80px]"></div>
@ -15,10 +23,12 @@
<!-- Left: Text Content --> <!-- Left: Text Content -->
<div class="md:w-1/3"> <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> <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"> <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. 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. 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> </p>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<DownloadNow big /> <DownloadNow big />
@ -40,48 +50,72 @@
<h2 class="text-3xl font-bold text-center mb-12">Beyond Text: Smarter Note Types</h2> <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"> <div class="grid md:grid-cols-2 gap-10">
<!-- Canvas Notes --> <FeatureBlock
<div class="bg-white rounded-xl shadow overflow-hidden"> imgSrc="/note-types/canvas.png"
<img src="/note-types/canvas.png" alt="Canvas Note Screenshot" class="w-full h-56 object-cover object-top"> imgAlt="Canvas Note Screenshot"
<div class="p-6"> title="Canvas Notes"
<h3 class="text-xl font-semibold mb-2">Canvas Notes</h3> text="Draw and arrange elements freely using an Excalidraw-powered canvas — ideal for diagrams, sketches, and visual planning."
<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> <FeatureBlock
imgSrc="/note-types/mermaid.png"
<!-- Mermaid Diagrams --> imgAlt="Mermaid Diagram Screenshot"
<div class="bg-white rounded-xl shadow overflow-hidden"> title="Mermaid Diagrams"
<img src="/note-types/mermaid.png" alt="Mermaid Diagram Screenshot" class="w-full h-56 object-cover object-top"> text="Render flowcharts, Gantt charts, and sequence diagrams with Mermaid markdown syntax directly in your notes."
<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> <FeatureBlock
</div> imgSrc="/note-types/geo-map.png"
</div> 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 --> <h2 class="text-3xl font-bold text-center mb-12">Technical Features</h2>
<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="grid md:grid-cols-2 gap-10">
<div class="bg-white rounded-xl shadow overflow-hidden"> <FeatureBlock
<img src="/note-types/mind-map.png" alt="Mind Map Screenshot" class="w-full h-56 object-cover"> imgSrc="/technical-features/sync-server.png"
<div class="p-6"> imgAlt="TODO"
<h3 class="text-xl font-semibold mb-2">Mind Maps</h3> title="Synchronization Server"
<p class="text-gray-600">Organize ideas visually using a drag-and-drop mind map editor powered by Mind Elixir.</p> text="Seamless mirroring of changes acroll all devices."
</div> />
</div>
<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> </div>
</section> </section>
<section class="mt-20 max-w-6xl mx-auto px-4"> <section class="mt-20 max-w-6xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2> <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 --> <!-- Organization & Navigation -->
<div> <div>
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3> <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> <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"> <ul class="list-disc list-inside space-y-3">
<li>Direct OpenID and TOTP integration for secure login.</li> <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>Strong note encryption with per-note granularity.</li>
<li>Sharing notes publicly on the internet.</li> <li>Sharing notes publicly on the internet.</li>
</ul> </ul>
@ -120,10 +153,8 @@
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Advanced & Customization</h3> <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"> <ul class="list-disc list-inside space-y-3">
<li>Relation maps and link maps to visualize notes.</li> <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>Touch-optimized mobile frontend and dark/user themes.</li>
<li>Customizable UI with sidebar buttons and user widgets.</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> <li>Scales efficiently beyond 100,000 notes.</li>
</ul> </ul>
</div> </div>
@ -131,13 +162,13 @@
</section> </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"> <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> <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"> <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 Download Now
</a> </a>
</div> </div>

21
apps/website/src/routes/download/+page.svelte
Unescape Escape View File

@ -7,13 +7,20 @@
let architecture = getArchitecture(); let architecture = getArchitecture();
</script> </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"> <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 --> <!-- Architecture pill selector -->
<div class="col-span-3 flex justify-center items-center gap-3 mb-6"> <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"> <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
{#each architectures as arch} {#each architectures as arch}
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition <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"> <div class="grid md:grid-cols-3 gap-10">
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]} {#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 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")} {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<DownloadCard app="desktop" <DownloadCard app="desktop"
@ -39,11 +46,11 @@
</section> </section>
<section class="max-w-4xl mx-auto px-4 mt-10"> <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"> <div class="grid md:grid-cols-2 gap-10">
{#each Object.entries(downloadMatrix.server) as [platformId, platform]} {#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 bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
{@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")} {@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<DownloadCard app="server" <DownloadCard app="server"
@ -53,4 +60,6 @@
</div> </div>
</section> </section>
<!-- TODO: mention mobile support here? (alpha Android app / mobile web view) -->
</div> </div>

6
apps/website/src/routes/download/download-card.svelte
Unescape Escape View File

@ -11,16 +11,16 @@
const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended); const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
</script> </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> <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"> <div class="space-y-2 mt-auto w-full">
{#if recommended} {#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"> <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} {recommended[1].name}
</a> </a>
{/if} {/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]} {#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"> <a href={buildDownloadUrl(app, platformId as Platform, format, architecture)} class="hover:underline block">
{download.name} {download.name}

14
apps/website/src/routes/feature-block.svelte
Unescape Escape View File

@ -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>

2
apps/website/src/routes/header.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import DownloadNow from "./download-now.svelte"; import DownloadNow from "./download-now.svelte";
</script> </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"> <div class="container mx-auto flex items-center py-4">
<a href="/" class="flex items-center gap-x-2 w-100"> <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"> <img src="icon-color.svg" alt="Trilium Notes Logo" class="w-12 h-12">

BIN
apps/website/static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 40 B

1
apps/website/static/favicon.png
Unescape Escape View File

@ -0,0 +1 @@
../../../apps/client/src/assets/icon.png
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 40 B

1
apps/website/static/technical-features/grafana-metrics.png
Unescape Escape View File

@ -0,0 +1 @@
../../../../docs/User Guide/User Guide/Advanced Usage/1_Metrics_image.png