add plugin progress, accordion and last time updated
This commit is contained in:
Klagarge committed
1 parent
d3e4ab7876
commit
1c40e87061
3 files changed
+473
-2
No files matched your search
+91
-1
@@ -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
|
||||
|
||||
```
|
||||
|
||||
-----------
|
||||
|
||||
|
||||
|
||||
-----------
|
||||
|
||||
[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
|
||||
|
||||
|
||||
|
||||
-----------
|
||||
|
||||
## Wavedrom
|
||||
```wavedrom
|
||||
{ "signal": [
|
||||
@@ -45,7 +133,9 @@ Alice <-- Bob: another authentication Response
|
||||
{ "name": 'clk4', "wave": 'xlh.L.Hx' },
|
||||
]}
|
||||
```
|
||||
-----
|
||||
|
||||
-----------
|
||||
|
||||
## Wavedrom register
|
||||
```wavedrom
|
||||
{"reg": [
|
||||
|
||||
+365
@@ -0,0 +1,365 @@
|
||||
# docsify-example-panels
|
||||
|
||||
[](https://www.npmjs.com/package/docsify-example-panels)
|
||||
[](https://github.com/docsifyjs/awesome-docsify#plugins)
|
||||
[](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)
|
||||
[](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE)
|
||||
[](https://www.jsdelivr.com/package/npm/docsify-example-panels)
|
||||
[](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation)
|
||||
<a class="github-button" href="https://github.com/VagnerDomingues/docsify-example-panels" data-icon="octicon-star" data-show-count="true" aria-label="Star VagnerDomingues/docsify-example-panels on GitHub">Star</a>
|
||||
|
||||
A [docsify.js](https://docsify.js.org) plugin for rendering example panels content from markdown.
|
||||
|
||||
<!-- panels:start -->
|
||||
|
||||
<!-- div:title-panel -->
|
||||
|
||||
## Demo
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
If you are on widescreen, checkout the *right* panel, *right* there →
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
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)
|
||||
|
||||
<small>please contact me if you use docsify-example-panels. i would like to display it here too.</small>
|
||||
|
||||
<!-- div:title-panel -->
|
||||
|
||||
## Features
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
**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:
|
||||
|
||||
<details>
|
||||
<summary>code snippets </summary>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<img src="http://www.pudim.com.br/pudim.jpg">
|
||||
</body>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>quotes</summary>
|
||||
|
||||
> just a quote
|
||||
|
||||
?> a cooler quote... <small> (at least i think it is)</small>
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>images <small>(memorable)</small></summary>
|
||||
|
||||
<br/>
|
||||
<img src="https://avatars0.githubusercontent.com/u/5666881?s=400&u=d94729bdf16611396a720b338c115ec0be656ba6&v=4" width="64" height="64">
|
||||
</details>
|
||||
|
||||
- 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.
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
For multi-language documentation you can use it along with [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/):
|
||||
|
||||
<!-- tabs:start -->
|
||||
|
||||
### **HTML**
|
||||
|
||||
```html
|
||||
<!-- HTML -->
|
||||
<h1>Heading</h1>
|
||||
<p>This is a paragraph.</p>
|
||||
```
|
||||
|
||||
### **JS**
|
||||
|
||||
```js
|
||||
// JavaScript
|
||||
function add(a, b) {
|
||||
return Number(a + b);
|
||||
}
|
||||
```
|
||||
|
||||
### **CSS**
|
||||
|
||||
```css
|
||||
/* CSS */
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
```
|
||||
|
||||
<!-- tabs:end -->
|
||||
|
||||
<!-- div:title-panel -->
|
||||
|
||||
## Installation
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
Just add the docsify-example-panels plugin to your `HTML` after docsify and you'll be ready to go.
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```html
|
||||
<!-- docsify (latest v4.x.x)-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
|
||||
|
||||
<!-- docsify-example-panels (latest) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-example-panels"></script>
|
||||
```
|
||||
|
||||
<!-- div:title-panel -->
|
||||
|
||||
## Usage
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
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).
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```markdown
|
||||
<!-- panels:start -->
|
||||
|
||||
(...) - Awesome div wrapper
|
||||
|
||||
<!-- panels:end -->
|
||||
```
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
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.
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```markdown
|
||||
<!-- panels:start -->
|
||||
<!-- div:title-panel -->
|
||||
|
||||
(...) - Awesome title
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
(...) - Awesome explanation
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
|
||||
(...) - Awesome example
|
||||
|
||||
<!-- panels:end -->
|
||||
```
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
3. You can add a custom class aswell.
|
||||
|
||||
perphaps you want something like a "floating-cat" class
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```markdown
|
||||
<!-- panels:start -->
|
||||
<!-- div:your-custom-class -->
|
||||
|
||||
...
|
||||
|
||||
<!-- panels:end -->
|
||||
```
|
||||
|
||||
<!-- div:title-panel -->
|
||||
|
||||
## Customization
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
### Properties
|
||||
|
||||
Allows you to customize panels styles without rewriting any CSS rule.
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
### Custom Properties
|
||||
|
||||
You can change properties by adding a `<style>` tag or `<link>` reference to your `index.html` file after all other stylesheets, just remember to set the properties within a `:root` selector.
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--docsify-example-panels-document-width: 100%; /* Remove margins */
|
||||
--docsify-example-panels-left-panel-width : 70%; /* bit more for left */
|
||||
--docsify-example-panels-right-panel-width : 30%; /* bit less for right */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
<br/>
|
||||
<br/>
|
||||
<!-- div:title-panel -->
|
||||
|
||||
### 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.
|
||||
|
||||
<small> In case you insisted to read this in github url the cat image won't be so floating.</small>
|
||||
|
||||
<!-- div:floating-cat -->
|
||||
|
||||
<img src="assets/imgs/floating-cat.png">
|
||||
|
||||
<!-- div:title-panel -->
|
||||
<hr>
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
1. Add this to your markdown:
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```markdown
|
||||
<!-- panels:start -->
|
||||
<!-- div:floating-cat -->
|
||||
|
||||
<img src="path/to/floating-cat.png">
|
||||
|
||||
<!-- panels:end -->
|
||||
```
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
2. will be rendered like this:
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```html
|
||||
<div class="docsify-example-panels">
|
||||
<div class="docsify-example-panels floating-cat">
|
||||
<img src="path/to/floating-cat.png">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- div:left-panel -->
|
||||
|
||||
3. Then you can play with css animations:
|
||||
|
||||
<!-- div:right-panel -->
|
||||
|
||||
```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);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- panels:end -->
|
||||
|
||||
## 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/)
|
||||
|
||||
<!-- GitHub Buttons -->
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
+17
-1
@@ -19,6 +19,7 @@
|
||||
|
||||
<body>
|
||||
<div id="app">Yggdrasil</div>
|
||||
<footer id="mb-footer"></footer>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Yggdrasil',
|
||||
@@ -111,7 +112,12 @@
|
||||
position: 'bottom',
|
||||
float: 'left',
|
||||
isExpected: false
|
||||
}
|
||||
},
|
||||
timeUpdater: {
|
||||
text: "<div align='center' width='200px' style='color:gray;font-size:10px' >last update time: {docsify-updated}</div>",
|
||||
formatUpdated: "{YYYY}-{MM}-{DD} {HH}:{mm}",
|
||||
whereToPlace: "top",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -167,6 +173,16 @@
|
||||
<!----- Count word ----->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>
|
||||
|
||||
<!----- Progress ----->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-progress@latest/dist/progress.min.js"></script>
|
||||
|
||||
<!----- Accordion ----->
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify-accordion/src/style.css">
|
||||
<script src="//unpkg.com/docsify-accordion/src/index.js"></script>
|
||||
|
||||
<!----- Last time updated ----->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-updated/src/time-updater.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user