jekyll-theme-profile 1.8.6 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c338ecc61d0ef11ef731ad95b3dc73329e4161824080d94038b6b040d66c44c
-  data.tar.gz: 0cc76009af611f8d86b984feb46399501ecb7fddf8259de967f64f01cde81098
+  metadata.gz: 1f8cc59151f896025fdc45d90b5cbfc6c6093070bf8cf45161606e275d6f4dc9
+  data.tar.gz: 9a9307ad9ded9450fa3854c92b3d005f6ea4c8e2ffaa5bb525932cd71fb8deff
 SHA512:
-  metadata.gz: aad022b02d14dccb49e37e9426d0ad969c18bcdd8b9bcb80e8b97baa46335a52edbac218b170ef54f99c910549192a43772a0fd9f32e0131d805f74be6e9a885
-  data.tar.gz: da4406630319fba0bddd46bf83bd5b072d12e83aae62d0b7fb5b87b27d65dc6cc9508c8fd0391114831e524c55da55287889fea452968df40e32f1aeb6ccc816
+  metadata.gz: 47da1253dba00f0e9e6be2ac3aa3bbb12fc67c677d94cd3f99c34d29bca2dd3bd36469dbe01f6db8716508258220ed44c88b6e3f186cb59af14c659e30a2f2b1
+  data.tar.gz: '09a4bb3c0c1a596fd25c95c3ef55a33a5f7353995aa9605091953f37cf8661ed6e6eb683b2f22d83291cfb1889075bdfacc400208e59115c6b47af9464da7e03'

data/README.md

@@ -132,19 +132,19 @@ style: sidebar # One of "stacked", "sidebar", "topbar", "appbar
 ---
 ```
 
-#### [Sidebar](https://www.althack.dev/jekyll-theme-profile/home/sidebar.html)
+#### [Sidebar](https://www.althack.dev/jekyll-theme-profile/sidebar.html)
 
 ![Sidebar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/sidebar-preview.png)
 
-#### [Stacked](https://www.althack.dev/jekyll-theme-profile/home/stacked.html)
+#### [Stacked](https://www.althack.dev/jekyll-theme-profile/stacked.html)
 
 ![Stacked image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/stacked-preview.png)
 
-#### [Topbar](https://www.althack.dev/jekyll-theme-profile/home/topbar.html)
+#### [Topbar](https://www.althack.dev/jekyll-theme-profile/topbar.html)
 
 ![Topbar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/topbar-preview.png)
 
-#### [Appbar](https://www.althack.dev/jekyll-theme-profile/home/appbar.html)
+#### [Appbar](https://www.althack.dev/jekyll-theme-profile/appbar.html)
 
 ![Appbar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/appbar-preview.png)
 
@@ -156,10 +156,6 @@ You can even change the background by adding the following to your `_config.yml`
 background:
   image: /media/background-img.jpg
   overlay: rgba(0, 0, 0, 0.5) # Overlay for both light and dark styles
-  light:
-    overlay: rgba(255, 255, 255, 0.5)
-  dark:
-    overlay: rgba(0, 0, 0, 0.5)
 ```
 
 or
@@ -195,11 +191,11 @@ In the `nav` section, you can add navigation links that will show up on every pa
 ```yaml
 nav:
   - name: Topbar
-    url: /test/home/topbar.html
+    url: /demo/topbar.html
   - name: Sidebar
-    url: /test/home/sidebar.html
+    url: /demo/sidebar.html
   - name: Stacked
-    url: /test/home/stacked.html
+    url: /demo/stacked.html
 ```
 
 ### Links

data/_config.yml

