gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat(website): add help pages to all note types / collections

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 15:38:01 +03:00
parent ef2860770f
commit 60e8f46777
No known key found for this signature in database
3 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/website/src/components/Card.tsx
View File

@ -1,20 +1,31 @@
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Button from "./Button";
interface CardProps { interface CardProps {
title: string; title: string;
imageUrl?: string; imageUrl?: string;
className?: string; className?: string;
moreInfoUrl?: string;
children: ComponentChildren; children: ComponentChildren;
} }
export default function Card({ title, children, imageUrl, className }: CardProps) { export default function Card({ title, children, imageUrl, className, moreInfoUrl }: CardProps) {
return ( return (
<div className={`card ${className}`}> <div className={`card ${className}`}>
{imageUrl && <img class="image" src={imageUrl} />} {imageUrl && <img class="image" src={imageUrl} />}
<div className="card-content"> <div className="card-content">
<h3>{title}</h3> <h3>{title}</h3>
{children}
<div className="card-content-inner">
{children}
</div>
{moreInfoUrl && (
<div className="more-info-container">
<Button href={moreInfoUrl} className="more-info" text="More info" outline openExternally />
</div>
)}
</div> </div>
</div> </div>
) )

31
apps/website/src/pages/Home/index.tsx
View File

@ -4,7 +4,7 @@ import Section from '../../components/Section';
import DownloadButton from '../../components/DownloadButton'; import DownloadButton from '../../components/DownloadButton';
import "./index.css"; import "./index.css";
import { useColorScheme, usePageTitle } from '../../hooks'; import { useColorScheme, usePageTitle } from '../../hooks';
import Button from '../../components/Button'; import Button, { Link } from '../../components/Button';
import gitHubIcon from "../../assets/boxicons/bx-github.svg?raw"; import gitHubIcon from "../../assets/boxicons/bx-github.svg?raw";
import dockerIcon from "../../assets/boxicons/bx-docker.svg?raw"; import dockerIcon from "../../assets/boxicons/bx-docker.svg?raw";
import { getPlatform } from '../../download-helper'; import { getPlatform } from '../../download-helper';
@ -93,14 +93,21 @@ function NoteTypesSection() {
return ( return (
<Section className="note-types" title="Note types"> <Section className="note-types" title="Note types">
<div class="note-types-container grid-3-cols"> <div class="note-types-container grid-3-cols">
<Card title="Text notes" imageUrl="./src/assets/type_text.png">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.</Card> <Card title="Text notes" imageUrl="./src/assets/type_text.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html">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.</Card>
<Card title="Code notes" imageUrl="./src/assets/type_code.png">Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes.</Card> <Card title="Code notes" imageUrl="./src/assets/type_code.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Code.html">Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes.</Card>
<Card title="File notes" imageUrl="./src/assets/type_file.png">Embed multimedia files such as PDFs, images, videos with an in-application preview.</Card> <Card title="File notes" imageUrl="./src/assets/type_file.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/File.html">Embed multimedia files such as PDFs, images, videos with an in-application preview.</Card>
<Card title="Canvas" imageUrl="./src/assets/type_canvas.png">Arrange shapes, images and text across an infinite canvas, using the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>. Ideal for diagrams, sketches and visual planning.</Card> <Card title="Canvas" imageUrl="./src/assets/type_canvas.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Canvas.html">Arrange shapes, images and text across an infinite canvas, using the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>. Ideal for diagrams, sketches and visual planning.</Card>
<Card title="Mermaid diagrams" imageUrl="./src/assets/type_mermaid.png">Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and many more, using the Mermaid syntax.</Card> <Card title="Mermaid diagrams" imageUrl="./src/assets/type_mermaid.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html">Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and many more, using the Mermaid syntax.</Card>
<Card title="Mindmap" imageUrl="./src/assets/type_mindmap.png">Organize your thoughts visually or do a brainstorming session by using <a href="https://en.wikipedia.org/wiki/Mind_map">mind map diagrams</a>.</Card> <Card title="Mindmap" imageUrl="./src/assets/type_mindmap.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html">Organize your thoughts visually or do a brainstorming session by using <a href="https://en.wikipedia.org/wiki/Mind_map">mind map diagrams</a>.</Card>
</div> </div>
<p>and others: note map, relation map, saved searches, render note, web views.</p> <p>
and others:{" "}
<Link href="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Note%20Map.html" openExternally>note map</Link>,{" "}
<Link href="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Relation%20Map.html" openExternally>relation map</Link>,{" "}
<Link href="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Saved%20Search.html" openExternally>saved searches</Link>,{" "}
<Link href="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Render%20Note.html" openExternally>render note</Link>,{" "}
<Link href="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Web%20View.html" openExternally>web views</Link>.
</p>
</Section> </Section>
); );
} }
@ -109,10 +116,10 @@ function CollectionsSection() {
return ( return (
<Section className="collections" title="Collections"> <Section className="collections" title="Collections">
<div className="collections-container grid-2-cols"> <div className="collections-container grid-2-cols">
<Card title="Calendar" imageUrl="./src/assets/collection_calendar.png">Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events.</Card> <Card title="Calendar" imageUrl="./src/assets/collection_calendar.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html">Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events.</Card>
<Card title="Table" imageUrl="./src/assets/collection_table.png">Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date &amp; time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table.</Card> <Card title="Table" imageUrl="./src/assets/collection_table.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html">Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date &amp; time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table.</Card>
<Card title="Board" imageUrl="./src/assets/collection_board.png">Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board.</Card> <Card title="Board" imageUrl="./src/assets/collection_board.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html">Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board.</Card>
<Card title="Geomap" imageUrl="./src/assets/collection_geomap.png">Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries.</Card> <Card title="Geomap" imageUrl="./src/assets/collection_geomap.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html">Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries.</Card>
</div> </div>
</Section> </Section>
); );

17
apps/website/src/style.css
View File

@ -81,12 +81,29 @@ img {
background-color: var(--card-background-color); background-color: var(--card-background-color);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
} }
.card-content { .card-content {
margin: 0; margin: 0;
padding: 1em; padding: 1em;
color: var(--muted-color); color: var(--muted-color);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-content .more-info-container {
margin-top: 0.5em;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-content .more-info {
font-size: 0.9em;
} }
.card h3 { .card h3 {