added some more content to the website

.gitignore

@@ -1,7 +1,3 @@
-/**/DROP/
-/**/TEMP/
-/**/packages/
-/**/bin/
-/**/obj/
 _site
-tools
+.jekyll-cache
+obj

Jenkinsfile

@@ -6,8 +6,11 @@ pipeline {
         branch 'main'
       }
       steps {
+        sh '''cd web
+              bundle
+              bundle exec jekyll build'''
         sh 'rm -rf /var/www/tinylifegame/*'
-        sh 'cp web/. /var/www/tinylifegame/ -r'
+        sh 'cp -r web/_site/. /var/www/tinylifegame/'
       }
     }
     stage('Docs') {
@@ -17,7 +20,7 @@ pipeline {
       steps {
         sh 'cd docs; docfx.exe'
         sh 'rm -rf /var/www/tinylifedocs/*'
-        sh 'cp docs/_site/. /var/www/tinylifedocs/ -r'   
+        sh 'cp -r docs/_site/. /var/www/tinylifedocs/'   
       }
     }
   }

web/Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }
+
+gem "jekyll"
+gem "webrick"

web/Gemfile.lock

@@ -0,0 +1,69 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.15.5-x64-mingw32)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.8.11)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.1)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.27.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0-x64-mingw32)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  x64-mingw32
+
+DEPENDENCIES
+  jekyll
+  webrick
+
+BUNDLED WITH
+   2.2.26

web/_config.yaml

@@ -0,0 +1,2 @@
+kramdown:
+  header_offset: 1

web/_data/devlogs.json

@@ -0,0 +1,25 @@
+[{
+    "name": "0.19.0: Ui, Sound and Improvements Abound",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/330680/0190-ui-sound-and-improvements-abound",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/3109171219652255208"
+}, {
+    "name": "0.18.0: Animations, Food and Sources",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/317472/0180-animations-food-and-sources",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/3111419849470831533"
+}, {
+    "name": "0.17.0: Life Goals, Reward Personalities and Daily Tasks",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/303915/0170-life-goals-reward-personalities-and-daily-tasks",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/4244072077610086379"
+}, {
+    "name": "0.16.0: Woodlands and Visitors",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/289260/0160-woodlands-and-visitors",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/2949282742498975401"
+}, {
+    "name": "0.15.0: Barbecue Trash Cleaning",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/277913/0150-barbecue-trash-cleaning",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/2968419780808932932"
+}, {
+    "name": "0.14.0: Lamps, Lot Movement, Speech Sounds!",
+    "itch": "https://ellpeck.itch.io/tiny-life/devlog/274082/0140-lamps-lot-movement-speech-sounds",
+    "steam": "https://store.steampowered.com/news/app/1651490/view/4430963222678444595"
+}]

web/_data/screenshots.json

@@ -0,0 +1,16 @@
+[{
+    "value": "CharacterCreator",
+    "text": "Create your own characters with unique personalities and skills and dress them however you like"
+}, {
+    "value": "Map",
+    "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
+}, {
+    "value": "Gameplay",
+    "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting"
+}, {
+    "value": "Relationships",
+    "text": "Have your characters interact, build relationships, grow families and live unique lives"
+}, {
+    "value": "Lighting",
+    "text": "Share your creations with the community by exporting lots and households from your game"
+}]

web/_includes/about.html

@@ -0,0 +1,15 @@
+<div class="section">
+    <span id="about"></span>
+    <h1>About Tiny Life</h1>
+    <p>Tiny Life is a fun simulation game that aims to capture the essence of games like The Sims, but in an isometric pixelart style.</p>
+    <p>In the game, you control a set of people that live together in a household. You take care of their daily needs, build their skills, forge new relationships... or just mess up their entire life in whatever way you can think of!</p>
+
+    {% for item in site.data.screenshots %}
+    <div class="screenshot">
+        <img src="media/screenshots/{{ item.value }}.png" width="100%" class="screen">
+        <div class="feature feature-{{ forloop.index0 | modulo: 2 }}">
+            <p>{{ item.text }}</p>
+        </div>
+    </div>
+    {% endfor %}
+</div>

