index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Documentation @ galio</title>
    <link rel="icon" href="assets/favicon.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="description"
      content="Free and Open Source React Native Framework "
    />
    <meta
      name="keywords"
      content="galio, mobile framework, android react native, ios react native, free mobile framework, galio docs, react native docs, react native, free react native, open source react native, ui library, mit license, mobile app, documentation, docs, components, navbar, checkbox, react native navbar, react native documentation, galio documentation, ui library components, beautiful ui library, facebook react native, react native framework, react native themes, react native showcase"
    />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="//unpkg.com/docsify-themeable/dist/css/theme-simple.css"
    />
    <link
      rel="stylesheet"
      href="//unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      :root {
        --theme-color: #ff006e;
      }
      .cover:before {
        /*background: #ee9ca7;  /* fallback for old browsers
      background: -webkit-linear-gradient(to bottom, #ffdde1, #fcbac3);  /* Chrome 10-25, Safari 5.1-6
      background: linear-gradient(to bottom, #ffdde1, #fcbac3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
      */
        background-color: white;
        background: url("assets/header-bg.png");
        background-position: center center;
        background-repeat: no-repeat;
      }
      .cover h1 {
        color: black;
      }
      .sidebar-nav li > a[href^="#/"]:not([href*="?id="]):only-child {
        background-image: none;
      }
      .sidebar-nav > a {
        text-align: center;
      }
      .sidebar-nav .logo {
        width: 120px;
      }
      .sidebar-nav > a p {
        font-size: 18px;
        font-weight: 600;
        margin-right: 10px;
      }
      .gitter-open-chat-button,
      .gitter-open-chat-button:visited,
      .gitter-open-chat-button:hover {
        box-sizing: border-box;
        color: #fff;
        background-color: #ff147c;
      }
      .page_toc {
        margin-top: 75px;
      }
      .page_toc div[class^="lv"] a:hover span {
        color: #fe2472 !important;
      }


    </style>
    <!-- Google Tag Manager -->
    <script>
      (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", "GTM-MJ9SQDH");
    </script>
    <!-- End Google Tag Manager -->
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-MJ9SQDH"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      ></iframe
    ></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <script>

      (function(window) {
        window.DocsifyCarbon = {
          scriptEl: null,
          create: function(CarbonId, CarbonPlacement) {
            return function(hook, vm) {
              hook.ready(function() {
                window.DocsifyCarbon.injectCarbonStyle();
              })

              hook.doneEach(function () {
                window.DocsifyCarbon.injectCarbonScript(CarbonId, CarbonPlacement);
              })
            }
          },

          injectCarbonScript: function(CarbonId, CarbonPlacement) {
            if (document.getElementById("carbonads") === null) {

              if (window.DocsifyCarbon.scriptEl) {
                window.DocsifyCarbon.scriptEl.remove()
              }

              var script = document.createElement('script')
              script.src="https://cdn.carbonads.com/carbon.js?serve=" + CarbonId + "&placement=" + CarbonPlacement
              script.async = "async"
              script.id = "_carbonads_js"
              window.DocsifyCarbon.scriptEl = script

              var nav = document.getElementsByClassName('sidebar-nav-carbon');
              nav[0].insertBefore(script, nav[0].firstChild);
            }
          },

          injectCarbonStyle: function() {
            var style = document.createElement('style');
            var css = `
            #carbonads {
              display: block;
              overflow: hidden;
              padding: 1em;
              max-width: 300px;
              background: #fff;
              text-align: center;
              font-size: 14px;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
              line-height: 1.5;
            }

            #carbonads a {
              color: inherit;
              text-decoration: none;
              white-space: break-spaces;
              max-width: 190px;
            }

            #carbonads a:hover {
              color: inherit;
            }

            #carbonads span {
              display: block;
              overflow: hidden;
            }

            .carbon-img {
              display: block;
              margin: 0 auto 8px;
              line-height: 1;
            }

            .carbon-img img{
              margin-right: 0 !important;
            }

            .carbon-text {
              display: block;
              margin-bottom: 8px;
            }

            .carbon-poweredby {
              display: block;
              text-transform: uppercase;
              letter-spacing: 1px;
              font-size: 10px;
              line-height: 1;
            }

            @media (max-width: 576px){
              #carbonads{
                margin: auto;
                margin-top: 30px;
              }

              #carbonads .carbon-poweredby{
                left: 143px;
              }

            }`;

            style.type = 'text/css';
            if (style.styleSheet){
              style.styleSheet.cssText = css;
            } else {
              style.appendChild(document.createTextNode(css));
            }
            document.head.appendChild(style);
          }

        }
      })(window);
    </script>
    <div id="app"></div>
    <script>
      (function injectDiscord(window) {
        window.injectDiscord = {
          scriptEl: null,
          create: function(serverID) {
            return function(hook, vm) {
              hook.ready(function() {
                window.injectDiscord.injectDiscordButtonStyle();
              });

              hook.doneEach(function() {
                window.injectDiscord.injectDiscordContainer();
                window.injectDiscord.injectDiscordScript(serverID);
              });
            };
          },
          injectDiscordContainer(){
            // creating the Button container
            let discordButton = document.createElement("div");
            discordButton.id = "discord-button";
            discordButton.innerHTML = '<div style="margin-top: 9px; display: flex;"><img style="width: 17px; height: 17px; display: inline-block; margin-right: 5px; margin-top: 4px;" src="https://discordapp.com/assets/1c8a54f25d101bdc607cec7228247a9a.svg" /><p style="margin-top: 0px; font-size: 14px; display: inline-block; color: white; font-weight: 600;">Open Discord</p></div>';
            document.body.appendChild(discordButton);

            // creating the Discord container
            let discordContainer = document.createElement("div");
            discordContainer.id = "discord";
            document.body.appendChild(discordContainer)
          },
          injectDiscordScript(serverID) {
            if (window.injectDiscord.scriptEl) {
              window.injectDiscord.scriptEl.remove();
            }

            var discordDiv = document.getElementById('discord');
            discordDiv.innerHTML = `<iframe src="https://discordapp.com/widget?id=${serverID}&theme=dark"
            width="300" height="500" allowtransparency="true"
            frameborder="0"></iframe>`;

            var discordButtonDiv = document.getElementById('discord-button');
            discordButtonDiv.addEventListener("click",function() {
              discordDiv.classList.toggle("opened");
            })


            var script = document.createElement("script");
            document.body.appendChild(script);
            window.injectDiscord.scriptEl = script;
          },
          injectDiscordButtonStyle() {
            var style = document.createElement("style");
            //window.injectDiscord.injectDiscordContainer();
            var css =
              `
                #discord {
                  opacity: 0;
                  position: fixed;
                  right: -370px;
                  bottom: 40px;
                  animation: y .5s cubic-bezier(.23,1,.32,1);
                  transition: all .5s ease;
                }
                #discord.opened{
                  opacity: 1;
                  right: 20px !important;
                  animation: k .5s cubic-bezier(.23,1,.32,1);
                  transition: all .5s ease;
                }

                #discord-button {
                  bottom: 0;
                  position: fixed;
                  right: 20px;
                  width: 140px;
                  height: 40px;
                  padding-left: 10px;
                  padding-right: 10px;
                  border-radius: 5px 5px 0px 0px;
                  align-content: center;
                  background-color: #7289da;
                  -webkit-touch-callout: none; /* iOS Safari */
                  -webkit-user-select: none; /* Safari */
                  -khtml-user-select: none; /* Konqueror HTML */
                    -moz-user-select: none; /* Old versions of Firefox */
                      -ms-user-select: none; /* Internet Explorer/Edge */
                          user-select: none; /* Non-prefixed version, currently
                                                supported by Chrome, Opera and Firefox */
                }
                #discord-button:hover {
                  cursor: pointer;
                }

                @keyframes k {
                  from {right:-370px;}
                  to {right:20px;}
                }
                @keyframes y {
                  from {right:20px;}
                  to {right:-370px;}
                }
              `;

            style.type = "text/css";
            if (style.styleSheet) {
              style.styleSheet.cssText = css;
            } else {
              style.appendChild(document.createTextNode(css));
            }
            document.head.appendChild(style);
          }
        };
      })(window);
    </script>
    <script>
      window.$docsify = {
        // link to galio github
        repo: "https://github.com/galio-org/galio",
        alias: {
          "/es/_navbar.md": "/es/_navbar.md",
          "/es/_sidebar.md": "/es/_sidebar.md",
          "/es/components": "/es/_sidebar.md",
          "/.*/_navbar.md": "/_navbar.md",
          "/.*/_sidebar.md": "/_sidebar.md"
        },
        // load navbar into sidebar on small screen
        mergeNavbar: true,
        // load sidebar
        loadSidebar: true,
        subMaxLevel: 3,
        // load navbar
        loadNavbar: true,
        coverpage: true,
        auto2top: true,
        plugins: [DocsifyCarbon.create('CE7IPK3L', 'galioio'), injectDiscord.create('634211925399437322')]
      };
    </script>

    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
    <script src="https://unpkg.com/docsify-copy-code@2"></script>
    <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  </body>
</html>