@@ -0,0 +1,144 @@
+# ######## Jekyll Site Settings ##########
+theme: jekyll-theme-profile
+title: Jekyll Theme Profile
+description: Theme built with jekyll-theme-profile
+image: /media/appbar-preview.png
+# repository: athackst/jekyll-theme-profile
+# base_url: "jekyll-theme-profile"
+
+collections:
+  docs:
+    output: true
+    sort_by: order
+
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts"
+    values:
+      image: /assets/img/default.png # The default image used for social and posts.
+      layout: "post"
+      permalink: :year/:month/:day/:title:output_ext
+      toc: true
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "docs"
+    values:
+      layout: "docs"
+      image: /assets/img/default.png # The default image used for social and posts.
+      index: /docs/index.html
+      permalink: /docs/:path:output_ext
+      toc: true
+
+# ########### Theme settings ###############
+# The style of the website
+style: appbar # One of "stacked", "sidebar", "topbar", "appbar"
+# The user/project avatar.  If not set the avatar of the project owner will be used.
+# user_image: /assets/img/user-image.jpg
+# The themes to use for dark and light
+dark_theme: dark_dimmed
+light_theme: light
+
+repo_info: true # Show the information for the source of this project
+user_metadata: true # Show the metadata associated with the user
+profile_link: true # Show a link to the github profile for the user
+
+##########################
+# # Social media settings
+# icon_color: "#959da5" # The color of the social media icons on the site
+# social_media: # Your social media accounts
+#   behance: your_username
+#   dribbble: your_username
+#   docker: your_username
+#   facebook: your_username
+#   github: your_username
+#   hackerrank: your_username
+#   instagram: your_username
+#   keybase: your_username
+#   linkedin: your_username
+#   mail: email@address
+#   mastodon: your_username
+#   medium: your_username
+#   stackoverflow: your_user_id
+#   telegram: your_username
+#   threads: your_username
+#   tiktok: your_username
+#   twitter: your_username
+#   unsplash: your_username
+#   vk: your_username
+#   vscode: your_username
+#   youtube: your_username
+#   x: your_username
+
+####################
+# Navigation links
+nav:
+  - name: Posts
+    url: /blog
+  - name: Categories
+    url: /category/
+
+####################
+# List of links for link cards
+links:
+  - name: All blog posts
+    url: /blog
+    thumbnail: /assets/img/blog-post-icon.png
+  - name: Browse by category
+    url: /category/
+    thumbnail: /assets/img/category-icon.png
+
+###################
+# Repositories to show on home page
+repositories:
+  sort_by: stars
+  # sort_by options:
+  #   - pushed
+  #   - stars
+  limit: 24
+  exclude:
+    archived: true
+    forks: true
+    repositories:
+      # - list of respositories to exclude
+
+########################
+# Post timeline
+posts_limit: 3 # The number of posts to show in home (also can be defined in page)
+
+# ########### Plugin settings ###############
+plugins:
+  - jekyll-github-metadata
+  - jekyll-octicons
+  - jekyll-relative-links
+  - jekyll-seo-tag
+  - jekyll-toc
+  - jemoji
+
+####################
+# jekyll-paginate settings
+paginate: 6 # The number of posts to show per page of pagination of blog posts
+paginate_path: "/blog/page:num"
+###################
+# jekyll-tagging settings
+# Include `gem jekyll-tagging` in your gemfile
+tag_page_layout: tags
+tag_page_dir: tags
+# related
+related_by: "tags or categories"
+
+####################
+# jekyll-category-pages settings
+category_path: category
+category_layout: category_layout.html
+
+######################
+# jekyll-relative-links settings
+relative_links:
+  enabled:     true
+  collections: true
+
+# ########### Build settings ###############
+exclude:
+  - spec
+  - demo

data/_includes/collection-menu.html

@@ -1,13 +1,17 @@
 {%- assign collection = include.collection | default: site.docs %}
 {%- assign collection_name = include.name %}
 {%- assign collection_index = include.index %}
+{%- assign index_url = collection_index.url %}
+{%- assign collection_without_index = collection | where_exp: "item", "item.url != index_url" %}
+
 <div class="Overlay-backdrop--side Overlay-backdrop--placement-left" data-modal-dialog-overlay>
-    <modal-dialog class="Overlay Overlay--width-medium Overlay--motion-slideDown height-fit height-full" >
+    <modal-dialog class="Overlay Overlay--width-medium Overlay--motion-slideDown height-fit height-full">
         <div class="Overlay-headerContentWrap d-flex flex-row py-3 px-2 border-bottom">
             <div class="Overlay-titleWrap d-flex flex-1">
                 <div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
                     {% if collection_index %}
-                    <a href="{{ collection_index.url | relative_url }}" class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                    <a href="{{ collection_index.url | relative_url }}"
+                        class="AppHeader-link d-flex flex-items-center no-underline mr-3">
                         <span class="h3 color-fg-default text-bold">{{ collection_name }}</span>
                     </a>
                     {% else %}
@@ -17,7 +21,7 @@
                     {% endif %}
                 </div>
             </div>
