Split project list into a partial to use on multiple pages

Author: kylegordy

_includes/project-list.html

@@ -0,0 +1,51 @@
+<ul class="card-grid">
+    {% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
+
+    <!-- Assign an optional limit to be passed through  -->
+    {% for repository in public_repositories limit: {{include.limit}} %}
+
+        <!-- Assign theme colors based of off the project language -->
+        <!-- See include below for logic and color.scss for available themes -->
+        {% include project-color-logic.html %}
+
+        <li class="card theme-{{ theme | default: "midnight" }}">
+            <header class="card__header">
+
+                <!-- Project title -->
+                <h2 class="card__header-title">
+                    <a class="card__header-link stretched-link" href='{{ repository.html_url }}'>
+                        {{ repository.name }}
+                    </a>
+                </h2>
+
+                <!-- Project metadata -->
+                <ul class="card__header-list list--inline fs-md monospace">
+                    {% if repository.language %}
+                        <li>
+                            <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#code' | relative_url }}"></use></svg><span class="visually-hidden">Language: </span>{{ repository.language }}
+                        </li>
+                    {% endif %}
+
+                    {% if repository.license.spdx_id %}
+                        <li>
+                            <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#license' | relative_url }}"></use></svg><span class="visually-hidden">License: </span>{{ repository.license.spdx_id }}
+                        </li>
+                    {% endif %}
+                </ul>
+
+                <!-- External Link Indicator -->
+                <div class="card__external-indicator">
+                    <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-external' | relative_url }}"></use></svg>
+                </div>
+            </header>
+
+            <!-- Project description -->
+            <div class="card__body fs-md monospace" aria-hidden="true">
+                {% if repository.description %}
+                    <p class="m-0 clamp-3">{{ repository.description }}</p>
+                {% endif %}
+            </div>
+        </li>
+
+    {% endfor %}
+</ul>

_layouts/home.html

@@ -2,4 +2,12 @@
 layout: default
 ---
 
-This is an empty homepage.
+
+<section class="section-container">
+    <h2 id="featured-projects" class="section-heading pb-3">Featured Projects</h2>
+    {% include project-list.html limit="3" %}
+    <a href="{% link projects.html %}" class="mt-4 btn btn-secondary btn-icon-right">
+        All Projects
+        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+    </a>
+</section>

projects.html

@@ -11,54 +11,5 @@
 
 <div class="section-container">
     <h2 class="mb-3">Open Source Projects</h2>
-
-    <ul class="card-grid mb-3">
-        {% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
-        {% for repository in public_repositories %}
-
-            <!-- Assign theme colors based of off the project language -->
-            <!-- See include below for logic and color.scss for available themes -->
-            {% include project-color-logic.html %}
-
-            <li class="card theme-{{ theme | default: "midnight" }}">
-                <header class="card__header">
-
-                    <!-- Project title -->
-                    <h2 class="card__header-title">
-                        <a class="card__header-link stretched-link" href='{{ repository.html_url }}'>
-                            {{ repository.name }}
-                        </a>
-                    </h2>
-
-                    <!-- Project metadata -->
-                    <ul class="card__header-list list--inline fs-md monospace">
-                        {% if repository.language %}
-                            <li>
-                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#code' | relative_url }}"></use></svg><span class="visually-hidden">Language: </span>{{ repository.language }}
-                            </li>
-                        {% endif %}
-
-                        {% if repository.license.spdx_id %}
-                            <li>
-                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#license' | relative_url }}"></use></svg><span class="visually-hidden">License: </span>{{ repository.license.spdx_id }}
-                            </li>
-                        {% endif %}
-                    </ul>
-
-                    <!-- External Link Indicator -->
-                    <div class="card__external-indicator">
-                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-external' | relative_url }}"></use></svg>
-                    </div>
-                </header>
-
-                <!-- Project description -->
-                <div class="card__body fs-md monospace" aria-hidden="true">
-                    {% if repository.description %}
-                        <p class="m-0 clamp-3">{{ repository.description }}</p>
-                    {% endif %}
-                </div>
-            </li>
-
-        {% endfor %}
-    </ul>
+    {% include project-list.html %}
 </div>