Add Resources Section to community

website/.config/collections/resourceTags.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const resources = require('../../_data/resources.json');
+
+/** @param {import("@11ty/eleventy/src/TemplateCollection")} api */
+function resourceTags(api) {
+    let tags = [];
+
+    resources.forEach((resource) => {
+        if(resource.tags) {
+            tags.push(...resource.tags);
+        }
+    });
+
+    tags = tags.filter((value, index) => tags.indexOf(value) === index).sort();
+    return ['all'].concat(tags);
+}
+
+module.exports = resourceTags;

website/.config/eleventy.config.collections.js

@@ -3,11 +3,13 @@
 const blogPosts = require('./collections/blogPosts');
 const blogTags = require('./collections/blogTags');
 const gameTags = require('./collections/gameTags');
+const resourceTags = require('./collections/resourceTags');
 
 
 /** @param {import("@11ty/eleventy").UserConfig} config */
 module.exports = function (config) {
     config.addCollection('blogPosts', blogPosts);
     config.addCollection('blogTags', blogTags);
     config.addCollection('gameTags', gameTags);
+    config.addCollection('resourceTags', resourceTags);
 }

website/_data/resources.json

@@ -0,0 +1,156 @@
+[
+    {
+        "name": "b1",
+        "title": "Beginning C# Programming with MonoGame",
+        "author": "A.T. Chamillard",
+        "cover": "https://m.media-amazon.com/images/I/61LDsDJX8hL._SL1250_.jpg",
+        "url": "https://www.amazon.com/Beginning-Programming-MonoGame-T-Chamillard-ebook",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b2",
+        "title": "Introduction to Programming with C#, XNA and MonoGame",
+        "author": "Robert Cook",
+        "cover": "https://m.media-amazon.com/images/I/819kOLVdDuL._SL1500_.jpg",
+        "url": "https://www.amazon.com/Introduction-Programming-MonoGame-Cooks-Books-ebook",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b3",
+        "title": "Introduction to C# Cross-Development Programming by Creating 2D Games with Visual Studio 2022 and MonoGame (Japanese Edition)",
+        "author": "Yu Sasaki",
+        "cover": "https://m.media-amazon.com/images/I/616Dx92Vq6L._SL1413_.jpg",
+        "url": "https://www.amazon.com/Visual-MonoGame%E3%81%AE-2D%E3%82%B2%E3%83%BC%E3%83%A0%E4%BD%9C%E3%82%8A%E3%81%A7%E5%AD%A6%E3%81%B6-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-Japanese",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b4",
+        "title": "Game Development with MonoGame",
+        "author": "Micheal Fleischauer",
+        "cover": "https://gamefromscratch.com/wp-content/uploads/2020/07/Book_Cover.png",
+        "url": "https://gamefromscratch.com/free-monogame-e-book-cross-platform-game-development-with-monogame/",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b5",
+        "title": "MonoGame Succinctly",
+        "author": "Jim Perry",
+        "cover": "https://gamefromscratch.com/wp-content/uploads/2020/07/Book_Cover.png",
+        "url": "https://freecomputerbooks.com/Monogame-Succinctly.html",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b6",
+        "title": "MonoGame Role-Playing Game Development Succinctly",
+        "author": "Jim Perry & Charles Humphrey",
+        "cover": "https://gamefromscratch.com/wp-content/uploads/2020/07/Book_Cover.png",
+        "url": "https://freecomputerbooks.com/Monogame-Role-Playing-Game-Development-Succinctly.html",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "b7",
+        "title": "Game Development with Monogame: Build a 2D Game Using Your Own Reusable and Performant Game Engine",
+        "author": "Louis Salin & Rami Morrar",
+        "cover": "https://images.booksense.com/images/books/706/277/FC9781484277706.JPG",
+        "url": "https://freecomputerbooks.com/Monogame-Role-Playing-Game-Development-Succinctly.html",
+        "pixelart": false,
+        "tags": [
+            "books"
+        ]
+    },
+    {
+        "name": "e1",
+        "title": "FlatRedBall",
+        "author": "Victor Chelaru",
+        "cover": "https://flatredball.com/wp-content/uploads/2016/02/cropped-logo-1024-150x150.png",
+        "url": "https://flatredball.com/",
+        "pixelart": false,
+        "tags": [
+            "engines"
+        ]
+    },
+    {
+        "name": "l1",
+        "title": "MonoGame.Extended",
+        "author": "Craftworkgames and contributors",
+        "cover": "https://www.monogameextended.net/img/logo.png",
+        "url": "https://www.monogameextended.net/",
+        "pixelart": false,
+        "tags": [
+            "libraries"
+        ]
+    },
+    {
+        "name": "l2",
+        "title": "Gum",
+        "author": "Victor Chelaru",
+        "cover": "https://docs.flatredball.com/~gitbook/image?url=https%3A%2F%2F3900811371-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Forganizations%252F-M_fyYVTQKWSV65sXTSp%252Fsites%252Fsite_3hxze%252Flogo%252Fo54By5G58RWuAHsltTBS%252Fgum-logo-reverse-512.png%3Falt%3Dmedia%26token%3D54198098-3f7d-40ff-a442-1a28a2fbbca9&width=260&dpr=2&quality=100&sign=55148268&sv=2",
+        "url": "https://docs.flatredball.com/gum",
+        "pixelart": false,
+        "tags": [
+            "libraries"
+        ]
+    },
+    {
+        "name": "l3",
+        "title": "Myra",
+        "author": "Roman Shapiro",
+        "cover": "",
+        "url": "https://github.com/rds1983/Myra",
+        "pixelart": false,
+        "tags": [
+            "libraries"
+        ]
+    },
+    {
+        "name": "l4",
+        "title": "ImGui.NET",
+        "author": "ImGuiNET",
+        "cover": "",
+        "url": "https://github.com/ImGuiNET/ImGui.NET",
+        "pixelart": false,
+        "tags": [
+            "libraries"
+        ]
+    },
+    {
+        "name": "l5",
+        "title": "MonoGame.Aseprite",
+        "author": "Christopher Whitley (AristurtleDev)",
+        "cover": "https://monogameaseprite.net/images/logo.svg",
+        "url": "https://monogameaseprite.net/",
+        "pixelart": false,
+        "tags": [
+            "libraries"
+        ]
+    },
+    {
+        "name": "a1",
+        "title": "Kenny NL Assets",
+        "author": "Kenny NL",
+        "cover": "https://kenney.nl/data/img/[email protected]",
+        "url": "https://kenney.nl/assets",
+        "pixelart": false,
+        "tags": [
+            "assets"
+        ]
+    }
+]

