Merge branch 'documentation-pages'

.github/workflows/deploy.yml

@@ -0,0 +1,56 @@
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: [main]
+
+  # Allows you to run this workflow manually from the Actions tab.
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build with VitePress
+        run: |
+          pnpm docs:build
+          touch docs/.vitepress/dist/.nojekyll
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -21,3 +21,7 @@ devicon
 # obsidian
 data.json
 env.js
+
+# Vitepress
+docs/.vitepress/dist
+docs/.vitepress/cache

docs/.vitepress/config.mts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Obsidian Iconize',
+  description: 'Add icons to anything you desire in Obsidian, including files, folders, and text.',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Get Started', link: '/guide/getting-started' },
+    ],
+
+    search: {
+      provider: 'local',
+    },
+
+    sidebar: [
+      {
+        text: 'Guide',
+        collapsed: false,
+        items: [
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Settings', link: '/guide/settings' },
+          { text: 'Icon Packs', link: '/guide/icon-packs' },
+        ],
+      },
+      {
+        text: 'Files and Folders',
+        collapsed: false,
+        items: [
+          { text: 'Icon in Tabs', link: '/files-and-folders/icon-tabs' },
+          { text: 'Inheritance', link: '/files-and-folders/inheritance' },
+          { text: 'Custom Rules', link: '/files-and-folders/custom-rules' },
+        ],
+      },
+    ],
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/FlorianWoelki/obsidian-iconize' }],
+
+    footer: {
+      message:
+        'Released under the <a href="https://github.com/FlorianWoelki/obsidian-iconize/blob/main/LICENSE">MIT License</a>.',
+      copyright: 'Copyright © 2021-present <a href="https://github.com/FlorianWoelki/">Florian Woelki</a>',
+    },
+  },
+});

docs/.vitepress/theme/custom.css

