datopian / obsidian-flowershow

Obsidian Flowershow plugin for publishing with Flowershow direct from your obsidian vault.
MIT License
55 stars 4 forks source link
flowershow obsidian-plugin

🌷 Obsidian Flowershow Plugin

Obsidian Flowershow plugin for publishing with Flowershow direct from your Obsidian vault.

Docs

Initial Setup

  1. Firstly, you will need a GitHub account. If you don't have it yet, create one here.
  2. You'll also need a Vercel account. You can sign up using your GitHub account here
  3. Open this repo, and click the blue "Deploy" button under "Quick clone and deploy" section. This will open Vercel's "Create Git Repository" page. Pick a name for your site's repository and click "Create", to create a copy of the template repository in your GitHub account and deploy it to Vercel.
  4. Now you need to create a personal access token on GitHub, so that the plugin can add/delete notes to/from the repo. Go to this page while logged in to GitHub. The correct settings should already be applied. If you don't want to generate this every few months, choose the "No expiration" option. Click the "Generate token" button, and copy the token you are presented with on the next page.
  5. In Obsidian open Flowershow plugin settings. Fill in your GitHub username, the name of the repo with your notes which you created in step 3. Lastly paste the token you created in step 4.
  6. Now, let's publish your first note! Create a new note in Obsidian.
  7. Open your command pallete by pressing CTRL+P on Windows/Linux (CMD+P on Mac) and find the "Flowershow: Publish Single Note" command. Press enter.
  8. Go to your site's URL which you should find on Vercel. If nothing shows up yet, wait a minute and refresh. Your Flowershow site with the note you just created should now be up and running.

Congratulations, you now have your own Flowershow site, hosted free of charge! You can now start adding links as you usually would in Obisidan, with double square brackets like this: [[Some Other Note]], to the note that you just published. You can also link to a specific header by using the syntax [[Some Other Note#A Header]]. Remember to also publish the notes your are linking to as this will not happen automatically.

Commands

Ribbon commands

After installing the plugin, you'll see a new icon added to your Obsidian ribbon - 🌱. Clicking on it will pull up the Publication Status panel, which includes:

Frontmatter settings

Development

Local testing

  1. Clone the repository.
  2. Run npm i to install dependencies.
  3. Run npm run build.
  4. Create symlinks to the main.js, manifest.json, and styles.css files in your Obsidian plugins folder:
ln -s /path/to/obsidian-flowershow/main.js /path/to/obsidian-vault/.obsidian/plugins/flowershow/main.js
ln -s /path/to/obsidian-flowershow/manifest.json /path/to/obsidian-vault/.obsidian/plugins/flowershow/manifest.json
ln -s /path/to/obsidian-flowershow/styles.css /path/to/obsidian-vault/.obsidian/plugins/flowershow/styles.css
  1. Reload Obsidian, go to Settings > Community Plugins, and enable the plugin.

Rebuild on change

If you want to automatically rebuild the plugin after you make any changes to the source code, run npm run dev instead of npm run build. This will start a server that will watch for changes to the source files and rebuild the plugin automatically. However, you will still need to reload Obsidian manually each time to see the changes.

Hot reloading

If you want true hot reloading, i.e. without needing to disable/enable the plugin:

  1. Install Hot-Reload plugin:
    • download the .zip file from the latest release
    • extract the .zip file into your Obsidian vault's .obsidian/plugins folder
    • go to Settings > Community Plugins and enable the plugin
  2. Instead of creating symlinks like in step 4 above, copy the plugin files directly into your Obsidian vault's .obsidian/plugins folder:
mv /path/to/obsidian-flowershow /path/to/obsidian-vault/.obsidian/plugins/
  1. Run npm run dev to start the server.

Now, whenever you make any changes to the source code, two things will happen:

  1. The plugin will be rebuilt automatically.
  2. The Hot-Reload plugin will detect that the plugin has been rebuilt and will reload it in Obsidian.

Shoutout

Big thanks to Ole Eskild Steensen for his obsidian-digital-garden plugin which inspired us and we got to build on.