inital init

Author: phil-flip

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           directory: ./src
           output: ./dist
-          js_engine: uglify-js
+          css_engine: lightning
 
       - name: auto commit the minified files
         uses: stefanzweifel/git-auto-commit-action@v5

README.md

@@ -1,85 +1,45 @@
 # Better Embed
 
-A docsify.js plugin to embed selective areas from another markdown file.
+A [docsify.js](https://github.com/docsifyjs/docsify) plugin to simplify the color selection for [docsify-themable](https://github.com/jhildenbiddle/docsify-themeable).
 
-## Installation
+## Installation and usage instructions
 
-How to install this plugin.
+> [!NOTE]
+> Sorry for not providing a demo, but I thought this is a very self explanatory setup. But I am using this activly in [another projects](https://github.com/Karlo-Hosting/Docs/blob/a42df71978a439923162b411b2efb589df0a8e22/_css/colors-dark.css#L1).
+
+How to install this plugin:
+
+1. Make sure you have [docsify-themable](https://github.com/jhildenbiddle/docsify-themeable) installed.
+2. Copy one of the stylesheet segments from below and copy it into the `head` section your `index.html` file. Make sure that is is after all other plugins and before your own modifications.
+3. Copy the example-files from [the source directory](https://github.com/FlippedCodes/docsify-simple-themable/tree/main/src) into your projects `_css/` folder.
+4. Rename them into `colors-dark.css` and `colors-light.css`
+5. Change the colors in those files to your liking.
 
 ### Production
 
 For production, please use the numbered version to prevent breaking changes in production.
 
 ``` html
-<script src="https://unpkg.com/docsify-betterembed@1.1.1/dist/betterEmbed.min.js"></script>
+<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="./_css/colors-dark.css">
+<link rel="stylesheet" media="(prefers-color-scheme: light)" href="./_css/colors-light.css">
+<link rel="stylesheet" href="https://unpkg.com/docsify-simple-themable@1.0.0/dist/main.min.css">
 ```
 
 ### Development
 
 If you are developing on a doc, you can use the latest. Make sure you switch it to production later, or the production one right away.
 
 ``` html
-<script src="https://unpkg.com/docsify-betterembed@latest/dist/betterEmbed.min.js"></script>
+<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="./_css/colors-dark.css">
+<link rel="stylesheet" media="(prefers-color-scheme: light)" href="./_css/colors-light.css">
+<link rel="stylesheet" href="https://unpkg.com/docsify-simple-themable@latest/dist/main.min.css">
 ```
 
-## Usage
-
-> [!NOTE]
-> Sorry for not providing a demo, but I thought this is a very self explanatory setup. But I am using this activly in [another projects](https://github.com/FlippedCodes/Unofficial-Resonite-Docs/blob/c92cd4baf050c3316924b4af71ec59b9defaef66/gameplay/botCommands.md?plain=1#L78).
-
-### Basic instructions
-
-1. Surround the part you want *to embed* in the following comment:
-
-   ``` markdown
-   <!-- embed:start:exampleName -->
-
-   YOUR CONTENT HERE
-
-   <!-- embed:end:exampleName -->
-   ```
-
-> [!IMPORTANT]
-> Make sure you respect the spaces between the comments and your content. It can mess with the html (specifically tables), if they are left out.
-
-2. Embed the content like this:
-
-   ``` markdown
-   [Some Name](path/to/markdown/file/with/embed.md#exampleName ':include')
-   ```
-
---> The link will then be replaced with the content.
-If it doesn't the selector, it will embed the whole page. Aka, you might have done something wrong.
-
-### Tips
-
-- Setup 2 just converts to a different text, you can also use this to keep the link for Markdown, vanilla-feeling:
-  
-  ``` markdown
-  <!-- embedImport:start:exampleName -->
-  [Some Name](path/to/markdown/file/with/embed.md ':include')
-  <!-- embedImport:end:exampleName -->
-  ```
-
-- Because the selector is what decides the beginning and the end, you can nest and overlay the embed selections, however you like it.
-
-  ``` markdown
-  <!-- embed:start:expl3 -->
-  <!-- embed:start:expl1 -->
-
-  Very original stuff.
-
-  <!-- embed:start:expl2 -->
-
-  Oh, So much content
-
-  <!-- embed:end:expl1 -->
-
-  uhm.. hows your day?
+## Tips
 
-  <!-- embed:end:expl2 -->
-  <!-- embed:end:expl3 -->
-  ```
+- This project is inspired by the color pallet naming scheme of [daisyUI](https://daisyui.com/): You can use their [theme generator](https://daisyui.com/theme-generator/) to select colors.
+- If you think something on your docs should have a different color. You are more then welcome to copy the `src/main.css` into your `_css` folder as well. Just make sure you don't forget to adjust hte link in in the `head` section of your `index.html`!
+- If you already have a css files, you are free to change the folder location in the stylesheet references in `index.html`.
 
 ## Contributing
 
@@ -89,15 +49,12 @@ I'm always happy, if someone has improvements to this little plugin. If you want
 
 Nothing much here, but I'm planning to add the following features at some point:
 
-- [ ] Support for [docsify-mustache](https://docsify-mustache.github.io) so Docsify can have proper templating.
-- [ ] Being able to use header as a selector and not use comments to mark the start and end.
-- [ ] Offset header levels to either fit the current layout, or being able to select it.
-- [ ] Rewrite links to point at their embeded version (eg. Youtube)
+- [ ] Remove requirement for docsify-themable.
 
 ## License
 
 This repo is using the [MIT license](LICENSE).
 
 ## Credit
 
-Thanks to the [docsify.js](https://docsify.js.org/#/) team to make writing plugins so simple. I usually don't front end, but this was a breeze to get working.
+Thanks to the [docsify.js](https://docsify.js.org/#/) team to make changing CSS so simple. I usually don't front end, but this was a breeze to get working.

dist/betterEmbed.min.js

@@ -1,18 +1,17 @@
 {
-  "name": "docsify-betterembed",
-  "version": "1.1.1",
-  "description": "A docsify.js plugin to embed selective areas from another markdown file.",
-  "main": "src/betterEmbed.js",
+  "name": "docsify-simple-themable",
+  "version": "1.0.0",
+  "description": "A docsify.js plugin to simplify the color selection for docsify-themable.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/FlippedCodes/docsify-betterembed.git"
+    "url": "git+https://github.com/FlippedCodes/docsify-simple-themable.git"
   },
   "keywords": [
     "docsify",
     "docsify.js",
     "plugin",
-    "embed",
-    "better embed"
+    "simple themable",
+    "themable"
   ],
   "author": "phil",
   "license": "MIT"

package.json

@@ -0,0 +1,15 @@
+:root {
+  --primary: oklch(65.69% 0.196 275.75);
+  --secondary: oklch(74.8% 0.26 342.55);
+  --accent: oklch(74.51% 0.167 183.61);
+  --neutral: #2a323c;
+  --neutral-content: #A6ADBB;
+  --base-100: #1d232a;
+  --base-200: #191e24;
+  --base-300: #15191e;
+  --base-content: #A6ADBB;
+  --info: #17a2b8;
+  --success: #28a745;
+  --warning: #f0ad4e;
+  --error: #dc3545;
+}

src/betterEmbed.js

@@ -0,0 +1,16 @@
+:root {
+  --primary: #66cc8a;
+  --secondary: #377cfb;
+  --accent: #f68067;
+  --neutral: #333c4d;
+  --neutral-content: #f9fafb;
+  --base-100: oklch(100% 0 0);
+  --base-200: #f9fafb;
+  --base-300: #e3ecf8;
+  --base-content: #333c4d;
+  --info: #17a2b8;
+  --success: #28a745;
+  --warning: #f0ad4e;
+  --error: #dc3545;
+}
+

src/example-dark.css

@@ -0,0 +1,83 @@
+:root {
+  /* app */
+  --theme-color: var(--primary);
+
+  /* base */
+  --base-background-color: var(--base-100);
+  --base-color: var(--base-content);
+
+  --mark-background: var(--warning);
+  --mark-color: var(--neutral);
+
+  --selection-color: var(--primary);
+
+  /* content */
+  --blockquote-border-color: var(--accent);
+  --blockquote-color: var(--base-content);
+
+  --code-theme-text: var(--base-content);
+
+  --heading-color: var(--base-content);
+  --heading-h2-border-color: var(--neutral);
+
+  --table-shadow-color: var(--base-200); /* custom var */
+  --table-body-border-color: var(--base-300);
+  --table-head-border-color: var(--base-300);
+  --table-body-border-width: 2px;
+  --table-head-border-width: 2px;
+  --table-head-background: var(--base-300);
+  --table-row-even-background: var(--base-200);
+  --table-row-odd-background: var(--base-100);
+
+  --notice-background: var(--base-300);
+  --notice-shadow-color: var(--base-200); /* custom var */
+
+  --link-color: var(--primary);
+  --link-text-decoration: unset;
+  --link-text-decoration--hover: underline;
+
+  /* Not possible: see fixes.css ln30ff */
+  --notice-note-border-color: var(--info);
+  --notice-note-color: var(--info);
+  --notice-tip-border-color: var(--success);
+  --notice-tip-color: var(--success);
+  --notice-important-border-color: var(--secondary); /* renamed due to funni coloring of "tip" notice texts */
+  --notice-important-color: var(--secondary); /* renamed due to funni coloring of "tip" notice texts */
+  --notice-warning-border-color: var(--warning);
+  --notice-warning-color: var(--warning);
+  --notice-attention-border-color: var(--error);
+  --notice-attention-color: var(--error);
+
+  /* Sidebar */
+
+  --sidebar-background: var(--base-300);
+  --sidebar-toggle-background: var(--base-300);
+  --sidebar-border-color: transparent;
+  --sidebar-width: 19rem;
+  --sidebar-shadow-color: var(--base-200); /* custom var */
+
+  --sidebar-nav-pagelink-padding: 0px;
+  --sidebar-nav-pagelink-background: transparent;
+  --sidebar-nav-pagelink-background--loaded: unset;
+  --sidebar-nav-pagelink-background--active: unset;
+
+  /* Search */
+
+  --search-input-background-color: var(--base-200);
+  --search-result-keyword-background: var(--primary);
+  --search-input-border-width: unset;
+  --search-clear-icon-color1: var(--neutral);
+  --search-clear-icon-color2: var(--primary);
+
+  /* Zoom Image */
+
+  /* shadow color is also used for codeblocks */
+  --zoomimage-shadow-color: var(--base-200); /* custom var */
+
+  /* ToC */
+  --toc-side-indicator: var(--neutral);
+  --toc-side-indicator-active: var(--primary);
+  --toc-mobile-background: var(--base-200);
+  --toc-shadow-color: var(--base-200);
+}
+