diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts index 50fc94580..aca5d3efe 100644 --- a/apps/client/src/services/content_renderer.ts +++ b/apps/client/src/services/content_renderer.ts @@ -285,10 +285,11 @@ function getRenderingType(entity: FNote | FAttachment) { } const mime = "mime" in entity && entity.mime; + const isIconPack = entity instanceof FNote && entity.hasLabel("iconPack"); if (type === "file" && mime === "application/pdf") { type = "pdf"; - } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime)) { + } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime) && !isIconPack) { type = "code"; } else if (type === "file" && mime && mime.startsWith("audio/")) { type = "audio"; diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index 7131f6ab0..8ed03215b 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -206,6 +206,7 @@ span.fancytree-selected .fancytree-title { } span.fancytree-selected .fancytree-custom-icon::before { + font-family: "boxicons"; content: "\eb43"; border: 1px solid var(--main-border-color); border-radius: 3px; diff --git a/apps/icon-pack-builder/.gitignore b/apps/icon-pack-builder/.gitignore deleted file mode 100644 index 6f66c74b0..000000000 --- a/apps/icon-pack-builder/.gitignore +++ /dev/null @@ -1 +0,0 @@ -*.zip \ No newline at end of file diff --git a/apps/icon-pack-builder/src/index.ts b/apps/icon-pack-builder/src/index.ts index f51215992..789eaa419 100644 --- a/apps/icon-pack-builder/src/index.ts +++ b/apps/icon-pack-builder/src/index.ts @@ -1,5 +1,5 @@ -import { createWriteStream, mkdirSync } from "node:fs"; -import { join } from "node:path"; +import { createWriteStream, mkdirSync, writeFileSync } from "node:fs"; +import { join, resolve } from "node:path"; import cls from "@triliumnext/server/src/services/cls.js"; @@ -13,7 +13,8 @@ process.env.TRILIUM_RESOURCE_DIR = "../server/src"; process.env.NODE_ENV = "development"; async function main() { - const outputDir = join(__dirname, "output"); + const outputDir = join(__dirname, "../../website/public/resources/icon-packs"); + const outputMetaDir = join(__dirname, "../../website/src/resources/icon-packs"); mkdirSync(outputDir, { recursive: true }); const i18n = await import("@triliumnext/server/src/services/i18n.js"); @@ -49,7 +50,8 @@ async function main() { }); // Export to zip. - const zipFilePath = join(outputDir, `${iconPack.name}.zip`); + const zipFileName = `${iconPack.name}.zip`; + const zipFilePath = join(outputDir, zipFileName); const fileOutputStream = createWriteStream(zipFilePath); const { exportToZip } = (await import("@triliumnext/server/src/services/export/zip.js")).default; const taskContext = new (await import("@triliumnext/server/src/services/task_context.js")).default( @@ -58,7 +60,15 @@ async function main() { await exportToZip(taskContext, branch, "html", fileOutputStream, false, { skipExtraFiles: true }); await new Promise((resolve) => { fileOutputStream.on("finish", resolve); }); - console.log(`Built icon pack: ${iconPack.name} (${zipFilePath})`); + // Save meta. + const metaFilePath = join(outputMetaDir, `${iconPack.name}.json`); + writeFileSync(metaFilePath, JSON.stringify({ + name: iconPack.name, + file: zipFileName, + ...iconPack.meta + }, null, 2)); + + console.log(`Built icon pack ${iconPack.name}.`); } const builtIconPacks = [ @@ -69,6 +79,8 @@ async function main() { phosphor("fill") ]; await Promise.all(builtIconPacks.map(buildIconPack)); + + console.log(`\n✅ Built icon packs are available at ${resolve(outputDir)}.`); } cls.init(() => { diff --git a/apps/icon-pack-builder/src/provider.ts b/apps/icon-pack-builder/src/provider.ts index 6463113b0..533d592c5 100644 --- a/apps/icon-pack-builder/src/provider.ts +++ b/apps/icon-pack-builder/src/provider.ts @@ -9,5 +9,10 @@ export interface IconPackData { name: string; mime: string; content: Buffer; + }, + meta: { + version: string; + website: string; + description: string; } } diff --git a/apps/icon-pack-builder/src/providers/boxicons3.ts b/apps/icon-pack-builder/src/providers/boxicons3.ts index 23e0de7dc..d2f9187d0 100644 --- a/apps/icon-pack-builder/src/providers/boxicons3.ts +++ b/apps/icon-pack-builder/src/providers/boxicons3.ts @@ -29,7 +29,7 @@ export default function buildIcons(pack: "basic" | "brands"): IconPackData { return { name: pack === "basic" ? "Boxicons 3 (Basic)" : "Boxicons 3 (Brands)", prefix: pack === "basic" ? "bx3" : "bxl3", - icon: pack === "basic" ? "bx3 bx-cube" : "bxl3 bxl-boxicons", + icon: pack === "basic" ? "bx3 bx-cube" : "bxl3 bx-boxicons", fontFile: { name: `${fileName}.woff2`, mime: "font/woff2", @@ -37,6 +37,13 @@ export default function buildIcons(pack: "basic" | "brands"): IconPackData { }, manifest: { icons + }, + meta: { + version: "3.0.0", + website: "https://boxicons.com/", + description: pack === "basic" + ? "The Basic set of icons from Boxicons v3. This is an upgrade from Trilium's built-in icon pack (Boxicons v2)." + : "The brand set of icons from Boxicons v3." } }; } diff --git a/apps/icon-pack-builder/src/providers/mdi.ts b/apps/icon-pack-builder/src/providers/mdi.ts index 7e35bb51c..381818d90 100644 --- a/apps/icon-pack-builder/src/providers/mdi.ts +++ b/apps/icon-pack-builder/src/providers/mdi.ts @@ -7,6 +7,7 @@ import { extractClassNamesFromCss, getModulePath } from "../utils"; export default function buildIcons(): IconPackData { const baseDir = getModulePath("@mdi/font"); + const packageJson = JSON.parse(readFileSync(join(baseDir, "package.json"), "utf-8")); const cssFilePath = join(baseDir, "css", "materialdesignicons.min.css"); const cssFileContent = readFileSync(cssFilePath, "utf-8"); @@ -21,6 +22,11 @@ export default function buildIcons(): IconPackData { name: "materialdesignicons-webfont.woff2", mime: "font/woff2", content: readFileSync(join(baseDir, "fonts", "materialdesignicons-webfont.woff2")) + }, + meta: { + version: packageJson.version, + website: "https://pictogrammers.com/library/mdi/", + description: "The community Material Design Icons pack (@mdi/font). Not to be confused with Google's own Material Design Icons." } }; } diff --git a/apps/icon-pack-builder/src/providers/phosphor.ts b/apps/icon-pack-builder/src/providers/phosphor.ts index 0280d5653..5c6a3e225 100644 --- a/apps/icon-pack-builder/src/providers/phosphor.ts +++ b/apps/icon-pack-builder/src/providers/phosphor.ts @@ -5,7 +5,9 @@ import { IconPackData } from "../provider"; import { getModulePath } from "../utils"; export default function buildIcons(packName: "regular" | "fill"): IconPackData { - const baseDir = join(getModulePath("@phosphor-icons/web"), "src", packName); + const moduleDir = getModulePath("@phosphor-icons/web"); + const baseDir = join(moduleDir, "src", packName); + const packageJson = JSON.parse(readFileSync(join(moduleDir, "package.json"), "utf-8")); const iconIndex = JSON.parse(readFileSync(join(baseDir, "selection.json"), "utf-8")); const icons: IconPackData["manifest"]["icons"] = {}; @@ -41,6 +43,13 @@ export default function buildIcons(packName: "regular" | "fill"): IconPackData { name: fontFile!, mime: "font/woff2", content: readFileSync(join(baseDir, fontFile!)) + }, + meta: { + version: packageJson.version, + website: "https://phosphoricons.com/", + description: packName === "regular" + ? "The regular weight version of Phosphor Icons." + : "The filled version of Phosphor Icons." } }; } diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Bookmarks.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Bookmarks.html index 7f0709d8b..07943c992 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Bookmarks.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Bookmarks.html @@ -1,10 +1,10 @@

Frequently used notes can be bookmarked, which will make them appear in - the Launch Bar for + the Launch Bar for easy access.

Configuring the launch bar

If bookmarks don't appear in the launch bar, then most likely the bookmark - section has been hidden. Go to the Launch Bar configuration - from the Global menu and + section has been hidden. Go to the Launch Bar configuration + from the Global menu and ensure Bookmarks is in the Visible Launchers section.

Bookmark folder

Space in the left panel is limited, and you might want to bookmark many diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html index 371ca190b..5d41a2394 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html @@ -1,73 +1,85 @@ -

Importing an existing icon pack

+
+ +
+

By default, Trilium comes with a set of icons called Boxicons v2. Since + v0.102.0, custom icon packs allow a wider selection of icons for notes.

Icon packs are specific to Trilium, so they must either be created from scratch (see below) or imported from a ZIP file from a third-party developer.

- +

To import an icon pack:

+
    +
  1. Ideally, create a dedicated spot in your note tree where to place the + icon packs.
    2. +
  2. Right click the note where to put it and select Import into note.
    3. +
  3. Uncheck Safe import.
  4. Select Import.
  5. Refresh the application.
    6. -
- -

Creating an icon pack

-

Creating an icon pack requires some scripting knowledge outside Trilium - in order to generate the list of icons. For information, see Creating an icon pack.

-

Using an icon from an icon pack

-

After refreshing the application, the - icon pack should be enabled by default. To test this, simply select an - existing note or create a new one and try to change the note icon.

-

There should be a Filter button to the right of the search bar - in the icon list. Clicking it allows filtering by icon pack and the newly - imported icon pack should be displayed there.

- -

Integration with the share and export functionality

-

Custom icon packs are also supported by the Sharing feature, where they will be - shown in the note tree. However, in order for an icon pack to be visible - to the share function, the icon pack note must also be shared.

-

If you are using a custom share theme, make sure it supports the - iconPackCss, otherwise icons will not show up. Check the original - share template source code for reference.

-

Custom icon packs will also be preserved when Exporting static HTML for web publishing. - In this case, there's no requirement to make the icon pack shared.

-

What happens if I remove an icon pack

-

If an icon pack is removed or disabled (by removing or altering its - #iconPacklabel), all the notes that use this icon pack will show - in the Note Tree with - no icon. This won't cause any issues apart from looking strange.

-

The solution is to replace the icons with some else, try using  - Search which supports bulk actions, to identify the notes with - the now deleted icon pack (by looking for the prefix) and changing or removing - their iconClass.

\ No newline at end of file + + +

Creating an icon pack

+

Creating an icon pack requires some scripting knowledge outside Trilium + in order to generate the list of icons. For information, see Creating an icon pack.

+

Using an icon from an icon pack

+

After refreshing the application, the + icon pack should be enabled by default. To test this, simply select an + existing note or create a new one and try to change the note icon.

+

There should be a Filter button to the right of the search bar + in the icon list. Clicking it allows filtering by icon pack and the newly + imported icon pack should be displayed there.

+ +

Integration with the share and export functionality

+

Custom icon packs are also supported by the Sharing feature, where they will be + shown in the note tree. However, in order for an icon pack to be visible + to the share function, the icon pack note must also be shared.

+

If you are using a custom share theme, make sure it supports the + iconPackCss, otherwise icons will not show up. Check the original + share template source code for reference.

+

Custom icon packs will also be preserved when Exporting static HTML for web publishing. + In this case, there's no requirement to make the icon pack shared.

+

What happens if I remove an icon pack

+

If an icon pack is removed or disabled (by removing or altering its + #iconPacklabel), all the notes that use this icon pack will show + in the Note Tree with + no icon. This won't cause any issues apart from looking strange.

+

The solution is to replace the icons with some else, try using  + Search which supports bulk actions, to identify the notes with + the now deleted icon pack (by looking for the prefix) and changing or removing + their iconClass.

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs_image.png new file mode 100644 index 000000000..2730befaa Binary files /dev/null and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html index 94d5b166a..131a85cb7 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html @@ -1,7 +1,7 @@

Position of the Launch bar

On desktop, depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or - at the top of the screen. See Vertical and horizontal layout for + at the top of the screen. See Vertical and horizontal layout for more information.

On mobile, the launch bar will always be at the bottom.

If there are too many items in the launch bar to fit the screen, it will @@ -21,10 +21,10 @@

  • Right click in the empty space between launchers on the launch bar and select Configure Launchbar.
    • -
  • Click on the Global menu and +
  • Click on the Global menu and select Configure Launchbar.
    • -

    This will open a new tab with the Note Tree listing +

    This will open a new tab with the Note Tree listing the launchers.

    @@ -37,11 +37,10 @@ one. The reasoning is that not all desktop icons are available on mobile, and fewer icons fit on a mobile screen.

    To configure the launch bar on mobile, go to Global menu and - select Configure Launchbar.

    + href="#root/_help_x3i7MxGccDuM">Global menu and select Configure Launchbar.

    The configure the mobile launch bar while on the desktop (especially useful to configure more complicated launchers such as scripts or custom widgets), - go to Global menu → + go to Global menu → Advanced → Show Hidden Subtree and look for the Mobile Launch Bar section. While in the hidden subtree, it's also possible to drag launchers between the Mobile Launch Bar and (Desktop) Launch Bar sections.

    @@ -52,13 +51,13 @@

    Similarly, to remove it from the launch bar, simply look for it in Visible Launchers then right click it and select Move to available launchers or use drag-and-drop.

    Drag-and-drop the items in the tree in order to change their - order. See Note Tree for + order. See Note Tree for more interaction options, including using keyboard shortcuts.

    Customizing the launcher

    Resetting

    @@ -70,39 +69,43 @@

    Right click either the Available launchers or Visible launchers sections and select one of the options:

      -
    1. Note Launcher -
      A note launcher will simply navigate to a specified note. +
    2. +

      Note Launcher +
      A note launcher will simply navigate to a specified note.

      1. Set the target promoted attribute to the note to navigate to.
      2. Optionally, set hoistedNote to hoist a particular - note. See Note Hoisting for + note. See Note Hoisting for more information.
      3. Optionally, set a keyboardShortcut to trigger the launcher.
      3. -
    3. Script Launcher -
      An advanced launcher which will run a script upon pressing. See  - Scripting for more information. -
        -
      1. Set script to point to the desired script - to run.
        2. -
      2. Optionally, set a keyboardShortcut to trigger - the launcher.
        3. -
      +
    4. +

      Script Launcher +
      An advanced launcher which will run a script upon pressing. See  + Scripting for more information.

      +
        +
      1. Set script to point to the desired script + to run.
        2. +
      2. Optionally, set a keyboardShortcut to trigger + the launcher.
        3. +
      5. -
    5. +

    6. Custom Widget

      Allows defining a custom widget to be rendered inside the launcher. See  Widget Basics for more information.

      + class="reference-link" href="#root/_help_SynTBQiBsdYJ">Widget Basics for more information.

      +
      7. +
    7. +

      Spacers +
      Launchers that create some distance between other launchers for better + visual distinction.

      8. -
    8. Spacers -
      Launchers that create some distance between other launchers for better - visual distinction.

    Launchers are configured via predefined Promoted Attributes.

    \ No newline at end of file + href="#root/_help_OFXdgB2nNk1F">Promoted Attributes.

    \ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Split View.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Split View.html index 78897057f..654913293 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Split View.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Split View.html @@ -4,7 +4,8 @@ class="image image-style-align-center"> -

    Interactions

    + +

    Interactions