web/_includes/devlogs.html

@@ -0,0 +1,16 @@
+<div class="section">
+    <span id="devlogs"></span>
+    <h1>Devlogs</h1>
+    <p>Along with every major update, we publish a devlog that features additional information as well as some screenshots. You can read them on itch or on Steam. You can also read <a href="https://docs.tinylifegame.com/Changelog">the full changelog</a>.</p>
+
+    <div class="devlogs">
+        {% for item in site.data.devlogs %}
+        <div class="devlog">
+            <h4>{{ item.name }}</h4>
+            <div class="devlog-buttons">
+                <a href="{{ item.itch }}">Read on itch</a> &ndash; <a href="{{ item.steam }}">Read on Steam</a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>

web/_includes/top.html

@@ -0,0 +1,47 @@
+<div class="top d-flex justify-content-center align-items-center vh-100">
+    <div class="top-content">
+        <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
+        <h4>A fun simulation game where you mess with people's lives</h4>
+
+        <div class="container">
+            <div class="row">
+                <div class="col site">
+                    <h3>Play the free alpha</h3>
+                    <a href="https://ellpeck.itch.io/tiny-life">
+                        <image src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
+                    </a>
+                </div>
+                <div class="col site">
+                    <h3>Wishlist and play</h3>
+                    <a href="https://store.steampowered.com/app/1651490/Tiny_Life/">
+                        <image src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
+                    </a>
+                </div>
+            </div>
+            <a class="link" href="https://twitter.com/TinyLifeGame">Follow on Twitter</a>
+            <a class="link" href="https://ellpeck.de/discord">Join the Discord</a>
+            <a class="link" href="https://docs.tinylifegame.com">See Modding Docs</a>
+            <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
+        </div>
+    </div>
+</div>
+<script>
+    let x = Math.random() * 100;
+    let y = Math.random() * 100;
+
+    let angle = Math.random() * 2 * Math.PI;
+    let addX = Math.cos(angle) * 0.02;
+    let addY = Math.sin(angle) * 0.02;
+
+    let background = $(".top");
+    background.css("background-position", `${x}% ${y}%`);
+    setInterval(function () {
+        x += addX;
+        y += addY;
+        if (x < 0 || x > 100)
+            addX *= -1;
+        if (y < 0 || y > 100)
+            addY *= -1;
+        background.css("background-position", `${x}% ${y}%`);
+    }, 30);
+</script>

web/_layouts/default.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>{{ page.title }}</title>
+    <meta name="author" content="Ellpeck">
+    <meta name="description" content="{{ page.summary }}">
+    <meta name="keywords" content="Ellpeck, Tiny Life, Steam, itch, itch.io, Sandbox, Life Simulator, Simulator, Sim, Isometric, Pixelart, Pixel Art, Retro">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="favicon.ico">
+
+    <meta property="og:title" content="{{ page.title }}">
+    <meta property="og:description" content="{{ page.summary }}">
+    <meta property="og:image" content="https://tinylifegame.com/media/icon.png">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@Ellpeck">
+    <meta name="twitter:creator" content="@Ellpeck">
+
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-87WTXFSCL7"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', 'G-87WTXFSCL7');
+    </script>
+</head>
+
+<body>
+    {{ content }}
+
+    <p class="footer"><a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a></p>
+</body>
+
+</html>

web/index.html

@@ -1,74 +1,9 @@
-<!DOCTYPE html>
+---
-<html lang="en">
+layout: default
+title: Tiny Life
+summary: A fun simulation game where you mess with people's lives
+---
 
