fix(website): discrepancies in production build
| @@ -2,7 +2,7 @@ | |||||||
| <html lang="en"> | <html lang="en"> | ||||||
| 	<head> | 	<head> | ||||||
| 		<meta charset="UTF-8" /> | 		<meta charset="UTF-8" /> | ||||||
| 		<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.ico" /> | 		<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> | ||||||
| 		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||||
| 		<meta name="color-scheme" content="light dark" /> | 		<meta name="color-scheme" content="light dark" /> | ||||||
| 		<title>Trilium Notes</title> | 		<title>Trilium Notes</title> | ||||||
|   | |||||||
| Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB | 
| Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB | 
| Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 229 KiB | 
| Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB | 
| Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB | 
| Before Width: | Height: | Size: 804 KiB After Width: | Height: | Size: 804 KiB | 
| Before Width: | Height: | Size: 785 KiB After Width: | Height: | Size: 785 KiB | 
| Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB | 
| Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB | 
| Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 253 KiB | 
| Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB | 
| Before Width: | Height: | Size: 375 KiB After Width: | Height: | Size: 375 KiB | 
| Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB | 
| Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB | 
| Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB | 
| @@ -1,15 +0,0 @@ | |||||||
| <svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"> |  | ||||||
|     <defs> |  | ||||||
|         <linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"> |  | ||||||
|             <stop offset="0%" stop-color="#41D1FF"></stop> |  | ||||||
|             <stop offset="100%" stop-color="#BD34FE"></stop> |  | ||||||
|         </linearGradient> |  | ||||||
|         <linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"> |  | ||||||
|             <stop offset="0%" stop-color="#FFEA83"></stop> |  | ||||||
|             <stop offset="8.333%" stop-color="#FFDD35"></stop> |  | ||||||
|             <stop offset="100%" stop-color="#FFA800"></stop> |  | ||||||
|         </linearGradient> |  | ||||||
|     </defs> |  | ||||||
|     <path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path> |  | ||||||
|     <path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path> |  | ||||||
| </svg> |  | ||||||
| Before Width: | Height: | Size: 1.5 KiB | 
| @@ -11,6 +11,8 @@ export function usePageTitle(title: string) { | |||||||
| } | } | ||||||
|  |  | ||||||
| export function useColorScheme() { | export function useColorScheme() { | ||||||
|  |     if (typeof window === "undefined") return; | ||||||
|  |  | ||||||
|     const [ prefersDark, setPrefersDark ] = useState((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)); |     const [ prefersDark, setPrefersDark ] = useState((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)); | ||||||
|  |  | ||||||
|     useEffect(() => { |     useEffect(() => { | ||||||
|   | |||||||
| @@ -56,13 +56,13 @@ function HeroSection() { | |||||||
|  |  | ||||||
|     switch (platform) { |     switch (platform) { | ||||||
|         case "macos": |         case "macos": | ||||||
|             screenshotUrl = `./src/assets/screenshot_desktop_mac_${colorScheme}.png`; |             screenshotUrl = `/screenshot_desktop_mac_${colorScheme}.png`; | ||||||
|             break; |             break; | ||||||
|         case "linux": |         case "linux": | ||||||
|             break; |             break; | ||||||
|         case "windows": |         case "windows": | ||||||
|         default: |         default: | ||||||
|             screenshotUrl = `./src/assets/screenshot_desktop_win_${colorScheme}.png`; |             screenshotUrl = `/screenshot_desktop_win_${colorScheme}.png`; | ||||||
|             break; |             break; | ||||||
|     } |     } | ||||||
|  |  | ||||||
| @@ -126,42 +126,42 @@ function NoteTypesSection() { | |||||||
|             <ListWithScreenshot horizontal items={[ |             <ListWithScreenshot horizontal items={[ | ||||||
|                 { |                 { | ||||||
|                     title: "Text notes", |                     title: "Text notes", | ||||||
|                     imageUrl: "./src/assets/type_text.png", |                     imageUrl: "/type_text.png", | ||||||
|                     iconSvg: textNoteIcon, |                     iconSvg: textNoteIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html", |                     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." |                     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", |                     title: "Code notes", | ||||||
|                     imageUrl: "./src/assets/type_code.png", |                     imageUrl: "/type_code.png", | ||||||
|                     iconSvg: codeIcon, |                     iconSvg: codeIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Code.html", |                     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." |                     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", |                     title: "File notes", | ||||||
|                     imageUrl: "./src/assets/type_file.png", |                     imageUrl: "/type_file.png", | ||||||
|                     iconSvg: fileIcon, |                     iconSvg: fileIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/File.html", |                     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." |                     description: "Embed multimedia files such as PDFs, images, videos with an in-application preview." | ||||||
|                 }, |                 }, | ||||||
|                 { |                 { | ||||||
|                     title: "Canvas", |                     title: "Canvas", | ||||||
|                     imageUrl: "./src/assets/type_canvas.png", |                     imageUrl: "/type_canvas.png", | ||||||
|                     iconSvg: canvasIcon, |                     iconSvg: canvasIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Canvas.html", |                     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." |                     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", |                     title: "Mermaid diagrams", | ||||||
|                     imageUrl: "./src/assets/type_mermaid.png", |                     imageUrl: "/type_mermaid.png", | ||||||
|                     iconSvg: mermaidIcon, |                     iconSvg: mermaidIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html", |                     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." |                     description: "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax." | ||||||
|                 }, |                 }, | ||||||
|                 { |                 { | ||||||
|                     title: "Mindmap", |                     title: "Mindmap", | ||||||
|                     imageUrl: "./src/assets/type_mindmap.png", |                     imageUrl: "/type_mindmap.png", | ||||||
|                     iconSvg: mindmapIcon, |                     iconSvg: mindmapIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html", |                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html", | ||||||
|                     description: "Organize your thoughts visually or do a brainstorming session." |                     description: "Organize your thoughts visually or do a brainstorming session." | ||||||
| @@ -200,7 +200,7 @@ function CollectionsSection() { | |||||||
|             <ListWithScreenshot items={[ |             <ListWithScreenshot items={[ | ||||||
|                 { |                 { | ||||||
|                     title: "Calendar", |                     title: "Calendar", | ||||||
|                     imageUrl: "./src/assets/collection_calendar.png", |                     imageUrl: "/collection_calendar.png", | ||||||
|                     iconSvg: calendarIcon, |                     iconSvg: calendarIcon, | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html", |                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html", | ||||||
|                     description: "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." |                     description: "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." | ||||||
| @@ -208,20 +208,20 @@ function CollectionsSection() { | |||||||
|                 { |                 { | ||||||
|                     title: "Table", |                     title: "Table", | ||||||
|                     iconSvg: tableIcon, |                     iconSvg: tableIcon, | ||||||
|                     imageUrl: "./src/assets/collection_table.png", |                     imageUrl: "/collection_table.png", | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html", |                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html", | ||||||
|                     description: "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." }, |                     description: "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." }, | ||||||
|                 { |                 { | ||||||
|                     title: "Board", |                     title: "Board", | ||||||
|                     iconSvg: boardIcon, |                     iconSvg: boardIcon, | ||||||
|                     imageUrl: "./src/assets/collection_board.png", |                     imageUrl: "/collection_board.png", | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html", |                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html", | ||||||
|                     description: "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." |                     description: "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." | ||||||
|                 }, |                 }, | ||||||
|                 { |                 { | ||||||
|                     title: "Geomap", |                     title: "Geomap", | ||||||
|                     iconSvg: geomapIcon, |                     iconSvg: geomapIcon, | ||||||
|                     imageUrl: "./src/assets/collection_geomap.png", |                     imageUrl: "/collection_geomap.png", | ||||||
|                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html", |                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html", | ||||||
|                     description: "Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries." |                     description: "Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries." | ||||||
|                 } |                 } | ||||||
|   | |||||||