gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 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:59:51 +03:00
parent e04165a184
commit b6088f488f
No known key found for this signature in database
2 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/website/src/pages/Home/index.css
View File

@ -204,4 +204,41 @@ section.final-cta .buttons .button {
.list-with-screenshot .details {
flex-basis: 50%;
flex-shrink: 0;
}
.list-with-screenshot.horizontal {
flex-direction: column-reverse;
}
.list-with-screenshot.horizontal ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
.list-with-screenshot.horizontal li {
margin: 0;
}
.list-with-screenshot.horizontal .card {
height: 100%;
}
.list-with-screenshot.horizontal h3 {
color: var(--brand-1);
}
.list-with-screenshot.horizontal .details {
max-height: 35vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.list-with-screenshot.horizontal .details img {
height: 100%;
width: auto;
object-fit: contain;
}

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

@ -112,8 +112,8 @@ function BenefitsSection() {
function NoteTypesSection() {
return (
<Section className="note-types accented" title="Various ways to represent your information">
<ListWithScreenshot items={[
<Section className="note-types accented" title="Multiple ways to represent your information">
<ListWithScreenshot horizontal items={[
{
title: "Text notes",
imageUrl: "./src/assets/type_text.png",
@ -142,7 +142,7 @@ function NoteTypesSection() {
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."
description: "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
},
{
title: "Mindmap",
@ -195,13 +195,15 @@ function CollectionsSection() {
);
}
function ListWithScreenshot({ items }: {
function ListWithScreenshot({ items, horizontal, cardExtra }: {
items: { title: string, imageUrl: string, description: string, moreInfo: string }[];
horizontal?: boolean;
cardExtra?: ComponentChildren;
}) {
const [ selectedItem, setSelectedItem ] = useState(items[0]);
return (
<div className="list-with-screenshot">
<div className={`list-with-screenshot ${horizontal ? "horizontal" : ""}`}>
<ul>
{items.map(item => (
<li className={`${item === selectedItem ? "selected" : ""}`}>
@ -223,7 +225,6 @@ function ListWithScreenshot({ items }: {
<div className="details">
{selectedItem && (
<>
<h3>{selectedItem.title}</h3>
<img src={selectedItem.imageUrl} />
</>
)}