Merge branch 'next-design-iteration' into pnh/what-is-jamstack-expansion

Author: Hugues Tennier

.eleventy.js

@@ -1,3 +1,4 @@
+const lodashGet = require("lodash/get");
 
 module.exports = function(eleventyConfig) {
 
@@ -103,6 +104,36 @@ module.exports = function(eleventyConfig) {
     return yaml.safeDump(obj)
   });
 
+  // sort an array of objects by one object key value
+  // can also get fancy and do a lodash.get selector string too
+  // see https://lodash.com/docs/4.17.15#get
+  eleventyConfig.addFilter('sortKey', (arr, selector) => {
+    return arr.sort((a, b) => {
+      let aKey = lodashGet(a, selector).toLowerCase();
+      let bKey = lodashGet(b, selector).toLowerCase();
+      if(aKey < bKey) {
+        return -1;
+      } else if(aKey > bKey) {
+        return 1;
+      }
+      return 0;
+    });
+  });
+
+  eleventyConfig.addFilter('sortTools', (arr, githubData) => {
+    return arr.sort((a, b) => {
+      let aKey = githubData[a.data.repo] ? (githubData[a.data.repo].stars || 0) : 0;
+      let bKey = githubData[b.data.repo] ? (githubData[b.data.repo].stars || 0) : 0;
+      if(aKey < bKey) {
+        return 1;
+      } else if(aKey > bKey) {
+        return -1;
+      }
+      return 0;
+    });
+  });
+
+
   // favicons files
   eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml");
   eleventyConfig.addPassthroughCopy("src/site/site.webmanifest");

package.json

@@ -28,6 +28,7 @@
     "fast-glob": "^3.2.4",
     "gray-matter": "^4.0.2",
     "js-yaml": "^3.13.1",
+    "lodash": "^4.17.20",
     "luxon": "^1.23.0",
     "markdown-it": "^11.0.1",
     "netlify-plugin-minify-html": "^0.2.2",

src/css/tailwind.css