website/_data/site.json

@@ -35,6 +35,10 @@
             "label": "Bounties",
             "url": "/bounties/"
         },
+        {
+            "label": "Resources",
+            "url": "/resources/"
+        },
         {
             "label": "Store",
             "url": "https://store.monogame.net"
@@ -45,7 +49,8 @@
         },
         {
             "label": "Donate",
-            "url": "/donate/"
+            "url": "/donate/",
+            "type": "button"
         }
     ],
     "social": [

website/_includes/partials/_topnav.njk

@@ -17,12 +17,21 @@
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 {% for navlink in site.navigation %}
                     <li class="nav-item">
+                        {% if navlink.type != "button" %}
                         <a class="hide-external-icon nav-link {{ 'active' if page.url === navlink.url }}" href="{{ navlink.url }}">
                             {{ navlink.label }}
                         </a>
+                        {% endif %}
                     </li>
                 {% endfor %}
             </ul>
+            {% for navlink in site.navigation %}
+                {% if navlink.type == "button" %}
+                    <a class="btn mg-patreon-button px-4" type="button" href="{{ navlink.url }}">
+                        <i class="bi bi-heart"></i> {{ navlink.label }}
+                    </a>
+                {% endif %}
+            {% endfor %}
             {% include 'partials/_themeToggle.njk' %}
         </div>
     </div>

website/content/community.njk

@@ -92,7 +92,7 @@ title: Community
     </section>
 
     <section class="container-xxl mb-5">
-        <h2 id="communities" class="fw-bold">
+        <h2 id="socialnetworks" class="fw-bold">
             Official Social Networks
         </h2>
      <div class="mg-item-grid">

website/content/donate.njk

@@ -17,7 +17,7 @@ title: Donate
                     <div class="row justify-content-center">
                         <div class="col-md-auto mb-2 mx-4">
                             <a class="btn mg-patreon-button px-4" type="button" href="https://github.com/sponsors/MonoGame" target="_blank">
-                                    <i class="bi bi-heart"></i> GitHub
+                                    {% include 'svgs/logos/github.svg'%} GitHub
                             </a>
                         </div>
                         <div class="col-md-auto mb-2 mx-4">

website/content/public/css/main.css

@@ -780,3 +780,79 @@ blockquote {
 .alert-danger .admonition-title::before {
   content: '\f7f6'
 }
+
+/*******************************************************************************
+*** Section: Resources
+*** Provides styling for resources page
+*******************************************************************************/
+.mg-resource-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    min-height: 400px;
+    color: #fff;
+    padding: 1rem 1.5rem 1.5rem;
+    background-color: #212529;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: 1px solid var(--bs-body-color);
+    border-radius: 0.75rem;
+    overflow: hidden;
+ }
+
+ .transparent-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #212529;
+    opacity: 0.5;
+ }
+
+ .mg-resource-tags {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0.5rem 0;
+    z-index: 1;
+ }
+
+ .mg-resource-tags > div {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-transform: uppercase;
+    background-color: var(--mg-orange-primary);
+    border-color: var(--mg-orange-primary);
+    border-radius: 0.375rem;
+ }
+
+ .mg-resource-footer {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+ }
+
+ .mg-resource-title {
+    font-size: 1.5rem;
+    line-height: 1.2em;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    padding-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
+ }
+
+.mg-resource-author {
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    line-height: 1em;
+    letter-spacing: 0.08em;
+}

