* Article Published

* Adds Twitter Share Button
* Style Changes

5 files changed, 440 insertions, 38 deletions

diff --git a/src/_data/gtools.json b/src/_data/gtools.json
new file mode 100644
index 0000000..58ac772
--- /dev/null
+++ b/src/_data/gtools.json
@@ -0,0 +1,186 @@
+{
+  "gameTools": [
+    {
+      "toolName": "Babylon.js",
+      "type": "Game Engine",
+      "graphics": "3D",
+      "link": "https://www.babylonjs.com/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Blender",
+      "type": "3D Graphics Editor",
+      "graphics": "3D",
+      "link": "https://www.blender.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Ct.JS",
+      "type": "Game Engine",
+      "graphics": "2D",
+      "link": "https://ctjs.rocks/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Defold",
+      "type": "Game Engine",
+      "graphics": "2D",
+      "link": "https://defold.com/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Dome Engine",
+      "type": "Game Framework",
+      "graphics": "2D",
+      "link": "https://domeengine.com/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Gdevelop",
+      "type": "Game Engine",
+      "graphics": "2D, 3D*",
+      "link": "https://gdevelop.io/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Gideros",
+      "type": "Game Engine",
+      "graphics": "2D & 3D",
+      "link": "http://giderosmobile.com/",
+      "os": "Windows, Mac OS"
+    },
+    {
+      "toolName": "Godot",
+      "type": "Game Engine",
+      "graphics": "2D & 3D",
+      "link": "https://godotengine.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "HaxeFlixel",
+      "type": "Game Framework",
+      "graphics": "2D",
+      "link": "https://haxeflixel.com/",
+      "os": "Windows,Linux, Mac OS"
+    },
+    {
+      "toolName": "Heaps",
+      "type": "Game Framework",
+      "graphics": "2D & 3D",
+      "link": "https://heaps.io/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "ink",
+      "type": "Interactive Fiction",
+      "graphics": "N/A",
+      "link": "https://www.inklestudios.com/ink/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "klystracker",
+      "type": "Chiptune Tracker",
+      "graphics": "N/A",
+      "link": "https://kometbomb.github.io/klystrack/",
+      "os": "Windows"
+    },
+    {
+      "toolName": "LibreSprite",
+      "type": "Sprite Editor",
+      "graphics": "2D",
+      "link": "https://libresprite.github.io/",
+      "os": "Windows, Linux"
+    },
+    {
+      "toolName": "LÖVE 2D",
+      "type": "Game Framework",
+      "graphics": "2D",
+      "link": "https://love2d.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Monogame",
+      "type": "Game Framework",
+      "graphics": "2D & 3D",
+      "link": "https://www.monogame.net/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "OpenMPT",
+      "type": "Chiptune Tracker",
+      "graphics": "N/A",
+      "link": "https://openmpt.org/",
+      "os": "Windows"
+    },
+    {
+      "toolName": "Panda 3D",
+      "type": "Game Engine",
+      "graphics": "3D",
+      "link": "https://www.panda3d.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Phaser",
+      "type": "Game Library",
+      "graphics": "2D",
+      "link": "https://phaser.io/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Piskel ",
+      "type": "Sprite Editor",
+      "graphics": "2D",
+      "link": "https://www.piskelapp.com/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "pixi.js",
+      "type": "Graphics Library",
+      "graphics": "2D",
+      "link": "https://pixijs.com/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Pygame",
+      "type": "Game Framework",
+      "graphics": "2D",
+      "link": "https://www.pygame.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "RenPy",
+      "type": "Game Framework",
+      "graphics": "2D",
+      "link": "https://www.renpy.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "SDL",
+      "type": "Game Library",
+      "graphics": "2D/3D?",
+      "link": "https://www.libsdl.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "SFML",
+      "type": "Game Library",
+      "graphics": "2D",
+      "link": "https://www.sfml-dev.org/",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Tads3",
+      "type": "Interactive Fiction",
+      "graphics": "N/A",
+      "link": "https://www.tads.org/tads3.htm",
+      "os": "Windows, Linux, Mac OS"
+    },
+    {
+      "toolName": "Twine",
+      "type": "Interactive Fiction",
+      "graphics": "N/A",
+      "link": "https://twinery.org/",
+      "os": "Windows, Linux, Mac OS"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index c65f12d..67f071f 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -770,6 +770,10 @@ select {
   visibility: visible;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -823,6 +827,21 @@ select {
   margin-bottom: 1rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.-my-5 {
+  margin-top: -1.25rem;
+  margin-bottom: -1.25rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -851,6 +870,10 @@ select {
   margin-bottom: 1.25rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-auto {
   margin-top: auto;
 }
@@ -859,10 +882,6 @@ select {
   margin-left: auto;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -919,6 +938,10 @@ select {
   margin-top: 2rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -983,6 +1006,14 @@ select {
   width: 3rem;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -995,10 +1026,6 @@ select {
   max-width: 36rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1011,6 +1038,14 @@ select {
   flex-shrink: 1;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
+.table-fixed {
+  table-layout: fixed;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -1113,6 +1148,14 @@ select {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1155,6 +1198,10 @@ select {
   border-right-width: 0px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -1168,6 +1215,21 @@ select {
   border-color: transparent;
 }
 
+.border-main-dark-brown-2 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 39 42 / var(--tw-border-opacity));
+}
+
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-lightish-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 236 214 / var(--tw-border-opacity));
+}
+
 .bg-main-cream-white-2 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 238 231 / var(--tw-bg-opacity));
@@ -1208,6 +1270,11 @@ select {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.bg-lightish-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 236 214 / var(--tw-bg-opacity));
+}
+
 .bg-darkish-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(84 78 104 / var(--tw-bg-opacity));
@@ -1278,6 +1345,36 @@ select {
   background-color: rgb(255 139 167 / var(--tw-bg-opacity));
 }
 
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1371,6 +1468,10 @@ select {
   padding-left: 0.25rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1383,6 +1484,10 @@ select {
   text-align: justify;
 }
 
+.indent-8 {
+  text-indent: 2rem;
+}
+
 .font-supply-regular {
   font-family: supplyRegular, sans-serif;
 }
@@ -1415,16 +1520,16 @@ select {
   line-height: 1.75rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1450,6 +1555,10 @@ select {
   font-weight: 500;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .italic {
   font-style: italic;
 }
@@ -1583,6 +1692,16 @@ select {
   color: rgb(89 74 78 / var(--tw-text-opacity));
 }
 
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+.text-blue-50 {
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1606,6 +1725,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline {
   outline-style: solid;
 }
@@ -1770,6 +1895,11 @@ pre[class*="language-"] {
   cursor: help;
 }
 
+.article-intro::first-letter {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
 .hover\:bg-indigo-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
@@ -1785,6 +1915,11 @@ pre[class*="language-"] {
   color: rgb(13 43 69 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -1897,4 +2032,10 @@ pre[class*="language-"] {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+}
+
+@media (min-width: 1024px) {
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
 }
\ No newline at end of file
diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk
index 0245970..c660276 100644
--- a/src/_includes/posts.njk
+++ b/src/_includes/posts.njk
@@ -1,30 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-{% include "./partials/head.njk" %}
-</head>
-<body class="flex h-screen flex-col font-supply-regular bg-main-cream-white-2">
-    {% include "./partials/header.njk" %}
-    <main class="container mx-auto max-w-5xl p-8">
-        <section class="w-full flex flex-col items-center px-3">
-            <article class="flex flex-col my-4">
-                <div class="flex flex-col justify-start p-6 ">
-                    <div>
-                        <p class="text-3xl bg-rose font-medium text-center text-darkish-200">{{title}}</p>
-                        <p class="text-lg text-darkish-100 text-center">{{date | dateFilter}}</p>
-                    </div>
-                    <div class="mt-10 text-xl font-supply-regular text-justify text-darkish-300">
-                        {{content | safe}}
+    <head>
+        {% include "./partials/head.njk" %}
+    </head>
+    <body class="flex h-screen flex-col font-supply-regular bg-main-cream-white-2">
+        {% include "./partials/header.njk" %}
+        <main class="container mx-auto max-w-5xl p-8">
+            <section class="w-full flex flex-col items-center px-3">
+                <article class="flex flex-col my-4">
+                    <div class="flex flex-col justify-start p-6 ">
+                        <div>
+                            <p class="text-3xl bg-rose font-medium text-center text-darkish-200">{{title}}</p>
+                            <p class="text-lg text-darkish-100 text-center">{{date | dateFilter}}</p>
+                        </div>
+                        <div class="mt-10 text-xl font-supply-regular text-justify text-darkish-300">
+                            {{content | safe}}
+                        </div>
                     </div>
+                </article>
+                <div class="flex flex-col text-left text-xs">
+                    <span class="text-left">If you found this article useful, spread the word by sharing this link 👉
+                        <span class="w-1 text-left absolute ml-2 my-0">
+                            <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="indrajithKLIS" data-hashtags="#gamedev #indiegamedev #gametools" data-show-count="false">Tweet</a>
+                            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                        </span>
+                    </span>
+                </div>
+                <div class="flex flex-col my-4">
+                    <a class="flex flex-col justify-start" href="/posts">back to posts</a>
                 </div>
-            </article>
-            <div class="flex flex-col my-4">
-                <a class="flex flex-col justify-start" href="/posts">back to posts</a>    
-            </div>     
-        </section>
-        
-        
-    </main>
-    {% include "./partials/footer.njk" %}
-</body>
+            </section>
+
+        </main>
+        {% include "./partials/footer.njk" %}
+    </body>
 </html>
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
index e1bcf06..3cbd164 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -133,4 +133,9 @@ pre[class*="language-"] {
 
 .token.entity {
 	cursor: help;
+}
+
+.article-intro::first-letter {
+	font-size: 2rem;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/posts/big-list-game-dev.njk b/src/posts/big-list-game-dev.njk
new file mode 100644
index 0000000..921daea
--- /dev/null
+++ b/src/posts/big-list-game-dev.njk
@@ -0,0 +1,63 @@
+---
+layout: posts.njk
+title: Big List of Open Source Game Development Tools
+---
+
+<p class="article-intro indent-8">
+    People always think game development is an expensive thing, because most of 
+    the time when we search about game development we will discouraged by either 
+    the subscription amount or the percentage cut of the so called AAA engines. 
+    Yes you can makes games with those tools nobody is going to stop you, but the thing is by using
+    open source tools and engines you are not bound to restrictive tools, you can adapt, modify and even
+    introduce your own functionality in the tools/engine you are using.
+</p>
+
+<p class="mt-5">Welcome to the big list (eventually it will be) of always updating list of<span class="font-bold">Open Source Game Development Tools</span>.
+    Here you find not only Game Engines but other open source tools and utilities that will help you
+    in developing your dream game/prototypes.
+</p>
+<p class="mt-5">
+    <div class="overflow-x-auto relative shadow-md lg:rounded-lg border-main-dark-brown-2">
+        <table class="mx-auto max-w-4xl w-full text-sm text-left table-auto">
+            <thead class="text-xs uppercase bg-main-normal-brown border-b border-main-dark-brown-2">
+                <tr>
+                    <th scope="col" class="py-3 px-6 bg-lightish-50">
+                    Tool
+                </th>
+                    <th scope="col" class="py-3 px-6 text-main-cream-white-1">
+                    Tool Type
+                </th>
+                    <th scope="col" class="py-3 px-6 bg-lightish-50">
+                    Supported Graphics
+                </th>
+                    <th scope="col" class="py-3 px-6 text-main-cream-white-1">
+                    OS Supported
+                </th>
+                    <th scope="col" class="py-3 px-6 bg-lightish-50">
+                    Link
+                </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for tool in gtools.gameTools%}
+                    <tr class="bg-main-normal-brown border-b border-main-dark-brown-2">
+                        <th scope="row" class="py-4 px-6 font-medium whitespace-nowrap bg-lightish-50">{{tool.toolName}}
+                        </th>
+                        <td class="py-4 px-6 text-main-cream-white-1">
+                            {{tool.type}}
+                        </td>
+                        <td class="py-4 px-6 bg-lightish-50">
+                            {{tool.graphics}}
+                        </td>
+                        <td class="py-4 px-6 text-main-cream-white-1">
+                            {{tool.os}}
+                        </td>
+                        <td class="py-4 px-6 bg-lightish-50">
+                            <a href={{tool.link}} class="font-medium hover:underline">{{tool.link}}</a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</p>