Blog UI revamp

apps/blog/.eleventy.js

@@ -42,7 +42,7 @@ module.exports = (config) => {
   config.setDataDeepMerge(true)
 
   config.addCollection("postsWithoutDrafts", (collection) =>
-    [...collection.getFilteredByGlob("src/posts/*.md")].filter(
+    [...collection.getFilteredByGlob("src/posts/**/*.md")].filter(
       (post) => !post.data.draft
     )
   )
@@ -53,12 +53,6 @@ module.exports = (config) => {
     )
   )
 
-  config.addCollection("demosWithoutDrafts", (collection) =>
-  [...collection.getFilteredByGlob("src/demos/*.md")].filter(
-    (demos) => !demos.data.draft
-  )
-)
-
   return {
     pathPrefix: siteSettings.baseUrl,
     dir: {

apps/blog/src/assets/css/base.css

@@ -64,6 +64,10 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0;
 }
 
+h4 {
+  color: #4F3FB6;
+}
+
 p, blockquote {
   margin: revert;
 }
@@ -97,7 +101,8 @@ li > a {
 }
 
 a {
-  color:#342a6a;
+  color:rgba(79, 63, 182, 1);
+  ;
   text-decoration: underline;
 }
 

apps/blog/src/assets/css/card.css

@@ -1,12 +1,53 @@
+.featured-post {
+  border: 1px #F2F2F2 solid;
+}
+
+.featured-posts .featured-post:first-child {
+  grid-column: span 3 / span 3;
+}
+
 .featured-posts .featured-post:first-child {
-  grid-column: span 2 / span 2;
+  display: flex;
+  align-items: center;
+}
+
+.featured-posts .featured-post:first-child .postcard-text {
+  margin: 0 1em;
+}
+
+@media (max-width: 1024px) {
+  .featured-posts .featured-post:first-child {
+    display: inherit;
+  }
+
+  .featured-posts .featured-post:first-child .postcard-text {
+    margin: inherit;
+  }
+}
+
+a.featured-posts {
+  text-decoration: none;
 }
 
 .doc-link {
   color: #342a6a;
   text-decoration: underline;
 }
 
+.postcard-timestamp {
+  position: absolute;
+  bottom: 1em;
+}
+
+.post-link {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
 .doc-link p {
   font-weight: normal;
 }

apps/blog/src/demos/index.njk

@@ -11,5 +11,4 @@ title: PWABuilder Demos
 
 {% extends 'layouts/home.njk' %}
 {% block body %}
-  {% include "demos.njk" %}
 {% endblock %}

apps/blog/src/includes/categories.njk

@@ -1,31 +1,64 @@
-<section class="bg-secondary text-white my-4 py-4">
-  <div class="container mx-auto px-8">
-    <h2 class="text-center lg:text-left mb-4">Categories</h2>
-
-    <ul class="grid grid-cols-2 lg:grid-cols-5 gap-1 justify-items-center lg:justify-items-start subheaderUlCat">
-      {% for tag in collections.tagList | filterTagList %}
-        <li class="px-2 py-4">
-          {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
-          <a href="{{ tagUrl | url }}" class="capitalize subheaderCat">{{ tag }}</a>
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
+<section class="relative">
+  <button class="left font-bold" id="slideLeft" type="button"><</button>
+  <button class="right font-bold" id="slideRight" type="button">></button>
+  {% if collections.tagList.length %}
+  <ul id="container" class="flex overflow-x-hidden overflow-y-auto mx-6 p-0">
+    {% for tag in collections.tagList | filterTagList %}
+    <li class="flex-grow-0 flex-shrink-0">
+      <div class="px-2 py-1 mx-1 tag-pill">
+        {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+        <a href="{{ tagUrl | url }}" class="capitalize relative text-sm">{{ tag }}</a>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
 
 </section>
 
 <style>
-  .subheaderCat {
-     text-decoration: none;
-     color: rgb(229, 231, 235);
+  ul {
+    scroll-behavior: smooth;
   }
 
-  .subheaderUlCat {
-    padding: 0;
-    list-style: none;
+  button {
+    color: #4F3FB6;
+    position: absolute;
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 100%
+  }
+
+  button.left {
+    left: 0;
   }
 
-  .subheaderUlCat li {
+  button.right {
+    right: 0;
+  }
+
+  li {
     list-style: none;
   }
-</style>
+
+  .tag-pill {
+    background-color: #F1F2FA;
+    border-radius: 12px;
+  }
+
+  .tag-pill a {
+    text-decoration: none;
+  }
+</style>
+
+<script>
+  const buttonRight = document.getElementById('slideRight');
+  const buttonLeft = document.getElementById('slideLeft');
+
+  buttonRight.onclick = function () {
+    document.getElementById('container').scrollLeft += 300;
+  };
+  buttonLeft.onclick = function () {
+    document.getElementById('container').scrollLeft -= 300;
+  };
+</script>

apps/blog/src/includes/docs.njk

@@ -3,6 +3,4 @@
 <section class="my-8">
   <h2 class="text-center">Main documentation</h2>
   {{ cardLayouts.featured(docs)}}
-  <h2 class="text-center">Recommended Documentation</h2>
-  {{ cardLayouts.trending(docs)}}
 </section>

apps/blog/src/includes/footer.njk

@@ -1,20 +1,39 @@
-<footer class="w-full items-center justify-between mb-8" role="contentinfo">
-  {% include "categories.njk" %}
-  <div class="contentInfo flex px-8">
-    <div class="mr-12">
-      <p class="mb-3 text-xs">
-        &copy; PWA Builder was founded by Microsoft as a community guided, open
-              source project to help move PWA adoption forward.
-      </p>
-      <ul class="flex subheaderUlFoot">
-        <li class="mr-2">
-          <a class="text-xs subheaderFootU underline" href="https://privacy.microsoft.com/en-us/privacystatement" target="_blank">Our Privacy Statement</a>
-        </li>
-        <li>
-          <a class="text-xs subheaderFootU underline" href="https://github.com/pwa-builder/PWABuilder/blob/master/TERMS_OF_USE.md" target="_blank">Terms of use</a>
-        </li>
-      </ul>
+<footer class="w-full xl:px-48 px-8" role="contentinfo">
+  {% if '/post' in page.url %}
+    <div class="">
+      <h2 class="text-white my-4">Keep reading</h2>
+      <div class="w-full lg:grid lg:grid-cols-3 gap-3">
+        <div class="bg-white rounded mb-2">
+          {%- set next1Post = collections['postsWithoutDrafts'] | getPreviousCollectionItem(page) %}
+          {%- if next1Post %}
+            {{ cardLayouts.card(next1Post)}}
+          {% endif %}
+        </div>
+        <div class="bg-white rounded mb-2">
+          {%- set next2Post = collections['postsWithoutDrafts'] | getPreviousCollectionItem(next1Post) %}
+          {%- if next2Post %}
+            {{ cardLayouts.card(next2Post)}}
+          {% endif %}
+        </div>
+        <div class="bg-white rounded mb-2">
+          {%- set next3Post = collections['postsWithoutDrafts'] | getPreviousCollectionItem(next2Post) %}
+          {%- if next3Post %}
+            {{ cardLayouts.card(next3Post)}}
+          {% endif %}
+        </div>
+      </div>
     </div>
+  {% endif %}
+
+  <div class="flex justify-between">
+    <ul class="flex subheaderUlFoot text-white">
+      <li class="mr-2">
+        <a class="text-xs subheaderFootU underline" href="https://privacy.microsoft.com/en-us/privacystatement" target="_blank">Privacy Statement</a>
+      </li>
+      <li>
+        <a class="text-xs subheaderFootU underline" href="https://github.com/pwa-builder/PWABuilder/blob/master/TERMS_OF_USE.md" target="_blank">Terms of use</a>
+      </li>
+    </ul>
     <ul class="flex justify-center items-center subheaderUlFoot">
         <li class="mx-2 my-1">
         <a href="https://github.com/pwa-builder/PWABuilder" class="subheaderFoot" target="_blank">
@@ -36,13 +55,16 @@
 </footer>
 
 <style>
+  footer {
+    background: #292c3a;
+  }
   .subheaderFoot {
      text-decoration: none;
-     color: rgb(41, 44, 58);
+     color: #fff;
   }
 
   .subheaderFootU {
-     color: rgb(41, 44, 58);
+     color: #fff;
   }
 
   .subheaderUlFoot {

apps/blog/src/includes/header.njk

@@ -1,4 +1,4 @@
-<header class="header flex items-center justify-between px-12" role="banner">
+<header class="header flex items-center justify-between px-8 xl:px-12" role="banner">
   <a id="pwa-logo-link" aria-label="Pwa Logo" href="https://www.pwabuilder.com" rel="home" class="text-lg font-bold leading-tight" >
     <img aria-labelledby="pwa-logo-link" loading="lazy" class="w-20" src="/PWAColorLogo.svg" role="img"
 /></a>

apps/blog/src/includes/layouts/basepost.njk

@@ -108,7 +108,7 @@
     {% block subHeader %}
       {% include 'sub-header.njk' %}
     {% endblock %}
-    <main class="container mx-auto px-8 xl:px-32">
+    <main class="container mx-auto px-8 xl:px-12">
       {% block body %}
         {{ content | safe }}
       {% endblock %}

apps/blog/src/includes/layouts/post.njk

@@ -1,78 +1,16 @@
 ---
 permalink: "{% if path %}{{ path | slug }}{% else %}{{'/posts/'}}{{ title | slug }}{% endif %}/index.html"
 ---
+{% import "layouts/postcard.njk" as cardLayouts %}
 
 {% extends 'layouts/basepost.njk' %}
 {% block body %}
-  <div class="flex flex-col justify-center items-start">
-    <div class="w-full flex justify-between items-center">
-      <div>
-        {% if date %}
-          {% if updatedDate and(date | string) !== (updatedDate | string) %}
-            <p class="text-sm italic">Last updated on<span datetime="{{ date }}">{{ updatedDate | dateDisplay }}</span
-    ><span datetime="{{ date }}">{{ date | dateDisplay }}</span
-    >
-            </p>
-          {% else %}
-            <p class="text-sm italic">
-              <span datetime="{{ date }}">{{ date | dateDisplay }}</span
-    >
-            </p>
-          {% endif %}
-        {% endif %}
-        {% if author %}
-          <span><a href="{{author.twitter}}" target="_blank">{{author.name}}</a></span>
-          <div>{{author.title}}</div>
-        {% endif %}
-      </div>
-      <button class="share bg-primary capitalize px-5 py-1 shadow rounded-full font-bold ml-auto">Share</button>
-    </div>
-
-    <div class="my-8">
-      {{ content | safe }}
-    </div>
-
-    <div class="flex items-center mb-8">
-      {% if tags %}
-        <div>
-          {% for tag in tags %}
-            {%- if tag !== "post" -%}
-              <a
-      class="tag {{ tag | replace('.', '') }} mr-2 font-light"
-      href="{{ site.baseUrl }}tags/{{ tag | slug }}"
-      >{{ tag }}</a
-    >
-            {%- endif -%}
-          {% endfor %}
-        </div>
-      {% endif %}
-      <button class="share bg-primary capitalize px-5 py-1 shadow rounded-full font-bold">Share</button>
-    </div>
-    <hr class="opacity-10">
-    <div class="w-full flex items-center justify-between">
-      <div>
-        {%- set nextPost = collections['postsWithoutDrafts'] |
-  getNextCollectionItem(page) %}
-        {%- if nextPost %}
-          <p class="uppercase text-xs mt-6">Next</p>
-          <p class="font-bold mb-2">
-            <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a>
-          </p>
-        {% endif %}
-      </div>
-      <div>
-        {%- set previousPost = collections['postsWithoutDrafts'] |
-  getPreviousCollectionItem(page) %}
-        {%- if previousPost %}
-          <p class="uppercase text-xs mt-6">Previous</p>
-          <p class="font-bold">
-            <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a>
-          </p>
-        {% endif %}
-      </div>
-    </div>
-
-    <a class="bg-secondary text-secondary-font rounded-full px-8 py-2 mx-auto" href="{{ site.baseUrl }}">Back to Blog Home</a>
+  <div class="mb-4">
+    {{ content | safe }}
   </div>
 
+  <div class="mb-8">
+    <span class="text-[#808080] mr-4 text-sm">Share this article on your social media!</span>
+    {% include 'share-button.njk' %}
+  </div>
 {% endblock %}