Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

website: refactor feature blocks, add more

Browse Source
This commit is contained in:
FliegendeWurst 2025-06-17 17:01:13 +02:00
parent d1583ca091
commit 2c3cbcb1f9
2 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
apps/website/src/routes/+page.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import DownloadNow from "./download-now.svelte"; import DownloadNow from "./download-now.svelte";
import FeatureBlock from "./feature-block.svelte";
</script> </script>
<svelte:head> <svelte:head>
@ -47,41 +48,65 @@
<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>
<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> </div>
<!-- Mermaid Diagrams --> <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/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="grid md:grid-cols-2 gap-10">
<div class="bg-white rounded-xl shadow overflow-hidden"> <FeatureBlock
<img src="/note-types/geo-map.png" alt="Geo Map Screenshot" class="w-full h-56 object-cover"> imgSrc="/note-types/canvas.png"
<div class="p-6"> imgAlt="Canvas Note Screenshot"
<h3 class="text-xl font-semibold mb-2">Geo Maps</h3> title="Synchronization Server"
<p class="text-gray-600">Plot locations and GPX tracks to visualize geography-linked notes and movement patterns on interactive maps.</p> text="TODO"
</div> />
</div>
<!-- Mind Maps --> <FeatureBlock
<div class="bg-white rounded-xl shadow overflow-hidden"> imgSrc="/note-types/mermaid.png"
<img src="/note-types/mind-map.png" alt="Mind Map Screenshot" class="w-full h-56 object-cover"> imgAlt="Mermaid Diagram Screenshot"
<div class="p-6"> title="Cross-platform App + Web UI"
<h3 class="text-xl font-semibold mb-2">Mind Maps</h3> text="Use Trilium Notes as Electron application or in your browser."
<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/geo-map.png"
imgAlt="Geo Map Screenshot"
title="Scripting"
text="TODO and REST API for automation."
/>
<FeatureBlock
imgSrc="/note-types/mind-map.png"
imgAlt="Mind Map Screenshot"
title="Grafana Metrics"
text="TODO"
/>
</div> </div>
</section> </section>
@ -116,7 +141,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>
@ -127,10 +151,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>

14
apps/website/src/routes/feature-block.svelte Normal file
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 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">{text}</p>
</div>
</div>