fixed community nav

.woodpecker/docs.yml

@@ -1,8 +1,26 @@
+when:
+  path:
+    include:
+      - "docs/**"
+      - "Changelog.md"
+      - "InGameNews.md"
 steps:
   build-docs:
     image: mcr.microsoft.com/dotnet/sdk:7.0.305
     commands:
       - cd docs && dotnet tool restore && dotnet docfx
+  preview-docs:
+    image: woodpeckerci/plugin-surge-preview
+    when:
+      event: pull_request
+    settings:
+      path: docs/_site
+      surge_token:
+        from_secret: surge_token
+      forge_type: github
+      forge_url: https://github.com
+      forge_repo_token:
+        from_secret: github_token
   deploy-docs:
     image: debian:latest
     when:

.woodpecker/web.yml

@@ -1,8 +1,22 @@
+when:
+  path: "web/**"
 steps:
   build-web:
     image: ruby:latest
     commands:
       - cd web && bundle && bundle exec jekyll build
+  preview-web:
+    image: woodpeckerci/plugin-surge-preview
+    when:
+      event: pull_request
+    settings:
+      path: web/_site
+      surge_token:
+        from_secret: surge_token
+      forge_type: github
+      forge_url: https://github.com
+      forge_repo_token:
+        from_secret: github_token
   deploy-web:
     image: debian:latest
     when:

web/_data/community_content.json

@@ -0,0 +1,45 @@
+[
+    {
+        "name": "Grape Sorbet",
+        "desc": "Residential, 15x15",
+        "author": "Owlynn",
+        "section": "lots",
+        "links": {
+            "Workshop": "https://steamcommunity.com/sharedfiles/filedetails/?id=2978242814"
+        }
+    },
+    {
+        "name": "Vista Blue",
+        "desc": "Residential, 10x15. Works as a starter home!",
+        "author": "Owlynn",
+        "section": "lots",
+        "links": {
+            "Workshop": "https://steamcommunity.com/sharedfiles/filedetails/?id=2978242996"
+        }
+    },
+    {
+        "name": "Field Iris",
+        "desc": "Residential, 25x25",
+        "author": "Owlynn",
+        "section": "lots",
+        "links": {
+            "Workshop": "https://steamcommunity.com/sharedfiles/filedetails/?id=2978243159"
+        }
+    },
+    {
+        "name": "Swift Brew Coffee",
+        "desc": "Café, 15x15",
+        "author": "Owlynn",
+        "section": "lots",
+        "links": {
+            "Workshop": "https://steamcommunity.com/sharedfiles/filedetails/?id=2978243292"
+        }
+    },
+    {
+        "name": "Tiny Design Study",
+        "desc": "Legit Liny Tife brand, Not so slightly brewed, Coffee break. Design studies.",
+        "author": "Owlynn",
+        "section": "fanart",
+        "carousel": ["study-brand", "study-brewed", "study-cafe"]
+    }
+]

web/_data/community_sections.json

@@ -0,0 +1,38 @@
+[
+    {
+        "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.",
+        "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>.",
+        "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>.",
+        "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>.",
+        "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.",
+        "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!",
+        "images": true
+    }
+]

web/_includes/about.html

@@ -9,7 +9,7 @@
             <div class="feature-title">
                 <h2>{{ item.title }}</h2>
             </div>
-            <img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%" class="screen">
+            <img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%">
         </div>
         <ul>
             {% for line in item.text %}
@@ -20,7 +20,7 @@
     {% endfor %}
 
     <h2>Watch the Trailer</h2>
-    <div class="trailer">
-        <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 class="video-embed">
+        <iframe src="https://www.youtube.com/embed/dl4JCzOpnGE" title="Tiny Life Trailer" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 </div>

web/_includes/blognav.html

@@ -1,4 +1,4 @@
-<a class="nav-item nav-link" href="../../#devlogs">🏡 Back to Main Page</a>
+<a class="nav-item nav-link" href="../../#devlogs">🏠 Home</a>
 {% if page.previous %}
     <a class="nav-item nav-link" href="{{ page.previous.url }}">⏮️ Previous Post</a>
 {% endif %}

web/_includes/communitynav.html

@@ -0,0 +1,4 @@
+<a class="nav-item nav-link" href="../../">🏠 Home</a>
+{% for section in site.data.community_sections %}
+    <a class="nav-item nav-link" href="#{{ section.slug }}">{{ section.name }}</a>
+{% endfor %}

web/_includes/indexnav.html

@@ -1,5 +1,6 @@
 <a class="nav-item nav-link" href="#top">🎮 Play</a>
 <a class="nav-item nav-link" href="#about">🏡 About</a>
 <a class="nav-item nav-link" href="#social">🔗 Social</a>
-<a class="nav-item nav-link" href="#devlogs">📢 News and Devlogs</a>
+<a class="nav-item nav-link" href="#devlogs">📢 News</a>
 <a class="nav-item nav-link" href="#roadmap">🛣️ Roadmap</a>
+<a class="nav-item nav-link" href="community">💬 Showcase</a>

web/community.html

