mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-04 07:40:09 +05:30
Compare commits
7 Commits
f5e739494a
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 avinal
|
5df0a73c08 | ||
|
avinal
|
a8c7e06330 | ||
|
avinal
|
96ea6019ae | ||
|
avinal
|
63ab0e12b2
|
||
|
avinal
|
df4f2e3863
|
||
|
avinal
|
f03f57f064
|
||
|
avinal
|
4f942563c1
|
@@ -8,6 +8,7 @@ export default defineConfig({
|
|||||||
site: "https://avinal.space",
|
site: "https://avinal.space",
|
||||||
output: "static",
|
output: "static",
|
||||||
integrations: [sitemap()],
|
integrations: [sitemap()],
|
||||||
|
prefetch: true,
|
||||||
markdown: {
|
markdown: {
|
||||||
shikiConfig: {
|
shikiConfig: {
|
||||||
theme: "github-dark-default",
|
theme: "github-dark-default",
|
||||||
|
|||||||
@@ -14,3 +14,8 @@
|
|||||||
Permissions-Policy = "camera=(), microphone=(), geolocation=()"
|
Permissions-Policy = "camera=(), microphone=(), geolocation=()"
|
||||||
X-XSS-Protection = "1; mode=block"
|
X-XSS-Protection = "1; mode=block"
|
||||||
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cal.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.listenbrainz.org https://coverartarchive.org https://itunes.apple.com https://api.github.com https://wakatime.com; frame-src https://cal.com;"
|
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cal.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.listenbrainz.org https://coverartarchive.org https://itunes.apple.com https://api.github.com https://wakatime.com; frame-src https://cal.com;"
|
||||||
|
|
||||||
|
[[headers]]
|
||||||
|
for = "/talks/*"
|
||||||
|
[headers.values]
|
||||||
|
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; connect-src 'self';"
|
||||||
|
|||||||
Generated
+467
-1087
File diff suppressed because it is too large
Load Diff
+5
-3
@@ -21,9 +21,11 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/avinal/avinal.github.io#readme",
|
"homepage": "https://github.com/avinal/avinal.github.io#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/rss": "^4.0.15",
|
"@astrojs/rss": "^4.0.18",
|
||||||
"@astrojs/sitemap": "^3.7.0",
|
"@astrojs/sitemap": "^3.7.2",
|
||||||
"astro": "^5.17.3",
|
"@fontsource/iosevka": "^5.2.5",
|
||||||
|
"@fontsource/iosevka-aile": "^5.2.5",
|
||||||
|
"astro": "^6.3.5",
|
||||||
"rehype-autolink-headings": "^7.1.0",
|
"rehype-autolink-headings": "^7.1.0",
|
||||||
"rehype-slug": "^6.0.0",
|
"rehype-slug": "^6.0.0",
|
||||||
"unist-util-visit": "^5.1.0"
|
"unist-util-visit": "^5.1.0"
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,342 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Lost in Transliteration: Why strlen("Dvořák") Returns 8</title>
|
||||||
|
<meta name="description" content="DevConf.CZ 2026 talk by Avinal Kumar — character encoding, Unicode, and glibc's iconv internals" />
|
||||||
|
<meta name="author" content="Avinal Kumar" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/black.min.css" id="theme" />
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
IBM Carbon Design System — Color Tokens
|
||||||
|
============================================ */
|
||||||
|
:root {
|
||||||
|
/* Carbon Gray 80 background */
|
||||||
|
--r-background-color: #2f2f2f;
|
||||||
|
/* Carbon typography */
|
||||||
|
--r-main-font: 'IBM Plex Sans', system-ui, sans-serif;
|
||||||
|
--r-main-font-size: 34px;
|
||||||
|
--r-heading-font: 'IBM Plex Sans', system-ui, sans-serif;
|
||||||
|
--r-heading-color: #f4f4f4;
|
||||||
|
--r-heading-font-weight: 600;
|
||||||
|
--r-main-color: #c6c6c6;
|
||||||
|
--r-link-color: #78a9ff;
|
||||||
|
--r-link-color-hover: #a6c8ff;
|
||||||
|
--r-code-font: 'IBM Plex Mono', monospace;
|
||||||
|
--r-heading-text-transform: none;
|
||||||
|
--r-heading-letter-spacing: -0.01em;
|
||||||
|
/* Carbon color palette */
|
||||||
|
--carbon-blue-40: #78a9ff;
|
||||||
|
--carbon-blue-60: #0f62fe;
|
||||||
|
--carbon-purple-40: #be95ff;
|
||||||
|
--carbon-teal-20: #9ef0f0;
|
||||||
|
--carbon-teal-40: #08bdba;
|
||||||
|
--carbon-magenta-40: #ff7eb6;
|
||||||
|
--carbon-red-40: #ff8389;
|
||||||
|
--carbon-green-40: #42be65;
|
||||||
|
--carbon-yellow-30: #f1c21b;
|
||||||
|
--carbon-gray-10: #f4f4f4;
|
||||||
|
--carbon-gray-30: #c6c6c6;
|
||||||
|
--carbon-gray-50: #8d8d8d;
|
||||||
|
--carbon-gray-60: #6f6f6f;
|
||||||
|
--carbon-gray-70: #525252;
|
||||||
|
--carbon-gray-80: #393939;
|
||||||
|
--carbon-gray-90: #262626;
|
||||||
|
--carbon-gray-100: #161616;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h1, .reveal h2, .reveal h3 {
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h2 { font-size: 2em; font-weight: 600; }
|
||||||
|
.reveal h3 { font-size: 1.4em; font-weight: 600; }
|
||||||
|
|
||||||
|
/* ---- Code blocks: Carbon snippet style ---- */
|
||||||
|
.reveal pre {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.52em;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: var(--carbon-gray-100);
|
||||||
|
}
|
||||||
|
.reveal pre code {
|
||||||
|
padding: 1.2em 1.4em;
|
||||||
|
border-radius: 0;
|
||||||
|
max-height: 480px;
|
||||||
|
line-height: 1.65;
|
||||||
|
background: var(--carbon-gray-100);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.reveal code {
|
||||||
|
font-family: var(--r-code-font);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.reveal p code, .reveal li code {
|
||||||
|
background: var(--carbon-gray-80);
|
||||||
|
border: none;
|
||||||
|
padding: 0.15em 0.45em;
|
||||||
|
border-radius: 0;
|
||||||
|
font-size: 0.88em;
|
||||||
|
color: var(--carbon-magenta-40);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Carbon syntax highlighting (overrides highlight.js) ---- */
|
||||||
|
.reveal pre code .hljs-keyword,
|
||||||
|
.reveal pre code .hljs-type,
|
||||||
|
.reveal pre code .hljs-built_in { color: var(--carbon-purple-40); }
|
||||||
|
.reveal pre code .hljs-string,
|
||||||
|
.reveal pre code .hljs-doctag { color: var(--carbon-magenta-40); }
|
||||||
|
.reveal pre code .hljs-number,
|
||||||
|
.reveal pre code .hljs-literal { color: var(--carbon-blue-40); }
|
||||||
|
.reveal pre code .hljs-comment { color: var(--carbon-gray-60); font-style: normal; }
|
||||||
|
.reveal pre code .hljs-function,
|
||||||
|
.reveal pre code .hljs-title { color: var(--carbon-teal-20); }
|
||||||
|
.reveal pre code .hljs-variable,
|
||||||
|
.reveal pre code .hljs-attr { color: #fff; }
|
||||||
|
.reveal pre code .hljs-params { color: var(--carbon-gray-30); }
|
||||||
|
.reveal pre code .hljs-meta,
|
||||||
|
.reveal pre code .hljs-preprocessor { color: #569CD6; }
|
||||||
|
.reveal pre code .hljs-regexp { color: #D16969; }
|
||||||
|
.reveal pre code .hljs-symbol,
|
||||||
|
.reveal pre code .hljs-template-variable { color: var(--carbon-red-40); }
|
||||||
|
.hljs { background: var(--carbon-gray-100); color: #fff; }
|
||||||
|
|
||||||
|
/* ---- Utility classes: Carbon palette ---- */
|
||||||
|
.reveal .dim { opacity: 0.45; }
|
||||||
|
.reveal .accent { color: var(--carbon-blue-40); }
|
||||||
|
.reveal .green { color: var(--carbon-green-40); }
|
||||||
|
.reveal .yellow { color: var(--carbon-yellow-30); }
|
||||||
|
.reveal .orange { color: #f0883e; }
|
||||||
|
.reveal .red { color: var(--carbon-red-40); }
|
||||||
|
.reveal .purple { color: var(--carbon-purple-40); }
|
||||||
|
.reveal .teal { color: var(--carbon-teal-20); }
|
||||||
|
.reveal .magenta { color: var(--carbon-magenta-40); }
|
||||||
|
.reveal .big { font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; }
|
||||||
|
.reveal .medium { font-size: 1.15em; font-weight: 500; }
|
||||||
|
.reveal .small { font-size: 0.7em; }
|
||||||
|
.reveal .tiny {
|
||||||
|
font-size: 0.45em;
|
||||||
|
color: var(--carbon-gray-60);
|
||||||
|
font-family: var(--r-code-font);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Tables ---- */
|
||||||
|
.reveal table { font-size: 0.72em; border-collapse: collapse; border-spacing: 0; }
|
||||||
|
.reveal table th {
|
||||||
|
color: var(--carbon-gray-10);
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--carbon-gray-80);
|
||||||
|
padding: 0.6em 1em;
|
||||||
|
border-bottom: 2px solid var(--carbon-gray-70);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.reveal table td {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-bottom: 1px solid var(--carbon-gray-70);
|
||||||
|
}
|
||||||
|
.reveal table tr:hover td { background: rgba(255,255,255,0.04); }
|
||||||
|
|
||||||
|
/* ---- Custom blocks: Carbon surface style ---- */
|
||||||
|
.reveal .hex-display {
|
||||||
|
font-family: var(--r-code-font);
|
||||||
|
font-size: 0.62em;
|
||||||
|
background: var(--carbon-gray-100);
|
||||||
|
padding: 1em 1.4em;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.9;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.reveal .diagram {
|
||||||
|
background: var(--carbon-gray-100);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 1.2em 1.4em;
|
||||||
|
font-family: var(--r-code-font);
|
||||||
|
font-size: 0.58em;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Section label ---- */
|
||||||
|
.reveal .slide-title {
|
||||||
|
font-size: 0.45em;
|
||||||
|
color: var(--carbon-blue-40);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Blockquotes ---- */
|
||||||
|
.reveal blockquote {
|
||||||
|
background: var(--carbon-gray-80);
|
||||||
|
border-left: 4px solid var(--carbon-blue-60);
|
||||||
|
padding: 0.8em 1.2em;
|
||||||
|
font-style: italic;
|
||||||
|
width: 85%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Grid layouts ---- */
|
||||||
|
.reveal .two-col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.reveal .three-col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 1.5em;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Cards: Carbon tile style ---- */
|
||||||
|
.reveal .card {
|
||||||
|
background: var(--carbon-gray-80);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 1.2em;
|
||||||
|
}
|
||||||
|
.reveal .card h4 {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Lists ---- */
|
||||||
|
.reveal ul, .reveal ol { display: block; }
|
||||||
|
.reveal li {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.reveal ul li::marker { color: var(--carbon-blue-40); }
|
||||||
|
.reveal ol li::marker { color: var(--carbon-blue-40); font-weight: 600; }
|
||||||
|
|
||||||
|
/* ---- Glow effects for emphasis ---- */
|
||||||
|
.reveal .glow-blue {
|
||||||
|
text-shadow: 0 0 40px rgba(120,169,255,0.4), 0 0 80px rgba(120,169,255,0.15);
|
||||||
|
color: var(--carbon-blue-40);
|
||||||
|
}
|
||||||
|
.reveal .glow-red {
|
||||||
|
text-shadow: 0 0 40px rgba(255,131,137,0.4), 0 0 80px rgba(255,131,137,0.15);
|
||||||
|
color: var(--carbon-red-40);
|
||||||
|
}
|
||||||
|
.reveal .glow-green {
|
||||||
|
text-shadow: 0 0 40px rgba(66,190,101,0.4), 0 0 80px rgba(66,190,101,0.15);
|
||||||
|
color: var(--carbon-green-40);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Badges: Carbon tag style ---- */
|
||||||
|
.reveal .badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.15em 0.7em;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
.reveal .badge-blue { background: rgba(120,169,255,0.2); color: var(--carbon-blue-40); }
|
||||||
|
.reveal .badge-red { background: rgba(255,131,137,0.2); color: var(--carbon-red-40); }
|
||||||
|
.reveal .badge-green { background: rgba(66,190,101,0.2); color: var(--carbon-green-40); }
|
||||||
|
.reveal .badge-yellow { background: rgba(241,194,27,0.2); color: var(--carbon-yellow-30); }
|
||||||
|
.reveal .badge-purple { background: rgba(190,149,255,0.2); color: var(--carbon-purple-40); }
|
||||||
|
|
||||||
|
/* ---- HR ---- */
|
||||||
|
.reveal hr {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--carbon-gray-70);
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Progress bar ---- */
|
||||||
|
.reveal .progress span { background: var(--carbon-blue-60); }
|
||||||
|
|
||||||
|
/* ---- Auto-animate transitions ---- */
|
||||||
|
.reveal [data-auto-animate] .hex-display,
|
||||||
|
.reveal [data-auto-animate] .diagram,
|
||||||
|
.reveal [data-auto-animate] pre {
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Slide number ---- */
|
||||||
|
.reveal .slide-number {
|
||||||
|
font-family: var(--r-code-font);
|
||||||
|
font-size: 0.5em;
|
||||||
|
color: var(--carbon-gray-60);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="reveal">
|
||||||
|
<div class="slides">
|
||||||
|
<section
|
||||||
|
data-markdown="slides.md"
|
||||||
|
data-separator="^---$"
|
||||||
|
data-separator-vertical="^--$"
|
||||||
|
data-separator-notes="^Note:"
|
||||||
|
data-charset="utf-8">
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/markdown/markdown.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/notes/notes.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/highlight.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/zoom/zoom.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/reveal.js-mermaid-plugin@11.15.0/plugin/mermaid/mermaid.js"></script>
|
||||||
|
<script>
|
||||||
|
Reveal.initialize({
|
||||||
|
mermaid: {
|
||||||
|
theme: 'dark',
|
||||||
|
themeVariables: {
|
||||||
|
darkMode: true,
|
||||||
|
background: '#2f2f2f',
|
||||||
|
primaryColor: '#393939',
|
||||||
|
primaryTextColor: '#c6c6c6',
|
||||||
|
primaryBorderColor: '#525252',
|
||||||
|
lineColor: '#78a9ff',
|
||||||
|
secondaryColor: '#262626',
|
||||||
|
tertiaryColor: '#161616',
|
||||||
|
fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hash: true,
|
||||||
|
slideNumber: 'c/t',
|
||||||
|
showSlideNumber: 'speaker',
|
||||||
|
transition: 'fade',
|
||||||
|
transitionSpeed: 'default',
|
||||||
|
backgroundTransition: 'fade',
|
||||||
|
center: true,
|
||||||
|
width: 1280,
|
||||||
|
height: 720,
|
||||||
|
margin: 0.08,
|
||||||
|
autoAnimateEasing: 'ease-in-out',
|
||||||
|
autoAnimateDuration: 0.8,
|
||||||
|
autoAnimateUnmatched: true,
|
||||||
|
zoomKey: 'alt',
|
||||||
|
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMermaid],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,923 @@
|
|||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 1: THE PROBLEM (mystery opening) -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf 'Dvořák' | wc -c
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="mystery-code" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Walk on stage, put terminal on screen, no output yet. Pause 3-4 seconds. Ask: "What do you think this prints?"
|
||||||
|
|
||||||
|
- **wc** = word count; **-c** = count bytes (not characters)
|
||||||
|
- Dvořák = Czech composer surname, pronounced "DVOR-zhahk"
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf 'Dvořák' | wc -c
|
||||||
|
8
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="mystery-code" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Reveal the 8. Pause. Dvořák has 6 visible letters — why 8? Don't explain yet.
|
||||||
|
|
||||||
|
- wc -c counts bytes, not characters — this is POSIX behavior, not a bug
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf 'Dvořák' | wc -c
|
||||||
|
8
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="mystery-code" -->
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
How many people think this is **wrong**?
|
||||||
|
<!-- .element: class="medium" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Ask the question. Wait 5 seconds. Let hands go up. Do NOT answer yet.
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf 'Dvořák' | wc -c
|
||||||
|
8
|
||||||
|
|
||||||
|
$ python3 -c "print(len('Dvořák'))"
|
||||||
|
6
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="mystery-code" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
Two different answers for the same string. Let the confusion build.
|
||||||
|
|
||||||
|
- Python 3 len() counts Unicode code points, not bytes
|
||||||
|
- *Exception:* Python 2 len() counted bytes — this changed in 2→3
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf '😀' | wc -c
|
||||||
|
4
|
||||||
|
|
||||||
|
$ python3 -c "print(len('😀'))"
|
||||||
|
1
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="mystery-code" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
An emoji: 4 bytes vs 1 character.
|
||||||
|
|
||||||
|
- 😀 = U+1F600 "Grinning Face." Needs 4 bytes in UTF-8 (F0 9F 98 80) because it's above the **BMP** (Basic Multilingual Plane, U+0000–U+FFFF)
|
||||||
|
- *Exception:* On macOS, `echo` appends a newline — use `printf` to avoid off-by-one
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
Which one is **correct**?
|
||||||
|
<!-- .element: class="big" -->
|
||||||
|
|
||||||
|
All of them.
|
||||||
|
<!-- .element: class="fragment zoom-in glow-blue big" -->
|
||||||
|
|
||||||
|
Understanding why is basically the entire talk.
|
||||||
|
<!-- .element: class="fragment fade-up small dim" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Pause before "All of them." Then: *"They're counting different things. wc counts bytes. Python counts code points. Both correct."*
|
||||||
|
|
||||||
|
**Key thesis:** bytes ≠ characters ≠ code points
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 2: INTRODUCTION -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
|
||||||
|
|
||||||
|
## Lost in Transliteration
|
||||||
|
|
||||||
|
Why `strlen("Dvořák")` Returns **8**
|
||||||
|
<!-- .element: class="medium" style="opacity: 0.9" -->
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
Avinal Kumar · glibc contributor
|
||||||
|
<!-- .element: style="font-weight: 500" -->
|
||||||
|
|
||||||
|
<span class="badge badge-blue">DevConf.CZ 2026</span>
|
||||||
|
<!-- .element: class="small dim" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Brief intro, under 30 seconds:
|
||||||
|
*"I'm Avinal. I contribute to glibc — the GNU C Library. I got into character encodings through an iconv bug at the glibc workshop here at DevConf. Today I'll take you through that journey."*
|
||||||
|
|
||||||
|
- **glibc** = GNU C Library — the standard C library on most Linux distros
|
||||||
|
- **iconv** = POSIX API for converting text between character encodings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
### Today we'll answer
|
||||||
|
|
||||||
|
1. Why does `strlen("Dvořák")` return 8?
|
||||||
|
2. Why does Unicode exist?
|
||||||
|
3. How does the C library handle text?
|
||||||
|
4. How does `iconv` convert between encodings?
|
||||||
|
5. Does any of this still matter in 2026?
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Read out loud. Give the audience a roadmap. Don't linger.
|
||||||
|
|
||||||
|
- **strlen** = "string length" — counts bytes before the null terminator, NOT characters
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
|
||||||
|
|
||||||
|
<span class="glow-blue big">There is no such thing as plain text.</span>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
If you remember one thing from this talk, remember that sentence.
|
||||||
|
<!-- .element: class="fragment fade-up small dim" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Say this slowly. Pause. *"If you remember one thing, remember that sentence."*
|
||||||
|
|
||||||
|
- "Plain text" implies no encoding — but every byte sequence *has* an encoding. If you don't know it, you're guessing. Wrong guess = **mojibake** (文字化け, Japanese for garbled text, pronounced "mo-ji-ba-keh")
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 3: HISTORY -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">How we ended up with this mess</p>
|
||||||
|
|
||||||
|
### ASCII: The 7-bit world
|
||||||
|
|
||||||
|
<div class="two-col">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
- 128 characters (0–127)
|
||||||
|
- 7 bits per character
|
||||||
|
- English letters, digits, punctuation
|
||||||
|
- Bit 8 was "spare"
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
```text
|
||||||
|
0x41 = A
|
||||||
|
0x61 = a
|
||||||
|
0x30 = 0
|
||||||
|
0x20 = (space)
|
||||||
|
0x0A = (newline)
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
*"And all was good — if you spoke English."*
|
||||||
|
<!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **ASCII** = American Standard Code for Information Interchange (1963)
|
||||||
|
- 7 bits = 128 values. The 8th bit was for parity checking on noisy telegraph lines
|
||||||
|
- Only covers English — no accented chars, no Cyrillic, no CJK, no Arabic
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">How we ended up with this mess</p>
|
||||||
|
|
||||||
|
### Code Pages: Everyone fills bit 8 differently
|
||||||
|
|
||||||
|
If I send byte `0xE9` from Paris to Moscow, what character arrives?
|
||||||
|
<!-- .element: class="medium" -->
|
||||||
|
|
||||||
|
| Byte | CP-1252 (Western) | CP-866 (Russian) | CP-862 (Hebrew) |
|
||||||
|
|------|-------------------|-------------------|------------------|
|
||||||
|
| `0xE9` | é | щ | ט |
|
||||||
|
| `0xC4` | Ä | ─ | ד |
|
||||||
|
| `0xF1` | ñ | ё | ס |
|
||||||
|
|
||||||
|
<!-- .element: class="fragment fade-in" -->
|
||||||
|
|
||||||
|
CJK needed **thousands** — multi-byte encodings (Shift-JIS, EUC-KR, GB2312) where you can't even move backward in a string.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Ask *"If I send byte 0xE9 from Paris to Moscow, what character arrives?"* before revealing the table.
|
||||||
|
|
||||||
|
- **CP** = Code Page. CP-1252 = Windows Western. CP-866 = DOS Russian. CP-862 = DOS Hebrew
|
||||||
|
- Same byte, different characters — the bytes are correct, the *interpretation* is wrong
|
||||||
|
- **CJK** = Chinese, Japanese, Korean
|
||||||
|
- **Shift-JIS** = Shift Japanese Industrial Standards. **EUC-KR** = Extended Unix Code for Korean. **GB2312** = Chinese National Standard
|
||||||
|
- *Exception:* Multi-byte encodings have a "forward-only" problem — you can't tell if a byte is byte 1 or byte 2 of a character
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">How we ended up with this mess</p>
|
||||||
|
|
||||||
|
### Unicode: One number per character
|
||||||
|
|
||||||
|
```text
|
||||||
|
U+0041 = A U+00E9 = é U+010D = č
|
||||||
|
U+0639 = ع U+4E16 = 世 U+1F600 = 😀
|
||||||
|
```
|
||||||
|
|
||||||
|
- Code points are **abstract numbers**, not bytes <!-- .element: class="fragment fade-up" -->
|
||||||
|
- <span class="red">Not</span> "16-bit characters" — that's the myth <!-- .element: class="fragment fade-up" -->
|
||||||
|
- 154,998 characters across 168 scripts <!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
Unicode separated the *idea* of a character from how it's stored.
|
||||||
|
<!-- .element: class="fragment zoom-in accent" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **Unicode** = Universal Coded Character Set (1991, Unicode Consortium)
|
||||||
|
- Code points are abstract numbers — how you *store* them is a separate question (that's what encodings answer)
|
||||||
|
- *Exception:* "Unicode is 16-bit" myth comes from Unicode 1.0 (1991) which only planned 65,536 chars. Unicode 2.0 (1996) expanded beyond 16 bits. Java and Windows adopted UTF-16 before that expansion, and are now stuck with it
|
||||||
|
- **BMP** = Basic Multilingual Plane (U+0000–U+FFFF). Characters above it (emoji, rare scripts) are in supplementary planes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">How we ended up with this mess</p>
|
||||||
|
|
||||||
|
### Encodings: Serialization formats
|
||||||
|
|
||||||
|
<div class="three-col">
|
||||||
|
<div class="card fragment fade-up" data-fragment-index="1">
|
||||||
|
<h4 class="glow-blue">UTF-8</h4>
|
||||||
|
|
||||||
|
- 1–4 bytes
|
||||||
|
- ASCII-compatible
|
||||||
|
- <span class="badge badge-blue">98% of the web</span>
|
||||||
|
</div>
|
||||||
|
<div class="card fragment fade-up" data-fragment-index="2">
|
||||||
|
<h4 class="yellow">UTF-16</h4>
|
||||||
|
|
||||||
|
- 2 or 4 bytes
|
||||||
|
- Needs BOM
|
||||||
|
- <span class="badge badge-yellow">Windows, Java</span>
|
||||||
|
</div>
|
||||||
|
<div class="card fragment fade-up" data-fragment-index="3">
|
||||||
|
<h4 class="green">UTF-32</h4>
|
||||||
|
|
||||||
|
- Fixed 4 bytes
|
||||||
|
- Simple but wasteful
|
||||||
|
- <span class="badge badge-green">glibc internal</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **UTF** = Unicode Transformation Format
|
||||||
|
- **UTF-8:** Designed 1992 by Ken Thompson & Rob Pike. ASCII bytes are identical — this is why it won. 98.2% of websites (W3Techs, 2024)
|
||||||
|
- **UTF-16:** Uses surrogate pairs above U+FFFF. **BOM** = Byte Order Mark (U+FEFF) — indicates endianness
|
||||||
|
- **UTF-32:** Also called **UCS-4** (Universal Coded Character Set, 4-byte). "hello" = 20 bytes instead of 5
|
||||||
|
- *Exception:* UTF-32 and UCS-4 are technically from different standards (ISO 10646 vs Unicode), but identical in practice
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
<p class="slide-title">How we ended up with this mess</p>
|
||||||
|
|
||||||
|
### Encodings: Serialization formats
|
||||||
|
|
||||||
|
<div class="hex-display" data-id="encoding-hex">
|
||||||
|
"Dvořák" in UTF-8: 44 76 6F <span class="red" style="font-weight:700;">C5 99</span> C3 A1 6B <span class="badge badge-blue">8 bytes</span><br />
|
||||||
|
"Dvořák" in UTF-32: 00000044 00000076 0000006F <span class="red" style="font-weight:700;">00000159</span> 000000E1 0000006B <span class="badge badge-green">24 bytes</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="glow-blue big">There is no such thing as plain text.</span>
|
||||||
|
<!-- .element: class="fragment zoom-in" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
UTF-8 breakdown:
|
||||||
|
- D, v, o, k = 1 byte each (ASCII range)
|
||||||
|
- ř = C5 99 (2 bytes, U+0159)
|
||||||
|
- á = C3 A1 (2 bytes, U+00E1)
|
||||||
|
- Total: 4×1 + 2×2 = **8 bytes** for 6 characters
|
||||||
|
|
||||||
|
UTF-32: every char = 4 bytes → 6×4 = **24 bytes**. Same string, 3× the size.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 4: INTO C — real examples, not code -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
|
||||||
|
|
||||||
|
<span class="badge badge-blue" style="font-size: 0.6em;">Part 2</span>
|
||||||
|
|
||||||
|
## Text in C: What actually happens
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** *"Now we understand WHY bytes and characters differ. Let's see how C deals with it."*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### C has two ways to see a string
|
||||||
|
|
||||||
|
<div class="two-col">
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
#### `char` — bytes
|
||||||
|
- 1 byte per element, no encoding info
|
||||||
|
- `strlen("Dvořák")` → **8**
|
||||||
|
- `strlen("😀")` → **4**
|
||||||
|
- Indexing gives you bytes, not characters
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
#### `wchar_t` — code points
|
||||||
|
- 4 bytes on Linux, <span class="red">2 on Windows</span>
|
||||||
|
- `wcslen(L"Dvořák")` → **6**
|
||||||
|
- `wcslen(L"😀")` → **1**
|
||||||
|
- Indexing gives you characters
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
`mbrtowc()` bridges between them. `setlocale()` tells it which encoding to expect.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **wchar_t** = "wide character type." Linux: 4 bytes (UCS-4). Windows: 2 bytes (UTF-16)
|
||||||
|
- **wcslen** = "wide character string length"
|
||||||
|
- **L"..."** prefix = wide string literal
|
||||||
|
- **mbrtowc** = "multibyte restartable to wide character" — converts one multibyte char to one wchar_t
|
||||||
|
- **setlocale** with LC_CTYPE tells mbrtowc the encoding. Without it → "C" locale = ASCII only
|
||||||
|
- *Exception:* On Windows, wcslen(L"😀") returns **2** (surrogate pair), not 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### What does "Dvořák" look like in memory?
|
||||||
|
|
||||||
|
```text
|
||||||
|
Character: D v o ř á k
|
||||||
|
UTF-8 hex: 44 76 6F C5 99 C3 A1 6B
|
||||||
|
Bytes: 1 1 1 2 2 1 = 8 bytes
|
||||||
|
Code points: 1 1 1 1 1 1 = 6 characters
|
||||||
|
```
|
||||||
|
|
||||||
|
`strlen` counts the top row. `wcslen` counts the bottom row.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Now you know why `strlen("Dvořák")` returns 8.
|
||||||
|
<!-- .element: class="fragment fade-up accent" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Point at the diagram: *"strlen counts bytes: 1+1+1+2+2+1 = 8. wcslen counts characters: always 1 each = 6. Both correct."*
|
||||||
|
|
||||||
|
This is the answer to the opening mystery.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### `iconv` — converting between encodings
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII
|
||||||
|
iconv: illegal input sequence at position 3
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="iconv-demo" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **iconv** = both a C API (iconv_open/iconv/iconv_close in `<iconv.h>`) and a CLI tool
|
||||||
|
- **-f** = from, **-t** = to
|
||||||
|
- Position 3 = 4th byte (0-indexed) = where ř starts. ASCII only has 0–127; C5 = 197 → fails
|
||||||
|
- **EILSEQ** = "illegal sequence" errno value
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### `iconv` — converting between encodings
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII
|
||||||
|
iconv: illegal input sequence at position 3
|
||||||
|
|
||||||
|
$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII//TRANSLIT
|
||||||
|
Dvorak
|
||||||
|
|
||||||
|
$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII//IGNORE
|
||||||
|
Dvok
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="iconv-demo" -->
|
||||||
|
|
||||||
|
- **`//TRANSLIT`** — approximate: ř→r, á→a
|
||||||
|
- **`//IGNORE`** — drop what doesn't fit
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **//TRANSLIT** = transliteration. Appended to target encoding. Finds closest match: ř→r, á→a, ö→o, ñ→n
|
||||||
|
- **//IGNORE** = silently drop unconvertible chars. Notice "Dvok" — both ř AND á dropped
|
||||||
|
- *Exception:* //TRANSLIT is glibc-specific, not POSIX. musl libc (Alpine Linux) doesn't support it
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### Real encoding pairs from across the world
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ echo '東京' | iconv -f UTF-8 -t SHIFT_JIS | hexdump -C
|
||||||
|
00000000 93 8c 8b 9e 0a |.....|
|
||||||
|
|
||||||
|
$ echo 'こんにちは世界' | iconv -f UTF-8 -t EUC-JP | hexdump -C
|
||||||
|
00000000 a4 b3 a4 f3 a4 cb a4 c1 a4 cf c0 a4 b3 a6 0a |...............|
|
||||||
|
|
||||||
|
$ echo 'Ελληνικά κείμενο' | iconv -f UTF-8 -t ISO-8859-7 | hexdump -C
|
||||||
|
00000000 c5 eb eb e7 ed e9 ea dc 20 ea e5 df ec e5 ed ef |........ .......|
|
||||||
|
```
|
||||||
|
|
||||||
|
Same characters, completely different bytes — depending on the encoding.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- 東京 = Tōkyō (Tokyo)
|
||||||
|
- こんにちは世界 = "Konnichiwa Sekai" = "Hello World"
|
||||||
|
- Ελληνικά κείμενο = "Elliniká keímeno" = "Greek text"
|
||||||
|
- **hexdump -C** = canonical hex+ASCII dump. Non-ASCII shows as dots
|
||||||
|
- Same text in Shift-JIS vs EUC-JP → completely different bytes. Without knowing the encoding, unreadable
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### When conversion fails
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ echo 'مرحبا' | iconv -f UTF-8 -t ISO-8859-1
|
||||||
|
iconv: illegal input sequence at position 0
|
||||||
|
|
||||||
|
$ echo 'Résumé' | iconv -f UTF-8 -t CP866
|
||||||
|
iconv: illegal input sequence at position 1
|
||||||
|
|
||||||
|
$ echo -ne '\xEF\xBB\xBFhello' | hexdump -C
|
||||||
|
00000000 ef bb bf 68 65 6c 6c 6f |...hello|
|
||||||
|
|
||||||
|
$ echo -ne '\xEF\xBB\xBFhello' | iconv -f UTF-8 -t ASCII//TRANSLIT
|
||||||
|
hello
|
||||||
|
```
|
||||||
|
|
||||||
|
- Arabic → Latin-1: impossible — the encoding can't hold it
|
||||||
|
- French Résumé → Russian CP866: `é` doesn't exist in that code page
|
||||||
|
- BOM: 3 invisible bytes at the start — your first "character" is garbage
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- مرحبا = "marhaba" = "hello" in Arabic
|
||||||
|
- **ISO-8859-1** = Latin-1. Zero Arabic chars → fails at position 0
|
||||||
|
- **CP866** = DOS Cyrillic. é doesn't map → fails at position 1 (R is fine, é isn't)
|
||||||
|
- **BOM** = Byte Order Mark (U+FEFF, encoded EF BB BF in UTF-8). Windows Notepad adds it. Breaks JSON parsers, shell shebangs, and string comparisons
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### Longer text, bigger difference
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ printf 'Příliš žluťoučký kůň úpěl ďábelské ódy' | wc -c
|
||||||
|
53
|
||||||
|
|
||||||
|
$ python3 -c "print(len('Příliš žluťoučký kůň úpěl ďábelské ódy'))"
|
||||||
|
38
|
||||||
|
|
||||||
|
$ echo 'Příliš žluťoučký kůň úpěl ďábelské ódy' \
|
||||||
|
| iconv -f UTF-8 -t ASCII//TRANSLIT
|
||||||
|
Prilis zlutoucky kun upel dabelske ody
|
||||||
|
```
|
||||||
|
|
||||||
|
A Czech pangram: **38 characters**, **53 bytes** — a 40% difference.
|
||||||
|
<!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
`//TRANSLIT` strips all diacritics and produces valid ASCII.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **Translation:** "Too yellow a horse groaned devilish odes" — a Czech pangram (like "The quick brown fox" but for testing diacritics)
|
||||||
|
- 15 extra bytes from accented characters: each adds 1 byte in UTF-8
|
||||||
|
- Czech diacritics: **háček** (ˇ) = caron (ř, š, č, ž, ň, ď, ť, ě), **čárka** (´) = acute (á, é, í, ó, ú), **kroužek** (°) = ring (ů)
|
||||||
|
- **Do:** DevConf is in Brno — the audience will recognize this pangram
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Text in C</p>
|
||||||
|
|
||||||
|
### How many encodings?
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ iconv -l | wc -l
|
||||||
|
1180
|
||||||
|
|
||||||
|
$ find /usr/lib64/gconv -name '*.so' | wc -l
|
||||||
|
253
|
||||||
|
```
|
||||||
|
|
||||||
|
**1180** encoding names served by **253** shared libraries.
|
||||||
|
<!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
How does glibc manage this without writing thousands of converters?
|
||||||
|
<!-- .element: class="fragment fade-up accent" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** LIVE DEMO if possible.
|
||||||
|
|
||||||
|
- **iconv -l** = list all encodings. 1180 includes aliases (SHIFT-JIS, SJIS, MS_KANJI = same encoding)
|
||||||
|
- **/usr/lib64/gconv/** = where glibc stores converter .so files (Fedora/RHEL). Debian: /usr/lib/x86_64-linux-gnu/gconv/
|
||||||
|
- **.so** = shared object (dynamically loaded library)
|
||||||
|
- 1180 names, 253 plugins — far fewer than the 39,800 needed for N×N
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 5: HOW IT WORKS INSIDE -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
|
||||||
|
|
||||||
|
<span class="badge badge-blue" style="font-size: 0.6em;">Part 3</span>
|
||||||
|
|
||||||
|
## Inside glibc's iconv
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** *"We've seen what iconv does from the outside. Now let's look under the hood."*
|
||||||
|
|
||||||
|
- **gconv** = glibc's internal conversion framework ("g" = GNU, "conv" = conversion)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The naive approach: N×N converters
|
||||||
|
|
||||||
|
Suppose I support 200 encodings. How many converters do I need?
|
||||||
|
<!-- .element: class="medium" -->
|
||||||
|
|
||||||
|
```text
|
||||||
|
Shift-JIS → UTF-8 UTF-8 → Shift-JIS
|
||||||
|
Shift-JIS → EUC-KR EUC-KR → Shift-JIS
|
||||||
|
UTF-8 → EUC-KR EUC-KR → UTF-8
|
||||||
|
...
|
||||||
|
```
|
||||||
|
<!-- .element: class="fragment fade-in" -->
|
||||||
|
|
||||||
|
5 encodings = 20 converters. 200 encodings?
|
||||||
|
<!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
200 × 199 = <span class="red">39,800 converters</span>. That's not going to work.
|
||||||
|
<!-- .element: class="fragment zoom-in" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Ask *"How many converters do I need?"* before revealing. Let them guess.
|
||||||
|
|
||||||
|
- Formula: N × (N-1) for directed pairs
|
||||||
|
- Nobody will write 39,800 converters
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The smart approach: one universal pivot
|
||||||
|
|
||||||
|
What if every encoding just learned to convert to **one common format**?
|
||||||
|
<!-- .element: class="medium" -->
|
||||||
|
|
||||||
|
```text
|
||||||
|
Shift-JIS → ??? → UTF-8
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="hub-text" class="fragment fade-in" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
Hub-and-spoke architecture — same principle as airline routing through hub airports.
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The smart approach: one universal pivot
|
||||||
|
|
||||||
|
glibc's gconv framework uses an internal **UCS-4 based representation** as the pivot.
|
||||||
|
|
||||||
|
```text
|
||||||
|
Shift-JIS → UCS-4 → UTF-8
|
||||||
|
```
|
||||||
|
<!-- .element: data-id="hub-text" -->
|
||||||
|
|
||||||
|
Now you need just **2 converters per encoding** (to UCS-4 and from UCS-4).
|
||||||
|
<!-- .element: class="fragment fade-up" -->
|
||||||
|
|
||||||
|
200 encodings × 2 = <span class="green">400 converters</span> instead of 39,800.
|
||||||
|
<!-- .element: class="fragment zoom-in" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- **UCS-4** = Universal Coded Character Set, 4-byte form (ISO 10646). Essentially UTF-32
|
||||||
|
- glibc calls it **INTERNAL** in gconv-modules config
|
||||||
|
- 2 converters per encoding → 400 total. 99% reduction
|
||||||
|
- *Exception:* glibc says "UCS-4 *based*" — the internal representation has nuances around stateful encodings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The lookup table: `gconv-modules`
|
||||||
|
|
||||||
|
<pre><code class="language-text" data-line-numbers data-ln-start-from="47"># iconvdata/gconv-modules
|
||||||
|
# from to module cost
|
||||||
|
module ISO-8859-1// INTERNAL ISO8859-1 1
|
||||||
|
module INTERNAL ISO-8859-1// ISO8859-1 1</code></pre>
|
||||||
|
|
||||||
|
<pre><code class="language-text" data-line-numbers data-ln-start-from="415"># iconvdata/gconv-modules-extra.conf
|
||||||
|
module SJIS// INTERNAL SJIS 1
|
||||||
|
module INTERNAL SJIS// SJIS 1</code></pre>
|
||||||
|
|
||||||
|
`INTERNAL` = the UCS-4 pivot
|
||||||
|
<!-- .element: class="fragment fade-up accent" -->
|
||||||
|
|
||||||
|
Each line maps an encoding to a `.so` plugin. `iconv_open` reads this file, loads the right plugins, and chains them.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
These are actual files from the glibc source tree.
|
||||||
|
|
||||||
|
- Format: `module FROM// TO MODULE_NAME COST`
|
||||||
|
- **INTERNAL** = glibc's name for UCS-4
|
||||||
|
- **Cost** = routing weight when multiple paths exist (lower = preferred)
|
||||||
|
- Each encoding has exactly 2 lines — one each direction. Hub-and-spoke in practice
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The conversion pipeline
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
<pre>
|
||||||
|
flowchart TB
|
||||||
|
A["Shift-JIS bytes"] --> B["SJIS.so\n(gconv module)"]
|
||||||
|
B --> C["UCS-4\n(internal pivot)"]
|
||||||
|
C --> D["UTF-8 converter\n(built-in)"]
|
||||||
|
D --> E["UTF-8 bytes"]
|
||||||
|
style C fill:#0f62fe,stroke:#78a9ff,color:#fff
|
||||||
|
style B fill:#393939,stroke:#78a9ff,color:#c6c6c6
|
||||||
|
style D fill:#393939,stroke:#78a9ff,color:#c6c6c6
|
||||||
|
style A fill:#262626,stroke:#525252,color:#f1c21b
|
||||||
|
style E fill:#262626,stroke:#525252,color:#42be65
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Adding a new encoding = writing **one** `.so` plugin.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** THIS IS THE MONEY SLIDE. Spend time here. Point at each box:
|
||||||
|
1. *"Shift-JIS bytes come in"*
|
||||||
|
2. *"SJIS.so converts to UCS-4"*
|
||||||
|
3. *"UTF-8 converter turns UCS-4 into UTF-8"*
|
||||||
|
4. *"UTF-8 bytes come out"*
|
||||||
|
|
||||||
|
Adding a new encoding = one .so that converts to/from UCS-4. People will photograph this.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Inside glibc</p>
|
||||||
|
|
||||||
|
### The iconv flow
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
<pre>
|
||||||
|
sequenceDiagram
|
||||||
|
participant App as Your Code
|
||||||
|
participant glibc as glibc internals
|
||||||
|
App->>glibc: iconv_open("UTF-8", "SJIS")
|
||||||
|
Note right of glibc: look up gconv-modules
|
||||||
|
Note right of glibc: load SJIS.so + UTF-8
|
||||||
|
Note right of glibc: build step chain
|
||||||
|
glibc-->>App: return descriptor
|
||||||
|
App->>glibc: iconv(cd, &in, ...)
|
||||||
|
Note right of glibc: step[0]: SJIS → UCS-4
|
||||||
|
Note right of glibc: step[1]: UCS-4 → UTF-8
|
||||||
|
glibc-->>App: advance pointers
|
||||||
|
App->>glibc: iconv_close(cd)
|
||||||
|
Note right of glibc: free chain, unload modules
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Three calls. That's the entire API.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
The API in three calls:
|
||||||
|
1. **iconv_open** → returns descriptor (pointer to gconv_info struct with step chain)
|
||||||
|
2. **iconv** → walks the chain. Both in/out pointers advance. Errors: **EILSEQ** (illegal sequence), **E2BIG** (output buffer full — flush and retry, not a real error), **EINVAL** (incomplete sequence)
|
||||||
|
3. **iconv_close** → free chain, unload modules
|
||||||
|
|
||||||
|
- *Highlight:* E2BIG is the #1 mistake — people call iconv once and assume it's done
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 6: RELEVANCE TODAY -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
|
||||||
|
|
||||||
|
<span class="badge badge-red" style="font-size: 0.6em;">Part 4</span>
|
||||||
|
|
||||||
|
## Does this still matter?
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** *"Modern languages have Unicode strings by default. So why should anyone care about iconv in 2026?"*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Relevance today</p>
|
||||||
|
|
||||||
|
### How modern languages handle encoding
|
||||||
|
|
||||||
|
| Language | Strings are... | Encoding conversion |
|
||||||
|
|----------|----------------|---------------------|
|
||||||
|
| **Python 3** | Unicode internally | Built-in codecs |
|
||||||
|
| **Go** | UTF-8 by definition | `golang.org/x/text` |
|
||||||
|
| **Rust** | Always valid UTF-8 | `encoding_rs` crate |
|
||||||
|
| **Java** | UTF-16 internally | `java.nio.charset` |
|
||||||
|
| **C/C++** | Just bytes — no encoding | **`iconv`** |
|
||||||
|
|
||||||
|
Modern languages solved this by making strings Unicode-native. C didn't — and can't, because it would break 50 years of code.
|
||||||
|
<!-- .element: class="fragment fade-up small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
- C can't change because `char = 1 byte` is baked into the language spec and **ABI** (Application Binary Interface)
|
||||||
|
- Even modern languages need encoding conversion at **I/O boundaries** — files, sockets, C library calls via **FFI** (Foreign Function Interface)
|
||||||
|
- Python's codecs, Go's x/text, Rust's encoding_rs all exist because the outside world isn't always UTF-8
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
|
||||||
|
|
||||||
|
<p class="slide-title">Relevance today</p>
|
||||||
|
|
||||||
|
### Encoding bugs are alive and well
|
||||||
|
|
||||||
|
<div class="two-col">
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
#### The Turkish İ problem
|
||||||
|
|
||||||
|
| Locale | `toupper('i')` |
|
||||||
|
|--------|----------------|
|
||||||
|
| en_US | I |
|
||||||
|
| tr_TR | <span class="red">İ</span> (dotted!) |
|
||||||
|
|
||||||
|
Tests pass in English, break in Turkish.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
#### `//IGNORE` inconsistency
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ echo 'héllo' | iconv \
|
||||||
|
-f UTF-8 -t ASCII//IGNORE
|
||||||
|
```
|
||||||
|
|
||||||
|
Some modules skip the bad byte. Some stop with an error.
|
||||||
|
**Same flag, different behavior.**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
Every time a language reads a file, parses a socket, or calls a C library — encoding conversion still happens. These bugs still bite.
|
||||||
|
<!-- .element: class="fragment fade-up accent small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Turkish İ:**
|
||||||
|
- Turkish has 4 i's: i, İ, ı, I. toupper('i') → İ (U+0130), not I
|
||||||
|
- Any case-insensitive comparison using toupper/tolower is locale-dependent
|
||||||
|
|
||||||
|
**//IGNORE:**
|
||||||
|
- Behavior depends on *which* gconv module runs — inconsistent across encodings
|
||||||
|
- This is a real unfixed glibc bug. This is what got me into the codebase
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 7: GLIBC WORKSHOP -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
|
||||||
|
|
||||||
|
### glibc Development Workshop — Third Edition
|
||||||
|
|
||||||
|
Led by **Arjun Shankar** (Red Hat, glibc developer)
|
||||||
|
|
||||||
|
<span class="accent medium">Tomorrow, Friday June 19 · 10:15 AM · Room A218</span>
|
||||||
|
|
||||||
|
Pick a bug, get a cheat sheet, ship a patch.
|
||||||
|
|
||||||
|
6 patches in 2024 · 15+ in 2025 · **yours in 2026?**
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Tell the personal story:
|
||||||
|
*"Two years ago I walked into this workshop at DevConf. Arjun gave me a small iconv task. I got curious, fell down the rabbit hole, and that became this talk. That one task turned into 14 patches in glibc."*
|
||||||
|
|
||||||
|
- **Arjun Shankar** = Red Hat engineer, glibc developer. Runs this workshop yearly at DevConf.CZ
|
||||||
|
- Format: show up, get a cheat sheet with a small bug + pointers, experienced contributors help you submit
|
||||||
|
- Room A218, capacity 20. First come, first served
|
||||||
|
- *"If anything in this talk made you curious, room A218 tomorrow morning."*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
<!-- SECTION 8+9: REFERENCES + QUESTIONS -->
|
||||||
|
<!-- ===================================================== -->
|
||||||
|
|
||||||
|
<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
|
||||||
|
|
||||||
|
### Questions? · Resources
|
||||||
|
|
||||||
|
- **Joel Spolsky** — "The Absolute Minimum Every Software Developer Must Know About Unicode" <!-- .element: class="small" -->
|
||||||
|
- **GNU C Library Manual** — "Character Set Handling" chapter <!-- .element: class="small" -->
|
||||||
|
- **unicode.org** — the specification <!-- .element: class="small" -->
|
||||||
|
|
||||||
|
<span class="badge badge-blue">avinal.space</span> · <span class="badge badge-purple">@avinal</span>
|
||||||
|
|
||||||
|
Attendance at DevConf.CZ 2026 was supported by the **[GNU Toolchain Fund](https://my.fsf.org/civicrm/contribute/transact?reset=1&id=57)**, a part of the FSF's Working Together for Free Software Fund.
|
||||||
|
<!-- .element: class="small" -->
|
||||||
|
|
||||||
|
Note:
|
||||||
|
**Do:** Leave this up during Q&A.
|
||||||
|
|
||||||
|
- Joel Spolsky's article (2003) — the classic intro, entertaining
|
||||||
|
- glibc manual — authoritative API reference (sourceware.org/glibc/manual)
|
||||||
|
- **GNU Toolchain Fund** = part of the **FSF's** (Free Software Foundation) "Working Together for Free Software" fund
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
import fs from "fs";
|
|
||||||
import https from "https";
|
|
||||||
import http from "http";
|
|
||||||
import path from "path";
|
|
||||||
import { fileURLToPath } from "url";
|
|
||||||
|
|
||||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
||||||
const root = path.resolve(__dirname, "..");
|
|
||||||
const jsonPath = path.join(root, "src/data/bookmarks.json");
|
|
||||||
const imgDir = path.join(root, "public/images/bookmarks");
|
|
||||||
|
|
||||||
fs.mkdirSync(imgDir, { recursive: true });
|
|
||||||
|
|
||||||
function slugify(title) {
|
|
||||||
return title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
function httpGet(url, options = {}) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const proto = url.startsWith("https") ? https : http;
|
|
||||||
proto.get(url, options, resolve).on("error", reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function download(url, dest, redirects = 5) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (redirects <= 0) return reject(new Error("Too many redirects"));
|
|
||||||
const proto = url.startsWith("https") ? https : http;
|
|
||||||
proto
|
|
||||||
.get(url, { headers: { "User-Agent": "Mozilla/5.0" } }, (res) => {
|
|
||||||
if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
|
|
||||||
const next = new URL(res.headers.location, url).href;
|
|
||||||
download(next, dest, redirects - 1).then(resolve).catch(reject);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (res.statusCode !== 200) {
|
|
||||||
reject(new Error(`HTTP ${res.statusCode}`));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const ct = res.headers["content-type"] || "";
|
|
||||||
const ext = ct.includes("png") ? ".png" : ct.includes("webp") ? ".webp" : ".jpg";
|
|
||||||
const finalDest = dest + ext;
|
|
||||||
const ws = fs.createWriteStream(finalDest);
|
|
||||||
res.pipe(ws);
|
|
||||||
ws.on("finish", () => {
|
|
||||||
ws.close();
|
|
||||||
resolve("/images/bookmarks/" + path.basename(finalDest));
|
|
||||||
});
|
|
||||||
ws.on("error", reject);
|
|
||||||
})
|
|
||||||
.on("error", reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchPosterFromOMDB(title, year) {
|
|
||||||
const query = encodeURIComponent(title);
|
|
||||||
const url = `https://www.omdbapi.com/?t=${query}&y=${year}&apikey=trilogy`;
|
|
||||||
try {
|
|
||||||
const res = await httpGet(url);
|
|
||||||
let body = "";
|
|
||||||
for await (const chunk of res) body += chunk;
|
|
||||||
const data = JSON.parse(body);
|
|
||||||
if (data.Poster && data.Poster !== "N/A") return data.Poster;
|
|
||||||
} catch {}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function delay(ms) {
|
|
||||||
return new Promise((r) => setTimeout(r, ms));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
const data = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
|
|
||||||
let fetched = 0;
|
|
||||||
let skipped = 0;
|
|
||||||
let failed = 0;
|
|
||||||
|
|
||||||
for (const item of data) {
|
|
||||||
const slug = slugify(item.title);
|
|
||||||
const existing = fs.readdirSync(imgDir).find((f) => f.startsWith(slug + "."));
|
|
||||||
if (existing) {
|
|
||||||
item.image = "/images/bookmarks/" + existing;
|
|
||||||
skipped++;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.image && item.image.startsWith("/images/")) {
|
|
||||||
skipped++;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
let imageUrl = item.image;
|
|
||||||
if (!imageUrl || imageUrl.startsWith("http")) {
|
|
||||||
const omdbUrl = await fetchPosterFromOMDB(item.title, item.year);
|
|
||||||
if (omdbUrl) imageUrl = omdbUrl;
|
|
||||||
await delay(200);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!imageUrl) {
|
|
||||||
console.error(` SKIP ${item.title}: no image URL found`);
|
|
||||||
failed++;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const localPath = await download(imageUrl, path.join(imgDir, slug));
|
|
||||||
console.log(` OK ${item.title} -> ${localPath}`);
|
|
||||||
item.image = localPath;
|
|
||||||
fetched++;
|
|
||||||
} catch (e) {
|
|
||||||
const omdbUrl = await fetchPosterFromOMDB(item.title, item.year);
|
|
||||||
if (omdbUrl) {
|
|
||||||
try {
|
|
||||||
const localPath = await download(omdbUrl, path.join(imgDir, slug));
|
|
||||||
console.log(` OK ${item.title} -> ${localPath} (via OMDB fallback)`);
|
|
||||||
item.image = localPath;
|
|
||||||
fetched++;
|
|
||||||
continue;
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
console.error(` FAIL ${item.title}: ${e.message}`);
|
|
||||||
failed++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(jsonPath, JSON.stringify(data, null, 2) + "\n");
|
|
||||||
console.log(`\nDone. Fetched: ${fetched}, Skipped: ${skipped}, Failed: ${failed}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
main();
|
|
||||||
@@ -5,7 +5,6 @@ const navLinks: { href: string; label: string; external?: boolean }[] = [
|
|||||||
{ href: "/resume", label: "Resume" },
|
{ href: "/resume", label: "Resume" },
|
||||||
{ href: "/events", label: "Events" },
|
{ href: "/events", label: "Events" },
|
||||||
{ href: "/contributions", label: "Contributions" },
|
{ href: "/contributions", label: "Contributions" },
|
||||||
{ href: "/bookmarks", label: "Bookmarks" },
|
|
||||||
{ href: "/meeting", label: "Meet" },
|
{ href: "/meeting", label: "Meet" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
+2
-2
@@ -107,8 +107,8 @@ const theme: ThemeConfig = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
fonts: {
|
fonts: {
|
||||||
sans: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
|
sans: '"Iosevka Aile", system-ui, sans-serif',
|
||||||
mono: '"JetBrains Mono", "Fira Code", ui-monospace, monospace',
|
mono: '"Iosevka", ui-monospace, monospace',
|
||||||
},
|
},
|
||||||
|
|
||||||
colors: {
|
colors: {
|
||||||
|
|||||||
@@ -1,390 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"title": "The Pragmatic Programmer",
|
|
||||||
"author": "David Thomas, Andrew Hunt",
|
|
||||||
"type": "book",
|
|
||||||
"year": 2019,
|
|
||||||
"url": "https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer",
|
|
||||||
"image": "/images/bookmarks/the-pragmatic-programmer.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Designing Data-Intensive Applications",
|
|
||||||
"author": "Martin Kleppmann",
|
|
||||||
"type": "book",
|
|
||||||
"year": 2017,
|
|
||||||
"url": "https://www.goodreads.com/book/show/23463279-designing-data-intensive-applications",
|
|
||||||
"image": "/images/bookmarks/designing-data-intensive-applications.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Clean Code",
|
|
||||||
"author": "Robert C. Martin",
|
|
||||||
"type": "book",
|
|
||||||
"year": 2008,
|
|
||||||
"url": "https://www.goodreads.com/book/show/3735293-clean-code",
|
|
||||||
"image": "/images/bookmarks/clean-code.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Shawshank Redemption",
|
|
||||||
"author": "Frank Darabont",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1994,
|
|
||||||
"url": "https://www.imdb.com/title/tt0111161/",
|
|
||||||
"image": "/images/bookmarks/the-shawshank-redemption.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Schindler's List",
|
|
||||||
"author": "Steven Spielberg",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1993,
|
|
||||||
"url": "https://www.imdb.com/title/tt0108052/",
|
|
||||||
"image": "/images/bookmarks/schindlers-list.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Forrest Gump",
|
|
||||||
"author": "Robert Zemeckis",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1994,
|
|
||||||
"url": "https://www.imdb.com/title/tt0109830/",
|
|
||||||
"image": "/images/bookmarks/forrest-gump.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Green Mile",
|
|
||||||
"author": "Frank Darabont",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1999,
|
|
||||||
"url": "https://www.imdb.com/title/tt0120689/",
|
|
||||||
"image": "/images/bookmarks/the-green-mile.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Interstellar",
|
|
||||||
"author": "Christopher Nolan",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2014,
|
|
||||||
"url": "https://www.imdb.com/title/tt0816692/",
|
|
||||||
"image": "/images/bookmarks/interstellar.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Oppenheimer",
|
|
||||||
"author": "Christopher Nolan",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2023,
|
|
||||||
"url": "https://www.imdb.com/title/tt15398776/",
|
|
||||||
"image": "/images/bookmarks/oppenheimer.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Social Network",
|
|
||||||
"author": "David Fincher",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2010,
|
|
||||||
"url": "https://www.imdb.com/title/tt1285016/",
|
|
||||||
"image": "/images/bookmarks/the-social-network.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "A Beautiful Mind",
|
|
||||||
"author": "Ron Howard",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2001,
|
|
||||||
"url": "https://www.imdb.com/title/tt0268978/",
|
|
||||||
"image": "/images/bookmarks/a-beautiful-mind.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Truman Show",
|
|
||||||
"author": "Peter Weir",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1998,
|
|
||||||
"url": "https://www.imdb.com/title/tt0120382/",
|
|
||||||
"image": "/images/bookmarks/the-truman-show.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Grand Budapest Hotel",
|
|
||||||
"author": "Wes Anderson",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2014,
|
|
||||||
"url": "https://www.imdb.com/title/tt2278388/",
|
|
||||||
"image": "/images/bookmarks/the-grand-budapest-hotel.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Joker",
|
|
||||||
"author": "Todd Phillips",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2019,
|
|
||||||
"url": "https://www.imdb.com/title/tt7286456/",
|
|
||||||
"image": "/images/bookmarks/joker.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "WALL-E",
|
|
||||||
"author": "Andrew Stanton",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2008,
|
|
||||||
"url": "https://www.imdb.com/title/tt0910970/",
|
|
||||||
"image": "/images/bookmarks/wall-e.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Aviator",
|
|
||||||
"author": "Martin Scorsese",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2004,
|
|
||||||
"url": "https://www.imdb.com/title/tt0338751/",
|
|
||||||
"image": "/images/bookmarks/the-aviator.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Erin Brockovich",
|
|
||||||
"author": "Steven Soderbergh",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2000,
|
|
||||||
"url": "https://www.imdb.com/title/tt0195685/",
|
|
||||||
"image": "/images/bookmarks/erin-brockovich.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Green Book",
|
|
||||||
"author": "Peter Farrelly",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2018,
|
|
||||||
"url": "https://www.imdb.com/title/tt6966692/",
|
|
||||||
"image": "/images/bookmarks/green-book.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Hachi: A Dog's Tale",
|
|
||||||
"author": "Lasse Hallström",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2009,
|
|
||||||
"url": "https://www.imdb.com/title/tt1028532/",
|
|
||||||
"image": "/images/bookmarks/hachi-a-dog-s-tale.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Léon: The Professional",
|
|
||||||
"author": "Luc Besson",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1994,
|
|
||||||
"url": "https://www.imdb.com/title/tt0110413/",
|
|
||||||
"image": "/images/bookmarks/l-on-the-professional.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Terminator",
|
|
||||||
"author": "James Cameron",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 1984,
|
|
||||||
"url": "https://www.imdb.com/title/tt0088247/",
|
|
||||||
"image": "/images/bookmarks/the-terminator.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "X-Men: First Class",
|
|
||||||
"author": "Matthew Vaughn",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2011,
|
|
||||||
"url": "https://www.imdb.com/title/tt1270798/",
|
|
||||||
"image": "/images/bookmarks/x-men-first-class.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Now You See Me",
|
|
||||||
"author": "Louis Leterrier",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2013,
|
|
||||||
"url": "https://www.imdb.com/title/tt1670345/",
|
|
||||||
"image": "/images/bookmarks/now-you-see-me.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Special 26",
|
|
||||||
"author": "Neeraj Pandey",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2013,
|
|
||||||
"url": "https://www.imdb.com/title/tt2377938/",
|
|
||||||
"image": "/images/bookmarks/special-26.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Drishyam",
|
|
||||||
"author": "Nishikant Kamat",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2015,
|
|
||||||
"url": "https://www.imdb.com/title/tt4430212/",
|
|
||||||
"image": "/images/bookmarks/drishyam.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Drishyam 2",
|
|
||||||
"author": "Abhishek Pathak",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2022,
|
|
||||||
"url": "https://www.imdb.com/title/tt15501640/",
|
|
||||||
"image": "/images/bookmarks/drishyam-2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bumblebee",
|
|
||||||
"author": "Travis Knight",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2018,
|
|
||||||
"url": "https://www.imdb.com/title/tt4701182/",
|
|
||||||
"image": "/images/bookmarks/bumblebee.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Ministry of Ungentlemanly Warfare",
|
|
||||||
"author": "Guy Ritchie",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2024,
|
|
||||||
"url": "https://www.imdb.com/title/tt14128670/",
|
|
||||||
"image": "/images/bookmarks/the-ministry-of-ungentlemanly-warfare.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Raid",
|
|
||||||
"author": "Gareth Evans",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2011,
|
|
||||||
"url": "https://www.imdb.com/title/tt1899353/",
|
|
||||||
"image": "/images/bookmarks/the-raid.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Raid 2",
|
|
||||||
"author": "Gareth Evans",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2014,
|
|
||||||
"url": "https://www.imdb.com/title/tt2265171/",
|
|
||||||
"image": "/images/bookmarks/the-raid-2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Einstein and Eddington",
|
|
||||||
"author": "Philip Martin",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2008,
|
|
||||||
"url": "https://www.imdb.com/title/tt0995036/",
|
|
||||||
"image": "/images/bookmarks/einstein-and-eddington.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Nuremberg",
|
|
||||||
"author": "Yves Simoneau",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2000,
|
|
||||||
"url": "https://www.imdb.com/title/tt0208629/",
|
|
||||||
"image": "/images/bookmarks/nuremberg.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The Fast and the Furious",
|
|
||||||
"author": "Rob Cohen",
|
|
||||||
"type": "movie",
|
|
||||||
"year": 2001,
|
|
||||||
"url": "https://www.imdb.com/title/tt0232500/",
|
|
||||||
"image": "/images/bookmarks/the-fast-and-the-furious.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Chainsaw Man the Movie: Reze Arc",
|
|
||||||
"author": "MAPPA",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2025,
|
|
||||||
"image": "/images/bookmarks/chainsaw-man-the-movie-reze-arc.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Mr. Robot",
|
|
||||||
"author": "Sam Esmail",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2015,
|
|
||||||
"url": "https://www.imdb.com/title/tt4158110/",
|
|
||||||
"image": "/images/bookmarks/mr-robot.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Silicon Valley",
|
|
||||||
"author": "Mike Judge",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2014,
|
|
||||||
"url": "https://www.imdb.com/title/tt2575988/",
|
|
||||||
"image": "/images/bookmarks/silicon-valley.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Masters of the Air",
|
|
||||||
"author": "John Shiban, John Orloff",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2024,
|
|
||||||
"url": "https://www.imdb.com/title/tt2640044/",
|
|
||||||
"image": "/images/bookmarks/masters-of-the-air.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Blue Eye Samurai",
|
|
||||||
"author": "Amber Noizumi, Michael Green",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2023,
|
|
||||||
"url": "https://www.imdb.com/title/tt13309742/",
|
|
||||||
"image": "/images/bookmarks/blue-eye-samurai.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "My Love from the Star",
|
|
||||||
"author": "Jang Tae-yoo",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2013,
|
|
||||||
"url": "https://www.imdb.com/title/tt3199438/",
|
|
||||||
"image": "/images/bookmarks/my-love-from-the-star.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "When Life Gives You Tangerines",
|
|
||||||
"author": "Im Hyun-wook",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2025,
|
|
||||||
"image": "/images/bookmarks/when-life-gives-you-tangerines.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Midnight Diner",
|
|
||||||
"author": "Joji Matsuoka",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2009,
|
|
||||||
"url": "https://www.imdb.com/title/tt5765544/",
|
|
||||||
"image": "/images/bookmarks/midnight-diner.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Panchayat",
|
|
||||||
"author": "Deepak Kumar Mishra",
|
|
||||||
"type": "show",
|
|
||||||
"year": 2020,
|
|
||||||
"url": "https://www.imdb.com/title/tt11247028/",
|
|
||||||
"image": "/images/bookmarks/panchayat.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Attack on Titan",
|
|
||||||
"author": "Hajime Isayama",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2013,
|
|
||||||
"url": "https://www.imdb.com/title/tt2560140/",
|
|
||||||
"image": "/images/bookmarks/attack-on-titan.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Death Note",
|
|
||||||
"author": "Tsugumi Ohba, Takeshi Obata",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2006,
|
|
||||||
"url": "https://www.imdb.com/title/tt0877057/",
|
|
||||||
"image": "/images/bookmarks/death-note.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Demon Slayer",
|
|
||||||
"author": "Koyoharu Gotouge",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2019,
|
|
||||||
"url": "https://www.imdb.com/title/tt9335498/",
|
|
||||||
"image": "/images/bookmarks/demon-slayer.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Solo Leveling",
|
|
||||||
"author": "Chugong",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2024,
|
|
||||||
"url": "https://www.imdb.com/title/tt21209876/",
|
|
||||||
"image": "/images/bookmarks/solo-leveling.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Sakamoto Days",
|
|
||||||
"author": "Yuto Suzuki",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2025,
|
|
||||||
"image": "/images/bookmarks/sakamoto-days.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "One Punch Man",
|
|
||||||
"author": "ONE",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2015,
|
|
||||||
"url": "https://www.imdb.com/title/tt4508902/",
|
|
||||||
"image": "/images/bookmarks/one-punch-man.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Orb: On the Movements of the Earth",
|
|
||||||
"author": "Uoto",
|
|
||||||
"type": "anime",
|
|
||||||
"year": 2024,
|
|
||||||
"image": "/images/bookmarks/orb-on-the-movements-of-the-earth.jpg"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -1,4 +1,70 @@
|
|||||||
[
|
[
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Remove pre-C99 fallbacks from plural-exp.c",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=5ce8201bf5c38e84d0c65e51d9acdd743e69d483",
|
||||||
|
"date": "2026-05-05",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Remove PRI_MACROS_BROKEN from loadmsgcat.c",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=9985b162d86b636b8ca55ce1ff0744dc58717498",
|
||||||
|
"date": "2026-05-05",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Remove IN_LIBGLOCALE dead code",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=6f837cdeddb2b2e4e9260b659a9e69e1e4c9f79a",
|
||||||
|
"date": "2026-05-05",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Fix memory leak in _nl_find_domain on allocation failure",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=bb91c88af78e9f862728623b60fb68d3610a4b79",
|
||||||
|
"date": "2026-05-05",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Add tests for plural expression hardening",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=ba305d8268530a20eb537b9880e744c6eed233f9",
|
||||||
|
"date": "2026-05-04",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "GNU C Library",
|
||||||
|
"projectUrl": "https://sourceware.org/glibc/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "intl: Import plural expression hardening from GNU gettext",
|
||||||
|
"url": "https://sourceware.org/cgit/glibc/commit/?id=e7f5359db75ac4713b8c45bd4213264c0a26bc06",
|
||||||
|
"date": "2026-05-04",
|
||||||
|
"status": "merged"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"project": "Linux Kernel",
|
"project": "Linux Kernel",
|
||||||
"projectUrl": "https://kernel.org/",
|
"projectUrl": "https://kernel.org/",
|
||||||
@@ -23,6 +89,18 @@
|
|||||||
"status": "merged",
|
"status": "merged",
|
||||||
"description": "Migrated panasonic-vvx10f034n00 panel to multi-style functions for improved error handling and removed redundant error printout"
|
"description": "Migrated panasonic-vvx10f034n00 panel to multi-style functions for improved error handling and removed redundant error printout"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"project": "GCC",
|
||||||
|
"projectUrl": "https://gcc.gnu.org/",
|
||||||
|
"platform": "sourceware",
|
||||||
|
"type": "code",
|
||||||
|
"kind": "patch",
|
||||||
|
"title": "match.pd: Optimize A > B ? ABS(A) : B to MAX(A, B) when B >= 0 [PR116700]",
|
||||||
|
"url": "https://gitlab.com/gnutools/gcc/-/commit/e0c4c4cb02382b37a41da098aab3a2446d3cdf3e",
|
||||||
|
"date": "2026-05-03",
|
||||||
|
"status": "merged",
|
||||||
|
"description": "Added pattern to simplify conditional ABS to MAX when the else branch is non-negative, fixing a missed optimization at -O1"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"project": "GCC",
|
"project": "GCC",
|
||||||
"projectUrl": "https://gcc.gnu.org/",
|
"projectUrl": "https://gcc.gnu.org/",
|
||||||
|
|||||||
@@ -1,4 +1,22 @@
|
|||||||
[
|
[
|
||||||
|
{
|
||||||
|
"name": "DevConf.CZ 2026",
|
||||||
|
"date": "2026-06-18",
|
||||||
|
"location": "Brno, Czech Republic",
|
||||||
|
"role": "speaker",
|
||||||
|
"talk": "Lost in Transliteration: Why strlen(\"Dvořák\") Returns 8",
|
||||||
|
"description": "A deep dive into character encoding, Unicode, and how glibc's iconv handles text conversion internally — from the ASCII era through code pages to the gconv pipeline.",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"label": "Slides",
|
||||||
|
"url": "/talks/devconf-2026/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Event Page",
|
||||||
|
"url": "https://pretalx.devconf.info/devconf-cz-2026/talk/review/JVY7TPFMDDAPWUKHAPDH3MDKVZUXLDEW"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Opportunity Open Source Conference 2024",
|
"name": "Opportunity Open Source Conference 2024",
|
||||||
"date": "2024-08-25",
|
"date": "2024-08-25",
|
||||||
|
|||||||
+4
-5
@@ -35,15 +35,14 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "memodav",
|
"name": "sciezka",
|
||||||
"owner": "avinal",
|
"owner": "avinal",
|
||||||
"description": "Bidirectional task sync between Memos and CalDAV. Write tasks in Memos, check them off in any CalDAV client.",
|
"description": "A browser extension for fuzzy searching tabs, history and bookmarks.",
|
||||||
"url": "https://github.com/avinal/memodav",
|
"url": "https://github.com/avinal/sciezka",
|
||||||
"stars": 0,
|
"stars": 0,
|
||||||
"forks": 0,
|
"forks": 0,
|
||||||
"languages": [
|
"languages": [
|
||||||
{ "name": "Go", "color": "#00ADD8" },
|
{ "name": "TypeScript", "color": "#3178C6" }
|
||||||
{ "name": "Shell", "color": "#89e051" }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -450,9 +450,9 @@
|
|||||||
"description": "C++ implementation of the Blowfish and Blowfish 2 symmetric block cipher with tests and APIs. Drop-in replacement for DES or IDEA."
|
"description": "C++ implementation of the Blowfish and Blowfish 2 symmetric block cipher with tests and APIs. Drop-in replacement for DES or IDEA."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Xeus-BASIC",
|
"name": "Sciezka",
|
||||||
"url": "https://github.com/avinal/xeus-basic",
|
"url": "https://github.com/avinal/sciezka",
|
||||||
"description": "Jupyter Kernel for the BASIC language built using the Xeus Framework, C, and C++. Executes BASIC programs line by line in Jupyter Notebook."
|
"description": "Browser extension for fuzzy searching tabs, history and bookmarks. Built with TypeScript."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"meta": {
|
"meta": {
|
||||||
|
|||||||
@@ -3,6 +3,13 @@ import Nav from "@/components/Nav.astro";
|
|||||||
import Footer from "@/components/Footer.astro";
|
import Footer from "@/components/Footer.astro";
|
||||||
import theme, { generateThemeCSS } from "@/config/theme";
|
import theme, { generateThemeCSS } from "@/config/theme";
|
||||||
import "@/styles/global.css";
|
import "@/styles/global.css";
|
||||||
|
import "@fontsource/iosevka-aile/400.css";
|
||||||
|
import "@fontsource/iosevka-aile/500.css";
|
||||||
|
import "@fontsource/iosevka-aile/600.css";
|
||||||
|
import "@fontsource/iosevka-aile/700.css";
|
||||||
|
import "@fontsource/iosevka-aile/800.css";
|
||||||
|
import "@fontsource/iosevka/400.css";
|
||||||
|
import "@fontsource/iosevka/500.css";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -56,10 +63,6 @@ const resolvedOgImage = ogImage || new URL("/og-default.svg", Astro.site).href;
|
|||||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
<link rel="alternate" type="application/rss+xml" title="Avinal Kumar" href="/rss.xml" />
|
<link rel="alternate" type="application/rss+xml" title="Avinal Kumar" href="/rss.xml" />
|
||||||
|
|
||||||
<!-- Font preloads -->
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- Design tokens generated from theme config -->
|
<!-- Design tokens generated from theme config -->
|
||||||
<style set:html={themeCSS} />
|
<style set:html={themeCSS} />
|
||||||
|
|||||||
@@ -1,327 +0,0 @@
|
|||||||
---
|
|
||||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
|
||||||
import bookmarksData from "@/data/bookmarks.json";
|
|
||||||
|
|
||||||
interface Bookmark {
|
|
||||||
title: string;
|
|
||||||
author: string;
|
|
||||||
type: "book" | "movie" | "show" | "anime";
|
|
||||||
year: number;
|
|
||||||
url?: string;
|
|
||||||
image?: string;
|
|
||||||
note?: string;
|
|
||||||
favorite?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const bookmarks = (bookmarksData as Bookmark[]).sort((a, b) => b.year - a.year);
|
|
||||||
|
|
||||||
const typeLabels: Record<string, string> = {
|
|
||||||
book: "Books",
|
|
||||||
movie: "Movies",
|
|
||||||
show: "Shows",
|
|
||||||
anime: "Anime",
|
|
||||||
};
|
|
||||||
|
|
||||||
const types = ["book", "movie", "show", "anime"] as const;
|
|
||||||
|
|
||||||
const bookCount = bookmarks.filter((b) => b.type === "book").length;
|
|
||||||
const movieCount = bookmarks.filter((b) => b.type === "movie").length;
|
|
||||||
const showCount = bookmarks.filter((b) => b.type === "show").length;
|
|
||||||
const animeCount = bookmarks.filter((b) => b.type === "anime").length;
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout title="Bookmarks" description="Books, movies, and shows I've enjoyed">
|
|
||||||
<div class="bookmarks-page">
|
|
||||||
<header class="bookmarks-header">
|
|
||||||
<h1>Bookmarks</h1>
|
|
||||||
<p class="bookmarks-desc">
|
|
||||||
Books, movies, shows, and anime I think are worth your time. Starred entries are personal favorites.
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="stats-bar">
|
|
||||||
<button class="stat stat-total active" data-filter="all">
|
|
||||||
<svg class="stat-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
||||||
<span class="stat-value">{bookmarks.length}</span>
|
|
||||||
<span class="stat-label">all</span>
|
|
||||||
</button>
|
|
||||||
<button class="stat stat-books" data-filter="book">
|
|
||||||
<svg class="stat-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
|
||||||
<span class="stat-value">{bookCount}</span>
|
|
||||||
<span class="stat-label">books</span>
|
|
||||||
</button>
|
|
||||||
<button class="stat stat-movies" data-filter="movie">
|
|
||||||
<svg class="stat-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/><line x1="17" y1="17" x2="22" y2="17"/></svg>
|
|
||||||
<span class="stat-value">{movieCount}</span>
|
|
||||||
<span class="stat-label">movies</span>
|
|
||||||
</button>
|
|
||||||
<button class="stat stat-shows" data-filter="show">
|
|
||||||
<svg class="stat-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"/><polyline points="17 2 12 7 7 2"/></svg>
|
|
||||||
<span class="stat-value">{showCount}</span>
|
|
||||||
<span class="stat-label">shows</span>
|
|
||||||
</button>
|
|
||||||
<button class="stat stat-anime" data-filter="anime">
|
|
||||||
<svg class="stat-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
||||||
<span class="stat-value">{animeCount}</span>
|
|
||||||
<span class="stat-label">anime</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bookmarks-grid">
|
|
||||||
{bookmarks.map((b) => (
|
|
||||||
<a
|
|
||||||
class="bookmark-card"
|
|
||||||
data-type={b.type}
|
|
||||||
href={b.url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
{b.image && (
|
|
||||||
<div class="bookmark-cover">
|
|
||||||
<img src={b.image} alt={b.title} loading="lazy" decoding="async" />
|
|
||||||
{b.favorite && (
|
|
||||||
<span class="bookmark-fav" title="Personal favorite">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div class="bookmark-body">
|
|
||||||
<div class="bookmark-top">
|
|
||||||
<span class="badge bookmark-type">{b.type}</span>
|
|
||||||
<span class="bookmark-year">{b.year}</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="bookmark-title">{b.title}</h3>
|
|
||||||
<p class="bookmark-author">{b.author}</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BaseLayout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bookmarks-page {
|
|
||||||
max-width: var(--max-w-page);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmarks-header {
|
|
||||||
margin-bottom: var(--space-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmarks-header h1 {
|
|
||||||
margin-bottom: var(--space-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmarks-desc {
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
line-height: var(--leading-relaxed);
|
|
||||||
max-width: var(--max-w-prose);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-bar {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
gap: var(--space-3);
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-2);
|
|
||||||
padding: var(--space-4) var(--space-3);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: border-color var(--duration-fast) var(--ease-out),
|
|
||||||
box-shadow var(--duration-fast) var(--ease-out),
|
|
||||||
background var(--duration-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat:hover {
|
|
||||||
border-color: var(--stat-color);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
opacity: 0.4;
|
|
||||||
transition: opacity var(--duration-fast) var(--ease-out),
|
|
||||||
color var(--duration-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat:hover .stat-icon,
|
|
||||||
.stat.active .stat-icon {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--stat-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-total { --stat-color: var(--accent); }
|
|
||||||
.stat-books { --stat-color: #10b981; }
|
|
||||||
.stat-movies { --stat-color: #f59e0b; }
|
|
||||||
.stat-shows { --stat-color: #8b5cf6; }
|
|
||||||
.stat-anime { --stat-color: #ef4444; }
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
font-weight: 800;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
color: var(--text);
|
|
||||||
line-height: 1;
|
|
||||||
transition: color var(--duration-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat:hover .stat-value,
|
|
||||||
.stat.active .stat-value {
|
|
||||||
color: var(--stat-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat.active {
|
|
||||||
border-color: var(--stat-color);
|
|
||||||
background: color-mix(in srgb, var(--stat-color) 8%, var(--bg-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.stats-bar {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmarks-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.bookmarks-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.bookmarks-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-card {
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color var(--duration-fast) var(--ease-out),
|
|
||||||
box-shadow var(--duration-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-card:hover {
|
|
||||||
border-color: var(--border-strong);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-card[data-hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-cover {
|
|
||||||
aspect-ratio: 2 / 3;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--bg-surface-hover);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-cover img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
transition: filter var(--duration-normal) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-card:hover .bookmark-cover img {
|
|
||||||
filter: grayscale(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-fav {
|
|
||||||
position: absolute;
|
|
||||||
top: var(--space-2);
|
|
||||||
right: var(--space-2);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
color: #f59e0b;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-body {
|
|
||||||
padding: var(--space-4) var(--space-5) var(--space-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-top {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: var(--space-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-type {
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-year {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-title {
|
|
||||||
font-size: var(--text-base);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: var(--space-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookmark-author {
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stats = document.querySelectorAll<HTMLButtonElement>('.stat[data-filter]');
|
|
||||||
const cards = document.querySelectorAll<HTMLAnchorElement>('.bookmark-card');
|
|
||||||
|
|
||||||
stats.forEach((stat) => {
|
|
||||||
stat.addEventListener('click', () => {
|
|
||||||
stats.forEach((s) => s.classList.remove('active'));
|
|
||||||
stat.classList.add('active');
|
|
||||||
|
|
||||||
const filter = stat.dataset.filter;
|
|
||||||
cards.forEach((card) => {
|
|
||||||
if (filter === 'all' || card.dataset.type === filter) {
|
|
||||||
card.removeAttribute('data-hidden');
|
|
||||||
} else {
|
|
||||||
card.setAttribute('data-hidden', '');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user