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;