-<head>
+{% include top.html %}
-    <meta charset="UTF-8">
+{% include about.html %}
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% include devlogs.html %}
-
-    <title>Tiny Life</title>
-    <meta name="author" content="Ellpeck">
-    <meta name="description" content="A fun simulation game where you mess with people's lives">
-    <meta name="keywords" content="Ellpeck, Tiny Life, Steam, itch, itch.io, Sandbox, Life Simulator, Simulator, Sim, Isometric, Pixelart, Pixel Art, Retro">
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
-    <link rel="stylesheet" href="style.css">
-    <link rel="icon" href="favicon.ico">
-
-    <meta property="og:title" content="Tiny Life">
-    <meta property="og:description" content="A fun simulation game where you mess with people's lives">
-    <meta property="og:image" content="https://tinylifegame.com/media/icon.png">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@Ellpeck">
-    <meta name="twitter:creator" content="@Ellpeck">
-
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-87WTXFSCL7"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-
-        function gtag() {
-            dataLayer.push(arguments);
-        }
-        gtag('js', new Date());
-        gtag('config', 'G-87WTXFSCL7');
-    </script>
-</head>
-
-<body>
-    <div class="top d-flex justify-content-center align-items-center vh-100">
-        <div class="main">
-            <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
-            <h4>A fun simulation game where you mess with people's lives</h4>
-
-            <div class="container">
-                <div class="row">
-                    <div class="col site">
-                        <h3>Play the free alpha</h3>
-                        <a href="https://ellpeck.itch.io/tiny-life">
-                            <image src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
-                        </a>
-                    </div>
-                    <div class="col site">
-                        <h3>Wishlist and play</h3>
-                        <a href="https://store.steampowered.com/app/1651490/Tiny_Life/">
-                            <image src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
-                        </a>
-                    </div>
-                </div>
-                <a class="link" href="https://twitter.com/TinyLifeGame">Follow on Twitter</a>
-                <a class="link" href="https://ellpeck.de/discord">Join the Discord</a>
-                <a class="link" href="https://docs.tinylifegame.com">See Modding Docs</a>
-                <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
-            </div>
-        </div>
-    </div>
-    <script src="scroll.js"></script>
-
-    <p class="footer"><a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a></p>
-</body>
-
-</html>

web/scroll.js

@@ -1,18 +0,0 @@
-let x = Math.random() * 100;
-let y = Math.random() * 100;
-
-let angle = Math.random() * 2 * Math.PI;
-let addX = Math.cos(angle) * 0.02;
-let addY = Math.sin(angle) * 0.02;
-
-let background = $(".top");
-background.css("background-position", `${x}% ${y}%`);
-setInterval(function () {
-    x += addX;
-    y += addY;
-    if (x < 0 || x > 100)
-        addX *= -1;
-    if (y < 0 || y > 100)
-        addY *= -1;
-    background.css("background-position", `${x}% ${y}%`);
-}, 30);

web/style.css

@@ -8,20 +8,22 @@
     color: lightsteelblue;
 }
 
-.footer {
+.top-content {
-    margin-top: 15px;
-    margin-bottom: 15px;
-    width: 100%;
-    text-align: center;
-}
-
-.main {
     text-align: center;
     color: white;
     padding-top: 20px;
     padding-bottom: 60px;
 }
 
+.section {
+    width: 95%;
+    max-width: 950px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .site {
     padding-bottom: 20px;
 }
@@ -38,3 +40,59 @@
     display: inline-block;
     width: 150px;
 }
+
+.screenshot {
+    position: relative;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.feature {
+    margin: 10px;
+    padding: 10px;
+    max-width: 60%;
+    color: white;
+    background: rgb(0, 0, 0, 0.7);
+    border-radius: 8px;
+    position: absolute;
+    top: 0;
+}
+
+.feature p {
+    margin-bottom: 0;
+}
+
+.feature-0 {
+    text-align: left;
+    left: 0;
+}
+
+.feature-1 {
+    text-align: right;
+    right: 0;
+}
+
+.footer {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    width: 100%;
+    text-align: center;
+}
+
+.devlog {
+    margin-bottom: 20px;
+    min-width: 250px;
+    width: 45%;
+    display: inline-block;
+}
+
+.changelog img {
+    width: 100%;
+}
+
+.changelog blockquote {
+    margin-left: 2em;
+    margin-right: 2em;
+    font-style: italic;
+    font-size: 18px;
+}