Yggdrasil/legacy_docs/divers/panel.md

docsify-example-panels

Star

A docsify.js 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
• FLAP services

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

  <body>
    <img src="http://www.pudim.com.br/pudim.jpg">
  </body>

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

docsify-tabs

docsify-copy-code

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:

HTML

<!-- HTML -->
<h1>Heading</h1>
<p>This is a paragraph.</p>

JS

// JavaScript
function add(a, b) {
  return Number(a + b);
}

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.

<!-- 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>

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).

 <!--&nbsp;panels:start&nbsp;-->

(...) - Awesome div wrapper

 <!--&nbsp;panels:end&nbsp;-->

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.

<!--&nbsp;panels:start&nbsp;-->
<!--&nbsp;div:title-panel&nbsp;-->

  (...) - Awesome title

<!--&nbsp;div:left-panel&nbsp;-->

  (...) - Awesome explanation

<!--&nbsp;div:right-panel&nbsp;-->


  (...) - Awesome example

<!--&nbsp;panels:end&nbsp;-->

3. You can add a custom class aswell.

   perphaps you want something like a "floating-cat" class

<!--&nbsp;panels:start&nbsp;-->
<!--&nbsp;div:your-custom-class&nbsp;-->

...

<!--&nbsp;panels:end&nbsp;-->

Customization

Properties

Allows you to customize panels styles without rewriting any CSS rule.

: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 <style> tag or <link> reference to your index.html file after all other stylesheets, just remember to set the properties within a :root selector.

<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>

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:

  <!--&nbsp;panels:start&nbsp;-->
  <!--&nbsp;div:floating-cat&nbsp;-->

  <img src="path/to/floating-cat.png">

  <!--&nbsp;panels:end&nbsp;-->

2. will be rendered like this:

<div class="docsify-example-panels">
    <div class="docsify-example-panels floating-cat">
        <img src="path/to/floating-cat.png">
    </div>
</div>

3. Then you can play with css animations:

.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 for bug reports, feature requests, or questions
• Add a ⭐️ star on GitHub or ❤️ tweet to support the project!

License

This project is licensed under the MIT license.

Plugin created by Vagner Domingues Madeira

<script async defer src="https://buttons.github.io/buttons.js"></script>