Logseq Plugin Samples

The Base16 LoqSeq theme provides:

• Compatibility: Supports Logseq v0.0.4.1.
• Theming: Basic color scheme application.
• Editor Support: Includes styles for CodeMirror.

The plugin demonstrates how to manipulate a Logseq DB graph using the logseq.Editor API. Key methods used in index.tsx include:

• Creating Metadata & Tags:

  • logseq.Editor.upsertProperty(...): Creates or updates properties.
  • logseq.Editor.createTag(...): Creates new tags like #movie or #director.
  • logseq.Editor.addTagProperty(...): Attaches properties specifically to a tag.

• Importing Individual Items:

  • logseq.Editor.createPage(...): Creates the actual movie page.
  • logseq.Editor.addBlockTag(...): Applies tags to specific blocks/pages.
  • logseq.Editor.upsertBlockProperty(...): Sets property values on a block.

Performance Tip: The plugin uses a 100ms throttle between imports via setTimeout to avoid overwhelming the Logseq process.

To run this sample locally, ensure you are using at least Logseq App version 0.4.6. Follow these steps:

1. Build the project: Run the following commands in your terminal to install dependencies and build the plugin:

   yarn && yarn build

2. Install in Logseq: Open the Logseq Desktop client, go to the plugin settings, and select 'Load unpacked plugin', then point to the directory containing the built files.

To use or develop this plugin, you must meet the following requirements:

• Logseq Desktop: The latest version.
• DB Graph: This plugin specifically uses DB property APIs, which are only available in Logseq DB graphs.
• Node.js: LTS version is recommended for development.

The plugin uses Vite and React 18. To start developing:

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. In Logseq, enable Developer mode and load the plugin from the project folder.

The development entry point is configured in package.json at http://localhost:5173.

To build the plugin for production:

npm run build

To run this sample plugin locally, follow these steps:

1. Build the project: Open your terminal in the plugin directory and run:

   npm install && npm run build

2. Load into Logseq: Open the Logseq Desktop client, go to the plugin settings, and select Load unpacked plugin to point to the built plugin directory.

Follow these steps to run a sample plugin from this repository in your local Logseq instance:

1. Clone the repository:

   git clone https://github.com/logseq/logseq-plugin-samples

2. Enable Developer Mode: Open the Logseq Desktop client, go to the user settings panel, and turn on Developer mode.
3. Prepare the sample: Navigate to the specific sample directory. Check its README.md to see if it requires a build step. If it does, run:

   npm install && npm run build

4. Open Plugins Dashboard: In Logseq, use the keyboard shortcut <kbd>t</kbd><kbd>p</kbd> to navigate to the plugins page.
5. Load the plugin: Click the Load unpacked plugin button and select the directory of the sample you wish to load.

Note: To ensure stability and performance, keep the @logseq/libs SDK up-to-date.

You can apply Base16 color schemes to Logseq using one of two methods:

1. Manual Installation:

   • Browse the css folder in this repository to find a color scheme you like.
   • Copy the contents of that CSS file.
   • Paste the contents into your Logseq configuration file at logseq/custom.css.

2. Browser Extension:

   • Use a CSS management tool like Stylus to apply the styles.

To run this sample plugin, use the Logseq Desktop client's plugin management interface:

1. Open Logseq Desktop.
2. Select the option Load unpacked plugin.
3. Navigate to and select the directory containing this sample.

To run this sample plugin locally in Logseq Desktop, follow these steps:

1. Install dependencies and build the project:

   npm install && npm run build

2. Open the Logseq Desktop client.
3. Use the Load unpacked plugin option to select the built plugin directory.

To run and develop Logseq plugin samples, you need the following installed on your system:

1. Node.js and npm (or yarn): Required to manage dependencies and build the samples.
2. Logseq Desktop App: The latest version from the Logseq releases page.

If you are unsure how to install Node.js, it is recommended to use Node Version Manager (NVM). You can install NVM via their installation script, then install Node using:

nvm install 22 # For current version
# OR
nvm install 20 # For LTS version

To run this sample plugin locally, follow these steps:

1. Install dependencies and build the project using npm:

   npm install && npm run build

2. Open the Logseq Desktop client.
3. Use the Load unpacked plugin option to select the built plugin directory.