docula 0.5.4 → 0.6.0

package/template/css/multipage.css

@@ -0,0 +1,496 @@
+/* Home */
+.home-hero {
+  padding: 3.5rem 0 4.5rem;
+}
+
+.home-container {
+  margin: 2rem 2rem 3rem;
+}
+
+.home-container h1 {
+  font-weight: 500;
+  font-size: 1.75rem;
+}
+
+.home-docs-button {
+  padding: 0.75rem 1.5rem;
+  border: 2px solid var(--color-secondary-dark);
+  border-radius: 0.5rem;
+  color: var(--color-secondary-dark);
+  font-weight: 600;
+}
+
+/* Docs */
+.nav {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 4.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid var(--border);
+  z-index: 3;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+
+.nav-list {
+  padding-left: 0;
+}
+
+.nav-list li {
+  margin-top: 1.5rem;
+  color: var(--sidebar-text);
+  list-style: none;
+}
+
+.nav-list .active {
+  color: var(--sidebar-text-active);
+}
+
+.icon {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.menu-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.5rem;
+}
+
+.menu-btn span {
+  text-transform: uppercase;
+  font-size: 0.625rem;
+  vertical-align: super;
+  color: var(--color-text);
+}
+
+.header-menu {
+  display: flex;
+  align-items: center;
+}
+
+.header-logo {
+  flex-shrink: 0;
+  margin-right: 1.5rem;
+  display: block;
+}
+
+.header-logo img {
+  width: 3rem;
+  height: 3rem;
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+details > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.child-list {
+  padding-left: 1.125rem;
+}
+
+.child-list li {
+  color: var(--sidebar-text);
+  opacity: 0.8;
+}
+
+.sidebar {
+  background: var(--sidebar-background);
+  z-index: 10000;
+  width: 100%;
+  top: 0;
+  height: 100vh;
+  flex-direction: column;
+  flex-shrink: 0;
+  position: fixed;
+  font-family: var(--font-family);
+  border-right: 1px solid var(--border);
+}
+
+.sidebar-container {
+  overflow-y: auto;
+  width: inherit;
+  flex-grow: 1;
+  position: relative;
+}
+
+.sidebar-content {
+  padding: 3rem 2.5rem 1.5rem;
+  overflow-y: auto;
+  font-size: 0.875rem;
+  height: 90vh;
+}
+
+.sidebar-logo {
+  display: none;
+}
+
+.close-btn {
+  transition: all .2s ease-out;
+  color: var(--sidebar-text);
+  margin-top: 3rem;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-right: 2.5rem;
+}
+
+.close-btn svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+  margin-right: 1rem;
+}
+
+.main-container {
+  width: 100%;
+  overflow-x: hidden;
+  padding-top: 2rem;
+}
+
+.main-content {
+  padding: 0 1.5rem;
+  display: flex;
+}
+
+.breadcrumb {
+  line-height: 1rem;
+  font-size: 0.625rem;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.sidebar-footer {
+  padding: 1rem 2.5rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  border-top: 1px solid var(--border);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 0;
+  background-color: var(--sidebar-background);
+  width: 100%;
+}
+
+.sidebar-footer a {
+  font-size: 0.75rem;
+  color: var(--sidebar-text);
+}
+
+.sidebar-footer a:first-child {
+  margin-right: 2rem
+}
+
+.on-page-container {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+
+.on-page-container h5 {
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 1rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--color-secondary);
+}
+
+.on-page-container .toc {
+  list-style: none;
+  line-height: 1.5rem;
+  padding-left: 0;
+  width: 100%;
+  font-size: 0.875rem;
+}
+
+.on-page-container ol {
+  padding-left: 0;
+  list-style: none;
+  width: 100%;
+}
+
+.on-page-container ol > li {
+  display: flex;
+  align-items: baseline;
+  position: relative;
+}
+
+.on-page-container ol > li > a {
+  transition: all .2s ease-out;
+  color: var(--color-secondary);
+  padding: 0.5rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+}
+
+.on-page-container ol > li:hover > a {
+  transform: translateX(0.25rem);
+}
+
+.on-page-main ol > li > a::after {
+  position: absolute;
+  right: 0;
+  content: '';
+  display: inline-block;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-right: 1px solid var(--color-secondary);
+  border-bottom: 1px solid var(--color-secondary);
+  transform: rotate(-45deg);
+}
+
+.on-page-list {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+}
+
+@media screen and (min-width: 576px) {
+  .date {
+    display: flex;
+    position: relative;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--color-secondary);
+    font-size: 0.625rem;
+    font-weight: 600;
+  }
+
+  .date span::before {
+    position: absolute;
+    content: '';
+    background-image: url("data:image/svg+xml,%3Csvg class='block h-full' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 22A11 11 0 1 1 22 11 11 11 0 0 1 11 22ZM11 2a9 9 0 1 0 9 9A9 9 0 0 0 11 2Z'%3E%3C/path%3E%3Cpath d='M15 14a.93.93 0 0 1-.45-.11l-4-2A1 1 0 0 1 10 11V5a1 1 0 0 1 2 0v5.38l3.45 1.73a1 1 0 0 1 .44 1.34A1 1 0 0 1 15 14Z'%3E%3C/path%3E%3C/svg%3E");
+    left: -1.5rem;
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .nav {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+
+@media screen and (min-width: 640px) {
+  .home-container {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+  .home-hero {
+    padding: 4rem 0 4.5rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .home-hero {
+    padding: 4.5rem 0;
+  }
+
+  .main-content {
+    padding: 0 3.5rem 1.5rem;
+  }
+  .main-container {
+    padding-top: 7.5rem;
+  }
+  .nav {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .home-container {
+    margin: 4.5rem auto 3.5rem;
+  }
+  .home-hero {
+    padding: 7.5rem 0;
+  }
+  .home-hero img {
+    max-width: 28rem;
+  }
+  .home-container h1 {
+    font-size: 2rem;
+  }
+  .home-docs-button {
+    font-size: 1.5rem;
+  }
+
+  .header {
+    display: none;
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+    height: auto;
+    box-shadow: none;
+    padding-right: 1rem;
+    z-index: 30;
+  }
+  .sidebar {
+    width: 20.25rem;
+    display: flex;
+    height: 100%;
+    z-index: 20;
+  }
+  .close-btn {
+    display: none;
+  }
+  .sidebar-content {
+    padding-top: 1.5rem;
+    height: 100%;
+  }
+  .nav-list {
+    margin-top: 0;
+  }
+  .main-container {
+    margin-top: 3rem;
+    padding-top: 0;
+  }
+  .header-link {
+    margin-top: 1.25rem;
+  }
+  .header-link img {
+    width: 11.25rem;
+  }
+  .layout {
+    display: grid;
+    grid-template-columns: 20.25rem 1fr;
+    grid-template-rows: 1fr;
+    grid-gap: 0;
+  }
+  aside {
+    grid-area: 1 / 1 / 4 / 2;
+    position: fixed;
+    top: 12.5rem;
+    left: 0;
+    z-index: 40;
+    height: 100%;
+    width: 20.25rem;
+  }
+  .main-container {
+    grid-area: 1 / 2 / 4 / 3;
+  }
+  .sidebar-logo {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 80;
+    width: 20.25rem;
+    background-color: var(--sidebar-background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid var(--border);
+  }
+  .sidebar-logo svg {
+    width: 2rem;
+    height: 2rem;
+  }
+  .header-content {
+    display: flex;
+    height: 100%;
+  }
+  .nav {
+    justify-content: flex-start;
+    padding-left: 3.5rem;
+    z-index: 30;
+  }
+  .nav-list {
+    padding-left: 0;
+  }
+  .on-page--desktop ~ .on-page-list {
+    margin-left: 0;
+  }
+  .sidebar-footer {
+    position: sticky;
+  }
+}
+
+@media screen and (min-width: 1458px) {
+  .on-page--desktop ol {
+    font-size: 0.75rem;
+  }
+
+  .on-page--desktop ol li a {
+    padding: 0.25rem 0;
+  }
+  .on-page--desktop {
+    width: 100%;
+    position: relative;
+    transition: all .3s ease-in;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .on-page-fixed {
+    position: fixed;
+    max-width: 12.5rem;
+  }
+  .main-content {
+    padding: 0 3.5rem 1.5rem;
+  }
+}
+
+@media screen and (min-width: 1600px) {
+  .layout {
+    grid-template-columns: 23.75rem 1fr;
+  }
+  .sidebar, aside, .sidebar-logo  {
+    width: 23.75rem;
+  }
+  .sidebar-logo, .sidebar-content, .sidebar-footer {
+    padding-left: 3.25rem;
+    padding-right: 3.25rem;
+  }
+  .main-content {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+  .on-page--desktop {
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .layout {
+    grid-template-columns: 28.75rem 1fr;
+  }
+  .sidebar, aside, .sidebar-logo  {
+    width: 28.75rem;
+  }
+  .sidebar-logo, .sidebar-content, .sidebar-footer {
+    padding-left: 5.5rem;
+    padding-right: 5.5rem;
+  }
+}
+
+
+@media screen and (min-width: 2400px) {
+  .layout {
+    grid-template-columns: 37.5rem 1fr;
+  }
+  .sidebar, aside, .sidebar-logo  {
+    width: 37.5rem;
+  }
+  .sidebar-logo, .sidebar-content, .sidebar-footer {
+    padding-left: 7.5rem;
+    padding-right: 7.5rem;
+  }
+}

package/template/css/singlepage.css

@@ -0,0 +1,11 @@
+.home-hero {
+  display: flex;
+  justify-content: center;
+  height: 20vh;
+}
+
+@media screen and (min-width: 768px) {
+  .home-hero {
+    height: 40vh;
+  }
+}

package/template/docs.hbs

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {{> header }}
+  <title>{{siteTitle}} - {{title}} </title>
+</head>
+
+<body>
+  <a class="github-fork-ribbon" href="https://github.com/jaredwray/keyv" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+  <main class="layout">
+    {{> multipage/header }}
+    {{> multipage/sidebar }}
+    {{> multipage/doc }}
+  </main>
+  {{> footer}}
+
+  {{> scripts }}
+  {{> multipage/scripts }}
+
+
+</body>
+</html>

package/template/includes/header.hbs

@@ -1,8 +1,13 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="/css/variables.css" />
-<link rel="stylesheet" href="/css/index.css" />
-<link rel="stylesheet" href="/css/home.css" />
+
+<link rel="stylesheet" href="/css/base.css" />
+{{#if hasDocuments}}
+  <link rel="stylesheet" href="/css/multipage.css" />
+{{else}}
+  <link rel="stylesheet" href="/css/landing.css" />
+{{/if}}
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link

package/template/includes/multipage/doc.hbs

@@ -0,0 +1,10 @@
+<div class="main-container">
+  <div class="main-content">
+    <article class="content">
+      <div class="items-start">
+      </div>
+      {{generatedHtml}}
+    </article>
+  </div>
+
+</div>

package/template/includes/multipage/header.hbs

@@ -0,0 +1,15 @@
+<header class="header" id="header">
+  <div class="header-content">
+    <nav class="nav">
+      <div class="header-menu hide-d">
+        <a class="header-logo" href="/">
+          <img src="/logo.svg" alt="logo" />
+        </a>
+        <button id="open-sidebar" class="icon menu-btn">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+          <span>Menu</span>
+        </button>
+      </div>
+    </nav>
+  </div>
+</header>

package/template/includes/multipage/hero.hbs

@@ -0,0 +1,7 @@
+<section class="home-hero">
+  <img src="/logo.svg" alt="logo"/>
+  <div class="home-container">
+    <h1>{{ siteDescription }}</h1>
+  </div>
+  <a href="/docs" class="home-docs-button">Documentation</a>
+</section>

package/template/includes/multipage/home.hbs

@@ -0,0 +1,61 @@
+<article class="home-container">
+    {{#if github}}
+    {{#if github.contributors}}
+    <div class="content-container">
+        <h2 class="home-title">Contributors</h2>
+        <div class="facepile-container">
+            <div class="facepile">
+                {{#each github.contributors}}
+                <a
+                        href="{{html_url}}"
+                        target="_blank"
+                        title="{{login}}"
+                        rel="noopener noreferrer"
+                >
+                    <img src="{{avatar_url}}" alt="{{login}}"/>
+                </a>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+    {{/if}}
+
+    {{#if github.releases}}
+    <div class="content-container">
+        <h2 class="home-title">Latest's Releases</h2>
+        {{#each github.releases as |release|}}
+          {{#if (lt @index 3)}}
+        <div class="release">
+            <div class="release-header">
+                <a
+                        class="release-title"
+                        href="{{release.html_url}}"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                >{{release.name}}</a>
+                <span class="release-date">{{#moment
+                    release.published_at "MMMM DD, yyyy"
+                  }}{{/moment}}
+                </span>
+            </div>
+            <div class="release-body">
+                {{#if release.body}}
+                  {{#markdown}}{{release.body}}{{/markdown}}
+                {{/if}}
+            </div>
+        </div>
+        {{/if}}
+        {{/each}}
+
+        {{#if (gt github.releases.length 6)}}
+        <div>
+            <a class="release-btn" href="/releases">
+                All Releases
+                <span>→</span>
+            </a>
+        </div>
+        {{/if}}
+    </div>
+    {{/if}}
+  {{/if}}
+</article>

package/template/includes/multipage/scripts.hbs

@@ -0,0 +1,60 @@
+<script defer>
+  const sidebar = document.querySelector('#sidebar');
+  const header = document.querySelector('#header');
+  const path = window.location.pathname;
+  const isHome = path === '/' || path === '/index.html';
+  const isDesktop  = window.innerWidth >= 992;
+
+  const handleScroll = () => {
+    const onPage = document.querySelector('#on-page');
+    if(!isHome) {
+      if (window.scrollY > 250 && window.innerWidth >= 1458) {
+        onPage.style.display = 'block';
+        onPage.classList.add('on-page-fixed');
+      } else {
+        onPage.classList.remove('on-page-fixed');
+        onPage.style.display = 'none';
+      }
+    }
+  };
+  window.addEventListener('scroll', handleScroll);
+
+
+  const  closeSidebar = () => {
+    const closeBtn = document.querySelector('#close-sidebar');
+    closeBtn.addEventListener('click', () => {
+      sidebar.classList.add('hidden');
+      header.classList.remove('bottom');
+    });
+  }
+
+  const openSidebar = () => {
+    const openBtn = document.querySelector('#open-sidebar');
+    openBtn.addEventListener('click', () => {
+      sidebar.classList.remove('hidden');
+      header.classList.add('bottom');
+    });
+  }
+
+  const handleMobileSidebar = () => {
+    if (!isHome && !isDesktop) {
+      openSidebar()
+      closeSidebar();
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', handleMobileSidebar, false);
+
+  const sidebarElements = document.querySelectorAll('.nav-list li a');
+  sidebarElements.forEach((element) => {
+    if (element.href === window.location.href) {
+      element.classList.add('active');
+
+      if (element.parentElement.parentElement.parentElement.tagName === 'DETAILS') {
+        element.parentElement.parentElement.parentElement.open = true;
+        element.parentElement.parentElement.parentElement.classList.add('active');
+      }
+    }
+  });
+
+</script>