(dirty hack to) display the in-game news and changelog on the website

.gitignore

@@ -2,3 +2,4 @@ _site
 .jekyll-cache
 obj
 .idea
+__*

docs/.htaccess

@@ -3,3 +3,7 @@ ExpiresDefault A31536000
 ExpiresByType text/html A600
 ExpiresByType text/javascript A2592000
 ExpiresByType application/javascript A2592000
+
+# legacy redirects
+RewriteRule ^Changelog(.html)?$ "https://tinylifegame.com/changelog" [R=301,L]
+RewriteRule ^InGameNews(.html)?$ "https://tinylifegame.com/news" [R=301,L]

docs/docfx.json

@@ -9,13 +9,6 @@
                     "toc.yml",
                     "api/**.yml"
                 ]
-            },
-            {
-                "files": [
-                    "Changelog.md",
-                    "InGameNews.md"
-                ],
-                "src": ".."
             }
         ],
         "resource": [
@@ -24,12 +17,6 @@
                     "media/**",
                     ".htaccess"
                 ]
-            },
-            {
-                "files": [
-                    "media/**"
-                ],
-                "src": ".."
             }
         ],
         "globalMetadata": {

web/Gemfile.lock

@@ -9,7 +9,6 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    eventmachine (1.2.7-x64-mingw32)
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     google-protobuf (3.23.3)
@@ -32,6 +31,8 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-copyr (1.0.2)
+      jekyll (>= 3.3, < 5.0)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-postfiles (3.1.0)
@@ -40,6 +41,9 @@ GEM
       sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
+    jekyll_include_plugin (1.1.1)
+      jekyll (>= 3.5, < 5.0)
+      liquid (~> 4.0)
     kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
@@ -60,8 +64,6 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.63.4-x64-mingw-ucrt)
       google-protobuf (~> 3.23)
-    sass-embedded (1.63.4-x64-mingw32)
-      google-protobuf (~> 3.23)
     sass-embedded (1.63.4-x64-unknown)
       google-protobuf (~> 3.23)
     sass-embedded (1.63.4-x86_64-linux-gnu)
@@ -79,8 +81,10 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll
+  jekyll-copyr
   jekyll-feed
   jekyll-postfiles
+  jekyll_include_plugin
   webrick
 
 BUNDLED WITH

web/_includes/basicnav.html

@@ -0,0 +1 @@
+<a class="nav-item nav-link" href="../../">🏠 Home</a>

web/_layouts/blog.html

@@ -11,16 +11,6 @@ nav: blognav.html
     }));
 </script>
 
-<style>
-    h1 .anchor-heading, h2 .anchor-heading, h3 .anchor-heading, h4 .anchor-heading, h5 .anchor-heading, h6 .anchor-heading {
-        visibility: hidden;
-    }
-
-    h1:hover .anchor-heading, h2:hover .anchor-heading, h3:hover .anchor-heading, h4:hover .anchor-heading, h5:hover .anchor-heading, h6:hover .anchor-heading {
-        visibility: visible;
-    }
-</style>
-
 <div class="section blog-section">
     <h1>{{ page.title }}</h1>
     <p>📖 You can also read this post <a href="{{ page.itch }}">on itch</a> or <a href="{{ page.steam }}">on Steam</a>, or you can subscribe to <a href="../../#subscribe">the mailing list</a> or <a href="/feed.xml">the Atom feed</a>.</p>

web/_plugins/copy_changelog_news.rb

@@ -0,0 +1,9 @@
+# copy changelog and news to includes
+FileUtils.cp '../InGameNews.md', '_includes/__news.md'
+FileUtils.cp '../Changelog.md', '_includes/__changelog.md'
+
+# after the site is generated, copy changelog and news media into it
+Jekyll::Hooks.register :site, :post_write do
+    FileUtils.cp_r "../media/news", "_site/media"
+    FileUtils.cp_r "../media/changelog", "_site/media"
+end

web/changelog.html

@@ -0,0 +1,15 @@
+---
+layout: default
+nav: basicnav.html
+title: Tiny Life Changelog
+summary: The full changelog for Tiny Life
+---
+
+<div class="section isolated-site">
+    <h1>Tiny Life Changelog</h1>
+    <p>This is the full changelog for the game, as seen in the bottom-right corner of its main menu.</p>
+
+    {% capture changelog %}{% include __changelog.md %}{% endcapture %}
+    {% assign content = changelog | markdownify | replace: 'src="media/', 'src="../media/' %}
+    {% include anchor_headings.html html=content anchorBody="#" anchorClass="anchor-heading" %}
+</div>

web/news.html

@@ -0,0 +1,20 @@
+---
+layout: default
+nav: basicnav.html
+title: Tiny Life In-Game News
+summary: Tiny Life's in-game news, but displayed on the web
+---
+
+<div class="section isolated-site">
+    <h1>Tiny Life In-Game News</h1>
+    <p>This is a web version of the in-game news that sometimes appear in the bottom-left corner of the main menu.</p>
+
+    {% capture news %}{% include __news.md %}{% endcapture %}
+    {% assign content = news | markdownify | replace: 'src="media/', 'src="../media/' | strip %}
+    {% if content != "" %}
+        {% include anchor_headings.html html=content anchorBody="#" anchorClass="anchor-heading" %}
+    {% else %}
+        <p>There are no in-game news at the moment.</p>
+    {% endif %}
+
+</div>

web/style.css

@@ -1,10 +1,12 @@
 html {
     scroll-padding-top: 70px;
+    position: relative;
+    min-height: 100%;
 }
 
 body {
-    position: relative;
     font-family: "Lato", sans-serif;
+    margin-bottom: 100px;
 }
 
 h1, h2, h3, h4, h5, h6, .nav-item {
@@ -63,7 +65,8 @@ a:visited.wide-link {
     margin-top: 70px;
 }
 
-.blog-section img {
+.blog-section img,
+.isolated-site img {
     width: 100%;
     height: auto;
 }
@@ -145,6 +148,12 @@ a:visited.wide-link {
 .footer {
     text-align: center;
     padding: 15px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .devlog {
@@ -222,10 +231,18 @@ a:visited.wide-link {
     font-style: italic;
 }
 
-.community-top {
+.community-top, .isolated-site {
     margin-top: 70px;
 }
 
+h1 .anchor-heading, h2 .anchor-heading, h3 .anchor-heading, h4 .anchor-heading, h5 .anchor-heading, h6 .anchor-heading {
+    visibility: hidden;
+}
+
+h1:hover .anchor-heading, h2:hover .anchor-heading, h3:hover .anchor-heading, h4:hover .anchor-heading, h5:hover .anchor-heading, h6:hover .anchor-heading {
+    visibility: visible;
+}
+
 body.dark-mode {
     color: #d8d8d8;
     background-color: #1b1b1b;