Merge pull request #3 from thedevdojo/newHelpersSection

Adding updates to the static site
thedevdojo · Sep 7, 2024 · 648a40c · 648a40c
2 parents 0fbee6b + 78debbc
commit 648a40c
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 21 deletions.
diff --git a/assets/images/icons/helpers.png b/assets/images/icons/helpers.png
diff --git a/content/docs/features/configurations.md b/content/docs/features/configurations.md
@@ -31,4 +31,28 @@ If you wish to add custom headers in your requests, you can include the "headers
 }
 ```
 
-Feel free to open a PR and request any additional options that can be passed in via the static.json file.
+# Custom Build Directory and URL
+
+You can customize the directory your site will build to and you may also specify the website URL.
+
+```json
+{
+    "dev" : {
+        "url" : "http://localhost:3000"
+    },
+    "build" : {
+        "url" : "https://websitename.com/cool",
+        "directory" : "/directory/to/build/path"
+    }
+ }
+ ```
+
+> Notice that if you specify the `build.url`, you will also need to specify the `dev.url`.
+
+The `directory` path is the folder your site will be generated when running `static build`. The `url` can be used inside your HTML files in order to specify an absolute path.
+
+```
+<script src="{ url('/assets/js/main.js') }"></script>
+```
+
+This is the **url** helper method. Learn <a href="/docs/features/helpers">more about helpers here</a>.
diff --git a/content/docs/features/content.md b/content/docs/features/content.md
@@ -1,14 +1,14 @@
 ---
 title: Static Content
 description: Learn how to add content to your website
-nextTitle: 'Live-Reloading'
-nextURL: '/docs/features/live-reloading'
+nextTitle: 'helpers'
+nextURL: '/docs/features/helpers'
 prevTitle: 'Collections'
 prevURL: '/docs/features/collections'
 ---
 
 <div class="flex items-start px-5 py-5 mb-12 md:mb-5 mt-1 md:translate-y-0 translate-y-5 leading-[18px] bg-neutral-950 border border-yellow-400 rounded-md">
-   <img class="w-auto h-12 my-0 mr-5 md:h-20 md:block hidden" src="/assets/images/icons/content.png" />
+   <img class="hidden w-auto h-12 my-0 mr-5 md:h-20 md:block" src="/assets/images/icons/content.png" />
    <div>
       <h1 class="mb-0 text-base md:text-3xl">Content</h1>
       <p class="my-1">Learn how to create and manage content for your Static website using Markdown files and content pages.</p>

diff --git a/content/docs/features/helpers.md b/content/docs/features/helpers.md
@@ -0,0 +1,46 @@
+---
+title: Static Helpers
+description: Helper methods
+nextTitle: 'Live-Reloading'
+nextURL: '/docs/features/live-reloading'
+prevTitle: 'Collections'
+prevURL: '/docs/features/collections'
+---
+
+<div class="flex items-start px-5 py-5 mb-12 md:mb-5 mt-1 md:translate-y-0 translate-y-5 leading-[18px] bg-neutral-950 border border-yellow-400 rounded-md">
+   <img class="hidden w-auto h-12 my-0 mr-5 md:h-20 md:block" src="/assets/images/icons/helpers.png" />
+   <div>
+      <h1 class="mb-0 text-base md:text-3xl">Helpers</h1>
+      <p class="my-1">Learn about some of the static helper methods you have available</p>
+   </div>
+</div>
+
+## URL Helper
+
+It's totally fine to use relative paths in your site. As an example, you may have the following image:
+
+```html
+<img src="/path-to-image.png" />
+```
+
+But there may be times when you want to use an absolute URL path. In that case you can use the `{url()}` helper method.
+
+```html
+<img src="{url('/path-to-image.png')}" />
+```
+
+This image will resolve to **http://localhost:3000/path-to-image.png** when running `static dev`. To sepecify the `static build` URL, be sure to add the following to your `static.json` file:
+
+```json
+{
+    "dev" : {
+        "url" : "http://localhost:3000"
+    },
+    "build" : {
+        "url" : "https://websitename.com/cool",
+        "directory" : "/directory/to/build/path"
+    }
+ }
+ ```
+
+ Learn more about the **static.json** file from the <a href="/docs/features/configurations">Configurations</a>.
diff --git a/content/docs/features/live-reloading.md b/content/docs/features/live-reloading.md
@@ -1,15 +1,15 @@
 ---
 title: Live Reloading
 description: Save time with Statics Live-reloading feature
+prevTitle: 'Helpers'
+prevURL: '/docs/features/helpers'
 nextTitle: 'TailwindCSS Integration'
 nextURL: '/docs/features/tailwindcss'
-prevTitle: 'Content'
-prevURL: '/docs/features/content' 
 ---
 
 
 <div class="flex items-start px-5 py-5 mb-12 md:mb-5 mt-1 md:translate-y-0 translate-y-5 leading-[18px] bg-neutral-950 border border-yellow-400 rounded-md">
-   <img class="w-auto h-12 my-0 mr-5 md:h-20 md:block hidden" src="/assets/images/icons/reload.png" />
+   <img class="hidden w-auto h-12 my-0 mr-5 md:h-20 md:block" src="/assets/images/icons/reload.png" />
    <div>
       <h1 class="mb-0 text-base md:text-3xl">Live Reloading</h1>
       <p class="my-1">See your site changes in real-time without having to refresh the page. Live-reloading reloads the page when you make any changes to your code.</p>

diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
@@ -49,6 +49,12 @@
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M21.2635 17.75C21.2635 19.5429 20.3671 21.25 18.8531 21.25C16.1145 21.25 16.5968 18.5765 16.75 17.75H21.2635Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.88189 17.75C3.72862 18.5765 3.24635 21.25 5.98492 21.25H18.7383" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.74963 10.25L15.2496 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.74963 13.75L12.2496 13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.75002 2.75H16.25C14.2373 2.75 13.25 4.45711 13.25 6.25H2.75C2.75 4.45711 3.73731 2.75 5.75002 2.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.2499 2.75C18.2626 2.75 19.5882 4.45698 19.25 6.25L16.75 17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.38147 6.25L3.88152 17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Content</span>
             </button>
+            <button id="content-docs" hx-get="/docs/features/helpers" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
+                :class="{ 'text-white before:bg-neutral-800' : route == $el.getAttribute('hx-get'), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : route != $el.getAttribute('hx-get') }"
+                class="group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 px-3 py-1.5 w-full focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 rounded-md font-medium text-sm text-neutral-400 hover:text-white hover:before:bg-neutral-800/50">
+                <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="99.72" y1="99.72" x2="60.12" y2="60.12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="156.28" y1="99.72" x2="195.88" y2="60.12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="156.28" y1="156.28" x2="195.88" y2="195.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="99.72" y1="156.28" x2="60.12" y2="195.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <span class="relative truncate">Helpers</span>
+            </button>
             <button id="live-reloading-docs" hx-get="/docs/features/live-reloading" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
                 :class="{ 'text-white before:bg-neutral-800' : route == $el.getAttribute('hx-get'), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : route != $el.getAttribute('hx-get') }"
                 class="group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 px-3 py-1.5 w-full focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 rounded-md font-medium text-sm text-neutral-400 hover:text-white hover:before:bg-neutral-800/50">

diff --git a/includes/footer.html b/includes/footer.html
@@ -7,16 +7,16 @@
     </div>
     <div class="max-w-6xl px-6 mx-auto xl:max-w-6xl md:px-8">
         <ul class="grid pb-10 text-sm font-medium sm:pb-20 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-y-10">
-            <li class="row-span-2 pr-0 pr-10 space-y-5">
+            <li class="row-span-2 pr-0 space-y-5">
                 <div class="relative flex flex-col items-start justify-start w-auto leading-10 lg:px-4 lg:flex-grow-0 lg:flex-shrink-0 lg:text-left">
                     <a href="/" class="h-5 text-lg flex items-center space-x-1.5 text-white font-semibold">
-         <!-- Lightning Bolt Logo -->
-         <svg class="w-auto h-5" viewBox="0 0 55 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m37.437.807-9.399 41.176h24.915c1.044 0 1.64 1.193 1.044 2.088L17.744 99.718c-.298.597-1.193.15-1.044-.447l8.951-43.115H1.781c-1.044 0-1.64-1.194-1.044-2.09L36.542.21c.15-.447 1.044-.149.895.597Z" fill="currentColor"></path></svg>
-         <!-- Logo Text -->
-         <span class="-translate-y-0.5">static</span>
-     </a>
-     <p class="mt-5 text-xs font-light text-white/80">Welcome to Static. A static site generator you're going to love.</p>
-        </div>
+                        <!-- Lightning Bolt Logo -->
+                        <svg class="w-auto h-5" viewBox="0 0 55 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m37.437.807-9.399 41.176h24.915c1.044 0 1.64 1.193 1.044 2.088L17.744 99.718c-.298.597-1.193.15-1.044-.447l8.951-43.115H1.781c-1.044 0-1.64-1.194-1.044-2.09L36.542.21c.15-.447 1.044-.149.895.597Z" fill="currentColor"></path></svg>
+                        <!-- Logo Text -->
+                        <span class="-translate-y-0.5">static</span>
+                    </a>
+                    <p class="mt-5 text-xs font-light text-white/80">Welcome to Static. A static site generator you're going to love.</p>
+                </div>
             </li>
             <li class="row-span-2 space-y-5 lg:pl-10">
                 <h2 class="text-xs font-bold tracking-wide text-gray-100 uppercase">Core Concepts</h2>
@@ -54,7 +54,7 @@ <h2 class="text-xs font-bold tracking-wide text-gray-100 uppercase">DevDojo Link
                 <li><a href="/" class="text-xs transition-colors duration-300 hover:text-white/80 sm:text-sm">Terms &amp; Conditions</a></li>
             </ul>
             <ul class="flex flex-col items-center mb-3 space-y-2 text-white/50 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
-                <a href="/" class="text-sm font-normal leading-none tracking-tight transition-colors duration-300 hover:text-deep-purple-accent-400">© 2023 DevDojo</a>
+                <a href="/" class="text-sm font-normal leading-none tracking-tight transition-colors duration-300 hover:text-deep-purple-accent-400">© 2024 DevDojo</a>
             </ul>
         </div>
     </div>

diff --git a/includes/header.html b/includes/header.html
@@ -172,11 +172,14 @@
             </div>
             <div  class="relative flex items-center space-x-3 font-medium leading-10 md:flex-grow-0 md:flex-shrink-0 md:mt-0 md:text-right lg:flex-grow-0 lg:flex-shrink-0">
                 <button @click="mobileMenu=!mobileMenu; $el.classList.add('scale-90'); setTimeout(function(){ $el.classList.remove('scale-90') }, 100)" class="block h-full p-2 duration-100 ease-out rounded-full group md:hidden hover:bg-neutral-800/70">
-                    <div :class="{ '' : !mobileMenu, 'rotate-[0deg] scale-90 -translate-y-px origin-center' : mobileMenu }" class="flex flex-col items-end justify-around w-4 h-4 transition-all duration-300 linear">
-                        <div :class="{ 'w-full group-hover:w-2/3 -translate-x-px' : !mobileMenu, 'rotate-[45deg] w-full translate-y-1.5' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100"></div>
-                        <div :class="{ 'opacity-100 w-1/2 group-hover:w-full -translate-x-px' : !mobileMenu, 'opacity-0' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100 opacity-100"></div>
-                        <div :class="{ 'group-hover:w-1/2 w-2/3 -translate-x-px' : !mobileMenu, '-rotate-[45deg] w-full -translate-y-1' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100"></div>
-                        </div>
+                    <div x-show="!mobileMenu" class="flex flex-col items-end justify-around w-4 h-4 transition-all duration-300 linear">
+                        <div class="h-[2px] w-full group-hover:w-2/3 -translate-x-px flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100"></div>
+                        <div class="h-[2px] opacity-100 w-1/2 group-hover:w-full -translate-x-px flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100"></div>
+                        <div class="h-[2px] group-hover:w-1/2 w-2/3 -translate-x-px flex-shrink-0 rounded-full transition-all linear duration-200 bg-zinc-100"></div>
+                    </div>
+                    <div x-show="mobileMenu" class="flex flex-col items-end justify-around w-4 h-4 transition-all duration-300 linear">
+                        <svg class="w-4 h-4 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/></svg>
+                    </div>
                 </button>
                 <a href="https://devdojo.com" target="_blank" class="hidden group md:block">
                     <svg class="w-6 h-6 text-white duration-300 ease-out fill-current group-hover:-rotate-12" viewBox="0 0 170 112" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M115.139 0c15.138 0 29.329 6.537 38.876 17.89 9.977 11.783 13.847 27.092 11.095 43.004-2.15 12.127-8.257 23.824-17.288 32.855-9.031 9.117-20.642 15.223-32.683 17.288-3.01.516-6.02.774-8.945.774h-89.44c-13.623 0-20.306-10.218-14.853-22.707l22.155-50.658a17.51 17.51 0 0 1 16.05-10.493h75.119c6.881 0 13.245 2.838 17.546 7.912 4.558 5.419 6.278 12.558 4.988 20.212-2.322 13.418-13.933 25.2-27.006 27.35-1.462.259-2.925.431-4.387.431l-63.993.055c-3.613.004-6.036-3.709-4.58-7.015l12.315-27.96h15.224l-7.298 16.786c-.861 1.981.59 4.196 2.751 4.196l46.768.005c6.451 0 14.88-7.827 16.428-15.998 1.462-7.74-3.269-11.955-8.687-11.955H40.157a3.425 3.425 0 0 0-3.148 2.064L15.95 92.28c-1.154 2.643.783 5.6 3.666 5.6l86.751-.002c2.236 0 4.473-.258 6.623-.602 18.922-3.182 35.177-19.438 38.532-38.703 2.064-11.784-.774-22.965-7.999-31.565-6.881-8.171-17.202-12.902-28.211-12.902h-32.4a3.445 3.445 0 0 0-3.156 2.073l-2.115 4.894H62.415l4.567-10.484A17.52 17.52 0 0 1 83.006.068L115.14 0Z" class=""></path></svg>