wip: new page about telegram

6 files changed, 151 insertions, 2 deletions

diff --git a/assets/images/telegram.jpg b/assets/images/telegram.jpg
new file mode 100644
index 0000000..da92365
--- /dev/null
+++ b/assets/images/telegram.jpg
diff --git a/public/og-images/common.jpg b/public/og-images/common.jpg
new file mode 100644
index 0000000..b09c111
--- /dev/null
+++ b/public/og-images/common.jpg
diff --git a/public/og-images/telegram.jpg b/public/og-images/telegram.jpg
new file mode 100644
index 0000000..64107de
--- /dev/null
+++ b/public/og-images/telegram.jpg
diff --git a/src/pages/index.html b/src/pages/index.html
index b10624b..edace75 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -29,6 +29,23 @@
                     <li>
                         <article>
                             <header>
+                                <h1 class="text-2xl first-letter:capitalize">Про телеграмчик и Дурова</h1>
+                                <div class="flex flex-wrap gap-2 mt-2">
+                                    <time class="text-zinc-600 text-sm">UTC 20:32 03.10.25</time>
+                                    <a href="#" class="flex items-center justify-center bg-sky-200 rounded-lg px-1.5 text-sky-600 first-letter:capitalize hover:underline text-xs">telegram</a>
+                                    <a href="#" class="flex items-center justify-center bg-amber-200 rounded-lg px-1.5 text-amber-600 first-letter:capitalize hover:underline text-xs">приватность</a>
+                                </div>
+                            </header>
+                            <main class="space-y-2 mt-4">
+                                <a href="/assets/images/telegram.jpg" class="max-sm:w-full sm:float-left sm:mr-5"><img class="border-zinc-200 max-sm:mx-auto border" width="128" height="128" src="/assets/images/telegram.jpg" /></a>
+                                <p>TODO</p>
+                            </main>
+                            <a class="mt-4 underline underline-offset-6 decoration-yellow-500 decoration-[0.07rem] decoration-wavy first-letter:capitalize block" href="/posts/telegram-durov.html">продолжить чтение →</a>
+                        </article>
+                    </li>
+                    <li>
+                        <article>
+                            <header>
                                 <h1 class="text-2xl first-letter:capitalize">какими, по-моему, должны быть мобильные телефоны</h1>
                                 <div class="flex flex-wrap gap-2 mt-2">
                                     <time class="text-zinc-600 text-sm">UTC 01:56 12.09.25</time>
@@ -38,7 +55,7 @@
                                 </div>
                             </header>
                             <main class="space-y-2 mt-4">
-                                <img width="192" height="192" class="border border-zinc-200 mr-4 float-left" src="/assets/phone.png" />
+                                <a href="/assets/phone.png" class="max-sm:w-full sm:float-left sm:mr-5"><img class="border-zinc-200 max-sm:mx-auto border" width="192" height="192" src="/assets/phone.png" /></a>
                                 <p>TODO</p>
                             </main>
                             <a class="mt-4 underline underline-offset-6 decoration-yellow-500 decoration-[0.07rem] decoration-wavy first-letter:capitalize block" href="/posts/mobile-phones.html">продолжить чтение →</a>
@@ -54,7 +71,7 @@
                                 </div>
                             </header>
                             <main class="space-y-2 mt-4">
-                                <a class="border max-sm:w-full float-left border-zinc-200 mr-5" href="/assets/images/czar_cover.webp"><img class="max-sm:mx-auto" width="224" src="/assets/images/czar_cover.webp" alt="арт обложка игры"></a>
+                                <a class="max-sm:w-full sm:float-left sm:mr-5" href="/assets/images/czar_cover.webp"><img class="border-zinc-200 max-sm:mx-auto border" width="224" src="/assets/images/czar_cover.webp" alt="арт обложка игры"></a>
                                 <p>Жанр, сеттинг.</p>
                                 <p>Игра в жанре шутера от первого лица. Сеттинг — Российская империя, XX век. Геймплей включает стрельбу, уклонения, диалоги, а иногда и небольшие головоломки.</p>
                                 <p>Сеттинг уникальный и атмосфера вайбовая. Играть приятно.</p>
