From 1c40e87061a82afd12273e8e3abe24cb1a1e46b8 Mon Sep 17 00:00:00 2001 From: Klagarge Date: Sun, 18 Feb 2024 10:51:11 +0100 Subject: [PATCH] add plugin progress, accordion and last time updated --- divers/README.md | 92 +++++++++++- divers/panel.md | 365 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 18 ++- 3 files changed, 473 insertions(+), 2 deletions(-) create mode 100644 divers/panel.md diff --git a/divers/README.md b/divers/README.md index 9e61e2a..979df9a 100644 --- a/divers/README.md +++ b/divers/README.md @@ -2,12 +2,94 @@ $$ E=mc^2 $$ +----------- + +[panel.md](divers/panel.md) + +----------- + + +# FAQ Section + +Introduction text for the FAQ page. + ++ Question 1? + + + Answer 1 + ++ Question 2? + + + Answer 2 + + +----------- + +```mermaid +zenuml + title Declare participant (optional) + Bob + Alice + + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +----------- + +```mermaid +%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% +sequenceDiagram + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! + Alice->>John: See you later! +``` + +----------- + +```plantuml +@startuml + +Alice ->> "Bob()" : Hello +"Bob()" -> "This is very\nlong" as Long +' You can also declare: +' "Bob()" -> Long as "This is very\nlong" +Long --> "Bob()" : ok +@enduml + +``` + +----------- ![example4_v3.png](example4_v3.png) +----------- + [transmission_process.md](../infotro/SDi/transmission_process.md) + +----------- + ## embedding it directly +Theme valid: base, forest, +```mermaid +%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% + +gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit +``` + +----------- + ```mermaid graph TD; A-->B; @@ -16,6 +98,8 @@ graph TD; C-->D; ``` +----------- + ```plantuml @startuml Alice -> Bob: Authentication Request @@ -26,10 +110,14 @@ Alice <-- Bob: another authentication Response @enduml ``` +----------- + ## load from external files ![kroki-excalidraw](excalidraw.json) +----------- + ## Wavedrom ```wavedrom { "signal": [ @@ -45,7 +133,9 @@ Alice <-- Bob: another authentication Response { "name": 'clk4', "wave": 'xlh.L.Hx' }, ]} ``` ------ + +----------- + ## Wavedrom register ```wavedrom {"reg": [ diff --git a/divers/panel.md b/divers/panel.md new file mode 100644 index 0000000..10cfc3a --- /dev/null +++ b/divers/panel.md @@ -0,0 +1,365 @@ +# docsify-example-panels + +[![NPM](https://img.shields.io/npm/v/docsify-example-panels.svg?style=flat-square)](https://www.npmjs.com/package/docsify-example-panels) +[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/docsifyjs/awesome-docsify#plugins) +[![Codacy Badge](https://api.codacy.com/project/badge/Grade/9f47a225f5044aa491cc77ed7361a983)](https://app.codacy.com/app/VagnerDomingues/docsify-example-panels?utm_source=github.com&utm_medium=referral&utm_content=VagnerDomingues/docsify-example-panels&utm_campaign=Badge_Grade_Dashboard) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE) +[![](https://data.jsdelivr.com/v1/package/npm/docsify-example-panels/badge)](https://www.jsdelivr.com/package/npm/docsify-example-panels) +[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation) +Star + +A [docsify.js](https://docsify.js.org) plugin for rendering example panels content from markdown. + + + + + +## Demo + + + +If you are on widescreen, checkout the *right* panel, *right* there → + + + +This is an example panel. + +You can see it's usage in practice in the docs listed below: + +- [Fairlay API](https://fairlay.com/api) +- [FLAP services](https://docs.flap.cloud/#/create_new_service?id=special-files) + +please contact me if you use docsify-example-panels. i would like to display it here too. + + + +## Features + + + +**Advantages** + +- Create div panels really fast and anywhere in your .md file. +- Choose the classnames for your divs and stylize them. +- Use CSS custom properties to change it's structure. +- Prefab CSS classes for "left-panel", "right-panel" and "title-panel". + +**Compatibility** + +- Fully compatible with any markdown or html features: + +
+ code snippets + +```html + + + +``` + +
+ +
+ quotes + +> just a quote + +?> a cooler quote... (at least i think it is) + +
+ +
+ images (memorable) + +
+ +
+ +- Fully compatible with major docsify plugins such as: + +> [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/) +> +> [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/) +> +> [docsify-copy-code](https://github.com/jperasmus/docsify-copy-code) +> +> [docsify-pagination](https://github.com/imyelo/docsify-pagination) + +**Limitations** + +*Nesting* (i.e panels within panels) all pannels are rendered as siblings, Nesting only avaiable throught post-render javascript code. + + + +For multi-language documentation you can use it along with [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/): + + + +### **HTML** + +```html + +

Heading

+

This is a paragraph.

+``` + +### **JS** + +```js +// JavaScript +function add(a, b) { + return Number(a + b); +} +``` + +### **CSS** + +```css +/* CSS */ +body { + background: white; +} +``` + + + + + +## Installation + + + +Just add the docsify-example-panels plugin to your `HTML` after docsify and you'll be ready to go. + + + +```html + + + + + +``` + + + +## Usage + + + +1. Define a panel in markdown file using `panels:start` and `panels:end` HTML comments. + + HTML comments are used to mark the start and end of a panel. The use of HTML comments prevents any markup from being displayed when markdown is rendered as HTML outside of your docsify site (e.g. Github, GitLab, etc). + + + +```markdown + + +(...) - Awesome div wrapper + + +``` + + + +2. Define divs within a panel in markdown file using HTML comments. + + The character sequence after double dot : will be rendered as the classname of the div content. all proceeding content will be associated with that div up to start of the next div `div:class` or end of panel `panels:end` comments. + + + +```markdown + + + + (...) - Awesome title + + + + (...) - Awesome explanation + + + + + (...) - Awesome example + + +``` + + + +3. You can add a custom class aswell. + + perphaps you want something like a "floating-cat" class + + + +```markdown + + + +... + + +``` + + + +## Customization + + + +### Properties + +Allows you to customize panels styles without rewriting any CSS rule. + + + +```css +:root{ + /* Document */ + --docsify-example-panels-document-width: 90%; + + /* Wrapper */ + --docsify-example-panels-wrapper-width: 100%; + + /* Standards */ + --docsify-example-panels-padding-inner : 8px 16px; + --docsify-example-panels-padding-surroundings : 0px; + + /* Panel Left */ + --docsify-example-panels-left-panel-background : transparent; + --docsify-example-panels-left-panel-width : 60%; + + /* Panel Right */ + --docsify-example-panels-right-panel-background : transparent; + --docsify-example-panels-right-panel-width : 40%; + + /* Titles */ + --docsify-example-panels-title-background: transparent; +} +``` + + + +### Custom Properties + +You can change properties by adding a ` +``` +
+
+ + +### Custom Styles + +Custom styles can be created using the classname you choosed in markdown + +The main purpose of this plugin is to ease and rush the production of any markdown written documentation using the right panel as code examples. + +But let's suppose you indeed wants to add a floating cat in your documentation, like i did. + + In case you insisted to read this in github url the cat image won't be so floating. + + + + + + +
+ + + +1. Add this to your markdown: + + + +```markdown + + + + + + +``` + + + +2. will be rendered like this: + + + +```html +
+
+ +
+
+``` + + + +3. Then you can play with css animations: + + + +```css +.floating-cat{ + position:absolute; + right: 0px; + width: 200px; + height: 360px; + z-index: 1000; + + -webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6)); + filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6)); + + transform: translatey(0px); + animation: float 6s ease-in-out infinite; +} +@keyframes float { + 0% { + -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.8)); + filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6)); + transform: translatey(0px); + } + 50% { + box-shadow: drop-shadow(0px 25px 10px rgba(0,0,0,0.4)); + filter: drop-shadow(0px 25px 10px rgba(0,0,0,0.2)); + transform: translatey(-20px); + } + 100% { + box-shadow: drop-shadow(0px 5px 5px rgba(0,0,0,0.8)); + filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6)); + transform: translatey(0px); + } +} +``` + + + +## Contact & Support + +- Create a [GitHub issue](https://github.com/VagnerDomingues/docsify-example-panels/issues) for bug reports, feature requests, or questions +- Add a ⭐️ [star on GitHub](https://github.com/VagnerDomingues/docsify-example-panels) or ❤️ [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation) to support the project! + +## License + +This project is licensed under the [MIT license](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE). + +Plugin created by [Vagner Domingues Madeira](https://github.com/VagnerDomingues/) + + + + \ No newline at end of file diff --git a/index.html b/index.html index eeb67e4..cc31608 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@
Yggdrasil
+ @@ -167,6 +173,16 @@ + + + + + + + + + +