documentation page updated

.markdownlint.yaml

@@ -0,0 +1,6 @@
+{
+    "MD013": false,
+    "MD025": false,
+    "MD033": false,
+    "MD045": false
+}

_includes/main-menu.html

@@ -1,8 +1,8 @@
 <div class="header-menu">
   <div class="main">
-    <a href="/pages/docs">Documentation</a>
+    <a href="/pages/documentation/general-introduction">Documentation</a>
     <a href="/pages/support">Support</a>
-    <a href="/pages/extensions">Extensions</a>
+    <a href="/pages/extensions/general-introduction">Extensions</a>
     <a href="/pages/pricing">Pricing</a>
   </div>
 

_includes/rapi-code.html

@@ -0,0 +1,11 @@
+<div class="code-rapi copy-root">
+  <div class="header">
+    <div class="title">{{ include.title }}</div>
+    <span class="copy-button" onclick="copyWingetCommand()">
+        <i class="ph-fill ph-copy default"></i>
+        <i class="ph ph-check hidden coppied"></i>
+      </span>
+  </div>
+
+  <div class="code copy-text">{{ include.code }}</div>
+</div>

_layouts/base.html

@@ -13,7 +13,7 @@
     })(window, document, 'script', 'dataLayer', 'GTM-MGFNZCFG');</script>
   <!-- End Google Tag Manager -->
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=1240, initial-scale=1">
   <meta charset="utf-8">
   <title>
     {% if page.title %}
@@ -38,6 +38,22 @@
   <div class="bg">
     {{ content }}
   </div>
+
+  <script>
+    function copyWingetCommand() {
+      // find  parent with class "copy-root"
+      const text = $(event.target).closest(".copy-root").find(".copy-text").text().trim();
+      navigator.clipboard.writeText(text);
+
+      $(".copy-button .default").addClass("hidden");
+      $(".copy-button .coppied").removeClass("hidden");
+
+      setTimeout(() => {
+        $(".copy-button .default").removeClass("hidden");
+        $(".copy-button .coppied").addClass("hidden");
+      }, 2000);
+    }
+  </script>
 </body>
 
 </html>

_layouts/documentation.html

@@ -0,0 +1,47 @@
+---
+layout: base
+bodyClass: inner
+---
+
+<header>
+  {% include logo.html %}
+  <div>{% include main-menu.html %}</div>
+</header>
+<main class="documentation">
+  <nav class="menu">
+    <div>
+      {% assign menu_path = page.menu | default: "_menu.html" %} {% include_relative {{ menu_path }} %}
+    </div>
+  </nav>
+  <div class="content">{{ content }}</div>
+</main>
+<footer>{% include footer.html %}</footer>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("pre code").forEach((block) => {
+      const preElement = block.parentNode;
+      const codeElement = block;
+
+      preElement.classList.add("copy-root");
+      codeElement.classList.add("copy-text");
+
+      block.parentNode.insertAdjacentHTML(
+        "beforeend",
+        '<span class="copy-button" onclick="copyWingetCommand()">' +
+          '<i class="ph-fill ph-copy default"></i>' +
+          '<i class="ph ph-check hidden coppied"></i>' +
+        '</span>'
+      );
+    });
+
+    const currentPath = window.location.pathname;
+    const menuItems = document.querySelectorAll(".documentation .menu ul li a");
+
+    menuItems.forEach(function (menuItem) {
+      if (menuItem.getAttribute("href") === currentPath) {
+        menuItem.classList.add("active");
+      }
+    });
+  });
+</script>

_sass/base.blocks.scss

@@ -32,3 +32,22 @@
     }
   }
 }
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 60px;
+
+  & > .col {
+    flex: 1;
+  }
+}
+
+.flex-h-center {
+  display: flex;
+  justify-content: center;
+}
+
+.mt15 {
+  margin-top: 15px;
+}

_sass/base.colors.scss

@@ -7,7 +7,8 @@ body {
   --app-bg-accent-hover: #7c4be5;
   --app-bg-action: #4d8a43;
   --app-bg-action-hover: #65a95a;
-  --app-fg-color: #C9C9C9;
+  --app-fg-color: #c3c3c3;
+  --app-fg-active: #fff;
   --app-fg-accent: #9461ff;
   --app-fg-accent-hover: #c3a8ff;
   --app-fg-warning: #B68C46;

_sass/base.rapi.scss

@@ -0,0 +1,50 @@
+.code-rapi {
+  border: solid 1px var(--app-stroke);
+  border-radius: 18px;
+  overflow: hidden;
+  margin: 20px 0;
+  font-size: 0.875rem;
+
+  .header {
+    background-color: var(--app-bg-color);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 20px;
+
+    .title {
+      padding: 7px 10px 5px;
+      border-bottom: solid 1px var(--app-fg-accent);
+      color: var(--app-fg-accent);
+    }
+
+    .copy-button {
+      font-size: 1.2rem;
+      margin-top: 8px;
+      color: var(--app-fg-muted);
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--app-fg-active);
+      }
+    }
+  }
+
+  .code {
+    background-color: var(--app-bg-second);
+    padding: 15px 20px 18px;
+    line-height: 1.3rem;
+
+    .comment {
+      color: #4d8a43;
+    }
+
+    .method {
+      color: #61FF3E;
+    }
+
+    .endpoint {
+      color: #EE9457;
+    }
+  }
+}

_sass/base.scss

@@ -13,6 +13,7 @@ body {
   margin: 0;
   height: 100vh;
   width: auto;
+  min-width: 1240px;
 
   box-sizing: border-box;
   z-index: 1;
@@ -192,6 +193,17 @@ footer {
   color: var(--app-fg-warning);
 }
 
+.copy-button {
+  margin-top: 2px;
+  cursor: pointer;
+  color: var(--app-fg-inactive);
+
+  &:hover {
+    opacity: 1;
+    color: var(--app-fg-color);
+  }
+}
+
 @mixin ph-icon {
   display: inline-block;
   font-family: "Phosphor" !important;