mirror of
https://github.com/zadam/trilium.git
synced 2025-11-07 15:09:01 +01:00
feat(website): add icons to note types
This commit is contained in:
Elian Doran
parent
6194386464
commit
c2f6d9aa07
1
apps/website/src/assets/boxicons/bx-file.svg
Normal file
1
apps/website/src/assets/boxicons/bx-file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="m19.94 7.68-.03-.09a.8.8 0 0 0-.2-.29l-5-5c-.09-.09-.19-.15-.29-.2l-.09-.03a.8.8 0 0 0-.26-.05c-.02 0-.04-.01-.06-.01H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-12s-.01-.04-.01-.06c0-.09-.02-.17-.05-.26ZM6 20V4h7v4c0 .55.45 1 1 1h4v11z"/></svg>
|
||||
|
After Width: | Height: | Size: 410 B |
1
apps/website/src/assets/boxicons/bx-network-chart.svg
Normal file
1
apps/website/src/assets/boxicons/bx-network-chart.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M19 3c-1.65 0-3 1.35-3 3 0 .5.14.97.35 1.38l-1.12 1.3c-.64-.43-1.41-.69-2.24-.69s-1.53.24-2.15.64l-2.2-1.65c.22-.45.35-.96.35-1.49 0-1.93-1.57-3.5-3.5-3.5s-3.5 1.57-3.5 3.5 1.57 3.5 3.5 3.5c.66 0 1.28-.2 1.81-.52l2.18 1.64c-.3.56-.49 1.2-.49 1.88 0 1 .38 1.9.99 2.6l-1.69 1.69.03.03c-.4-.2-.84-.32-1.32-.32-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3c0-.48-.12-.92-.32-1.32l.03.03 1.95-1.95c.42.15.87.25 1.34.25 2.21 0 4-1.79 4-4 0-.64-.17-1.24-.44-1.78l1.25-1.46c.36.16.76.25 1.19.25 1.65 0 3-1.35 3-3s-1.35-3-3-3ZM7 20c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1M4 5.5C4 4.67 4.67 4 5.5 4S7 4.67 7 5.5 6.33 7 5.5 7 4 6.33 4 5.5m9 8.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m6-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"/></svg>
|
||||
|
After Width: | Height: | Size: 892 B |
1
apps/website/src/assets/boxicons/bx-note.svg
Normal file
1
apps/website/src/assets/boxicons/bx-note.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c.13 0 .26-.03.38-.08s.23-.12.33-.22l7-7c.09-.09.15-.19.2-.29l.03-.09c.03-.08.05-.17.05-.26 0-.02.01-.04.01-.06V5c0-1.1-.9-2-2-2M5 5h14v7h-6c-.55 0-1 .45-1 1v6H5z"/></svg>
|
||||
|
After Width: | Height: | Size: 368 B |
1
apps/website/src/assets/boxicons/bx-pen.svg
Normal file
1
apps/website/src/assets/boxicons/bx-pen.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M17 17.76v-5.35l2.91-2.91L21 8.41c.38-.38.58-.88.58-1.42s-.21-1.04-.59-1.41L18.4 3c-.38-.38-.88-.58-1.41-.58s-1.04.21-1.41.59L13.8 4.8l-2.21 2.21H6.24l-3.35 12.3 1.82 1.82 12.3-3.35Zm0-13.35 2.59 2.58-1.09 1.09-2.59-2.59 1.08-1.08ZM7.77 9h4.65l2.09-2.09L17.1 9.5l-2.09 2.09v4.65L7 18.42l3.43-3.43h.08c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5v.08L5.58 17l2.18-8.01Z"/></svg>
|
||||
|
After Width: | Height: | Size: 541 B |
1
apps/website/src/assets/boxicons/bx-vector-square.svg
Normal file
1
apps/website/src/assets/boxicons/bx-vector-square.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M20 3h-4c-.55 0-1 .45-1 1v1H9V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h1v6H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1h6v1c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1h-1V9h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1M5 5h2v2H5zm2 14H5v-2h2zm12 0h-2v-2h2zm-2-4h-1c-.55 0-1 .45-1 1v1H9v-1c0-.55-.45-1-1-1H7V9h1c.55 0 1-.45 1-1V7h6v1c0 .55.45 1 1 1h1zm2-8h-2V5h2z"/></svg>
|
||||
|
After Width: | Height: | Size: 549 B |
@ -18,8 +18,13 @@ import searchIcon from "../../assets/boxicons/bx-search.svg?raw";
|
||||
import webClipperIcon from "../../assets/boxicons/bx-paperclip.svg?raw";
|
||||
import importExportIcon from "../../assets/boxicons/bx-swap-horizontal.svg?raw";
|
||||
import shareIcon from "../../assets/boxicons/bx-globe.svg?raw";
|
||||
import scriptingIcon from "../../assets/boxicons/bx-code.svg?raw";
|
||||
import codeIcon from "../../assets/boxicons/bx-code.svg?raw";
|
||||
import restApiIcon from "../../assets/boxicons/bx-extension.svg?raw";
|
||||
import textNoteIcon from "../../assets/boxicons/bx-note.svg?raw";
|
||||
import fileIcon from "../../assets/boxicons/bx-file.svg?raw";
|
||||
import canvasIcon from "../../assets/boxicons/bx-pen.svg?raw";
|
||||
import mermaidIcon from "../../assets/boxicons/bx-vector-square.svg?raw";
|
||||
import mindmapIcon from "../../assets/boxicons/bx-network-chart.svg?raw";
|
||||
import { getPlatform } from '../../download-helper';
|
||||
import { useState } from 'preact/hooks';
|
||||
|
||||
@ -118,36 +123,42 @@ function NoteTypesSection() {
|
||||
{
|
||||
title: "Text notes",
|
||||
imageUrl: "./src/assets/type_text.png",
|
||||
iconSvg: textNoteIcon,
|
||||
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html",
|
||||
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."
|
||||
},
|
||||
{
|
||||
title: "Code notes",
|
||||
imageUrl: "./src/assets/type_code.png",
|
||||
iconSvg: codeIcon,
|
||||
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",
|
||||
iconSvg: fileIcon,
|
||||
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",
|
||||
iconSvg: canvasIcon,
|
||||
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",
|
||||
iconSvg: mermaidIcon,
|
||||
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html",
|
||||
description: "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
|
||||
},
|
||||
{
|
||||
title: "Mindmap",
|
||||
imageUrl: "./src/assets/type_mindmap.png",
|
||||
iconSvg: mindmapIcon,
|
||||
moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html",
|
||||
description: "Organize your thoughts visually or do a brainstorming session."
|
||||
}
|
||||
@ -171,7 +182,7 @@ function ExtensibilityBenefitsSection() {
|
||||
<div className="benefits-container grid-4-cols">
|
||||
<Card iconSvg={importExportIcon} title="Import/export" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown/index.html">Easily interact with other applications using Markdown, ENEX, OML formats.</Card>
|
||||
<Card iconSvg={shareIcon} title="Share notes on the web" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/Sharing/Serving%20directly%20the%20content%20o.html">If you have a server, it can be used to share a subset of your notes with other people.</Card>
|
||||
<Card iconSvg={scriptingIcon} title="Advanced scripting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Scripting/Custom%20Widgets/index.html">Build your own integrations within Trilium with custom widgets, or server-side logic.</Card>
|
||||
<Card iconSvg={codeIcon} title="Advanced scripting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Scripting/Custom%20Widgets/index.html">Build your own integrations within Trilium with custom widgets, or server-side logic.</Card>
|
||||
<Card iconSvg={restApiIcon} title="REST API" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/ETAPI%20%28REST%20API%29/index.html">Interact with Trilium programatically using its builtin REST API.</Card>
|
||||
</div>
|
||||
</Section>
|
||||
@ -212,7 +223,7 @@ function CollectionsSection() {
|
||||
}
|
||||
|
||||
function ListWithScreenshot({ items, horizontal, cardExtra }: {
|
||||
items: { title: string, imageUrl: string, description: string, moreInfo: string }[];
|
||||
items: { title: string, imageUrl: string, description: string, moreInfo: string, iconSvg?: string }[];
|
||||
horizontal?: boolean;
|
||||
cardExtra?: ComponentChildren;
|
||||
}) {
|
||||
@ -228,6 +239,7 @@ function ListWithScreenshot({ items, horizontal, cardExtra }: {
|
||||
onMouseEnter={() => setSelectedItem(item)}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
moreInfoUrl={item.moreInfo}
|
||||
iconSvg={item.iconSvg}
|
||||
>
|
||||
{item.description}
|
||||
</Card>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user