diff --git a/src/pages/posts/telegram-durov.html b/src/pages/posts/telegram-durov.html
new file mode 100644
index 0000000..b2f8d41
--- /dev/null
+++ b/src/pages/posts/telegram-durov.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html class="h-full" lang="ru">
+
+<head>
+    <title>Про телеграмчик и Дурова</title>
+    <link rel="icon" href="/assets/icons/logo.svg" type="image/svg+xml">
+    <!-- OG -->
+    <meta property="og:title" content="Про телеграмчик и Дурова" />
+    <meta property="og:description" content="TODO ..." />
+    <meta property="og:image" content="https://mnik01-blog.mlibren.com/og-images/telegram.jpg" />
+    <meta name="twitter:card" content="https://mnik01-blog.mlibren.com/og-images/telegram.jpg">
+    <meta name="twitter:image" content="https://mnik01-blog.mlibren.com/og-images/telegram.jpg">
+    <meta property="og:url" content="https://mnik01-blog.mlibren.com/" />
+    <meta property="og:type" content="website" />
+    <!-- OG -->
+    <meta charset="UTF-8">
+    <link href="/main.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body class="relative">
+    <!-- %include.book-progress-banner% -->
+    <!-- %include.header% -->
+    <main>
+        <div class="mx-auto flex flex-col-reverse py-12 md:grid gap-4 grid-cols-12 container max-sm:px-5">
+            <section class="col-span-9">
+                <article>
+                    <header>
+                        <h1 class="text-2xl font-serif first-letter:capitalize">Про телеграмчик и Дурова</h1>
+                        <div id="tags" class="flex flex-wrap gap-2 mt-2">
+                            <time class="text-zinc-600 text-sm">UTC 20:32 03.10.25</time>
+                            <a href="#" class="flex items-center justify-center bg-sky-200 rounded-lg px-1.5 text-sky-600 first-letter:capitalize hover:underline text-xs">telegram</a>
+                            <a href="#" class="flex items-center justify-center bg-amber-200 rounded-lg px-1.5 text-amber-600 first-letter:capitalize hover:underline text-xs">приватность</a>
+                        </div>
+                    </header>
+                    <main class="space-y-2 mt-4">
+                        <a href="/assets/images/telegram.jpg" class="max-sm:w-full sm:float-left sm:mr-5"><img class="border-zinc-200 max-sm:mx-auto border" width="128" height="128" src="/assets/images/telegram.jpg" /></a>
+                        <p>Вряд ли я скажу что-то новое по теме, но тем не менее -- тема всё ещё актуальная и у людей есть «вера» в Дурова и его телеграм. Так что думаю что всё же распишу для знакомых то как я всё это вижу.</p>
+                        <a href="#about-telegram" id="about-telegram" class="text-xl mb-2 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h2 class="inline">Про телеграм</h2>
+                        </a>
+                        <p>Проговорим в слух что такое телеграм, покрайней мере в его нынешнем виде и, вроде как это не планирует меняться.: телеграм -- это интернет мессенджер. Реализованный по клиент-серверной архитектуре. Клиентская сторона представлена программами на разные операционные системы либо веб интерфейсом, который не работает без JavaScript. Серверная сторона, инфраструктура и протокол связи являются закрытыми и о них мало что изветно наверняка.</p>
+                        <a href="#reputation" id="reputation" class="text-lg mb-1 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h3 class="inline">Репутация</h3>
+                        </a>
+                        <p>история про войну с РКН и репутация эдакого свободоборца. Будто единственно свободное место ныне. Хоть в последнее время чууууть-чуть стал этот образ спадать, как мне кажется, но видимо только в кругах (хотя бы маломальски) интересующихся приватностью.</p>
+                        <a href="#technical" id="technical" class="text-lg mb-1 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h3 class="inline">Техническая часть</h3>
+                        </a>
+                        <p>Из-за того что протокол, шифрование и back-end телеграма закрыты становится невозможен независимый аудит безопасности. Как кода на стороне серверов (реализации протокола) так и самого протокола в целом.</p>
+                        <h4 class="text-lg font-serif mb-1">Шифрование и доверие</h4>
+                        <p>Ключи шифрования генерируются и управляются самим телеграмом а не пользователем. Например вы не можете сгенерировать свой ключ и хранить его как вам вздумается, например, не отсылать его в телеграм вообще. Из-за этого пользователь не может быть доподлинно уверен в том что его ключи никуда "на сторону" не утекают.</p>
+                        <p>Бывает ли иначе: бывает, например в GPG шифровании почты.</p>
+                        <p>Но <i>обычный пользователь</i> таким заниматься не будет. Потому что "многа букав, думать надо". А если никто из твоего окружения этим не занимается то и тебе смысла переходить нет, так уж держат социальные связи.</p>
+                        <h4 class="text-lg font-serif mb-2">Инфраструктура и мутная организация</h4>
+                        <a href="#concept" id="concept" class="text-lg mb-1 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h3 class="inline">Концептуально</h3>
+                        </a>
+                        <p>Очередное решение подконтрольное одной конкретной стороне.</p>
+                        <a href="#social" id="social" class="text-lg mb-1 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h3 class="inline">Социальный аспект</h3>
+                        </a>
+                        <h4 class="text-lg font-serif mb-1">Почему уйти сложно</h4>
+                        <p>Ссылка на Столярова</p>
+                        <h4 class="text-lg font-serif mb-1">Authority</h4>
+                        <p>Кто-то там что-то там решает, а ты как юзер подчиняешься либо идёшь лесом.</p>
+                        <p>Например, регистрация по обязательному номеру телефона.</p>
+                        <p>Например, невозможность закрыть себе личку без Premium.</p>
+                        <a href="#durov" id="durov" class="text-xl mb-2 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h2 class="inline">Про самого Дурова</h2>
+                        </a>
+                        <ul class="list-disc list-inside mb-4">
+                            <li>todo: мем про ДК и сближение с Казахстаном</li>
+                            <li>крипто зашквар и неудача с США</li>
+                            <li>Арест во Франции и сливы данных</li>
+                            <li>Торговля "свободой"</li>
+                        </ul>
+                        <a href="#conclusion" id="conclusion" class="text-xl mb-2 font-serif inline-block">
+                            <span class="italic text-zinc-600">#</span>
+                            <h2 class="inline">Выводы</h2>
+                        </a>
+                        <p>Дуров и телега ФСБшные и вообще даже если и нет то оттуда нужно уходить. А куда уходить вопрос сложный и достоен отдельного обсуждения.</p>
+                    </main>
+                    <a class="mt-4 inline-block w-fit underline underline-offset-6 decoration-yellow-500 decoration-[0.07rem] decoration-wavy first-letter:capitalize block" href="/">← На главную</a>
+                </article>
+            </section>
+            <div class="col-span-3">
+                <!-- %include.sidebar% -->
+                <aside class="sticky mt-6 top-4 border-l border-zinc-200 max-md:hidden">
+                    <nav class="p-6">
+                        <span class=" capitalize">содержание</span>
+                        <ol id="tags-aside" class="flex flex-col gap-2 mt-2">
+                            <li>
+                                <a href="#about-telegram" class="text-sm hover:underline first-letter:capitalize block text-zinc-700">про телеграм</a>
+                            </li>
+                            <li>
+                                <a href="#reputation" class="text-sm hover:underline first-letter:capitalize block text-zinc-600 pl-5">репутация</a>
+                            </li>
+                            <li>
+                                <a href="#technical" class="text-sm hover:underline first-letter:capitalize block text-zinc-600 pl-5">техническая часть</a>
+                            </li>
+                            <li>
+                                <a href="#concept" class="text-sm hover:underline first-letter:capitalize block text-zinc-600 pl-5">концептуально</a>
+                            </li>
+                            <li>
+                                <a href="#social" class="text-sm hover:underline first-letter:capitalize block text-zinc-600 pl-5">социальный аспект</a>
+                            </li>
+                            <li>
+                                <a href="#durov" class="text-sm hover:underline first-letter:capitalize block text-zinc-700">про самого дурова</a>
+                            </li>
+                            <li>
+                                <a href="#conclusion" class="text-sm hover:underline first-letter:capitalize block text-zinc-700">выводы</a>
+                            </li>
+                        </ol>
+                    </nav>
+                </aside>
+            </div>
+        </div>
+        <!-- %include.common-section% -->
+    </main>
+    <!-- %include.footer% -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/partials/sidebar.html b/src/partials/sidebar.html
index 685c5af..1d3e202 100644
--- a/src/partials/sidebar.html
+++ b/src/partials/sidebar.html
@@ -18,6 +18,8 @@
             <li><a href="#" class="flex items-center justify-center bg-orange-200 rounded-lg px-1.5 text-orange-600 first-letter:capitalize text-xs hover:underline w-fit">hardware</a></li>
             <li><a href="#" class="flex items-center justify-center bg-yellow-200 rounded-lg px-1.5 text-yellow-600 first-letter:capitalize text-xs hover:underline w-fit">software</a></li>
             <li><a href="#" class="flex items-center justify-center bg-pink-200 rounded-lg px-1.5 text-pink-600 first-letter:capitalize text-xs hover:underline w-fit">игры</a></li>
+            <li><a href="#" class="flex items-center justify-center bg-sky-200 rounded-lg px-1.5 text-sky-600 first-letter:capitalize text-xs hover:underline w-fit">telegram</a></li>
+            <li><a href="#" class="flex items-center justify-center bg-amber-200 rounded-lg px-1.5 text-amber-600 first-letter:capitalize text-xs hover:underline w-fit">приватность</a></li>
         </ul>
     </nav>
 </aside>
\ No newline at end of file