Use url filter for links and files

Author: BrianMitchL

src/globals/site.json

@@ -1,6 +1,6 @@
 {
   "name": "JavaScriptMN",
-  "description": "A Monthly Meetup For Anyone Interested In Javascript And Related Technologies In The Twin Cities.",
+  "description": "A monthly meetup for anyone interested in JavaScript and related technologies in the Twin Cities.",
   "url": "https://javascriptmn.com",
   "baseUrl": "/",
   "author": {
@@ -10,19 +10,19 @@
   },
   "navigation": [
     {
-      "path": "",
+      "path": "/",
       "text": "Home"
     },
     {
-      "path": "sponsors",
+      "path": "/sponsors/",
       "text": "Sponsors"
     },
     {
-      "path": "code-of-conduct",
+      "path": "/code-of-conduct/",
       "text": "Code of Conduct"
     },
     {
-      "path": "speak",
+      "path": "/speak/",
       "text": "Speak"
     }
   ],

src/globals/sponsors.json

@@ -4,7 +4,7 @@
     "section": "Host 🌎",
     "sponsors": [
       {
-        "imgSrc": "logo-wework.svg",
+        "imgSrc": "/sponsors/logo-wework.svg",
         "href": "https://www.wework.com",
         "title": "WeWork"
       }
@@ -15,22 +15,22 @@
     "section": "Diamond 💎",
     "sponsors": [
       {
-        "imgSrc": "logo-twilio.svg",
+        "imgSrc": "/sponsors/logo-twilio.svg",
         "href": "https://twilio.com",
         "title": "Twilio"
       },
       {
-        "imgSrc": "logo-trackjs.svg",
+        "imgSrc": "/sponsors/logo-trackjs.svg",
         "href": "https://trackjs.com",
         "title": "TrackJS"
       },
       {
-        "imgSrc": "logo-frontend-masters.svg",
+        "imgSrc": "/sponsors/logo-frontend-masters.svg",
         "href": "https://frontendmasters.com",
         "title": "Frontend Masters"
       },
       {
-        "imgSrc": "logo-ch-robinson.svg",
+        "imgSrc": "/sponsors/logo-ch-robinson.svg",
         "href": "https://www.chrobinson.com",
         "title": "C.H. Robinson"
       }

src/includes/footer.njk

@@ -13,7 +13,7 @@
         <ul>
           {% for link in site.navigation %}
           <li>
-            <a class="hover:underline" href="{{ site.baseUrl }}{{ link.path }}"
+            <a class="hover:underline" href="{{ link.path | url }}"
               >{{ link.text }}</a
             >
           </li>

src/includes/header.njk

@@ -44,20 +44,20 @@
         class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-between"
       >
         <div class="flex-shrink-0">
-          <a href="{{ site.baseUrl }}" class="flex lg:hidden w-auto">
+          <a href="{{ '/' | url }}" class="flex lg:hidden w-auto">
             <img
               class="h-8"
-              src="{{ site.baseUrl }}jsmn-logo.svg"
+              src="{{ '/jsmn-logo.svg' | url }}"
               alt="{{ site.name }} logo"
             />
           </a>
           <a
-            href="{{ site.baseUrl }}"
+            href="{{ '/' | url }}"
             class="hidden lg:flex items-center w-auto"
           >
             <img
               class="h-8 block"
-              src="{{ site.baseUrl }}jsmn-logo.svg"
+              src="{{ '/jsmn-logo.svg' | url }}"
               alt="{{ site.name }} logo"
             />
             <span class="text-white font-bold block pl-4">{{ site.name }}</span>
@@ -67,7 +67,7 @@
           <div class="flex">
             {% for link in site.navigation %}
             <a
-              href="{{ site.baseUrl }}{{ link.path }}"
+              href="{{ link.path | url }}"
               class="ml-4 px-3 py-2 text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
               >{{ link.text }}</a
             >
@@ -81,7 +81,7 @@
     <div class="px-2 pt-2 pb-3">
       {% for link in site.navigation %}
       <a
-        href="{{ site.baseUrl }}{{ link.path }}"
+        href="{{ link.path | url }}"
         class="mt-1 block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
         >{{ link.text }}</a
       >

src/includes/layouts/base.njk

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="A monthly meetup for anyone interested in JavaScript and related technologies in the Twin Cities."
+      content="{{ site.description }}"
     />
     <title>
       {{ title }}{{ "" if title === "JavaScriptMN" else " | JavaScriptMN" }}
@@ -24,22 +24,22 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="{{ site.baseUrl }}apple-touch-icon.png"
+      href="{{ '/apple-touch-icon.png' | url }}"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="{{ site.baseUrl }}favicon-32x32.png"
+      href="{{ '/favicon-32x32.png' | url }}"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="{{ site.baseUrl }}favicon-16x16.png"
+      href="{{ '/favicon-16x16.png' | url }}"
     />
-    <link rel="manifest" href="{{ site.baseUrl }}site.webmanifest" />
-    <link rel="stylesheet" href="{{ site.baseUrl }}css/tailwind.include.css" />
+    <link rel="manifest" href="{{ '/site.webmanifest' | url }}" />
+    <link rel="stylesheet" href="{{ '/css/tailwind.include.css' | url }}" />
   </head>
   <body>
     {% include "header.njk" %}

src/index.njk

@@ -129,7 +129,7 @@ title: JavaScriptMN
           <div className="w-full sm:w-auto">
             <a
               class="block text-xl font-semibold border-2 border-black p-4 hover:bg-jsmn-yellow transition-all duration-100"
-              href="/speak"
+              href="{{ '/speak/' | url }}"
               >Learn More</a
             >
           </div>
@@ -145,7 +145,7 @@ title: JavaScriptMN
             Sponsors
           </h2>
           <p>
-            <a class="hover:underline" href="{{ site.baseUrl }}sponsors/">
+            <a class="hover:underline" href="{{ '/sponsors/' | url }}">
               More Sponsors →
             </a>
           </p>
@@ -165,7 +165,7 @@ title: JavaScriptMN
                   class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4"
                 >
                   <img
-                    src="{{ site.baseUrl }}sponsors/{{ sponsor.imgSrc }}"
+                    src="{{ sponsor.imgSrc | url }}"
                     alt="{{ sponsor.title }}"
                     title="{{ sponsor.title }}"
                     class="h-32"

src/sponsors.njk

@@ -14,7 +14,7 @@ title: Sponsors
         >
           Sponsors
         </h1>
-        <p><a class="hover:underline" href="{{ site.baseUrl }}sponsorship-opportunities/">Become a sponsor →</a></p>
+        <p><a class="hover:underline" href="{{ '/sponsorship-opportunities/' | url }}">Become a sponsor →</a></p>
         </div>
 
         <div class="border-jsmn-yellow border-4 p-4 divide-y divide-gray-200">
@@ -31,7 +31,7 @@ title: Sponsors
                   class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4 m-2"
                 >
                   <img
-                    src="{{ site.baseUrl }}sponsors/{{ sponsor.imgSrc }}"
+                    src="{{ sponsor.imgSrc | url }}"
                     alt="{{ sponsor.title }}"
                     title="{{ sponsor.title }}"
                     class="h-32"
@@ -44,7 +44,7 @@ title: Sponsors
               >
                 <a
                   class="transition-all transform hover:scale-110 h-32 w-full flex justify-center items-center"
-                  href="{{ site.baseUrl }}sponsorship-opportunities"
+                  href="{{ '/sponsorship-opportunities/' | url }}"
                 >
                   <span class="text-lg font-bold">Become a sponsor →</span>
                 </a>