From b4a2a6c12b64536e31241ac63dc0738b7b27f5f6 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 26 Sep 2025 23:16:06 +0300 Subject: [PATCH] chore(website): port note types --- apps/website2/src/index.html | 49 --------------- .../src/assets/collection_board.png | Bin .../src/assets/collection_calendar.png | Bin .../src/assets/collection_geomap.png | Bin .../src/assets/collection_table.png | Bin .../src/assets/icon-color.svg | 0 .../src/assets/screenshot_desktop_win.png | Bin .../src/assets/type_canvas.png | Bin .../src/assets/type_code.png | Bin .../src/assets/type_file.png | Bin .../src/assets/type_mermaid.png | Bin .../src/assets/type_mindmap.png | Bin .../src/assets/type_text.png | Bin apps/website3/src/components/Card.tsx | 4 +- apps/website3/src/pages/Home/index.tsx | 57 +++++++++++------- apps/website3/src/pages/Home/style.css | 47 --------------- apps/website3/src/style.css | 4 ++ 17 files changed, 42 insertions(+), 119 deletions(-) rename apps/{website2 => website3}/src/assets/collection_board.png (100%) rename apps/{website2 => website3}/src/assets/collection_calendar.png (100%) rename apps/{website2 => website3}/src/assets/collection_geomap.png (100%) rename apps/{website2 => website3}/src/assets/collection_table.png (100%) rename apps/{website2 => website3}/src/assets/icon-color.svg (100%) rename apps/{website2 => website3}/src/assets/screenshot_desktop_win.png (100%) rename apps/{website2 => website3}/src/assets/type_canvas.png (100%) rename apps/{website2 => website3}/src/assets/type_code.png (100%) rename apps/{website2 => website3}/src/assets/type_file.png (100%) rename apps/{website2 => website3}/src/assets/type_mermaid.png (100%) rename apps/{website2 => website3}/src/assets/type_mindmap.png (100%) rename apps/{website2 => website3}/src/assets/type_text.png (100%) delete mode 100644 apps/website3/src/pages/Home/style.css diff --git a/apps/website2/src/index.html b/apps/website2/src/index.html index 28dabd21d..b674a100e 100644 --- a/apps/website2/src/index.html +++ b/apps/website2/src/index.html @@ -34,55 +34,6 @@ -
-
-

Note types

-
-
- -

Text notes
The notes - are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions, - code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or - using slash commands.

-
-
- -

Code notes
Large - samples of source code or scripts use a dedicated editor, with syntax highlighting for many - programming languages and with various color themes

-
-
- -

File notes
Embed - multimedia files such as PDFs, images, videos with an in-application preview.

-
-
- -

Canvas
Arrange - shapes, images and text across an infinite canvas, using the same technology behind excalidraw.com . Ideal for diagrams, sketches and visual - planning.

-
-
- -

Mermaid diagrams -
Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and - many more, using the Mermaid syntax.

-
-
- -

Mind maps -
Organize your thoughts visually or do a brainstorming session by using mind map diagrams. -

-
-
-

and others: note map, relation map, saved searches, render note, web views.

-
-
-

Collections