@@ -54,7 +54,9 @@ dd a:focus {
 p+p {
   @apply mt-4;
 }
-
+section.cards {
+  max-width: 66rem;
+}
 
 /*
   CTA links
@@ -65,7 +67,7 @@ a.cta:visited {
   @apply bg-pink-900;
   @apply text-white;
   @apply rounded-full;
-  @apply text-xs;
+  @apply text-sm;
   @apply font-semibold;
   @apply px-4;
   @apply py-2;
@@ -193,17 +195,17 @@ footer p a:focus {
 }
 .list-jams-logo > li:after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%235A5F75'/%3E%3C/svg%3E%0A");
-  left: 2em;
+  left: 3em;
 }
 .list-jams-logo-pink > li:after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%23F0047F'/%3E%3C/svg%3E%0A");
-  left: 1em;
+  left: 1.5em;
 }
 .list-jams-logo-border > li:before {
   @apply text-gray-400;
   content: "";
   position: absolute;
-  left: 2.25em; /* 36px /16 */
+  left: 3.25em; /* 36px /16 */
   top: 0;
   bottom: 0;
   border-left: 1px solid;
@@ -260,6 +262,14 @@ details[open] .summary-swap-open {
 }
 
 /* special text treatment on home page */
+.hero-text {
+  font-size: 2.5em;
+}
+@media (min-width: 40em) { /* 640px */
+  .hero-text {
+    font-size: 3em; /* 48px /16 */
+  }
+}
 @media (min-width: 64em) { /* 1024px */
   .hero-text {
     font-size: 4em; /* 64px /16 */

src/site/_data/netlify.js

@@ -0,0 +1,14 @@
+const PROD_URL = "https://www.jamstack.org";
+
+module.exports = {
+  /*
+  See also Netlify ENV variables:
+    process.env.CONTEXT === "production" ||
+    process.env.CONTEXT === "deploy-preview" ||
+    process.env.CONTEXT === "branch-deploy"
+
+  via https://docs.netlify.com/configure-builds/environment-variables/
+
+   */
+  deployUrl: process.env.CONTEXT === "production" ? PROD_URL : process.env.DEPLOY_PRIME_URL
+};

src/site/_includes/components/cards.njk

@@ -7,6 +7,11 @@
     {%- elseif loopIndex % 4 === 2 %} bg-gradient-card-seafoam
     {%- elseif loopIndex % 4 === 3 %} bg-gradient-card-gold
     {%- endif -%}">
+      {%- if item.data.opensource -%}
+      <div class="text-xxs mb-2">
+        <span class="inline-block uppercase bg-black text-white leading-5 px-2 rounded">Open Source</span>
+      </div>
+      {% endif %}
       {{ item.data.title }}
     </div>
     <div class="p-4">

src/site/_includes/components/section-heading.njk

@@ -12,10 +12,10 @@
 
 
 {% macro benefit(title, icon, description ) %}
-  <div class="flex content-start space-x-8 my-12">
+  <div class="sm:flex sm:content-start sm:space-x-8 my-12">
 
     {% if icon %}
-    <svg role="img" aria-label="{{ title }}" aria-hidden="true" focusable="false" width="60" height="60" class="flex-none mt-2">
+    <svg role="img" aria-label="{{ title }}" aria-hidden="true" focusable="false" width="60" height="60" class="flex-none my-2">
       <use xlink:href="{{ icon }}"></use>
     </svg>
     {% endif %}

src/site/_includes/footer.njk

@@ -1,5 +1,5 @@
 <section>
-  <footer class="py-20 text-blue-300">
+  <footer class="py-20 text-blue-200">
     <ul class="text-left md:flex justify-between">
       <li class="p-2">&copy; {{ page.date | formatDate('yyyy') }}  Netlify </li>
       <li class="p-2"><a href="https://jamstack.org/slack">Chat on Slack</a></li>

src/site/_includes/header.njk

@@ -15,7 +15,8 @@
 
 <header class="page-header sm:flex sm:flex-col sm:h-screen">
   <a href="/" class="block text-white hover:text-pink-900 mx-8 py-8">
-    <svg role="img" aria-label="Jamstack" 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
     data-force-state-closed="(max-width: 39.9375em)"
@@ -39,20 +40,19 @@
       {% include "navigation-links.njk" %}
 
       <div>
-        <a href="https://jamstackconf.com/" class="block p-4 my-4 bg-gradient-jams hover:bg-gradient-pink-orange font-bold text-center">Jamstack Conf</a>
-
-        <div class="text-center text-sm mb-4">Connect with us</div>
-        <div class="grid grid-cols-3 divide-x divide-gray-700">
+        <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://jamstack.org/slack" target="_BLANK" rel="noopener" class="flex items-center justify-center p-4 hover:text-pink-500">
             <svg role="img" aria-label="Slack" focusable="false" width="30" height="30" class="fill-current"><use xlink:href="#logo-slack"></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>
           </a>
-          <a href="{{ pkg.repository.url }}" target="_BLANK" rel="noopener"  class="flex items-center justify-center p-4 hover:text-pink-500">
+          <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>
           </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>

src/site/_includes/layouts/base.njk

@@ -1,7 +1,9 @@
 ---
 title: Jamstack | JavaScript, APIs, and Markup
 description: What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it's the best approach for building faster, more secure websites.
+ogimage: "/img/og/default-og-image.png"
 ---
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -18,12 +20,12 @@ description: What is the Jamstack? Why use the Jamstack? How do I get started? L
     <meta property="og:url" content="https://jamstack.org/">
     <meta property="og:description" content="{{ description }}">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="">
+    <meta property="og:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="https://jamstack.org/">
     <meta property="twitter:title" content="{{ title }} | Jamstack">
     <meta property="twitter:description" content="{{ description }}">
-    <meta property="twitter:image" content="">
+    <meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
   </head>
   <body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">

src/site/_includes/layouts/tool.njk

@@ -54,6 +54,10 @@ layout: layouts/base.njk
     {%- endif %}
   </dl>
   <dl class="inline-block mb-4">
+    {%- if opensource %}
+    <dt class="inline-block font-bold mr-6">Open Source</dt>
+    <dd class="inline-block sr-only">Yes</dd>
+    {%- endif %}
     {%- if language %}
     <dt class="inline-block font-bold">Language:</dt>
     <dd class="inline-block mr-6">{{ language }}</dd>