├── .gitattributes ├── .gitignore ├── .prettierrc ├── assets └── obsidian-css-snippets.gif ├── tsconfig.json ├── manifest.json ├── .github └── workflows │ ├── premerge.yml │ └── release.yml ├── rollup.config.js ├── LICENSE ├── package.json ├── src └── index.ts └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "auto" 3 | } 4 | -------------------------------------------------------------------------------- /assets/obsidian-css-snippets.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdbrice/obsidian-css-snippets/HEAD/assets/obsidian-css-snippets.gif -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | 4 | "include": ["src/**/*"], 5 | "exclude": ["node_modules/*"], 6 | "compilerOptions": { 7 | "types": ["node", "svelte"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "css-snippets", 3 | "name": "css snippets", 4 | "version": "0.1.2", 5 | "description": "Load and manage css snippets", 6 | "author": "dandandan", 7 | "authorUrl": "https://github.com/jdbrice/obsidian-css-snippets", 8 | "isDesktopOnly": "true" 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/premerge.yml: -------------------------------------------------------------------------------- 1 | name: "premerge" 2 | on: [push] 3 | 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout source 9 | uses: actions/checkout@v2 10 | 11 | - name: Install NPM dependencies 12 | run: npm install 13 | 14 | - name: Lint 15 | run: npm run lint 16 | 17 | - name: Build 18 | run: npm run build 19 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from "rollup-plugin-svelte"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import commonjs from "@rollup/plugin-commonjs"; 4 | import typescript from "@rollup/plugin-typescript"; 5 | import autoPreprocess from "svelte-preprocess"; 6 | 7 | import copy from "rollup-plugin-copy"; 8 | 9 | export default { 10 | input: "src/index.ts", 11 | output: { 12 | format: "cjs", 13 | file: "dist/main.js", 14 | sourcemap: "inline", 15 | exports: "default", 16 | }, 17 | external: ["obsidian"], 18 | plugins: [ 19 | svelte({ 20 | preprocess: autoPreprocess(), 21 | }), 22 | typescript({ sourceMap: true }), 23 | resolve({ 24 | browser: true, 25 | dedupe: ["svelte"], 26 | }), 27 | commonjs(), 28 | copy({ 29 | targets: [ 30 | { 31 | src: "manifest.json", 32 | dest: "dist/", 33 | }, 34 | ], 35 | }), 36 | ], 37 | }; 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daniel Brandenburg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-snippet-plugin", 3 | "version": "0.1.0", 4 | "description": "An Obsidian plugin for loading css snippets", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "build": "svelte-check && rollup -c", 8 | "test": "mocha -r ts-node/register tests/*.ts", 9 | "format": "prettier --write src/**/*", 10 | "lint": "prettier --check src/**/*" 11 | }, 12 | "author": "jdbrice", 13 | "license": "MIT", 14 | "dependencies": { 15 | "@rollup/plugin-commonjs": "^15.0.0", 16 | "@rollup/plugin-node-resolve": "^9.0.0", 17 | "@types/node": "^14.14.6", 18 | "moment": "^2.27.0", 19 | "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master", 20 | "rollup": "^2.26.7", 21 | "rollup-plugin-svelte": "^6.0.0", 22 | "semver-compare": "1.0.0", 23 | "svelte": "^3.24.1", 24 | "tslib": "^2.0.1" 25 | }, 26 | "devDependencies": { 27 | "@rollup/plugin-typescript": "^5.0.2", 28 | "@tsconfig/svelte": "^1.0.10", 29 | "@types/chai": "^4.2.12", 30 | "@types/mocha": "^8.0.3", 31 | "chai": "^4.2.0", 32 | "mocha": "^8.1.3", 33 | "prettier": "^2.1.1", 34 | "prettier-plugin-svelte": "^1.2.1", 35 | "rollup-plugin-copy": "^3.3.0", 36 | "svelte-check": "^1.0.31", 37 | "svelte-preprocess": "^4.2.0", 38 | "ts-node": "^9.0.0", 39 | "typescript": "^4.0.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: "Create Release" 2 | on: 3 | push: 4 | tags: 5 | - "*" 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout source 12 | uses: actions/checkout@v2 13 | 14 | - name: Install NPM dependencies 15 | run: npm install 16 | 17 | - name: Build 18 | run: npm run build 19 | 20 | - name: Create release 21 | id: create_release 22 | uses: actions/create-release@v1 23 | env: 24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 25 | with: 26 | tag_name: ${{ github.ref }} 27 | release_name: Release ${{ github.ref }} 28 | 29 | - name: Upload release assets (1/2) 30 | uses: actions/upload-release-asset@v1 31 | env: 32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 33 | with: 34 | upload_url: ${{ steps.create_release.outputs.upload_url }} 35 | asset_path: ./dist/main.js 36 | asset_name: main.js 37 | asset_content_type: application/javascript 38 | 39 | - name: Upload release assets (2/2) 40 | uses: actions/upload-release-asset@v1 41 | env: 42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 43 | with: 44 | upload_url: ${{ steps.create_release.outputs.upload_url }} 45 | asset_path: ./dist/manifest.json 46 | asset_name: manifest.json 47 | asset_content_type: application/json 48 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { App, Plugin, PluginManifest } from "obsidian"; 2 | 3 | const defSnippetFolder: string = "css-snippets"; 4 | 5 | export default class CssSnippetsPlugin extends Plugin { 6 | public loadedStyles: Array; 7 | 8 | constructor(app: App, pluginManifest: PluginManifest) { 9 | super(app, pluginManifest); 10 | } 11 | 12 | async onload() { 13 | this.addCommand({ 14 | id: "refresh-styles", 15 | name: "Reload", 16 | callback: async () => { 17 | this.loadSnippets(); 18 | }, 19 | }); 20 | 21 | this.addCommand({ 22 | id: "unload-styles", 23 | name: "Unload", 24 | callback: async () => { 25 | this.unloadSnippets(); 26 | }, 27 | }); 28 | 29 | this.loadedStyles = Array(0); 30 | this.loadSnippets(); 31 | } 32 | 33 | onunload() { 34 | this.unloadSnippets(); 35 | } 36 | 37 | async loadSnippets() { 38 | this.unloadSnippets(); 39 | 40 | // enumerate the style files 41 | let style_files = await this.app.vault.adapter.list(defSnippetFolder); 42 | style_files.files; 43 | for (let fstyle of style_files.files) { 44 | // console.log( "Found file: ", fstyle ); 45 | if (fstyle.indexOf(".css") < 0) { 46 | // console.log( "Skipping non css file"); 47 | } 48 | 49 | let content = await this.app.vault.adapter.read(fstyle); 50 | let css = content; 51 | 52 | var style = document.createElement("style"); 53 | style.innerHTML = css; 54 | document.head.appendChild(style); 55 | this.loadedStyles.push(style); 56 | } 57 | } 58 | 59 | async unloadSnippets() { 60 | for (let tag of this.loadedStyles) { 61 | // console.log( "Removing style tag: ", tag ); 62 | document.head.removeChild(tag); 63 | } 64 | this.loadedStyles = Array(0); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian CSS Snippet Manager 2 | 3 | An Obsidian plugin for loading custom css snippets 4 | 5 | ![Example gif](./assets/obsidian-css-snippets.gif) 6 | 7 | ## Usage 8 | 9 | Put `.css` files into `css-snippets` in the vault root. They get automagically loaded when the plugin loads. 10 | 11 | This adds two commands: 12 | 1. "css snippet: Reload" - loads or reloads the css files, use this if you add a new file to the folder. 13 | 2. "css snippet: Unload" - unloads all loaded style snippets 14 | 15 | ## Roadmap 16 | - [ ] Setting tab that allows user to set the folder for storing snippets 17 | - [ ] Toggle snippets individually ( command palette?) 18 | - [ ] consider adding scss and sass compilation??? 19 | - [ ] scoped styles (defined in page frontmatter or based on tags etc.) - but need to find a solution for applying scoped style so that they apply only to the page not global 20 | 21 | 22 | ### Compatibility 23 | 24 | Custom plugins are only available for Obsidian v0.9.7+. 25 | The current API of this repo targets Obsidian **v0.9.7+**. 26 | 27 | 28 | 29 | ## Installation 30 | 31 | ### From within Obsidian 32 | From Obsidian v0.9.8, you can activate this plugin within Obsidian by doing the following: 33 | - Open Settings > Third-party plugin 34 | - Make sure Safe mode is **off** 35 | - Click Browse community plugins 36 | - Search for "css snippets" 37 | - Click Install 38 | - Once installed, close the community plugins window and activate the newly installed plugin 39 | #### Updates 40 | You can follow the same procedure to update the plugin 41 | 42 | ### From GitHub 43 | - Download the [Latest release](https://github.com/jdbrice/obsidian-css-snippets/releases/latest) 44 | - Extract the `obsidian-css-snippets` folder from the zip to your vault's plugins folder: `/.obsidian/plugins/` 45 | Note: On some machines the `.obsidian` folder may be hidden. On MacOS you should be able to press `Command+Shift+Dot` to show the folder in Finder. 46 | - Reload Obsidian 47 | - If prompted about Safe Mode, you can disable safe mode and enable the plugin. 48 | Otherwise head to Settings, third-party plugins, make sure safe mode is off and 49 | enable the plugin from there. 50 | 51 | ## Development 52 | 53 | This project uses Typescript to provide type checking and documentation. 54 | The repo depends on the latest [plugin API](https://github.com/obsidianmd/obsidian-api) in Typescript Definition format, which contains TSDoc comments describing what it does. 55 | 56 | **Note:** The Obsidian API is still in early alpha and is subject to change at any time! 57 | 58 | If you want to contribute to development and/or just customize it with your own 59 | tweaks, you can do the following: 60 | - Clone this repo. 61 | - `npm i` or `yarn` to install dependencies 62 | - `npm run build` to compile. 63 | - Copy `manifest.json`, `main.js` and `styles.css` to a subfolder of your plugins 64 | folder (e.g, `/.obsidian/plugins/cm-editor-syntax-highlight-obsidian/`) 65 | - Reload obsidian to see changes 66 | 67 | Alternately, you can clone the repo directly into your plugins folder and once 68 | dependencies are installed use `npm run dev` to start compilation in watch mode. 69 | You may have to reload obsidian (`ctrl+R`) to see changes. 70 | 71 | # Version History 72 | 73 | ## v0.1.0 74 | Initial Release. Basic functionality 75 | 76 | 77 | --------------------------------------------------------------------------------