Skip to content

Commit 7d9e691

Browse files
mtibmtib
committed
feat: text manipulation tool post
1 parent 8ff32f0 commit 7d9e691

File tree

9 files changed

+236
-4
lines changed

9 files changed

+236
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
.DS_Store
22
minhtml
3+
.vscode

‎Makefile‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
files := dist/index.html dist/main.css
1+
files := dist/index.html dist/main.css $(filter-out dist/posts/base.html,$(patsubst src/%.jinja2,dist/%,$(wildcard src/posts/*)))
2+
23
all: $(files)
34

45
clean:
56
rm -rf $(files)
67

78
.PHONY: all clean
89

9-
dist/%: data.yaml src/%.jinja2 src/base.html.jinja2
10+
dist/%: data.yaml src/%.jinja2 src/base.html.jinja2 src/%
1011
jinja2 $(patsubst dist/%,src/%,$@).jinja2 data.yaml > $@

‎data.yaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ index:
1919
WIP - migrating from client-side rendered markdown to static HTML. Check my
2020
<a href="https://github.com/mtib?tab=repositories" target="_blank" rel="noopener noreferrer">
2121
GitHub repositories</a> for what I am working on.
22-
links: []
22+
links:
23+
- title: Text Manipulation
24+
url: /posts/text_manipulation.html
2325
- title: apps
2426
type: apps
2527
apps:

‎dist/posts/.placeholder‎

Whitespace-only changes.

‎dist/posts/text_manipulation.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>blog.mtib.dev</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="preload" as="style"
11+
onload="this.onload=null;this.rel='stylesheet'">
12+
<noscript>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="stylesheet">
14+
</noscript>
15+
<link rel="stylesheet" href="/main.css">
16+
<link rel="icon" href="/assets/m.png">
17+
<meta name="application-name" content="blog.mtib.dev">
18+
<meta name="theme-color" content="#2a0a2a">
19+
<link rel="manifest" href="/assets/manifest.json" />
20+
<meta name="description"
21+
content="A personal blog of Markus Horst Becker aka mtib, linking to academic resources and open-source apps.">
22+
<meta name="robots" content="index,follow">
23+
<meta name="subject" content="software development">
24+
<meta name="rating" content="General">
25+
<meta name="referrer" content="no-referrer">
26+
<meta name="ICBM" content="55.681389, 12.455">
27+
<meta name="geo.position" content="55.681389;12.455">
28+
<meta name="geo.region" content="DK">
29+
<meta name="geo.placename" content="Copenhagen">
30+
</head>
31+
32+
<body>
33+
34+
<div class="noto-sans-default">
35+
<div style="
36+
display: flex;
37+
flex-direction: column;
38+
gap: 50px;
39+
align-items: center;
40+
padding: 10px 0 50px 0;">
41+
<div class="item">
42+
43+
<h1>blog.mtib.dev</h1>
44+
<a href="/index.html">back</a>
45+
46+
</div>
47+
48+
<div class="item">
49+
<h2>Text Manipulation</h2>
50+
<textarea name="input" id="input"></textarea>
51+
52+
<select name="algo" id="algo">
53+
<option value="codeQuote">Code quote</option>
54+
</select>
55+
56+
<code id="outputWrap">
57+
<pre id="output">
58+
</pre>
59+
</code>
60+
61+
<input type="button" value="Copy" id="copyBtn">
62+
63+
<script>
64+
const input = document.getElementById('input');
65+
const output = document.getElementById('output');
66+
67+
function codeQuote(data) {
68+
return data.replace(/(?<!`)(_?[a-zA-Z0-9()/\\]+(_|\([a-zA-Z0-9()/\\]*\)|\->)[a-zA-Z0-9()/\\]*)(?!`)/g, '`$1`');
69+
}
70+
71+
const algos = {
72+
codeQuote: codeQuote,
73+
};
74+
75+
function getAlgo() {
76+
const algoName = document.getElementById('algo').value;
77+
const algo = algos[algoName]
78+
79+
if (algo) {
80+
return algo;
81+
}
82+
83+
return (data) => `Unknown algorithm: ${algoName}`;
84+
}
85+
86+
input.addEventListener('input', () => {
87+
output.textContent = getAlgo()(input.value);
88+
});
89+
90+
document.getElementById('copyBtn').addEventListener('click', () => {
91+
navigator.clipboard.writeText(output.textContent);
92+
});
93+
</script>
94+
95+
<style>
96+
textarea#input {
97+
width: 100%;
98+
min-height: 6em;
99+
background-color: #202;
100+
border: #fdf 1px solid;
101+
border-radius: 1em;
102+
padding: 1em 1em;
103+
color: #fdf;
104+
margin-bottom: 0.5em;
105+
}
106+
#outputWrap {
107+
display: block;
108+
width: 100%;
109+
overflow: auto;
110+
border: #fdf 1px solid;
111+
border-radius: 1em;
112+
padding: 1em 1em;
113+
margin-top: 1em;
114+
}
115+
#copyBtn {
116+
display: block;
117+
margin-top: 1em;
118+
}
119+
</style>
120+
</div>
121+
122+
</div>
123+
</div>
124+
125+
<style>
126+
.item {
127+
width: min(calc(100vw - 20px), 800px);
128+
}
129+
130+
.item h2 {
131+
margin-bottom: 8px;
132+
}
133+
134+
.app {
135+
padding-top: 20px;
136+
}
137+
138+
div.item>div.app:nth-of-type(1) {
139+
padding-top: 0px;
140+
}
141+
</style>
142+
143+
</body>
144+
145+
146+
</html>

‎src/base.html.jinja2‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<noscript>
1313
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="stylesheet">
1414
</noscript>
15-
<link rel="stylesheet" href="./main.css">
15+
<link rel="stylesheet" href="/main.css">
1616
<link rel="icon" href="/assets/m.png">
1717
<meta name="application-name" content="blog.mtib.dev">
1818
<meta name="theme-color" content="#2a0a2a">

‎src/posts/src‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../

‎src/posts/text_manipulation.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<textarea name="input" id="input"></textarea>
2+
3+
<select name="algo" id="algo">
4+
<option value="codeQuote">Code quote</option>
5+
</select>
6+
7+
<code id="outputWrap">
8+
<pre id="output">
9+
</pre>
10+
</code>
11+
12+
<input type="button" value="Copy" id="copyBtn">
13+
14+
<script>
15+
const input = document.getElementById('input');
16+
const output = document.getElementById('output');
17+
18+
function codeQuote(data) {
19+
return data.replace(/(?<!`)(_?[a-zA-Z0-9()/\\]+(_|\([a-zA-Z0-9()/\\]*\)|\->)[a-zA-Z0-9()/\\]*)(?!`)/g, '`$1`');
20+
}
21+
22+
const algos = {
23+
codeQuote: codeQuote,
24+
};
25+
26+
function getAlgo() {
27+
const algoName = document.getElementById('algo').value;
28+
const algo = algos[algoName]
29+
30+
if (algo) {
31+
return algo;
32+
}
33+
34+
return (data) => `Unknown algorithm: ${algoName}`;
35+
}
36+
37+
input.addEventListener('input', () => {
38+
output.textContent = getAlgo()(input.value);
39+
});
40+
41+
document.getElementById('copyBtn').addEventListener('click', () => {
42+
navigator.clipboard.writeText(output.textContent);
43+
});
44+
</script>
45+
46+
<style>
47+
textarea#input {
48+
width: 100%;
49+
min-height: 6em;
50+
background-color: #202;
51+
border: #fdf 1px solid;
52+
border-radius: 1em;
53+
padding: 1em 1em;
54+
color: #fdf;
55+
margin-bottom: 0.5em;
56+
}
57+
#outputWrap {
58+
display: block;
59+
width: 100%;
60+
overflow: auto;
61+
border: #fdf 1px solid;
62+
border-radius: 1em;
63+
padding: 1em 1em;
64+
margin-top: 1em;
65+
}
66+
#copyBtn {
67+
display: block;
68+
margin-top: 1em;
69+
}
70+
</style>

‎src/posts/text_manipulation.html.jinja2‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{% extends "src/base.html.jinja2" %}
2+
{% block heading %}
3+
<h1>blog.mtib.dev</h1>
4+
<a href="/index.html">back</a>
5+
{% endblock heading %}
6+
{% block content %}
7+
<div class="item">
8+
<h2>Text Manipulation</h2>
9+
{% include "text_manipulation.html" %}
10+
</div>
11+
{% endblock content %}

0 commit comments

Comments
 (0)