From 60e8f467774cdff66061d7ea9ece85113c93ac9c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 27 Sep 2025 15:38:01 +0300 Subject: [PATCH] feat(website): add help pages to all note types / collections --- apps/website/src/components/Card.tsx | 15 +++++++++++-- apps/website/src/pages/Home/index.tsx | 31 ++++++++++++++++----------- apps/website/src/style.css | 17 +++++++++++++++ 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/apps/website/src/components/Card.tsx b/apps/website/src/components/Card.tsx index 7506a415e..97d7c54cb 100644 --- a/apps/website/src/components/Card.tsx +++ b/apps/website/src/components/Card.tsx @@ -1,20 +1,31 @@ import { ComponentChildren } from "preact"; +import Button from "./Button"; interface CardProps { title: string; imageUrl?: string; className?: string; + moreInfoUrl?: string; children: ComponentChildren; } -export default function Card({ title, children, imageUrl, className }: CardProps) { +export default function Card({ title, children, imageUrl, className, moreInfoUrl }: CardProps) { return (
{imageUrl && }

{title}

- {children} + +
+ {children} +
+ + {moreInfoUrl && ( +
+
+ )}
) diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx index 8f645f14c..afde95c36 100644 --- a/apps/website/src/pages/Home/index.tsx +++ b/apps/website/src/pages/Home/index.tsx @@ -4,7 +4,7 @@ import Section from '../../components/Section'; import DownloadButton from '../../components/DownloadButton'; import "./index.css"; 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 dockerIcon from "../../assets/boxicons/bx-docker.svg?raw"; import { getPlatform } from '../../download-helper'; @@ -93,14 +93,21 @@ function NoteTypesSection() { return (
- 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. + 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.

+

+ and others:{" "} + note map,{" "} + relation map,{" "} + saved searches,{" "} + render note,{" "} + web views. +

); } @@ -109,10 +116,10 @@ function CollectionsSection() { return (
- 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. - Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date & time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table. - 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. - Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries. + 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. + Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date & time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table. + 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. + Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries.
); diff --git a/apps/website/src/style.css b/apps/website/src/style.css index f22b6b667..a05464fb1 100644 --- a/apps/website/src/style.css +++ b/apps/website/src/style.css @@ -81,12 +81,29 @@ img { background-color: var(--card-background-color); border-radius: 16px; overflow: hidden; + display: flex; + flex-direction: column; } .card-content { margin: 0; padding: 1em; 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 {