From c02b9e64987a48dde64a47507b26ed275c69cd28 Mon Sep 17 00:00:00 2001
From: ItsDrike <itsdrike@protonmail.com>
Date: Sun, 15 May 2022 13:11:03 +0200
Subject: [PATCH] Don't globally override table style, use shortcode

---
 content/posts/json-vs-databases.md           |  4 +++
 content/posts/typing-variance-of-generics.md |  2 ++
 layouts/shortcodes/table.html                |  5 ++++
 static/src/scss/_main.scss                   | 31 ++++++++++----------
 4 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 layouts/shortcodes/table.html

diff --git a/content/posts/json-vs-databases.md b/content/posts/json-vs-databases.md
index 6733870..40f70a2 100644
--- a/content/posts/json-vs-databases.md
+++ b/content/posts/json-vs-databases.md
@@ -44,6 +44,7 @@ current one, to avoid data repetition. This would be an example of the data tabl
 
 Table of students:
 
+{{< table >}}
 | Student ID | Date of birth | Name           | Permanent residence address | Field of study       |
 |------------|---------------|----------------|-----------------------------|----------------------|
 | 0          | 1999-02-22    | John Doe       | Leander, Texas(TX), 78641   | Software Engineering |
@@ -51,9 +52,11 @@ Table of students:
 | 2          | 2000-11-14    | Samantha Jones | Dayton, Kentucky(KY), 41074 | Graphics Design      |
 | 3          | 1998-04-12    | Michael Carter | Macomb, Michigan(MI), 48044 | Software Engineering |
 | ...        | ...           | ...            | ...                         | ...                  |
+{{< /table >}}
 
 Student Grades:
 
+{{< table >}}
 | Student | Subject           | Grade | Year |
 |---------|-------------------|-------|------|
 | 0       | Mathematics       | B     | 2020 |
@@ -63,6 +66,7 @@ Student Grades:
 | 2       | Web Design        | A     | 2021 |
 | 2       | Web Design        | B     | 2020 |
 | ...     | ...               | ...   | ...  |
+{{< /table >}}
 
 Here we can see that the *Student Grades* table doesn't have a standalone unique primary key, like the Students table
 has, but rather it has a composite primary key, in this case, it's made of 3 columns: *Student*, *Subject* and *Year*.
diff --git a/content/posts/typing-variance-of-generics.md b/content/posts/typing-variance-of-generics.md
index ac0af29..244bc71 100644
--- a/content/posts/typing-variance-of-generics.md
+++ b/content/posts/typing-variance-of-generics.md
@@ -153,6 +153,7 @@ of the keys and second is the type of the values: `dict[str, int]` would be a di
 
 Here's a list of some definable generic types that are currently present in python 3.9:
 
+{{< table >}}
 | Type              | Description                                         |
 |-------------------|-----------------------------------------------------|
 | list[str]         | List of `str` objects                               |
@@ -162,6 +163,7 @@ Here's a list of some definable generic types that are currently present in pyth
 | Iterable[int]     | Iterable object containing ints                     |
 | Sequence[bool]    | Sequence of booleans (immutable)                    |
 | Mapping[str, int] | Mapping from `str` keys to `int` values (immutable) |
+{{< /table >}}
 
 
 In python, we can even make up our own generics with the help of `typing.Generic`:
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
new file mode 100644
index 0000000..241e6a4
--- /dev/null
+++ b/layouts/shortcodes/table.html
@@ -0,0 +1,5 @@
+{{ $htmlTable := .Inner | markdownify }}
+
+<div class="markdown-table">
+    {{ $htmlTable | safeHTML }}
+</div>
diff --git a/static/src/scss/_main.scss b/static/src/scss/_main.scss
index bba46b2..c06ddef 100644
--- a/static/src/scss/_main.scss
+++ b/static/src/scss/_main.scss
@@ -52,14 +52,6 @@ ul ul, ol ol {
   text-indent: 2em;
 }
 
-table td {
-  vertical-align: middle;
-}
-
-.table-dark {
-  color: $body-color;
-}
-
 .content {
   h1, h2, h3, h4, h5, h6 {
     margin-top: $headings-margin-bottom * 2.2;
@@ -86,14 +78,6 @@ table td {
     border-left: $spacer * 0.2 solid $light;
     padding-left: $spacer * 1.2;
   }
-
-  table {
-    @extend .table, .table-dark, .table-striped;
-    margin: 0 auto;
-    margin-bottom: $paragraph-margin-bottom;
-    width: 66%;
-    text-align: center;
-  }
 }
 
 img {
@@ -104,3 +88,18 @@ img {
   width: 100%;
   height: 35vh;
 }
+
+.markdown-table {
+    table {
+        @extend .table, .table-dark, .table-striped;
+        margin: 0 auto;
+        color: $body-color;
+        margin-bottom: 0;
+        width: 66%;
+        text-align: center;
+
+        td {
+            vertical-align: middle;
+        }
+    }
+}