Adding configuration section to the docs

content/docs/features/configurations.md

@@ -0,0 +1,34 @@
+---
+title: Configurations
+description: Check out the configuration options for your site
+nextTitle: 'Github Action'
+nextURL: '/docs/features/github-action'
+prevTitle: 'TailwindCSS'
+prevURL: '/docs/features/tailwindcss'  
+---
+
+<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/configurations.png" />
+   <div>
+      <h1 class="mb-0 text-base md:text-3xl">Configurations</h1>
+      <p class="my-1">There are a few configurations that you can use to develop your site. More options coming soon.</p>
+   </div>
+</div>
+
+Inside the root of your directory is where you can create a `static.json` configuration file. When you are running `static dev` this configuration will be loaded with each request.
+
+## Custom Headers
+
+If you wish to add custom headers in your requests, you can include the "headers" key inside of your `static.json` file, like so
+
+```json
+{
+    "headers" : {
+        "Cache-Control" : "public, max-age=31536000",
+        "Access-Control-Allow-Origin" : "*",
+        "Authorization" : "Bearer 1234567890"
+    }
+}
+```
+
+Feel free to open a PR and request any additional options that can be passed in via the static.json file.

content/docs/features/github-action.md

@@ -3,8 +3,8 @@ title: Github Action
 description: Auto-deploy your website using the Static Github action
 nextTitle: 'Deploying Your Site'
 nextURL: '/docs/guides/deploy'
-prevTitle: 'TailwindCSS'
-prevURL: '/docs/features/tailwindcss' 
+prevTitle: 'Configurations'
+prevURL: '/docs/features/configurations' 
 ---
 
 

content/docs/features/tailwindcss.md

@@ -1,14 +1,14 @@
 ---
 title: TailwindCSS Integration
 description: We've built a rock solid integration with TailwindCSS
-nextTitle: 'Github Action'
-nextURL: '/docs/features/github-action'
+nextTitle: 'Configurations'
+nextURL: '/docs/features/configurations'
 prevTitle: 'Live Reloading'
 prevURL: '/docs/features/live-reloading' 
 ---
 
 <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/tailwindcss.png" />
+   <img class="hidden w-auto h-12 my-0 mr-5 md:h-20 md:block" src="/assets/images/icons/tailwindcss.png" />
    <div>
       <h1 class="mb-0 text-base md:text-3xl">TailwindCSS</h1>
       <p class="my-1">Easily use TailwindCSS in your sites by including a simple short code. Learn more about how everything works below.</p>

includes/docs-sidebar.html

@@ -61,6 +61,12 @@
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 54 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M39.403 5.797C36.756 3.11 33.692 0 27 0c-5.232 0-9.039 1.901-11.42 5.704-.895 1.43-1.588 3.128-2.08 5.096 1.166-1.555 2.417-2.69 3.751-3.406 1.755-.94 3.654-1.155 5.699-.644 2.052.513 3.52 2.002 5.143 3.649l.004.004C30.744 13.09 33.808 16.2 40.5 16.2c5.232 0 9.039-1.901 11.42-5.704.895-1.43 1.588-3.128 2.08-5.096-1.166 1.555-2.417 2.69-3.751 3.406-1.755.94-3.654 1.155-5.699.644-2.052-.513-3.52-2.001-5.143-3.649l-.004-.004Zm4.59 5.884s-4.562-2.576-6.059-4.097l-.17-.173c-1.342-1.362-2.568-2.59-4.193-3.527C31.998 2.979 29.957 2.3 27 2.3c-2.988 0-5.254.69-6.964 1.913 1.138-.093 2.3.013 3.471.306m20.485 7.162a10.69 10.69 0 0 0 3.472.306C45.754 13.21 43.488 13.9 40.5 13.9c-2.957 0-4.998-.678-6.57-1.584-1.626-.936-2.852-2.164-4.195-3.527l-.17-.173c-1.496-1.521-3.37-3.426-6.058-4.097m2.396 17.478C23.256 19.31 20.192 16.2 13.5 16.2c-5.232 0-9.039 1.901-11.42 5.704C1.187 23.334.493 25.032 0 27c1.166-1.555 2.417-2.69 3.751-3.406 1.755-.94 3.654-1.155 5.699-.644 2.054.514 3.521 2.003 5.146 3.652l.001.001C17.244 29.29 20.308 32.4 27 32.4c5.232 0 9.039-1.901 11.42-5.703.895-1.43 1.588-3.13 2.08-5.097-1.166 1.555-2.417 2.69-3.751 3.406-1.755.94-3.654 1.155-5.699.644-2.052-.513-3.52-2.002-5.143-3.649l-.004-.004Zm4.59 5.884c-2.69-.671-4.562-2.576-6.059-4.097l-.17-.173c-1.342-1.362-2.568-2.59-4.193-3.527-1.573-.905-3.614-1.584-6.571-1.584-2.988 0-5.254.69-6.964 1.913 1.138-.093 2.3.013 3.472.306 2.689.673 4.562 2.577 6.06 4.1l.167.17c1.343 1.362 2.569 2.59 4.194 3.527 1.573.906 3.614 1.584 6.571 1.584 2.988 0 5.254-.69 6.964-1.913a10.69 10.69 0 0 1-3.472-.306Z" fill="white"/></svg>
                 <span class="relative truncate">TailwindCSS Integration</span>
             </button>
+            <button id="config-docs" hx-get="/docs/features/configurations" 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" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M9.75 4.238c0-.822.666-1.488 1.488-1.488h1.524c.822 0 1.488.666 1.488 1.488v.299c0 1.585 1.716 2.575 3.088 1.783a1.373 1.373 0 0 1 1.875.502l.878 1.52a1.373 1.373 0 0 1-.503 1.875c-1.372.792-1.372 2.774 0 3.566.657.379.882 1.218.503 1.875l-.878 1.52a1.373 1.373 0 0 1-1.875.502c-1.372-.792-3.088.198-3.088 1.783v.3c0 .82-.666 1.487-1.488 1.487h-1.524a1.488 1.488 0 0 1-1.488-1.488v-.299c0-1.585-1.716-2.575-3.088-1.783a1.373 1.373 0 0 1-1.875-.502l-.878-1.52a1.373 1.373 0 0 1 .503-1.875c1.372-.792 1.372-2.774 0-3.566a1.373 1.373 0 0 1-.503-1.875l.878-1.52a1.373 1.373 0 0 1 1.875-.502c1.372.792 3.088-.198 3.088-1.783v-.3z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 12a3.25 3.25 0 1 1-6.5 0 3.25 3.25 0 0 1 6.5 0z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+                <span class="relative truncate">Configurations</span>
+            </button>
             <button hx-get="/docs/features/page-based-routing" 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 hidden 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">