@@ -0,0 +1,88 @@
+---
+layout: default
+nav: communitynav.html
+title: Tiny Life Community Showcase
+summary: A fun simulation game where you mess with people's lives
+---
+
+<div class="section">
+    <div class="community-top">
+        <h1>💬 Community Showcase</h1>
+        <p>Ever since Tiny Life released into Early Access, the game's community has been growing steadily, and you all have been absolutely amazing. You've released videos, livestreamed gameplay, created mods, households, lots and other custom content, and you've even drawn fan art of pre-made Tinies! We love community contributions, and so we want to dedicate this section to our community and showcase some of the awesome stuff you've created.</p>
+        <p>All content on this page abides by the <a href="https://docs.tinylifegame.com/articles/content_policy.html">Tiny Life Content and Community Policy</a>, and you can consider content on this page to be officially endorsed. Nevertheless, please always take care when downloading and installing custom content and mods for Tiny Life.</p>
+        <p>If you're interested in having your content added to this page, please let us know on <a href="https://link.tinylifegame.com/discordweb">the Discord server</a> or <a href="https://github.com/Ellpeck/TinyLifeWeb/blob/main/web/_data/community_content.json">submit a pull request</a>.</p>
+    </div>
+
+    {% assign sorted_content = site.data.community_content | sort_natural: "name" %}
+    {% for section in site.data.community_sections %}
+        <div class="community-section">
+            <h2 id="{{ section.slug }}">{{ section.name }}</h2>
+            <p>{{ section.desc }}</p>
+
+            {% assign any = false %}
+            {% for content in sorted_content %}
+                {% if content.section == section.slug %}
+                    {% assign slug = content.name | slugify %}
+                    <div class="community-content-box">
+                        <a id="{{ slug }}"></a>
+                        {% if section.images %}
+                            {% if content.carousel %}
+                                <div id="{{ slug }}-carousel" class="carousel slide" data-ride="carousel">
+                                    <ol class="carousel-indicators">
+                                        {% for item in content.carousel %}
+                                            <li data-target="#{{ slug }}-carousel" data-slide-to="{{ forloop.index0 }}" {% if forloop.first %}class="active"{% endif %}></li>
+                                        {% endfor %}
+                                    </ol>
+                                    <div class="carousel-inner">
+                                        {% for item in content.carousel %}
+                                            <div class="carousel-item {% if forloop.first %}active{% endif %}">
+                                                <img class="d-block w-100" src="/media/community/{{ item }}.png" alt="A carousel slide showing off {{ content.name }}">
+                                            </div>
+                                        {% endfor %}
+                                    </div>
+                                    <a class="carousel-control-prev" href="#{{ slug }}-carousel" role="button" data-slide="prev">
+                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                        <span class="sr-only">Previous</span>
+                                    </a>
+                                    <a class="carousel-control-next" href="#{{ slug }}-carousel" role="button" data-slide="next">
+                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                        <span class="sr-only">Next</span>
+                                    </a>
+                                </div>
+                            {% else %}
+                                <img src="/media/community/{{ slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
+                            {% endif %}
+                        {% endif %}
+                        {% if section.embeds %}
+                            <div class="video-embed">
+                                <iframe src="{{ content.embed }}" title="{{ content.name }} Embed" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                            </div>
+                        {% endif %}
+
+                        <div class="community-content-box-content">
+                            <h4 class="community-title">{{ content.name }}</h4>
+                            <div class="text-muted">Created by {{ content.author }}</div>
+                            {% if content.desc %}
+                                <div class="community-desc">{{ content.desc }}</div>
+                            {% endif %}
+                            {% if content.links %}
+                                <div>
+                                    {% for link in content.links %}
+                                        <a href="{{ link[1] }}">{{ link[0] }}</a>
+                                        {% unless forloop.last %}
+                                            &ndash;
+                                        {% endunless %}
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% assign any = true %}
+                {% endif %}
+            {% endfor %}
+            {% unless any %}
+                <em>There's nothing in this section yet.</em>
+            {% endunless %}
+        </div>
+    {% endfor %}
+</div>

web/style.css

@@ -48,7 +48,7 @@ pre.highlight {
 
 .blog-section {
     max-width: 700px;
-    margin-top: 80px;
+    margin-top: 70px;
 }
 
 .blog-section img {
@@ -79,7 +79,8 @@ pre.highlight {
     margin-bottom: 40px;
 }
 
-.feature-banner {
+.feature-banner,
+.community-content-box {
     position: relative;
 }
 
@@ -87,8 +88,9 @@ pre.highlight {
     margin-top: 1rem;
 }
 
-.feature-title {
-    margin: 10px;
+.feature-title,
+.community-content-box-content {
+    margin-top: 10px;
     padding: 10px;
     color: white;
     background: rgb(0, 0, 0, 0.7);
@@ -100,6 +102,33 @@ pre.highlight {
     white-space: nowrap;
 }
 
+.community-content-box-content {
+    margin: 0;
+    top: auto;
+    bottom: 50px;
+    white-space: initial;
+}
+
+.community-content-box {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.community-section {
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.community-title {
+    white-space: nowrap;
+}
+
+.community-desc {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 .feature-title h2 {
     margin-bottom: 0;
 }
@@ -121,23 +150,25 @@ pre.highlight {
     margin-bottom: 10px;
 }
 
-.devlog-title {
+.devlog-title,
+.community-title {
     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;
     width: 100%;
     height: 100%;
+    border: none;
 }
 
 .roadmap {
@@ -182,6 +213,10 @@ pre.highlight {
     font-style: italic;
 }
 
+.community-top {
+    margin-top: 70px;
+}
+
 body.dark-mode {
     color: #d8d8d8;
     background-color: #1b1b1b;