allow using embeds instead of images

web/_data/community-content.json

@@ -1,6 +1,6 @@
 [
     {
-        "name": "Itty for Tiny Life",
+        "name": "TEMP!! Itty for Tiny Life",
         "slug": "itty",
         "desc": "Itty adds a social media site (called Itty) that allows your Tinies to interact digitally!",
         "author": "ssblur",
@@ -9,5 +9,13 @@
             "Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577",
             "YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA"
         }
+    },
+    {
+        "name": "TEMP!! Designing the Modern Home",
+        "slug": "modern-home",
+        "desc": "Truly a modern home.",
+        "author": "ssblur",
+        "section": "media",
+        "embed": "https://www.youtube.com/embed/Uomvvpd138M"
     }
 ]

web/_data/community-sections.json

@@ -2,31 +2,37 @@
     {
         "name": "🔨 Mods",
         "slug": "mods",
-        "desc": "Mods allow Tiny Life to be built upon through the addition of new actions, build mode items, personalities, and more. For more info on how to install mods, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>. If you want to make your own mod, the <a href=\"https://docs.tinylifegame.com/articles/mod_basics.html\">Modding Basics article</a> will help you get started."
+        "desc": "Mods allow Tiny Life to be built upon through the addition of new actions, build mode items, personalities, and more. For more info on how to install mods, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>. If you want to make your own mod, the <a href=\"https://docs.tinylifegame.com/articles/mod_basics.html\">Modding Basics article</a> will help you get started.",
+        "images": true
     },
     {
         "name": "🫂 Households",
         "slug": "households",
-        "desc": "When playing Tiny Life, you can export and share households from within the characater creator. After getting households from the community, you can add them to your saves from the household selection. For more info on how to get custom households, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>."
+        "desc": "When playing Tiny Life, you can export and share households from within the characater creator. After getting households from the community, you can add them to your saves from the household selection. For more info on how to get custom households, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>.",
+        "images": true
     },
     {
         "name": "🏪 Lots",
         "slug": "lots",
-        "desc": "When playing Tiny Life, you can export and share lots you've built from build mode. After getting lots from the community, you can add them to your saves in build mode as well. For more info on how to get custom lots, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>."
+        "desc": "When playing Tiny Life, you can export and share lots you've built from build mode. After getting lots from the community, you can add them to your saves in build mode as well. For more info on how to get custom lots, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>.",
+        "images": true
     },
     {
         "name": "🌍 Worlds",
         "slug": "worlds",
-        "desc": "When playing Tiny Life, you can add custom worlds to your game and add as many as you want to each of your saves. To get started with creating your own custom worlds, check out the <a href=\"https://docs.tinylifegame.com/articles/custom_maps.html\">Creating Custom Maps article</a>. For more info on how to get custom maps, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>."
+        "desc": "When playing Tiny Life, you can add custom worlds to your game and add as many as you want to each of your saves. To get started with creating your own custom worlds, check out the <a href=\"https://docs.tinylifegame.com/articles/custom_maps.html\">Creating Custom Maps article</a>. For more info on how to get custom maps, check out the <a href=\"https://docs.tinylifegame.com/articles/getting.html\">Getting Custom Content article</a>.",
+        "images": true
     },
     {
         "name": "📽️ Media",
         "slug": "media",
-        "desc": "Have you created a Let's Play, gameplay video or review of Tiny Life? This is the perfect place to share it! If you have VODs of livestreams where you played Tiny Life, they can also be shared here."
+        "desc": "Have you created a Let's Play, gameplay video or review of Tiny Life? This is the perfect place to share it! If you have VODs of livestreams where you played Tiny Life, they can also be shared here.",
+        "embeds": true
     },
     {
         "name": "🎨 Art",
         "slug": "fanart",
-        "desc": "Recently, people have started creating fan art for Tiny Life, usually involving some of the game's pre-made Tinies. These artists are incredibly talented, so please make sure to check out their other work as well!"
+        "desc": "Recently, people have started creating fan art for Tiny Life, usually involving some of the game's pre-made Tinies. These artists are incredibly talented, so please make sure to check out their other work as well!",
+        "images": true
     }
 ]

web/_includes/about.html

@@ -20,7 +20,7 @@
     {% endfor %}
 
     <h2>Watch the Trailer</h2>
-    <div class="trailer">
+    <div class="video-embed">
         <iframe src="https://www.youtube.com/embed/dl4JCzOpnGE" title="Tiny Life Trailer" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 </div>

web/community.html

@@ -16,30 +16,33 @@ summary: A fun simulation game where you mess with people's lives
     {% for section in site.data.community-sections %}
         <div class="community-section">
             <h2 id="{{ section.slug }}">{{ section.name }}</h2>
-            <p>
+            <p>{{ section.desc }}</p>
-                {{ section.desc }}
-                <br><span class="text-muted">The slug for this section is <code>{{ section.slug }}</code>.</span>
-            </p>
 
             {% assign any = false %}
             {% for content in site.data.community-content %}
                 {% if content.section == section.slug %}
-                    <div class="community-content">
+                    <div class="community-content-box">
-                        <div class="community-content-box">
+                        {% if section.images %}
-                            <div class="community-content-box-content">
+                            <img src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
-                                <h4 class="community-title">{{ content.name }}</h4>
+                        {% endif %}
-                                <div class="community-author text-muted">Created by {{ content.author }}</div>
+                        {% if section.embeds %}
-                                <div class="community-desc">{{ content.desc }}</div>
+                            <div class="video-embed">
-                                <div>
+                                <iframe src="{{ content.embed }}" title="{{ content.name }} Embed" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                                    {% for link in content.links %}
+                            </div>
-                                        <a href="{{ link[1] }}">{{ link[0] }}</a>
+                        {% endif %}
-                                        {% unless forloop.last %}
+
-                                            &ndash;
+                        <div class="community-content-box-content">
-                                        {% endunless %}
+                            <h4 class="community-title">{{ content.name }}</h4>
-                                    {% endfor %}
+                            <div class="community-author text-muted">Created by {{ content.author }}</div>
-                                </div>
+                            <div class="community-desc">{{ content.desc }}</div>
+                            <div>
+                                {% for link in content.links %}
+                                    <a href="{{ link[1] }}">{{ link[0] }}</a>
+                                    {% unless forloop.last %}
+                                        &ndash;
+                                    {% endunless %}
+                                {% endfor %}
                             </div>
-                            <img id="{{ content.slug }}" src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
                         </div>
                     </div>
                     {% assign any = true %}

web/style.css

@@ -109,7 +109,7 @@ pre.highlight {
     white-space: initial;
 }
 
-.community-content {
+.community-content-box {
     margin-top: 15px;
     margin-bottom: 15px;
 }
@@ -155,14 +155,14 @@ pre.highlight {
     margin-bottom: 0;
 }
 
-.trailer {
+.video-embed {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
 }
 
-.trailer iframe {
+.video-embed iframe {
     position: absolute;
     top: 0;
     left: 0;