Skip to content

Commit ba53f89

Browse files
george-gcageorge-gca
authored
Added support for Google Typograms (cotes2020#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 <[email protected]>
1 parent 04bf52e commit ba53f89

File tree

7 files changed

+1565
-1
lines changed

7 files changed

+1565
-1
lines changed

‎_includes/scripts/diff2html.liquid‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script>
99
let theme = determineComputedTheme();
1010
11-
/* Create echarts chart as another node and hide the code block, appending the echarts node after it
11+
/* Create diff2html as another node and hide the code block, appending the diff2html node after it
1212
this is done to enable retrieving the code again when changing theme between light/dark */
1313
document.onreadystatechange = () => {
1414
if (document.readyState === 'complete') {

‎_includes/scripts/typograms.liquid‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% if page.typograms %}
2+
<script src="{{ '/assets/js/typograms.js' | relative_url | bust_file_cache }}"></script>
3+
4+
<script>
5+
/* Create typogram as another node and hide the code block, appending the typogram node after it
6+
this is done to enable retrieving the code again when changing theme between light/dark */
7+
document.onreadystatechange = () => {
8+
if (document.readyState === 'complete') {
9+
document.querySelectorAll('pre>code.language-typograms').forEach((elem) => {
10+
const texData = elem.textContent;
11+
const parent = elem.parentElement.parentElement;
12+
/* create typograms node */
13+
let typogram = document.createElement('pre');
14+
typogram.classList.add('typogram');
15+
const svg = create('\n' + texData, 0.3, false);
16+
typogram.appendChild(svg);
17+
parent.appendChild(typogram);
18+
parent.removeChild(elem.parentElement);
19+
});
20+
}
21+
};
22+
</script>
23+
{% endif %}

‎_layouts/default.liquid‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
{% include scripts/echarts.liquid %}
6262
{% include scripts/vega.liquid %}
6363
{% include scripts/tikzjax.liquid %}
64+
{% include scripts/typograms.liquid %}
6465
{% include scripts/misc.liquid %}
6566
{% include scripts/badges.liquid %}
6667
{% include scripts/mathjax.liquid %}

‎_posts/2024-04-29-typograms.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: a post with typograms
4+
date: 2024-04-29 23:36:10
5+
description: this is what included typograms code could look like
6+
tags: formatting diagrams
7+
categories: sample-posts
8+
typograms: true
9+
---
10+
11+
This is an example post with some [typograms](https://github.com/google/typograms/) code.
12+
13+
````markdown
14+
```typograms
15+
+----+
16+
| |---> My first diagram!
17+
+----+
18+
```
19+
````
20+
21+
Which generates:
22+
23+
```typograms
24+
+----+
25+
| |---> My first diagram!
26+
+----+
27+
```
28+
29+
Another example:
30+
31+
````markdown
32+
```typograms
33+
.------------------------.
34+
|.----------------------.|
35+
||"https://example.com" ||
36+
|'----------------------'|
37+
| ______________________ |
38+
|| ||
39+
|| Welcome! ||
40+
|| ||
41+
|| ||
42+
|| .----------------. ||
43+
|| | username | ||
44+
|| '----------------' ||
45+
|| .----------------. ||
46+
|| |"*******" | ||
47+
|| '----------------' ||
48+
|| ||
49+
|| .----------------. ||
50+
|| | "Sign-up" | ||
51+
|| '----------------' ||
52+
|| ||
53+
|+----------------------+|
54+
.------------------------.
55+
```
56+
````
57+
58+
which generates:
59+
60+
```typograms
61+
.------------------------.
62+
|.----------------------.|
63+
||"https://example.com" ||
64+
|'----------------------'|
65+
| ______________________ |
66+
|| ||
67+
|| Welcome! ||
68+
|| ||
69+
|| ||
70+
|| .----------------. ||
71+
|| | username | ||
72+
|| '----------------' ||
73+
|| .----------------. ||
74+
|| |"*******" | ||
75+
|| '----------------' ||
76+
|| ||
77+
|| .----------------. ||
78+
|| | "Sign-up" | ||
79+
|| '----------------' ||
80+
|| ||
81+
|+----------------------+|
82+
.------------------------.
83+
```
84+
85+
For more examples, check out the [typograms documentation](https://google.github.io/typograms/#examples).

‎_sass/_typograms.scss‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
.typogram {
2+
.diagram {
3+
display: block;
4+
}
5+
6+
.diagram line,
7+
.diagram circle,
8+
.diagram rect {
9+
stroke: var(--global-text-color);
10+
}
11+
12+
.diagram line {
13+
stroke-width: 2;
14+
}
15+
16+
.diagram circle {
17+
r: 3.5;
18+
}
19+
20+
.diagram rect {
21+
width: 6px;
22+
height: 6px;
23+
}
24+
25+
.diagram text,
26+
.glyph,
27+
.debug text {
28+
/** font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; **/
29+
font-family:
30+
Iosevka Fixed,
31+
monospace;
32+
font-size: 3em;
33+
text-anchor: middle;
34+
alignment-baseline: central;
35+
white-space: pre;
36+
fill: var(--global-text-color);
37+
}
38+
39+
.reserved {
40+
fill: transparent;
41+
white-space: pre;
42+
}
43+
44+
.debug[debug="true"] .reserved {
45+
fill: var(--global-text-color);
46+
opacity: 0.5;
47+
}
48+
49+
.debug[debug="true"] line.grid {
50+
stroke: var(--global-text-color);
51+
stroke-width: 0.2;
52+
stroke-linecap: butt;
53+
fill: var(--global-text-color);
54+
opacity: 1%;
55+
}
56+
57+
polygon {
58+
stroke-width: 0;
59+
}
60+
61+
.debug[debug="true"] polygon.inner {
62+
fill: var(--global-text-color);
63+
stroke: var(--global-text-color);
64+
opacity: 5%;
65+
}
66+
67+
polygon {
68+
stroke: var(--global-text-color);
69+
/** stroke-width: 0.2; **/
70+
stroke-linecap: butt;
71+
fill: var(--global-text-color);
72+
}
73+
74+
.debug[debug="true"] polygon,
75+
.debug[debug="true"] line.grid {
76+
opacity: 10%;
77+
}
78+
79+
.debug[debug="true"] polygon,
80+
.debug[debug="true"] path,
81+
.debug[debug="true"] circle {
82+
opacity: 50%;
83+
}
84+
85+
.debug[debug="true"] polygon {
86+
fill: red;
87+
stroke: red;
88+
}
89+
90+
/**
91+
circle {
92+
fill: var(--global-text-color);
93+
}
94+
**/
95+
96+
.debug[debug="true"] circle,
97+
.debug[debug="true"] path {
98+
opacity: 50%;
99+
fill: red;
100+
}
101+
102+
.debug[debug="true"] circle {
103+
stroke: red;
104+
}
105+
106+
.debug[debug="true"] .inner {
107+
stroke-width: 0.2;
108+
}
109+
110+
line.part {
111+
stroke-width: 6;
112+
stroke-linecap: butt;
113+
stroke: var(--global-text-color);
114+
}
115+
116+
.debug[debug="true"] line.part {
117+
opacity: 50%;
118+
stroke: red;
119+
}
120+
121+
.debug[debug="true"] line.center {
122+
stroke-width: 3;
123+
stroke-linecap: butt;
124+
opacity: 10%;
125+
stroke: var(--global-text-color);
126+
}
127+
128+
text::selection {
129+
fill: HighlightText;
130+
background-color: Highlight;
131+
}
132+
}

‎assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ $max-content-width: {{ site.max_width }};
1313
"base",
1414
"distill",
1515
"cv",
16+
"typograms",
1617
"font-awesome/fontawesome",
1718
"font-awesome/brands",
1819
"font-awesome/solid",

0 commit comments

Comments
 (0)