mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-04 07:40:09 +05:30
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dependabot[bot]
|
009b3d1de8 | ||
 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",
|
||||
output: "static",
|
||||
integrations: [sitemap()],
|
||||
prefetch: true,
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: "github-dark-default",
|
||||
|
||||
@@ -14,3 +14,8 @@
|
||||
Permissions-Policy = "camera=(), microphone=(), geolocation=()"
|
||||
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;"
|
||||
|
||||
[[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
+480
-1090
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",
|
||||
"dependencies": {
|
||||
"@astrojs/rss": "^4.0.15",
|
||||
"@astrojs/sitemap": "^3.7.0",
|
||||
"astro": "^5.17.3",
|
||||
"@astrojs/rss": "^4.0.18",
|
||||
"@astrojs/sitemap": "^3.7.2",
|
||||
"@fontsource/iosevka": "^5.2.5",
|
||||
"@fontsource/iosevka-aile": "^5.2.5",
|
||||
"astro": "^6.3.5",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-slug": "^6.0.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: "/events", label: "Events" },
|
||||
{ href: "/contributions", label: "Contributions" },
|
||||
{ href: "/bookmarks", label: "Bookmarks" },
|
||||
{ href: "/meeting", label: "Meet" },
|
||||
];
|
||||
|
||||
|
||||
+2
-2
@@ -107,8 +107,8 @@ const theme: ThemeConfig = {
|
||||
},
|
||||
|
||||
fonts: {
|
||||
sans: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
|
||||
mono: '"JetBrains Mono", "Fira Code", ui-monospace, monospace',
|
||||
sans: '"Iosevka Aile", system-ui, sans-serif',
|
||||
mono: '"Iosevka", ui-monospace, monospace',
|
||||
},
|
||||
|
||||
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",
|
||||
"projectUrl": "https://kernel.org/",
|
||||
@@ -23,6 +89,18 @@
|
||||
"status": "merged",
|
||||
"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",
|
||||
"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",
|
||||
"date": "2024-08-25",
|
||||
|
||||
+4
-5
@@ -35,15 +35,14 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "memodav",
|
||||
"name": "sciezka",
|
||||
"owner": "avinal",
|
||||
"description": "Bidirectional task sync between Memos and CalDAV. Write tasks in Memos, check them off in any CalDAV client.",
|
||||
"url": "https://github.com/avinal/memodav",
|
||||
"description": "A browser extension for fuzzy searching tabs, history and bookmarks.",
|
||||
"url": "https://github.com/avinal/sciezka",
|
||||
"stars": 0,
|
||||
"forks": 0,
|
||||
"languages": [
|
||||
{ "name": "Go", "color": "#00ADD8" },
|
||||
{ "name": "Shell", "color": "#89e051" }
|
||||
{ "name": "TypeScript", "color": "#3178C6" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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."
|
||||
},
|
||||
{
|
||||
"name": "Xeus-BASIC",
|
||||
"url": "https://github.com/avinal/xeus-basic",
|
||||
"description": "Jupyter Kernel for the BASIC language built using the Xeus Framework, C, and C++. Executes BASIC programs line by line in Jupyter Notebook."
|
||||
"name": "Sciezka",
|
||||
"url": "https://github.com/avinal/sciezka",
|
||||
"description": "Browser extension for fuzzy searching tabs, history and bookmarks. Built with TypeScript."
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
|
||||
@@ -3,6 +3,13 @@ import Nav from "@/components/Nav.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import theme, { generateThemeCSS } from "@/config/theme";
|
||||
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 {
|
||||
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="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 -->
|
||||
<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