-            <div class="Overlay-actionWrap d-flex flex-justify-end" >
+            <div class="Overlay-actionWrap d-flex flex-justify-end">
                 <button id="close-contents-btn" class="close-button Overlay-closeButton">
                     {% octicon x height: 16 %}
                 </button>
@@ -25,14 +29,23 @@
         </div>
         <div class="Overlay-body d-flex flex-column p-2">
             <ul data-overflow-nav class="ActionList border-0">
-                {%- for nav_item in collection %}
-                {%- if nav_item.url != collection_index %}
-                <a href="{{ nav_item.url | relative_url }}" class="ActionListItem-label no-underline" >
-                    <li class="menu-item ActionList-item border-0"{% if page.url==nav_item.url %} aria-current="page"{% endif %}>
-                        {{ nav_item.title }}
-                    </li>
-                </a>
-                {%- endif %}
+                {%- assign collection_categories = collection_without_index | group_by: "category" %}
+                {%- for category in collection_categories %}
+                {%- assign category_name = category.name | default: collection_name %}
+                <li class="ActionListItem no-underline h4">{{ category_name | capitalize }}
+                    <ul>
+                        {%- for nav_item in category.items %}
+                        {%- if nav_item.url != collection_index %}
+                        <a href="{{ nav_item.url | relative_url }}" class="ActionListItem-label no-underline">
+                            <li class="menu-item ActionList-item border-0" {% if page.url==nav_item.url %}
+                                aria-current="page" {% endif %}>
+                                {{ nav_item.title }}
+                            </li>
+                        </a>
+                        {%- endif %}
+                        {%- endfor %}
+                    </ul>
+                </li>
                 {%- endfor %}
             </ul>
         </div>

data/_includes/header-sidebar.html

@@ -40,7 +40,7 @@
         <div class="Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide">
             <div class="text-center">
                 <div class="px-5 py-2">
-                    {%- include masthead.html %}
+                    {%- include masthead.html class="CircleBadge--large" %}
                 </div>
                 {%- if site.repo_info %}
                 <div class="py-2">

data/_includes/link-card.html

@@ -18,6 +18,9 @@ This builds a link card
       <img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
         class="rounded-2 box-shadow-none img-cover float-left" alt="{{ link.name }}">
       {%- endif %}
+      {%- if link.octicon %}
+        {% octicon {{ link.octicon }} height:48 %}
+      {%- endif %}
     </div>
     <div class="p-2">
       <p class="f3 text-center mb-0">{{ link.name }}</p>

data/_includes/masthead.html

@@ -1,10 +1,10 @@
 {%- assign user = site.github.owner %}
-{%- assign name = site.title | default: user.name | default: user.login %}
+{%- assign name = include.title | default: site.title | default: user.name | default: user.login %}
 {%- assign user_img = site.user_image | default: user.avatar_url %}
 {%- assign user_metadata = site.user_metadata -%}
 
 <div class="Masthead">
-    <div class="CircleBadge img-masthead rounded-circle border">
+    <div class="CircleBadge img-masthead {{include.class}}">
       <a href="{{ site.baseurl }}/">
         <img src="{{ user_img | relative_url }}" alt="{{ name }}" class="cover-image">
       </a>

data/_includes/post-card.html

@@ -1,4 +1,5 @@
 {%- assign image = post.image | default: site.image %}
+{%- assign excerpt = post.description | default: post.excerpt %}
 {%- assign border = include.border %}
 <div class="col-sm-6 col-lg-4 ">
   <div class="py-4 d-flex flex-column {{ border }}">
@@ -10,7 +11,7 @@
     <h3 class="h6-mktg mb-12px">
       <a class="Link--primary" href="{{ post.url | relative_url }}">{{ post.title }}</a>
     </h3>
-    <p class="f4-mktg color-fg-muted mb-0">{{ post.excerpt | default: post.description }}</p>
+    <div class="f4-mktg color-fg-muted mb-0">{{ excerpt }}</div>
     <div class="mt-14px">
       <div class="d-flex flex-items-center">
         <div class="d-flex flex-items-end flex-wrap">

data/_includes/post-feature-card.html

@@ -1,4 +1,6 @@
 {%- assign image = post.image | default: site.image %}
+{%- assign excerpt = post.description | default: post.excerpt %}
+
 <div class="py-4 d-flex flex-column flex-md-row flex-md-row-reverse p-responsive col-12">
   <div class="col-12 col-lg-8 p-responsive">
     <div class="image-container">
