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): use list with screenshot for note types

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 18:47:45 +03:00
parent d7aa95ce8e
commit e04165a184
No known key found for this signature in database
1 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,15 +112,45 @@ function BenefitsSection() {
function NoteTypesSection() { function NoteTypesSection() {
return ( return (
<Section className="note-types accented" title="Note types"> <Section className="note-types accented" title="Various ways to represent your information">
<div class="note-types-container grid-3-cols"> <ListWithScreenshot items={[
<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" 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> title: "Text notes",
<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> imageUrl: "./src/assets/type_text.png",
<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> moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html",
<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> description: "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 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> {
title: "Code notes",
imageUrl: "./src/assets/type_code.png",
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Code.html",
description: "Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes."
},
{
title: "File notes",
imageUrl: "./src/assets/type_file.png",
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/File.html",
description: "Embed multimedia files such as PDFs, images, videos with an in-application preview."
},
{
title: "Canvas",
imageUrl: "./src/assets/type_canvas.png",
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Canvas.html",
description: "Arrange shapes, images and text across an infinite canvas, using the same technology behind excalidraw.com. Ideal for diagrams, sketches and visual planning."
},
{
title: "Mermaid diagrams",
imageUrl: "./src/assets/type_mermaid.png",
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html",
description: "Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
},
{
title: "Mindmap",
imageUrl: "./src/assets/type_mindmap.png",
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html",
description: "Organize your thoughts visually or do a brainstorming session."
}
]} />
<p> <p>
and others:{" "} 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/Note%20Map.html" openExternally>note map</Link>,{" "}
@ -191,9 +221,12 @@ function ListWithScreenshot({ items }: {
</ul> </ul>
<div className="details"> <div className="details">
<h3>{selectedItem.title}</h3> {selectedItem && (
<>
<img src={selectedItem.imageUrl} /> <h3>{selectedItem.title}</h3>
<img src={selectedItem.imageUrl} />
</>
)}
</div> </div>
</div> </div>
) )