Added support for Google Typograms (#2379)

Google [Typograms](https://github.com/google/typograms/) is a
lightweight image format (text/typogram) useful for defining simple
diagrams in technical documentation.


![image](https://github.com/alshedivat/al-folio/assets/31376482/715ba10b-c75d-492b-8869-4ec83d380e50)


![image](https://github.com/alshedivat/al-folio/assets/31376482/935f6ef8-1977-41d0-8797-d226594b82a9)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>

_includes/scripts/diff2html.liquid

@@ -8,7 +8,7 @@
   <script>
     let theme = determineComputedTheme();
 
-    /* Create echarts chart as another node and hide the code block, appending the echarts node after it
+    /* Create diff2html as another node and hide the code block, appending the diff2html node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
     document.onreadystatechange = () => {
       if (document.readyState === 'complete') {

_includes/scripts/typograms.liquid

@@ -0,0 +1,23 @@
+{% if page.typograms %}
+  <script src="{{ '/assets/js/typograms.js' | relative_url | bust_file_cache }}"></script>
+
+  <script>
+    /* Create typogram as another node and hide the code block, appending the typogram node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-typograms').forEach((elem) => {
+          const texData = elem.textContent;
+          const parent = elem.parentElement.parentElement;
+          /* create typograms node */
+          let typogram = document.createElement('pre');
+          typogram.classList.add('typogram');
+          const svg = create('\n' + texData, 0.3, false);
+          typogram.appendChild(svg);
+          parent.appendChild(typogram);
+          parent.removeChild(elem.parentElement);
+        });
+      }
+    };
+  </script>
+{% endif %}

_layouts/default.liquid

@@ -61,6 +61,7 @@
     {% include scripts/echarts.liquid %}
     {% include scripts/vega.liquid %}
     {% include scripts/tikzjax.liquid %}
+    {% include scripts/typograms.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}

_posts/2024-04-29-typograms.md

@@ -0,0 +1,85 @@
+---
+layout: post
+title: a post with typograms
+date: 2024-04-29 23:36:10
+description: this is what included typograms code could look like
+tags: formatting diagrams
+categories: sample-posts
+typograms: true
+---
+
+This is an example post with some [typograms](https://github.com/google/typograms/) code.
+
+````markdown
+```typograms
++----+
+|    |---> My first diagram!
++----+
+```
+````
+
+Which generates:
+
+```typograms
++----+
+|    |---> My first diagram!
++----+
+```
+
+Another example:
+
+````markdown
+```typograms
+.------------------------.
+|.----------------------.|
+||"https://example.com" ||
+|'----------------------'|
+| ______________________ |
+||                      ||
+||   Welcome!           ||
+||                      ||
+||                      ||
+||  .----------------.  ||
+||  | username       |  ||
+||  '----------------'  ||
+||  .----------------.  ||
+||  |"*******"       |  ||
+||  '----------------'  ||
+||                      ||
+||  .----------------.  ||
+||  |   "Sign-up"    |  ||
+||  '----------------'  ||
+||                      ||
+|+----------------------+|
+.------------------------.
+```
+````
+
+which generates:
+
+```typograms
+.------------------------.
+|.----------------------.|
+||"https://example.com" ||
+|'----------------------'|
+| ______________________ |
+||                      ||
+||   Welcome!           ||
+||                      ||
+||                      ||
+||  .----------------.  ||
+||  | username       |  ||
+||  '----------------'  ||
+||  .----------------.  ||
+||  |"*******"       |  ||
+||  '----------------'  ||
+||                      ||
+||  .----------------.  ||
+||  |   "Sign-up"    |  ||
+||  '----------------'  ||
+||                      ||
+|+----------------------+|
+.------------------------.
+```
+
+For more examples, check out the [typograms documentation](https://google.github.io/typograms/#examples).

_sass/_typograms.scss

@@ -0,0 +1,132 @@
+.typogram {
+  .diagram {
+    display: block;
+  }
+
+  .diagram line,
+  .diagram circle,
+  .diagram rect {
+    stroke: var(--global-text-color);
+  }
+
+  .diagram line {
+    stroke-width: 2;
+  }
+
+  .diagram circle {
+    r: 3.5;
+  }
+
+  .diagram rect {
+    width: 6px;
+    height: 6px;
+  }
+
+  .diagram text,
+  .glyph,
+  .debug text {
+    /** font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; **/
+    font-family:
+      Iosevka Fixed,
+      monospace;
+    font-size: 3em;
+    text-anchor: middle;
+    alignment-baseline: central;
+    white-space: pre;
+    fill: var(--global-text-color);
+  }
+
+  .reserved {
+    fill: transparent;
+    white-space: pre;
+  }
+
+  .debug[debug="true"] .reserved {
+    fill: var(--global-text-color);
+    opacity: 0.5;
+  }
+
+  .debug[debug="true"] line.grid {
+    stroke: var(--global-text-color);
+    stroke-width: 0.2;
+    stroke-linecap: butt;
+    fill: var(--global-text-color);
+    opacity: 1%;
+  }
+
+  polygon {
+    stroke-width: 0;
+  }
+
+  .debug[debug="true"] polygon.inner {
+    fill: var(--global-text-color);
+    stroke: var(--global-text-color);
+    opacity: 5%;
+  }
+
+  polygon {
+    stroke: var(--global-text-color);
+    /** stroke-width: 0.2; **/
+    stroke-linecap: butt;
+    fill: var(--global-text-color);
+  }
+
+  .debug[debug="true"] polygon,
+  .debug[debug="true"] line.grid {
+    opacity: 10%;
+  }
+
+  .debug[debug="true"] polygon,
+  .debug[debug="true"] path,
+  .debug[debug="true"] circle {
+    opacity: 50%;
+  }
+
+  .debug[debug="true"] polygon {
+    fill: red;
+    stroke: red;
+  }
+
+  /**
+  circle {
+    fill: var(--global-text-color);
+  }
+  **/
+
+  .debug[debug="true"] circle,
+  .debug[debug="true"] path {
+    opacity: 50%;
+    fill: red;
+  }
+
+  .debug[debug="true"] circle {
+    stroke: red;
+  }
+
+  .debug[debug="true"] .inner {
+    stroke-width: 0.2;
+  }
+
+  line.part {
+    stroke-width: 6;
+    stroke-linecap: butt;
+    stroke: var(--global-text-color);
+  }
+
+  .debug[debug="true"] line.part {
+    opacity: 50%;
+    stroke: red;
+  }
+
+  .debug[debug="true"] line.center {
+    stroke-width: 3;
+    stroke-linecap: butt;
+    opacity: 10%;
+    stroke: var(--global-text-color);
+  }
+
+  text::selection {
+    fill: HighlightText;
+    background-color: Highlight;
+  }
+}

assets/css/main.scss

@@ -13,6 +13,7 @@ $max-content-width: {{ site.max_width }};
   "base",
   "distill",
   "cv",
+  "typograms",
   "font-awesome/fontawesome",
   "font-awesome/brands",
   "font-awesome/solid",