@@ -0,0 +1,9 @@
+:root {
+  --vp-c-brand-1: rgba(168, 85, 247, 1);
+  --vp-c-brand-2: #9333ea;
+  --vp-button-brand-bg: rgba(168, 85, 247, 1);
+}
+
+.dark {
+  --vp-c-brand-1: rgba(192, 132, 252, 1);
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
+
+export default DefaultTheme;

docs/files-and-folders/custom-rules.md

@@ -0,0 +1,21 @@
+# Custom Rules
+
+*Documentation Coming Soon*
+
+## Use Cases
+
+This section of the documentation will show you some use cases for custom rules.
+
+### Having a default icon
+
+You can use custom rules to have a default icon for all files and folders. This is useful
+if you want to have a default icon for all files and folders and only change the icon for
+some of them.
+
+You can easily set a default icon by applying a custom rule to your vault. You simply need
+to add a custom rule with the input `.`, so that it looks like this:
+
+![Default icon through custom rule](../assets/default-icon-through-custom-rules.png)
+
+After that, you can select the icon you want to use as a default icon. This icon will be
+used for all files and folders that don't have a custom icon.

docs/files-and-folders/icon-tabs.md

@@ -0,0 +1,10 @@
+# Icon in Tabs
+
+Make sure, that you've enabled the setting which is related to activating icons in tabs.
+Please refer to the [Settings](./settings.md) documentation for more information about
+this and other options.
+
+![Icon in tabs settings option](../assets/icon-in-tabs-settings-option.png)
+
+Tabs can have icons next to the title of the opened file. To add an icon to a tab, you
+just need to add an icon to a file and the tab will automatically show it.

docs/files-and-folders/inheritance.md

@@ -0,0 +1,3 @@
+# Inheritance
+
+*Documentation Coming Soon*

docs/guide/getting-started.md

@@ -0,0 +1,41 @@
+---
+title: Getting Started | Obsidian Iconize
+---
+
+# Getting Started
+
+This obsidian plugin allows you to add **any** custom icon (of type `.svg`) or from an
+icon pack to anything you want in your Vault. This can be a file, a folder, in a title, or
+even in a paragraph of your notes.
+
+## Installation
+
+For installing the plugin, you can either install it from the community plugins or download
+the latest release from the
+[GitHub releases](https://github.com/FlorianWoelki/obsidian-iconize/releases/).
+
+This was all you need to do to install the plugin. Now you can start using it.
+
+## Usage
+
+Using the plugin is really straightforward. Obviously, Iconize has a lot of other features,
+but the most important one is to add icons to your files or folders.
+
+First of all, you need an icon pack. You can either use one of the predefined icon packs or
+add your own. For adding your own, please read the documentation about
+<a href="/guide/icon-packs#custom-icon-packs">custom icon packs</a>.
+
+For adding a predefined icon pack, you can go to the settings of the plugin and select
+`Browse icon packs` and then select the icon pack you want to use.
+
+After installing the icon pack, you just need to *right-click* on a file or folder and 
+then select the option `Change Icon`. This will open a modal where you can select the
+icon you want to use.
+
+## Support the Project
+
+Our vision is to let you add Icons to your Obsidian Vault whereever you want. We want to make it as easy as possible to add Icons to your notes, files, or folders.
+
+This project is **open source** and **free to use**. If you like it, please consider supporting us
+
+<a href="https://www.buymeacoffee.com/florianwoelki" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

docs/guide/icon-packs.md

@@ -0,0 +1,73 @@
+# Icon Packs
+
+Iconize comes with some predefined icon packs. However, you can also add your own icon
+packs. This section of the documentation will show you how to do that, but also how to use
+the predefined icon packs and emojis.
+
+## Predefined Icon Packs
+
+To use a predefined icon pack, you can go to the settings of the plugin and select
+`Browse icon packs` and then select the icon pack you want to use. So that the following
+modal will open:
+
+![Browse icon packs](../assets/browse-icon-packs.png)
+
+After you have selected the icon pack you want to use, it will download the icon pack and
+then you can use it in your vault.
+
+Currently, Iconize supports the following predefined icon packs:
+
+- [Font Awesome](https://fontawesome.com/)
+- [Remix Icons](https://remixicon.com/)
+- [Icon Brew](https://iconbrew.com/)
+- [Simple Icons](https://simpleicons.org/)
+- [Lucide Icons](https://lucide.dev/)
+- [Tabler Icons](https://tabler-icons.io/)
+
+If you want to add a predefined icon pack or you would like to update an existing one,
+feel free to open a pull request on
+[GitHub](https://github.com/FlorianWoelki/obsidian-iconize/compare).
+
+## Custom Icon Packs
+
+::: tip NOTE
+
+This feature is currently not 100% available and stable. If you want to use it, you can
+do that, but it might be that some things are not working as expected. Furthermore, there
+might be some breaking changes in the future.
+
+:::
+
+If you want to add your own icon pack, you can do that by using the option `Add icon pack`
+in the plugin settings of Iconize. You just need to enter the name of the icon pack.
+After that, you can add the icons you want to use in your vault by using the plus icon (`+`) 
+next to the custom icon pack.
+
+![Add icon pack](../assets/add-custom-icon-pack.png)
+
+After you have added the icon pack, you need to zip your custom icon pack by going to the
+plugins folder of Obsidian. You can find the plugins folder by going to the settings of
+Obsidian and then clicking on `Open plugins folder`. After that, you need to go to the
+folder `obsidian-iconize` and then to the folder `icons`. In this folder, you can zip your
+custom icon pack. The zip file needs to have the same name as the icon pack you have
+entered in the settings of Iconize.
+
+::: tip NOTE
+
+The creation of a zip file needs to be currently done manually. In the future, this will be
+automatically done by Iconize. See
+[this issue](https://github.com/FlorianWoelki/obsidian-iconize/issues/224) for more
+information.
+
+:::
+
+## Using Emojis
+
+If you want to use emojis in your vault, you can do that by using the built-in functionality
+of Iconize. You can directly use emojis in the icon picker by searching for them. You can
+search for emojis by using the name of the emoji or by using the emoji itself.
+
+Furthermore, you can also adapt the style of the emoji by choosing the emoji style in the
+settings of Iconize. You can choose between `None`, `Native`, and `Twemoji`.
+
+![Emoji style](../assets/emoji-style.png)

docs/guide/settings.md

@@ -0,0 +1,3 @@
+# Settings
+
+*Documentation Coming Soon*

docs/index.md

@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Obsidian Iconize"
+  text: "Add icons everywhere"
+  tagline: Add icons to anything you desire in Obsidian, including files, folders, and text.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: Files and Folders
+      link: /files-and-folders/icon-tabs
+
+features:
+  - title: Simplicity
+    details: Install the plugin, download your most favorite icon pack and you are ready to go.
+  - title: Iconize your Vault
+    details: Set an icon almost everywhere you want. For example on a folder, file or even in a text or in a title.
+  - title: Community Driven
+    details: The plugin is open source and everyone can contribute bug reports, features, or ideas to it.
+---
+

package.json

@@ -6,6 +6,9 @@
   "scripts": {
     "prepare": "husky install",
     "dev": "rollup --config rollup.config.js -w",
+    "docs:dev": "vitepress dev docs --port 3000",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
     "build": "rollup --config rollup.config.js --environment BUILD:production",
     "release": "mkdir -p dist && mv main.js dist/ && cp src/styles.css dist/ && cp manifest.json dist/",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
@@ -45,7 +48,8 @@
     "rollup": "^2.79.1",
     "tslib": "^2.6.2",
     "twemoji": "^14.0.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vitepress": "1.0.0-rc.20"
   },
   "dependencies": {
     "@rollup/plugin-babel": "^6.0.3",