@@ -11,7 +13,7 @@
     <h3 class="h4-mktg mb-12px">
       <a class="Link--primary" href="{{ post.url | relative_url }}">{{ post.title }}</a>
     </h3>
-    <p class="f4-mktg color-fg-muted">{{ post.excerpt }}</p>
+    <div class="f4-mktg color-fg-muted">{{ excerpt }}</div>
     <div class="d-flex flex-items-end flex-wrap">
       {%- if post.author %}
       <span class="mr-3 mr-12px mt-1 f5-mktg text-bold">{{ post.author }}</span>

data/_includes/post-gallery.html

@@ -0,0 +1,45 @@
+{%- assign collection = include.collection %}
+{%- assign collection_permalink = include.collection_permalink | default: ':name' %}
+{%- assign replace_value = include.replace_value | default: ':name' %}
+{%- assign per_section = include.per_section | default: 3 %}
+
+{%- for section in collection %}
+{%- assign section_name = section | first %}
+{%- assign section_slug = section_name | slugify %}
+{%- assign section_posts = section | last %}
+<div class="section-heading d-flex flex-items-center flex-justify-between mb-4 mb-lg-7">
+  <h2 class="h6-mktg border-bottom-0">{{ section_name | capitalize }}</h2>
+  {%- if section_posts.size > per_section %}
+  <div class="d-none d-lg-flex flex-items-center">
+    <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+  </div>
+  {%- endif %}
+</div>
+{%- if section_posts.size == 1 %}
+{%- assign image_class = "col-12" %}
+{%- assign text_class = "" %}
+{%- else %}
+{%- assign image_class = "col-md-7 col-xl-9" %}
+{%- assign text_class = "col-md-5 col-xl-3" %}
+{%- endif %}
+<div class="d-flex flex-wrap gutter-spacious {% cycle '', 'flex-row-reverse' %}">
+  {%- for post in section_posts limit: per_section %}
+  {%- if forloop.first %}
+  <div class="{{ image_class }}">
+    {% include post-tease-image-card.html %}
+  </div>
+  <div class="{{ text_class }}">
+  {%- else %}
+    <div class="{% unless forloop.last %}border-bottom{% endunless %}">
+    {% include post-tease-text-card.html %}
+    </div>
+  {%- endif %}
+  {%- endfor %}
+  </div>
+</div>
+{%- if section_posts.size > per_section %}
+<div class="mb-7 mb-md-8 pt-5 text-right d-lg-none border-top">
+  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+</div>
+{%- endif %}
+{%- endfor %}

data/_includes/post-index.html

@@ -0,0 +1,28 @@
+{%- assign collection = include.collection %}
+{%- assign collection_permalink = include.collection_permalink | default: ':name' %}
+{%- assign replace_value = include.replace_value | default: ':name' %}
+{%- assign per_section = include.per_section | default: 6 %}
+
+{% for section in collection %}
+{%- assign section_name = section | first %}
+{%- assign section_slug = section_name | slugify %}
+{%- assign section_posts = section | last %}
+<div class="section-heading d-flex flex-items-center flex-justify-between mb-4 mb-lg-7">
+  <h2 class="h6-mktg border-bottom-0">{{ section_name | capitalize }}</h2>
+  {%- if section_posts.size > per_section %}
+  <div class="d-none d-lg-flex flex-items-center">
+    <a href="{{ collection_permalink  | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+  </div>
+  {%- endif %}
+  </div>
+<div class="d-flex flex-wrap gutter-spacious mb-4">
+  {% for post in section_posts limit: per_section %}
+  {%- include post-card.html %}
+  {% endfor %}
+</div>
+{%- if section_posts.size > per_section %}
+<div class="mb-7 mb-md-8 pt-5 text-right d-lg-none border-top">
+  <a href="{{ collection_permalink | replace: replace_value, section_slug | relative_url }}" class="Link--primary arrow-target-mktg text-semibold">View all {% octicon chevron-right height:16 %}</a>
+</div>
+{%- endif %}
+{% endfor %}

data/_includes/post-tease-image-card.html

