a

_config.yml

@@ -149,6 +149,10 @@ collections:
   courses:
     output: true
     permalink: /courses/:name/
+  resources:
+    output: true
+    permalink: /resources/:resource_type/:title/
+
 
 # 6. Jekyll collections settings
 defaults:

_includes/resources/card.html

@@ -0,0 +1,25 @@
+<div class="card">
+    <div class="card-content">
+        <div class="media">
+            <div class="media-left">
+                <figure class="image is-48x48">
+                    <img src="{{ include.resource.image }}" alt="{{ include.resource.title }}">
+                </figure>
+            </div>
+            <div class="media-content">
+                <p class="title is-4">
+                    <a href="{{ include.resource.url }}">{{ include.resource.title }}</a>
+                </p>
+                <p class="subtitle is-6">{{ include.resource.topic }}</p>
+            </div>
+        </div>
+        <div class="content">
+            {{ include.resource.description | truncate: 100 }}
+            <div class="tags mt-2">
+                <span class="tag is-primary">{{ include.resource.difficulty }}</span>
+                <span class="tag is-info">{{ include.resource.resource_type }}</span>
+                <span class="tag {% if include.resource.price == 'Free' %}is-success{% else %}is-danger{% endif %}">{{ include.resource.price }}</span>
+            </div>
+        </div>
+    </div>
+</div>

_includes/resources/filters.html

@@ -0,0 +1,19 @@
+<div class="box">
+    <div class="field">
+        <p class="control has-icons-left">
+            <input class="input" type="text" id="search-box" placeholder="Search resources">
+            <span class="icon is-small is-left">
+                <i class="fas fa-search"></i>
+            </span>
+        </p>
+    </div>
+
+    <h3 class="title is-5 mt-4">Type</h3>
+    {% for type in "book,tool,course,blog,trailblazer,miscellaneous" | split: "," %}
+        <div class="field">
+            <label class="checkbox">
+                <input type="checkbox" class="filter-type" value="{{ type }}"> {{ type | capitalize }}
+            </label>
+        </div>
+    {% endfor %}
+</div>

_layouts/resource.html

@@ -0,0 +1,84 @@
+---
+layout: default
+---
+
+{% if page.resource_type %}
+    <!-- SINGLE RESOURCE PAGE -->
+    <section class="section">
+        <div class="container">
+            <div class="columns is-vcentered mb-6">
+                <div class="column is-2">
+                    <figure class="image is-128x128">
+                        <img src="{{ page.image }}" alt="{{ page.title }}">
+                    </figure>
+                </div>
+                <div class="column">
+                    <h1 class="title is-2">{{ page.title }}</h1>
+                    <div class="tags">
+                        <span class="tag is-primary">{{ page.difficulty }}</span>
+                        <span class="tag is-info">{{ page.resource_type | capitalize }}</span>
+                        <span class="tag {% if page.price == 'Free' %}is-success{% else %}is-danger{% endif %}">{{ page.price }}</span>
+                    </div>
+                    <p class="subtitle is-5">By {{ page.author }}</p>
+                </div>
+            </div>
+
+            <div class="content">
+                <p>{{ page.description }}</p>
+                <a href="{{ page.source_url }}" class="button is-primary">View Resource</a>
+            </div>
+        </div>
+    </section>
+{% else %}
+    <!-- RESOURCE LISTING PAGE -->
+    <section class="section">
+        <div class="container">
+            <div class="columns">
+                <!-- Sidebar Filters -->
+                <div class="column is-3">
+                    {% include resources/filters.html %}
+                </div>
+
+                <!-- Main Resource Listing -->
+                <div class="column">
+                    <div class="columns is-multiline" id="resource-list">
+                        {% for resource in site.resources %}
+                            <div class="column is-6 resource-card" data-type="{{ resource.resource_type }}" data-topic="{{ resource.topic }}" data-price="{{ resource.price }}">
+                                {% include resources/card.html resource=resource %}
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endif %}
+
+<script>
+    <div class="card">
+    <div class="card-content">
+        <div class="media">
+            <div class="media-left">
+                <figure class="image is-48x48">
+                    <img src="{{ include.resource.image }}" alt="{{ include.resource.title }}">
+                </figure>
+            </div>
+            <div class="media-content">
+                <p class="title is-4">
+                    <a href="{{ include.resource.url }}">{{ include.resource.title }}</a>
+                </p>
+                <p class="subtitle is-6">{{ include.resource.topic }}</p>
+            </div>
+        </div>
+        <div class="content">
+            {{ include.resource.description | truncate: 100 }}
+            <div class="tags mt-2">
+                <span class="tag is-primary">{{ include.resource.difficulty }}</span>
+                <span class="tag is-info">{{ include.resource.resource_type }}</span>
+                <span class="tag {% if include.resource.price == 'Free' %}is-success{% else %}is-danger{% endif %}">{{ include.resource.price }}</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+</script>

resources/python-guide.md

@@ -0,0 +1,14 @@
+---
+title: "Python Guide for Beginners"
+resource_type: "book"
+topic: "Programming"
+difficulty: "Beginner"
+price: "Free"
+author: "John Doe"
+image: "https://cdn-icons-png.flaticon.com/512/5109/5109515.png"
+description: "An essential guide to learning Python from scratch."
+source_url: "https://example.com"
+layout: resource
+---
+
+Some Data Here

resources/salesforce-tools.md

@@ -0,0 +1,12 @@
+---
+title: "Salesforce Automation Tool"
+resource_type: "tool"
+topic: "Salesforce"
+difficulty: "Intermediate"
+price: "Paid"
+author: "Jane Doe"
+image: "/assets/resources/salesforce-tool.png"
+description: "A powerful tool to automate Salesforce tasks."
+source_url: "https://example.com"
+layout: resource
+---