docs: added obsidian-plugin-unocss documentation

Signed-off-by: Neko Ayaka <[email protected]>

.gitignore

@@ -1,9 +1,7 @@
 .Trash/
 .trash/
 .DS_Store
-**/.obsidian/*
-!**/.obsidian/workspace*
-!**/.obsidian/graph*
+**/.obsidian/
 
 .idea
 .nuxt

.vscode/settings.json

@@ -9,8 +9,8 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
   // Enable the ESlint flat config support
   "eslint.experimental.useFlatConfig": true,

docs/.vitepress/config.ts

@@ -37,6 +37,12 @@ export default defineConfig({
               { text: 'Overview', link: '/pages/en/integrations/' },
             ],
           },
+          {
+            text: 'Obsidian Plugins',
+            items: [
+              { text: 'UnoCSS', link: '/pages/en/integrations/obsidian-plugin-unocss/' },
+            ],
+          },
           {
             text: 'Markdown It Plugins',
             items: [
@@ -80,6 +86,12 @@ export default defineConfig({
 
             ],
           },
+          {
+            text: 'Obsidian 插件',
+            items: [
+              { text: 'UnoCSS', link: '/pages/zh-CN/integrations/obsidian-plugin-unocss/' },
+            ],
+          },
           {
             text: 'Markdown It 插件',
             items: [

docs/.vitepress/theme/components/IntegrationCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import VitePressLogo from '../assets/vitepress-logo-large.webp'
+import ObsidianLogo from '../assets/obsidian-logo.svg'
 
 const props = defineProps<{
   type: IntegrationType
@@ -11,6 +12,7 @@ const props = defineProps<{
 enum IntegrationType {
   markdownIt = 'markdown-it',
   vitepress = 'vitepress',
+  obsidian = 'obsidian',
 }
 
 const data = useData()
@@ -27,15 +29,22 @@ const data = useData()
     cursor-pointer select-none items-center rounded-lg p-4
     class="text-$vp-c-text-1!"
   >
-    <span flex="~ col 1">
+    <span v-if="props.type === IntegrationType.markdownIt || props.type === IntegrationType.vitepress" flex="~ col 1">
       <span>{{ props.title }}</span>
       <span>@nolebase/{{ props.package }}</span>
     </span>
+    <span v-if="props.type === IntegrationType.obsidian" flex="~ col 1">
+      <span>{{ props.title }}</span>
+      <span>{{ props.package }}</span>
+    </span>
     <template v-if="props.type === IntegrationType.markdownIt">
       <span class="i-octicon:markdown-16" h-15 w-15 text-5xl />
     </template>
     <template v-else-if="props.type === IntegrationType.vitepress">
       <img :src="VitePressLogo" h-15 w-15>
     </template>
+    <template v-else-if="props.type === IntegrationType.obsidian">
+      <img :src="ObsidianLogo" h-15 w-15>
+    </template>
   </a>
 </template>

docs/pages/en/integrations/index.md

@@ -23,3 +23,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
 <br />
 
 <IntegrationCard type="vitepress" title="Blinking highlight targeted heading" package="vitepress-plugin-highlight-targeted-heading" />
+
+<br />
+
+<IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss" />

docs/pages/en/integrations/obsidian-plugin-unocss/index.md

@@ -0,0 +1,143 @@
+# UnoCSS Plugin
+
+When crafting documentation in [Nólëbase](https://github.com/nolebase/nolebase), creating numerous visual components is crucial for enhancing the documents with dynamic and interactive user interfaces. This not only makes the content more digestible but also more engaging.
+Previously, [Obsidian](https://obsidian.md) lacked the functionality to effectively integrate and apply styles from frameworks like [Tailwind CSS](https://tailwindcss.com/docs/display) and [Windi CSS](https://windicss.org/) to HTML elements within its platform.
+
+This is where [Obsidian UnoCSS Plugin](https://github.com/nolebase/obsidian-plugin-unocss) kicks in, it allows you to write your notes in [Obsidian](https://obsidian.md/) with [UnoCSS](https://unocss.dev/).
+By doing so, it bridges the gap, allowing for the utilization of atomic CSS directly in Obsidian, thus elevating the aesthetics and functionality of the documentation.
+
+## What can you do with it
+
+- Embed interactive components in your notes.
+- Style your notes with atomic CSS classes.
+- Use themes and color schemes from UnoCSS communities.
+- Import the icons from [Iconify](https://icones.js.org/).
+- Animate your notes.
+- Documenting color theories.
+- Documenting UI/UX knowledge.
+- Demonstrating the back scene of Mathemathics and Physics like [manim](https://github.com/ManimCommunity/manim/)
+- And more...
+
+## Demos
+
+> Show me what you can do
+
+### How it looks like
+
+<br>
+
+<video controls muted>
+  <source src="./assets/demo-1.en.mp4" autoplay>
+</video>
+
+### What is the markup like
+
+It's all basic just a set of HTML.
+
+::: warning
+
+To learn more about what are the meanings of classes, I recommend you to use the documentation sites of [Tailwind CSS](https://tailwindcss.com/docs/display) and [Windi CSS](https://windicss.org/) as references.
+
+:::
+
+<video controls muted>
+  <source src="./assets/demo-2.en.mp4" autoplay>
+</video>
+
+### Hot-reloading capabilities in live preview mode
+
+::: info
+
+To do so, you need to split your Obsidian view into two panes, and choose "Source mode" for the editing pane where you wanted to view and edit the HTML markup.
+
+:::
+
+<video controls muted>
+  <source src="./assets/demo-3.en.mp4" autoplay>
+</video>
+
+## How to use it
+
+::: warning
+
+Currently Obsidian UnoCSS Plugin is in alpha stage, it wasn't guaranteed to work properly and keep the compatibility with the future versions of itself.
+
+But it is encouraged to try it out and give feedbacks. If you find and bugs or have any suggestions, please feel free to open an issue on [GitHub](https://github.com/nolebase/obsidian-plugin-unocss/issues).
+
+:::
+
+Currently, it is a bit hard to install the plugin for now before it is published to the official Obsidian plugin store. Manual downloading and installation is required.
+
+### Install with beta testing helper [BRAT](https://tfthacker.com/brat-quick-guide) plugin
+
+1. Install the [BRAT](https://tfthacker.com/brat-quick-guide) plugin right from the official Obsidian plugin store.
+
+::: details Never learned how to install a plugin?
+
+1. Go to "Preferences" or "Settings" (click the little gear icon on the bottom left corner of Obsidian).
+2. Click "Community plugins" in the settings menu.
+3. Turn on "Community plugins"
+
+![](./assets/how-to-install-screenshot-1.png)
+
+4. Click the "Browse" button to search for the BRAT plugin.
+
+![](./assets/how-to-install-screenshot-2.png)
+
+5. Search for "BRAT" and click the "Obsidian42 - BRAT" plugin.
+
+![](./assets/how-to-install-screenshot-3.png)
+
+6. Click "Install" to install the desired plugin.
+:::
+
+2. Enable the BRAT plugin in the community plugins settings menu.
+
+::: details How to enable a plugin?
+
+1. Go to "Preferences" or "Settings" (click the little gear icon on the bottom left corner of Obsidian).
+2. Click "Community plugins" in the settings menu.
+3. Find the desired plugin that you wanted to enable in the "Installed plugins" list.
+
+![](./assets/how-to-install-screenshot-4.png)
+
+4. Toggle on the right switch.
+
+:::
+
+3. Open Command palette to choose "BRAT: Plugins: Add a beta plugin for testing" as follows:
+
+![](./assets/screenshot-1.png)
+
+4. Copy and paste the following link to the first field of the new prompted dialog:
+
+```txt
+https://github.com/nolebase/obsidian-plugin-unocss
+```
+
+5. Find the needed released version on [Release page of Obsidian UnoCSS Plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases), for example, fill in `0.1.0`:
+
+![](./assets/screenshot-2.png)
+
+6. Enable the "UnoCSS" plugin from the "Installed plugins" list.
+
+### Install manually
+
+1. Navigate to the [Release page of Obsidian UnoCSS Plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases)
+2. Find the [latest version of the plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases/latest).
+3. Download the `main.js` file and `manifest.json` file.
+4. Open up the `.obsidian/plugins` directory of your Obsidian vault.
+5. If no `.obsidian/plugins` directory exists, create one.
+6. Create a new directory named `obsidian-plugin-unocss` inside the `.obsidian/plugins` directory.
+7. Move `main.js` file and `manifest.json` file into the `obsidian-plugin-unocss` directory.
+
+The directory structure should look like this after these steps:
+
+```shell
+❯ tree
+.
+├── main.js
+├── manifest.json
+```
+
+8. Enable the "UnoCSS" plugin from the "Installed plugins" list.

docs/pages/zh-CN/integrations/index.md

@@ -23,3 +23,7 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
 <br />
 
 <IntegrationCard type="vitepress" title="闪烁高亮当前的目标标题" package="vitepress-plugin-highlight-targeted-heading" />
+
+<br />
+
+<IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss" />

docs/pages/zh-CN/integrations/obsidian-plugin-unocss/index.md

@@ -0,0 +1,144 @@
+# UnoCSS 插件
+
+在 [Nólëbase](https://github.com/nolebase/nolebase) 中编写文档的时候，创建大量可视化组件对于增强文档的动态和交互式用户界面至关重要。这不仅能使内容更易懂，而且更吸引人。
+然而在有这个插件之前，[Obsidian](https://obsidian.md) 缺乏将 [Tailwind CSS](https://tailwindcss.com/docs/display) 和 [Windi CSS](https://windicss.org/) 这样的原子 CSS 库集成到文档中的能力。
+
+这就是 [UnoCSS 插件](https://github.com/nolebase/obsidian-plugin-unocss) 的作用所在，它允许你使用 [UnoCSS](https://unocss.dev/) 所支持的原子类 CSS 在 [Obsidian](https://obsidian.md/) 中编写笔记和文档。
+这样，它就架起了一座桥梁，让你可以直接在 Obsidian 中使用原子 CSS，从而提升文档的美观度和功能性。
+
+## 所以到底能做什么
+
+- 在笔记中嵌入互动组件
+- 使用原子 CSS 类为笔记添加样式
+- 使用 UnoCSS 社区提供的主题和配色方案
+- 从 [Iconify](https://icones.js.org/) 导入图标
+- 为笔记添加动画
+- 为色彩理论编写文档
+- 为 UI/UX 领域的知识编写文档
+- 像 [manim](https://github.com/ManimCommunity/manim/) 一样可视化地演示数学和物理的背后原理
+- 还有许许多多...
+
+## 演示
+
+> 给我看看功能呗
+
+### 看起来是什么样子
+
+<br>
+
+<video controls muted>
+  <source src="./assets/demo-1.zh-CN.mp4" autoplay>
+</video>
+
+### 怎么写的
+
+就是一些基本的 HTML。
+
+::: warning
+
+要进一步了解这些类的含义，我建议你将 [Tailwind CSS](https://tailwindcss.com/docs/display) 和 [Windi CSS](https://windicss.org/) 的文档网站作为参考。
+
+:::
+
+<video controls muted>
+  <source src="./assets/demo-2.zh-CN.mp4" autoplay>
+</video>
+
+### 在预览模式下的热重载能力
+
+::: info
+
+为此，您需要将 Obsidian 视图分割成两个屏幕，并为要查看和编辑的那个分屏选择「源码模式」。
+
+:::
+
+<video controls muted>
+  <source src="./assets/demo-3.zh-CN.mp4" autoplay>
+</video>
+
+## 如何使用
+
+::: warning
+
+目前，Obsidian 的 UnoCSS 插件尚处于 alpha 阶段，无法保证其正常工作，也无法保证与未来版本的兼容性。
+
+但我们鼓励大家试用并提供反馈意见。如果您发现错误或有任何建议，请随时在 [GitHub](https://github.com/nolebase/obsidian-plugin-unocss/issues) 上提交 Issue 联系我们。
+
+:::
+
+在我们于 Obsidian 官方的第三方插件索引中发布该插件之前，目前暂时还很难安装，需要手动下载和安装。
+
+有两种主要的方式可以安装。
+
+### 通过测试助手 [BRAT](https://tfthacker.com/brat-quick-guide) 安装插件
+
+1. 直接从 Obsidian 官方的第三方插件索引中寻找并安装 [BRAT](https://tfthacker.com/brat-quick-guide) 插件。
+
+::: details 没学过怎么安装插件？
+
+1. 前往「Preferences」或者「设置」（点击 Obsidian 左下角的齿轮图标）
+2. 在弹出的菜单中点选「第三方插件」
+3. 阅读须知，确认开启插件功能后关闭「安全模式」
+
+![](./assets/how-to-install-screenshot-1.zh-CN.png)
+
+4. 点击「浏览」
+
+![](./assets/how-to-install-screenshot-2.zh-CN.png)
+
+5. 搜索「BRAT」并点击「Obsidian42 - BRAT」插件。
+
+![](./assets/how-to-install-screenshot-3.zh-CN.png)
+
+6. 点击「安装」安装所需的插件。
+:::
+
+2. 在第三方插件设置菜单中启用 BRAT 插件。
+
+::: details 如何启用插件？
+
+1. 前往「Preferences」或者「设置」（点击 Obsidian 左下角的齿轮图标）
+2. 在弹出的菜单中点选「第三方插件」
+3. 在「已安装插件」列表中找到要启用的插件。
+
+![](./assets/how-to-install-screenshot-4.zh-CN.png)
+
+4. 打开右侧开关。
+
+:::
+
+3. 打开命令面板，如下所示，选择「BRAT: Plugins: Add a beta plugin for testing」
+
+![](./assets/screenshot-1.png)
+
+4. 复制并粘贴以下链接到新提示对话框的第一个字段中：
+
+```txt
+https://github.com/nolebase/obsidian-plugin-unocss
+```
+
+2. 在 [Obsidian UnoCSS 插件的发布页面](https://github.com/nolebase/obsidian-plugin-unocss/releases)中找到所需的发布版本，例如下面填写的 `0.1.0`：
+
+![](./assets/screenshot-2.png)
+
+添加完成后在第三方插件设置菜单中启用「UnoCSS」插件。
+
+### 手动安装
+
+1. 前往 [Obsidian UnoCSS 插件的发布页](https://github.com/nolebase/obsidian-plugin-unocss/releases)
+2. 找到[最新版本的插件](https://github.com/nolebase/obsidian-plugin-unocss/releases/latest)，下载 `main.js` 和 `manifest.json` 文件
+3. 打开期望安装到的 Obsidian Vault 目录下方的 `.obsidian/plugins` 目录
+4. 如果没有 `.obsidian/plugins` 目录，手动创建一个
+5. 在 `.obsidian/plugins` 目录下创建一个名为 `obsidian-plugin-unocss` 的新目录
+6. 将 `main.js` 文件和 `manifest.json` 文件移动到 `obsidian-plugin-unocss` 目录中
+
+完成之后的目录应该是这样：
+
+```shell
+❯ tree
+.
+├── main.js
+├── manifest.json
+```
+
+添加完成后在第三方插件设置菜单中启用「UnoCSS」插件。