@@ -0,0 +1,22 @@
+<!-- post preview with image -->
+{%- assign image = post.image | default: site.image %}
+{%- assign excerpt = post.description | default: post.excerpt %}
+<div class="py-4 d-flex flex-column border-bottom border-md-0">
+    <div class="image-container">
+        <a href="{{ post.url | relative_url }}">
+            <img class="rounded-2" src="{{ image | relative_url }}" width="800" height="425" alt="{{ post.title }}">
+        </a>
+    </div>
+    <div class="col-12">
+        <h3 class="h3-mktg h3-alt-mktg mb-12px">
+            <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        </h3>
+        <div class="f4-mktg color-fg-muted">{{ excerpt }}</div>
+        <div class="mt-14px">
+            {%- if post.author %}
+            <span class="mr-3 mr-12px mt-1 f5-mktg text-bold">{{ post.author }}</span>
+            {%- endif %}
+            <span class="d-inline-block f5-mktg text-mono color-fg-muted mt-1">{{ post.date | date: "%b %d, %Y"}}</span>
+        </div>
+    </div>
+</div>

data/_includes/post-tease-text-card.html

@@ -0,0 +1,12 @@
+{%- assign excerpt = post.description | default: post.excerpt %}
+<div class="py-4 d-flex flex-column">
+    <div class="col-12">
+      <h3 class="h6-mktg mb-2">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </h3>
+      <div class="f4-mktg color-fg-muted">{{ excerpt }}</div>
+      <div class="mt-12px">
+        <span class="mr-3 mr-12px mt-1 f5-mktg text-bold">{{ post.author }}</span>
+      </div>
+    </div>
+  </div>

data/_includes/post-timeline-card.html

@@ -20,31 +20,32 @@
     </div>
   </div>
   <div class="col-12 col-md-7">
-    <div class="ml-5 mt-5">
-      {%- if post.video %}
-      <div id="Timeline-video-container" class="image-container mb-5">
-        <iframe id="Timeline-video" src="{{ post.video }}" frameborder="0" height="inherited" width="inherited"></iframe>
-      </div>
-      {%- elsif post.image %}
-      <div class="image-container mb-5">
-        <img class="rounded-2" src="{{ post.image}}" width="800" height="425" alt="{{ post.title }}" />
-      </div>
-      {%- endif %}
-      <div class="summary"> {{ post.excerpt }}</div>
-      {%- if post.content != blank %}
-      <div class="more">
-        <a href="{{ post.url | relative_url }}" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
-          Contiue
-          <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
-            viewBox="0 0 16 16" fill="none">
-            <path fill="currentColor"
-              d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
-            </path>
-            <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
-          </svg>
-        </a>
-      </div>
-      {%- endif %}
+    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
+        {%- if post.video %}
+        <div id="Timeline-video-container" class="image-container">
+          <iframe id="Timeline-video" src="{{ post.video }}" frameborder="0" height="inherited"
+            width="inherited"></iframe>
+        </div>
+        {%- elsif post.image %}
+        <div class="image-container">
+          <img class="rounded-2" src="{{ post.image}}" width="800" height="425" alt="{{ post.title }}" />
+        </div>
+        {%- endif %}
+        <div class="summary"> {{ post.excerpt }}</div>
+        {%- if post.content != blank %}
+        <div class="more">
+          <a href="{{ post.url | relative_url }}" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
+            Contiue
+            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+              viewBox="0 0 16 16" fill="none">
+              <path fill="currentColor"
+                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+              </path>
+              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+            </svg>
+          </a>
+        </div>
+        {%- endif %}
     </div>
 
   </div>

data/_includes/post-timeline.html

@@ -1,12 +1,21 @@
-{%- assign post_limit = include.limit | default: 3 %}
+{%- assign collection = include.collection | default: site.posts | sort: "date" | reverse %}
+{%- assign index = include.index %}
+{%- assign post_limit = include.limit | default: nil %}
 
-<div class="mb-4">
-  {%- for post in site.posts limit: {{post_limit}} %}
-      {%- include post-timeline-card.html %}
-  {%- endfor %}
+<div class="mt-md-7 mb-9 mb-md-12">
+  <div class="container-xl mx-auto p-responsive-blog">
+    {%- for post in collection | limit: post_limit %}
+    {%- include post-timeline-card.html %}
+    {%- endfor %}
+  </div>
+  {%- if collection.size > post_limit %}
+  <div class="container-xl mx-auto p-responsive-blog mt-6 mt-md-8 ">
+    <div class="d-flex gutter-spacious">
+      <div class="col-12 col-md-7 offset-md-5">
+        <a href="{{ index | relative_url }}"
+          class="Link--primary arrow-target-mktg text-semibold btn ml-5">View all {% octicon chevron-right height:16 %}</a>
+      </div>
+    </div>
+  </div>
+  {%- endif %}
 </div>
