Merge branch 'develop' into fix/lint-server-url

This commit is contained in:
Jon Fuller 2025-06-17 16:00:36 -07:00 committed by GitHub
commit bb70c2a3fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 161 additions and 64 deletions

View File

@ -257,7 +257,7 @@ async function configureWebContents(webContents: WebContents, spellcheckEnabled:
}
function getIcon() {
return path.join(RESOURCE_DIR, "images/app-icons/png/256x256" + (isDev ? "-dev" : "") + ".png");
return path.join(RESOURCE_DIR, "../public/assets/icon.png");
}
async function createSetupWindow() {

View File

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

View File

@ -6,7 +6,7 @@
<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 data-sveltekit-preload-data="hover" class="dark:bg-black dark:text-white">
%sveltekit.body%
</body>
</html>

View File

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

View File

@ -7,8 +7,10 @@
<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>

View File

@ -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>
<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."
/>
<!-- 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/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."
/>
<!-- 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>
<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."
/>
<!-- 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>
<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>
<h2 class="text-3xl font-bold text-center mb-12">Technical Features</h2>
<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,10 +153,8 @@
<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>
@ -131,13 +162,13 @@
</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>

View File

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

View File

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

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>

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 40 B

View File

@ -0,0 +1 @@
../../../apps/client/src/assets/icon.png

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 40 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 804 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 785 KiB

View File

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

View File

@ -21,7 +21,7 @@
system:
let
pkgs = import nixpkgs { inherit system; };
electron = pkgs.electron_35;
electron = pkgs."electron_${lib.versions.major packageJsonDesktop.devDependencies.electron}";
nodejs = pkgs.nodejs_22;
pnpm = pkgs.pnpm_10;
inherit (pkgs)
@ -30,6 +30,7 @@
lib
makeBinaryWrapper
makeDesktopItem
makeShellWrapper
moreutils
removeReferencesTo
stdenv
@ -40,13 +41,13 @@
fullCleanSourceFilter =
name: type:
(lib.cleanSourceFilter name type)
|| (
&& (
let
baseName = baseNameOf (toString name);
in
# No need to copy the flake.
# Don't copy local development instance of NX cache.
baseName == "flake.nix" || baseName == "flake.lock" || baseName == ".nx"
baseName != "flake.nix" && baseName != "flake.lock" && baseName != ".nx"
);
fullCleanSource =
src:
@ -55,6 +56,7 @@
src = src;
};
packageJson = builtins.fromJSON (builtins.readFile ./package.json);
packageJsonDesktop = builtins.fromJSON (builtins.readFile ./apps/desktop/package.json);
makeApp =
{
@ -101,15 +103,20 @@
extraNativeBuildInputs =
[
makeBinaryWrapper
moreutils # sponge
nodejs.python
removeReferencesTo
]
++ lib.optionals (app == "desktop") [
copyDesktopItems
# required for NIXOS_OZONE_WL expansion
# https://github.com/NixOS/nixpkgs/issues/172583
makeShellWrapper
wrapGAppsHook3
]
++ lib.optionals (app == "server") [
makeBinaryWrapper
]
++ lib.optionals stdenv.hostPlatform.isDarwin [
xcodebuild
darwin.cctools
@ -162,7 +169,9 @@
comment = meta.description;
desktopName = "TriliumNext Notes";
categories = [ "Office" ];
startupWMClass = "Trilium Notes Next";
# TODO: electron-forge build has this set to PRODUCT_NAME (forge.config.cjs)
# But the plain build doesn't set this (or the app icon).
startupWMClass = "TriliumNext Notes";
})
];
@ -184,9 +193,11 @@
mkdir -p $out/{bin,share/icons/hicolor/512x512/apps,opt/trilium}
cp --archive apps/desktop/dist/* $out/opt/trilium
cp apps/client/src/assets/icon.png $out/share/icons/hicolor/512x512/apps/trilium.png
makeWrapper ${lib.getExe electron} $out/bin/trilium \
makeShellWrapper ${lib.getExe electron} $out/bin/trilium \
"''${gappsWrapperArgs[@]}" \
--add-flags "\''${NIXOS_OZONE_WL:+\''${WAYLAND_DISPLAY:+--ozone-platform-hint=auto --enable-features=WaylandWindowDecorations --enable-wayland-ime=true}}" \
--set-default ELECTRON_IS_DEV 0 \
--set TRILIUM_RESOURCE_DIR $out/opt/trilium \
--add-flags $out/opt/trilium/main.cjs
'';
};