diff --git a/apps/website2/src/assets/collection_board.png b/apps/website3/src/assets/collection_board.png similarity index 100% rename from apps/website2/src/assets/collection_board.png rename to apps/website3/src/assets/collection_board.png diff --git a/apps/website2/src/assets/collection_calendar.png b/apps/website3/src/assets/collection_calendar.png similarity index 100% rename from apps/website2/src/assets/collection_calendar.png rename to apps/website3/src/assets/collection_calendar.png diff --git a/apps/website2/src/assets/collection_geomap.png b/apps/website3/src/assets/collection_geomap.png similarity index 100% rename from apps/website2/src/assets/collection_geomap.png rename to apps/website3/src/assets/collection_geomap.png diff --git a/apps/website2/src/assets/collection_table.png b/apps/website3/src/assets/collection_table.png similarity index 100% rename from apps/website2/src/assets/collection_table.png rename to apps/website3/src/assets/collection_table.png diff --git a/apps/website2/src/assets/icon-color.svg b/apps/website3/src/assets/icon-color.svg similarity index 100% rename from apps/website2/src/assets/icon-color.svg rename to apps/website3/src/assets/icon-color.svg diff --git a/apps/website2/src/assets/screenshot_desktop_win.png b/apps/website3/src/assets/screenshot_desktop_win.png similarity index 100% rename from apps/website2/src/assets/screenshot_desktop_win.png rename to apps/website3/src/assets/screenshot_desktop_win.png diff --git a/apps/website2/src/assets/type_canvas.png b/apps/website3/src/assets/type_canvas.png similarity index 100% rename from apps/website2/src/assets/type_canvas.png rename to apps/website3/src/assets/type_canvas.png diff --git a/apps/website2/src/assets/type_code.png b/apps/website3/src/assets/type_code.png similarity index 100% rename from apps/website2/src/assets/type_code.png rename to apps/website3/src/assets/type_code.png diff --git a/apps/website2/src/assets/type_file.png b/apps/website3/src/assets/type_file.png similarity index 100% rename from apps/website2/src/assets/type_file.png rename to apps/website3/src/assets/type_file.png diff --git a/apps/website2/src/assets/type_mermaid.png b/apps/website3/src/assets/type_mermaid.png similarity index 100% rename from apps/website2/src/assets/type_mermaid.png rename to apps/website3/src/assets/type_mermaid.png diff --git a/apps/website2/src/assets/type_mindmap.png b/apps/website3/src/assets/type_mindmap.png similarity index 100% rename from apps/website2/src/assets/type_mindmap.png rename to apps/website3/src/assets/type_mindmap.png diff --git a/apps/website2/src/assets/type_text.png b/apps/website3/src/assets/type_text.png similarity index 100% rename from apps/website2/src/assets/type_text.png rename to apps/website3/src/assets/type_text.png diff --git a/apps/website3/src/components/Card.tsx b/apps/website3/src/components/Card.tsx index ee09c0460..e2c249cdf 100644 --- a/apps/website3/src/components/Card.tsx +++ b/apps/website3/src/components/Card.tsx @@ -2,12 +2,14 @@ import { ComponentChildren } from "preact"; interface CardProps { title: string; + imageUrl?: string; children: ComponentChildren; } -export default function Card({ title, children }: CardProps) { +export default function Card({ title, children, imageUrl }: CardProps) { return (
+ {imageUrl && }

{title}
{children} diff --git a/apps/website3/src/pages/Home/index.tsx b/apps/website3/src/pages/Home/index.tsx index a500b6677..54b6ec7e2 100644 --- a/apps/website3/src/pages/Home/index.tsx +++ b/apps/website3/src/pages/Home/index.tsx @@ -1,29 +1,42 @@ import Card from '../../components/Card'; import Section from '../../components/Section'; -import './style.css'; export function Home() { return ( -

-
- Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy. - Define relations between notes - or add labels for easy categorization. Using promoted attributes, there's an easy way to - enter structured information about the notes which can later be displayed in other formats such as a - table. - Notes are periodically saved in the background and revisions can be used to check the old content of a note or delete accidental changes. Revisions can also be created on-demand. - Jump quickly to notes across the hierarchy by searching for their title, with - fuzzy matching to account for typos or slight differences. Or search through all the various - commands of the application. - Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth. - Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session. - Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML. - Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes. - Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension. - Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA (progressive web application). - If you have a server instance, you can easily use it to share a subset of your notes with other people. - Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API. -
-
+ <> +
+
+ Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy. + Define relations between notes + or add labels for easy categorization. Using promoted attributes, there's an easy way to + enter structured information about the notes which can later be displayed in other formats such as a + table. + Notes are periodically saved in the background and revisions can be used to check the old content of a note or delete accidental changes. Revisions can also be created on-demand. + Jump quickly to notes across the hierarchy by searching for their title, with + fuzzy matching to account for typos or slight differences. Or search through all the various + commands of the application. + Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth. + Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session. + Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML. + Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes. + Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension. + Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA (progressive web application). + If you have a server instance, you can easily use it to share a subset of your notes with other people. + Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API. +
+
+ +
+
+ The notes are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions, code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or using slash commands. + Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes. + Embed multimedia files such as PDFs, images, videos with an in-application preview. + Arrange shapes, images and text across an infinite canvas, using the same technology behind excalidraw.com. Ideal for diagrams, sketches and visual planning. + Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax. + Organize your thoughts visually or do a brainstorming session by using mind map diagrams. +
+

and others: note map, relation map, saved searches, render note, web views.

+
+ ); } diff --git a/apps/website3/src/pages/Home/style.css b/apps/website3/src/pages/Home/style.css deleted file mode 100644 index f51cfc165..000000000 --- a/apps/website3/src/pages/Home/style.css +++ /dev/null @@ -1,47 +0,0 @@ -img { - margin-bottom: 1.5rem; -} - -img:hover { - filter: drop-shadow(0 0 2em #673ab8aa); -} - -.home section { - margin-top: 5rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 1.5rem; -} - -.resource { - padding: 0.75rem 1.5rem; - border-radius: 0.5rem; - text-align: left; - text-decoration: none; - color: #222; - background-color: #f1f1f1; - border: 1px solid transparent; -} - -.resource:hover { - border: 1px solid #000; - box-shadow: 0 25px 50px -12px #673ab888; -} - -@media (max-width: 639px) { - .home section { - margin-top: 5rem; - grid-template-columns: 1fr; - row-gap: 1rem; - } -} - -@media (prefers-color-scheme: dark) { - .resource { - color: #ccc; - background-color: #161616; - } - .resource:hover { - border: 1px solid #bbb; - } -} diff --git a/apps/website3/src/style.css b/apps/website3/src/style.css index 4609bd361..558ad1062 100644 --- a/apps/website3/src/style.css +++ b/apps/website3/src/style.css @@ -20,6 +20,10 @@ body { color: black; } +a { + color: var(--brand-3); +} + /* #region Header */ header { padding: 1em;