-{%- if site.paginate %}
-<div class="col-12 col-md-7 offset-md-5 mb-5">
-  <a href="{{ site.paginate_path | relative_url | replace: 'page:num', '' }}" class="btn ml-5">Read more</a>
-</div>
-{%- endif %}

data/_includes/repositories.html

@@ -5,6 +5,7 @@
     {%- assign sort_order = 'pushed_at' %}
   {%- endif %}
 
+  {%- if site.github.public_repositories.size > 0 %}
   {%- if site.repositories.exclude.archived && site.repositories.exclude.forks %}
     {%- assign filtered_repos = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: sort_order | reverse %}
   {%- elsif site.repositories.exclude.archived %}
@@ -14,6 +15,7 @@
   {%- else %}
     {%- assign filtered_repos = site.github.public_repositories | sort: sort_order | reverse %}
   {%- endif %}
+  {%- endif %}
 
   {%- for repository in filtered_repos | limit: site.repositories.limit %}
     {%- unless site.repositories.exclude.repositories contains repository.name %}

data/_layouts/category_index.html

@@ -0,0 +1,17 @@
+---
+layout: page
+title: Category
+---
+{%- assign categories = page.categories | default: site.categories %}
+{%- assign category_permalink = site.category_path | default: 'category' | append: '/:cat' %}
+{%- assign category_permalink = page.pagination.permalink | default: site.autopages.categories.permalink | default: category_permalink %}
+{%- assign per_section = page.per_section | default: page.pagination.per_page | default: 3 %}
+
+<h1 class="h3-mktg mt-4 mb-6 mb-md-8">{{ page.title }}</h1>
+
+{% include post-gallery.html
+    collection=categories
+    collection_permalink=category_permalink
+    replace_value=":cat"
+    per_section=per_section
+%}

data/_layouts/category_layout.html

@@ -1,3 +1,56 @@
 ---
-layout: paginate
+layout: page
 ---
+{% if page.paginator %}
+  <!-- Pagination is active -->
+  {% assign paginator = page.paginator %}
+{% endif %}
+
+{% if paginator %}
+
+  {% if paginator.previous_page != nil or paginator.next_page != nil %}
+    <!-- Show page number if we have multiple pages -->
+    <p class="f4-mktg color-text-tertiary mt-4 mt-md-7 mb-0">Category {{ paginator.page }} / {{ paginator.total_pages }}</p>
+    <h1 class="pb-5 mt-0">{{ page.title | capitalize }}</h1>
+  {% else %}
+    <!-- No page number if we only have a single page -->
+    <p class="f4-mktg color-text-tertiary mt-4 mt-md-7 mb-0">Category</p>
+    <h1 class="pb-5 mt-0">{{ page.title | capitalize }}</h1>
+  {% endif %}
+
+  <div class="d-flex flex-wrap gutter-spacious">
+    <!-- Show post excerpts for the current page -->
+    {% for post in paginator.posts limit:paginator.per_page %}
+    {%- if post.feature or post == site.categories[page.title][0] %}
+    {%- include post-feature-card.html %}
+    {%- else %}
+    {%- include post-card.html border="border-top" %}
+    {%- endif %}
+    {% endfor %}
+  </div>
+  <!-- Show navigation next/previous page links if applicable -->
+  <nav><p>
+    {% if paginator.previous_page %}<a class="previous_page" rel="prev" href="{{ paginator.previous_page_path | relative_url }}"
+    aria-disabled="false">Previous</a>{% endif %}
+    {% if paginator.next_page %}<a class="next_page" rel="next" href="{{ paginator.next_page_path | relative_url }}"
+    aria-disabled="false">Next</a>{% endif %}
+  </p></nav>
+
+{% else %}
+
+  <!-- Pagination is not active -->
+  <p class="f4-mktg color-text-tertiary mt-4 mt-md-7 mb-0">Category</p>
+  <h1 class="pb-5 mt-0">{{ page.title | capitalize }}</h1>
+
+  <div class="d-flex flex-wrap gutter-spacious">
+    <!-- Show excerpts for all posts in this category -->
+    {% for post in page.posts %}
+    {%- if post.feature %}
+    {%- include post-feature-card.html %}
+    {%- else %}
+    {%- include post-card.html border="border-top" %}
+    {%- endif %}
+    {% endfor %}
+  </div>
+
+{% endif %}