docula 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docula",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Beautiful Website for Your Projects",
   "type": "module",
   "exports": "./dist/index.js",
@@ -40,26 +40,26 @@
     "docula": "./bin/docula.mjs"
   },
   "dependencies": {
-    "axios": "^1.7.2",
-    "ecto": "^3.0.6",
+    "axios": "^1.7.3",
+    "ecto": "^3.0.8",
     "express": "^4.19.2",
     "feed": "^4.2.2",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "keyv": "^4.5.4",
-    "update-notifier": "^7.1.0"
+    "update-notifier": "^7.2.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.14.11",
+    "@types/node": "^22.0.2",
     "@types/update-notifier": "^6.0.8",
-    "@vitest/coverage-v8": "^2.0.3",
+    "@vitest/coverage-v8": "^2.0.5",
     "rimraf": "^5.0.7",
-    "typescript": "^5.5.3",
-    "vitest": "^2.0.3",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.5",
     "webpack": "^5.93.0",
-    "xo": "^0.59.0"
+    "xo": "^0.59.3"
   },
   "xo": {
     "ignores": [

package/template/css/base.css

@@ -54,7 +54,7 @@ hr {
   max-width: 12.5rem;
 }
 
-.home-container {
+.home-container, .versions-container {
   max-width: 90%;
   margin: 0 auto;
   color: var(--color-text);
@@ -71,7 +71,7 @@ hr {
 }
 
 .content-container {
-  margin: 6rem 0;
+  margin: 3rem 0;
 }
 
 .facepile-container {
@@ -230,31 +230,37 @@ footer img {
   letter-spacing: -.5px;
   font-weight: 700;
   font-size: 1.5rem;
-  line-height: 3rem;
+  line-height: 2rem;
 }
 
 .content h2 {
-  font-size: 1.25rem;
+  font-size: 1.375rem;
   line-height: 2rem;
-  padding-top: 4.25rem;
+  padding-top: 2rem;
   margin-bottom: 0;
   font-weight: 600;
 }
 
 .content h3 {
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   line-height: 1.5rem;
-  padding-top: 3rem;
+  padding-top: 1.8rem;
   margin-bottom: 0;
   font-weight: 600;
 }
 
+.content h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
 .content h4, .content h5, .content h6 {
   padding-top: 1.875rem;
 }
 
-.content h4, .content h5, .content h6 {
+.content h5, .content h6 {
   font-weight: 600;
+  font-size: 1rem;
 }
 
 .content p {
@@ -262,7 +268,6 @@ footer img {
   line-height: 1.5rem;
 }
 
-
 .content > ul, .content > ol {
   margin-top: 0.75rem;
   padding-left: 1rem;
@@ -288,6 +293,15 @@ footer img {
   line-height: 1.5;
 }
 
+.content li > a {
+  transition: all .2s ease-out;
+  cursor: pointer;
+}
+
+.content li > a:hover {
+  text-decoration: underline;
+}
+
 .content pre {
   margin-top: 1.375rem;
   margin-bottom: 2rem;
@@ -353,8 +367,10 @@ footer img {
 }
 
 @media screen and (min-width: 640px) {
-  .home-container {
+  .home-container, .versions-container {
     max-width: 82%;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -366,14 +382,20 @@ footer img {
     margin-bottom: 4rem;
   }
   .versions-container {
-    margin: 4.5rem 0;
+    margin-bottom: 4.5rem;
   }
   .content-container {
-    margin: 6rem 0;
+    margin: 4rem 0;
   }
   .content h1 {
     font-size: 1.875rem;
   }
+  .content h2 {
+    padding-top: 3rem;
+  }
+  .content h3 {
+    padding-top: 2.5rem;
+  }
 }
 
 @media screen and (min-width: 992px) {
@@ -383,8 +405,10 @@ footer img {
   .home-hero img {
     max-width: 37.5rem;
   }
-  .home-container {
+  .home-container, .versions-container {
     max-width: 70%;
+    margin-left: auto;
+    margin-right: auto;
   }
   .home-title {
     margin-bottom: 4rem;
@@ -415,11 +439,11 @@ footer img {
 }
 
 @media screen and (min-width: 1200px) {
-  .home-container {
+  .home-container, .versions-container {
     max-width: 59.25rem;
   }
   .content-container {
-    margin: 10rem 0;
+    margin: 7rem 0;
   }
   .facepile > a {
     margin-left: -1.9rem;
@@ -429,7 +453,7 @@ footer img {
     max-height: 4.4rem;
   }
   .versions-container {
-    margin: 7.5rem 0;
+    margin-bottom: 7rem;
   }
 }
 

package/template/css/multipage.css

@@ -1,15 +1,20 @@
 /* Home */
 .home-hero {
-  padding: 3.5rem 0 4.5rem;
+  padding: 3rem 0 2.5rem;
+}
+
+.hero-container {
+  margin: 2rem auto 3rem;
+  max-width: 90%;
 }
 
 .home-container {
-  margin: 2rem 2rem 3rem;
+  margin: 0 auto 3rem;
 }
 
-.home-container h1 {
+.home-container h1, .hero-container h1 {
   font-weight: 500;
-  font-size: 1.75rem;
+  font-size: 1.5rem;
 }
 
 .home-docs-button {
@@ -123,7 +128,7 @@ details > summary {
 }
 
 .sidebar-content {
-  padding: 3rem 2.5rem 1.5rem;
+  padding: 3rem 2rem 1.5rem;
   overflow-y: auto;
   font-size: 0.875rem;
   height: 90vh;
@@ -290,18 +295,14 @@ details > summary {
 
 
 @media screen and (min-width: 640px) {
-  .home-container {
-    margin-left: 4rem;
-    margin-right: 4rem;
-  }
   .home-hero {
-    padding: 4rem 0 4.5rem;
+    padding: 4rem 0;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .home-hero {
-    padding: 4.5rem 0;
+  .home-container h1, .hero-container h1 {
+    font-size: 1.75rem;
   }
 
   .main-content {
@@ -318,15 +319,15 @@ details > summary {
 
 @media screen and (min-width: 992px) {
   .home-container {
-    margin: 4.5rem auto 3.5rem;
+    margin: 0 auto 3.5rem;
   }
-  .home-hero {
-    padding: 7.5rem 0;
+  .hero-container {
+    margin-bottom: 3.5rem;
   }
   .home-hero img {
     max-width: 28rem;
   }
-  .home-container h1 {
+  .home-container h1, .hero-container h1 {
     font-size: 2rem;
   }
   .home-docs-button {
@@ -456,8 +457,8 @@ details > summary {
     width: 23.75rem;
   }
   .sidebar-logo, .sidebar-content, .sidebar-footer {
-    padding-left: 3.25rem;
-    padding-right: 3.25rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
   }
   .main-content {
     padding-left: 4.5rem;
@@ -476,8 +477,8 @@ details > summary {
     width: 28.75rem;
   }
   .sidebar-logo, .sidebar-content, .sidebar-footer {
-    padding-left: 5.5rem;
-    padding-right: 5.5rem;
+    padding-left: 4rem;
+    padding-right: 4rem;
   }
 }
 
@@ -490,7 +491,7 @@ details > summary {
     width: 37.5rem;
   }
   .sidebar-logo, .sidebar-content, .sidebar-footer {
-    padding-left: 7.5rem;
-    padding-right: 7.5rem;
+    padding-left: 6rem;
+    padding-right: 6rem;
   }
 }

package/template/docs.hbs

@@ -10,13 +10,12 @@
   <main class="layout">
     {{> multipage/header }}
     {{> multipage/sidebar }}
-    {{> multipage/doc }}
+{{> multipage/doc }}
   </main>
   {{> footer}}
 
   {{> scripts }}
   {{> multipage/scripts }}
 
-
 </body>
 </html>

package/template/includes/multipage/doc.hbs

@@ -3,7 +3,7 @@
     <article class="content">
       <div class="items-start">
       </div>
-      {{generatedHtml}}
+{{generatedHtml}}
     </article>
   </div>
 

package/template/includes/multipage/hero.hbs

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

package/template/includes/multipage/home.hbs

@@ -39,9 +39,9 @@
                 </span>
             </div>
             <div class="release-body">
-                {{#if release.body}}
-                  {{#markdown}}{{release.body}}{{/markdown}}
-                {{/if}}
+{{#if release.body}}
+{{#markdown}}{{release.body}}{{/markdown}}
+{{/if}}
             </div>
         </div>
         {{/if}}

package/template/includes/singlepage/content.hbs

@@ -1,26 +1,26 @@
 <article class="home-container">
-  <div class="content">{{{content}}}</div>
+<div class="content">{{{content}}}</div>
 
-  {{#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>
+{{#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>
-    {{/if}}
+    </div>
+  {{/if}}
 
     {{#if github.releases}}
       <div class="content-container">
@@ -41,9 +41,9 @@
                 </span>
               </div>
               <div class="release-body">
-                {{#if release.body}}
-                  {{#markdown}}{{release.body}}{{/markdown}}
-                {{/if}}
+{{#if release.body}}
+{{#markdown}}{{release.body}}{{/markdown}}
+{{/if}}
               </div>
             </div>
           {{/if}}

package/template/index.hbs

@@ -7,21 +7,21 @@
   <body>
     <a class="github-fork-ribbon" href="https://github.com/{{ githubPath }}" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
 
-    {{#if content}}
-      {{> singlepage/hero }}
-      {{> singlepage/content }}
-    {{else}}
-      <main class="home">
-        {{> multipage/hero }}
-        {{> multipage/home }}
-      </main>
-    {{/if}}
+{{#if content}}
+{{> singlepage/hero }}
+{{> singlepage/content }}
+{{else}}
+  <main class="home">
+    {{> multipage/hero }}
+{{> multipage/home }}
+  </main>
+{{/if}}
 
-    {{> footer}}
-    {{> scripts }}
+  {{> footer}}
+  {{> scripts }}
 
-    {{#unless content}}
-      {{> multipage/scripts }}
-    {{/unless}}
+  {{#unless content}}
+    {{> multipage/scripts }}
+  {{/unless}}
   </body>
 </html>

package/template/releases.hbs

@@ -8,8 +8,8 @@
 <body>
   {{> singlepage/hero }}
   <a class="github-fork-ribbon" href="https://github.com/jaredwray/docula" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
-  <main class="home-container">
-    <div class="content-container versions-container">
+  <main class="versions-container">
+    <div class="versions-content">
       <h2 class="home-title">Releases</h2>
       {{#if github}}
         {{#if github.releases}}
@@ -28,9 +28,9 @@
                 </span>
               </div>
               <div class="release-body">
-                {{#if release.body}}
-                  {{#markdown}}{{release.body}}{{/markdown}}
-                {{/if}}
+{{#if release.body}}
+{{#markdown}}{{release.body}}{{/markdown}}
+{{/if}}
               </div>
             </div>
           {{/each}}