website/content/public/css/main.lg.css

@@ -2,6 +2,10 @@
     .mg-item-grid {
         grid-template-columns: 1fr 1fr 1fr;
     }
+
+    .mg-grid-2 {
+        grid-template-columns: 1fr 1fr;
+    }
     /***************************************************************************
     *** Content Header section of documentation article and api pages
     ***************************************************************************/

website/content/resources.njk

@@ -0,0 +1,48 @@
+---
+title: Resources
+pagination:
+    data: collections.resourceTags
+    size: 1
+    alias: category
+permalink: resources/{{ (category | slugify) if category !== "all" }}/
+---
+{% extends "layouts/base.layout.njk" %}
+{% from 'macros/create_category_filter.njk' import create_category_filter %}
+
+{% block content %}
+    <section class="container-xxl my-5">
+        <h1 id="monogame-resource" class="fw-bold"><a href="#monogame-resource">MonoGame Resources</a></h1>
+        <p>
+            Here's a list of MonoGame resources that can help you on your journey.
+            If you have a resource you'd like to share, please <a href="mailto:[email protected]?subject=New%20Resource&body=Hi,%20Please%20add%20this%20resource%20to%20your%20list:%0A%0ATitle:%20%0AAuthor:%20%0AResource%20URL:%20%0AImage%20URL:%20%0ATags:%20">
+                Email Us
+            </a>
+        </p>
+    </section>
+
+    {{ create_category_filter(collections.resourceTags, "/resources/", page.url) }}
+
+    <section class="container-xxl mb-5">
+        <div id="resource-gallery" class="mg-item-grid mg-grid-2">
+            {% for resource in resources %}
+                {% if category in resource.tags or category === "all" %}
+                    <a class="mg-no-link hide-external-icon" href="{{ resource.url }}" title="{{ resource.title }}">
+                        <div class="mg-resource-container mg-box-shadow"
+                             style="background-image: url('{{ resource.cover }}');">
+                            <div class="transparent-overlay"></div>
+                            <div class="mg-resource-tags">
+                                {% for tag in resource.tags %}
+                                    <div>{{ tag }}</div>
+                                {% endfor %}
+                            </div>
+                            <div class="mg-resource-footer">
+                                <div class="mg-resource-title">{{ resource.title }}</div>
+                                <div class="mg-resource-author">by {{ resource.author }}</div>
+                            </div>
+                        </div>
+                    </a>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </section>
+{% endblock %}