Merge branch 'main' of https://github.com/jamstack/jamstack.org

Author: hexagoncircle

netlify.toml

@@ -17,7 +17,7 @@
 
 [[redirects]]
   from = "/conf"
-  to = "https://jamstackconf.com/"
+  to = "https://jamstackconf.com/conf/"
   status = 200
 
 [[redirects]]
@@ -27,7 +27,7 @@
 
 [[redirects]]
   from = "/conf/*"
-  to = "https://jamstackconf.com/:splat"
+  to = "https://jamstackconf.com/conf/:splat"
   status = 200
 
 [[redirects]]

src/css/tailwind.css

@@ -18,11 +18,11 @@
     }
   }
   h2 {
-    @apply text-white text-3xl font-bold leading-none mb-8;
+    @apply text-white text-3xl font-bold leading-none mb-2;
   }
   @screen md {
     h2 {
-      @apply text-4xl;
+      @apply text-3xl;
     }
   }
 }
@@ -282,11 +282,6 @@ details[open] .summary-swap-open {
     font-size: 4em; /* 64px /16 */
   }
 }
-.hero-text-img {
-  height: 1.244444444em;
-  width: auto;
-  margin-top: -0.1111111111111em; /* -4px /36 */
-}
 
 .rounded-xl-embed {
   border-radius: 0.9375rem; /* 15px /16 */

src/site/_includes/header.njk

@@ -1,12 +1,8 @@
-
 {%
   set linkList = [
-    { "url": "/resources", "text": "Learn", "children": [
-      { "url": "/what-is-jamstack/", "text": "What is the Jamstack?" },
-      { "url": "/why-jamstack/", "text": "Why Jamstack?" },
-      { "url": "/best-practices/", "text": "Jamstack best practices" },
-      { "url": "/glossary/", "text": "Glossary" }
+    { "url": "/", "text": "Home", "children": [
     ]},
+    { "url": "/glossary/", "text": "Glossary" },
     { "url": "/women-of-jamstack/", "text": "Women of Jamstack"},
     { "url": "/tv/", "text": "Jamstack TV" },
     { "url": "/generators/", "text": "Site Generators" },
@@ -24,7 +20,9 @@
 
 <header class="page-header md:flex md:flex-col md:h-screen">
   <a href="/" class="block text-white hover:text-pink-900 mx-8 py-8">
-    <svg role="img" aria-hidden="true" focusable="false" width="163" height="31"><use xlink:href="#logo-jamstack"></use></svg>
+    <svg role="img" aria-hidden="true" focusable="false" width="163" height="31">
+      <use xlink:href="#logo-jamstack"></use>
+    </svg>
     <span class="sr-only">Jamstack</span>
   </a>
   <details open data-force-state
@@ -52,17 +50,22 @@
         <div class="text-center text-sm mb-4 text-gray-300">Connect with us</div>
         <div class="grid grid-cols-3 divide-x divide-gray-700 text-gray-300">
           <a href="https://discord.gg/jamstack" target="_BLANK" rel="noopener" class="flex items-center justify-center p-4 hover:text-pink-500">
-            <svg role="img" aria-label="Discord" focusable="false" width="36" height="36" class="fill-current"><use xlink:href="#logo-discord"></use></svg>
+            <svg role="img" aria-label="Discord" focusable="false" width="36" height="36" class="fill-current">
+              <use xlink:href="#logo-discord"></use>
+            </svg>
           </a>
           <a href="https://twitter.com/jamstackconf" target="_BLANK" rel="noopener"  class="flex items-center justify-center p-4 hover:text-pink-500">
-            <svg role="img" aria-label="Twitter" focusable="false" width="34" height="28" class="fill-current"><use xlink:href="#logo-twitter"></use></svg>
+            <svg role="img" aria-label="Twitter" focusable="false" width="34" height="28" class="fill-current">
+              <use xlink:href="#logo-twitter"></use>
+            </svg>
           </a>
           <a href="https://github.com/jamstack/jamstack.org" target="_BLANK" rel="noopener"  class="flex items-center justify-center p-4 hover:text-pink-500">
-            <svg role="img" aria-label="GitHub" focusable="false" width="36" height="36" class="fill-current"><use xlink:href="#logo-github"></use></svg>
+            <svg role="img" aria-label="GitHub" focusable="false" width="36" height="36" class="fill-current">
+              <use xlink:href="#logo-github"></use>
+            </svg>
           </a>
         </div>
-        <a href="https://jamstackconf.com/" class="block p-4 mt-4 bg-gradient-jams hover:bg-gradient-pink-orange font-bold text-center">Jamstack Conf</a>
       </div>
     </nav>
   </details>
-</header>
+</header>

src/site/_includes/layouts/base.njk

@@ -53,7 +53,6 @@ ogimage: "/img/og/default-og-image.png"
         {% include "header.njk" %}
       </div>
       <div>
-        {% include "banner.njk" %}
         {{ content | safe }}
         <div class="border-blue-800 border-t">
           {% include "footer.njk" %}

src/site/best-practices.njk

@@ -7,17 +7,23 @@ layout: layouts/base.njk
 {% import "components/section-heading.njk" as section %}
 {% import "components/zinger-cta.njk" as zinger %}
 
-<section class="mt-16">
-  <p class="w-1/2">Comprehensive guide for building Jamstack sites and home of the global Jamstack community.</p>
-  <h1 class="hero-text">The modern way to&nbsp;build <img src="/img/svg/websites-and-apps.svg" width="545" height="88" alt="Websites and Apps" class="inline-block mr-2 hero-text-img"> that delivers better performance</h1>
-  <a href="/community" class="cta">Join the global community</a>
-</section>
-
-<section class="mb-10 p-0">
+<section class="my-10 p-0">
   {{ ticker.icons() }}
   {{ ticker.main() }}
 </section>
 
+<section class="relative p-10 mb-16">
+  <div class="p-2 rounded-lg bg-gradient-jams" w-full>
+    <div class="flex flex-col bg-blue-900 p-10">
+      <a class="border-b-0" name="what-is-jamstack">
+        <h1>What is <span class="font-extrabold text-transparent bg-clip-text bg-gradient-jams">Jamstack</span>?</h1>
+      </a>
+
+      <p>Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. Jamstack removes the need for business logic to dictate the web experience. It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.</p>
+    </div>
+  </div>
+</section>
+
 <section class="mb-10">
   <div class="border-2 border-white block rounded-xl shadow-lg text-center ">
     <img src="/img/conf-2022-tout.png" alt="Jamstack Conf 2022" class="rounded-xl w-2/3 mx-auto my-6">
@@ -35,62 +41,11 @@ layout: layouts/base.njk
   </div>
 </section>
 
+{% include "components/join-the-movement.njk" %}
 
-
-<section class="mb-20">
-  <h2>Why Jamstack</h2>
-  <p class="w-2/3 mb-12">
-    The Jamstack architecture has many benefits, whether you’re building a large e-commerce site, SaaS application or personal blog.
-  </p>
-
-  {{ section.icons() }}
-
-
-
-  {{ section.benefit(
-      "Better Performance",
-      "#pink_lightning",
-      "<p>
-        Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.
-      </p>")
-  }}
-  {{ section.benefit(
-      "Higher Security",
-      "#blue_shield",
-      "<p>
-        With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.
-      </p>")
-  }}
-  {{ section.benefit(
-    "Cheaper, Easier Scaling",
-    "#orange_coins",
-    "<p>
-      When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.
-    </p>")
-  }}
-  {{ section.benefit(
-    "Better Developer Experience",
-    "#teal_browser",
-    "<p>
-      Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.
-    </p>")
-  }}
-  <a href="/why-jamstack" class="cta">Read more about the benefits of Jamstack</a>
-</section>
-
-<div class="bg-gray-100 mb-20">
-  <section>
-    <h2 class="text-2xl">The future is highly distributed</h2>
-    <p class="mt-6 mb-8">
-      Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered   content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
-    </p>
-    <img src="/img/svg/architecture.svg" alt="Jamstack architecture diagram, Bidirectional arrows between Client and CDN, Client and Microservices">
-  </section>
-</div>
-
-<section class="text-center mb-20">
+<section class=" mb-16">
   <div class="md:w-8/12 mx-auto">
-    <h2>Rise of the Jamstack</h2>
+    <h2>The Roots of Jamstack</h2>
     <p class="mt-6 mb-8">
       <a href="https://www.netlify.com/authors/matt-biilmann/">Matt Biilmann</a> took the concept of Jamstack mainstream with his presentation at Smashing Conf 2016. Watch the quintessential introduction to the Jamstack.
     </p>
@@ -101,8 +56,4 @@ layout: layouts/base.njk
     </div>
     <a href="/resources/" class="cta">See more videos and resources</a>
   </div>
-</section>
-
-
-{% include "components/join-the-movement.njk" %}
-
+</section>