→ بازگشت به وبلاگ

چرا این سایت را از نو ساختم

اولین نوشته‌ی وبلاگ محمد هنرور: این سایت با Astro و Three.js ایستا روی GitHub Pages ساخته شده و حرکت فقط وقتی می‌آید که خود صفحه آن را خواسته باشد.

محمد هنرورنوشته‌ی محمد هنرور
· ۴ دقیقه مطالعه

این اولین نوشته‌ی وبلاگ است. سایت را از نو ساختم چون صفحه‌ای می‌خواستم که همان لحظه‌ی باز شدن حسش معلوم باشد: حروف، فاصله، و اینکه فارسی از اول در طرح باشد نه وصله‌ی آخر. کار مشتری این‌جا نیست. سمت عمومی این‌جاست.

یادداشت کوتاه این سایت همان حد را در چند جمله می‌گوید. خوشه‌ی راست‌به‌چپ در موضوع راست‌به‌چپ جمع می‌شود. نسخه‌ی بلند مسیر زبان دو مسیر، نه یک صفحه‌ی وارونه است.

صفحه موقع ساخت تمام می‌شود

ابزار اصلی Astro است، با TypeScript. هر صفحه‌ی عمومی زیر /fa/ یا /en/ یک بار ساخته می‌شود و فایل استاتیک می‌ماند. روی GitHub Pages منتشر می‌شود. دیکشنری‌ای نیست که مرورگر بعد از بار شدن عوضش کند. متن رابط از src/i18n/ui.ts می‌آید، و نوشته‌ها از پوشه‌ی زبان خودشان.

Three.js کره‌ی صفحه‌ی اول را می‌سازد. شیدر در blob.ts روی ماده‌ی کره سوار می‌شود، نه به‌صورت یک بوم جدا که همه‌ی صفحه‌ها مجبور باشند بارش کنند. اگر سیستم حرکت کم بخواهد، بوم صحنه اصلاً ساخته نمی‌شود. معرفی اول صفحه هم، اگر قبلاً دیده شده باشد یا حرکت کم خواسته شده باشد، حذف می‌شود.

GSAP و Lenis فقط وقتی می‌آیند که صفحه حرکت غنی خواسته باشد، نوار پیشرفت خواندن روی صفحه نباشد، و حرکت کم خاموش باشد. نوشته‌های وبلاگ motion را خاموش می‌کنند و نوار خواندن دارند، پس اسکرول نرم روی مقاله نمی‌آید. حرکت تزئین هر URL نیست. جزئیات بیشتر کنار راست‌به‌چپ را از روز اول بگذار نیست؛ آن یکی جهت است. این یکی ابزار است.

دو میانبر، هر دو از صفحه‌کلید

Ctrl و K پالت فرمان را باز می‌کند. فهرستش هنگام ساخت از هر دو زبان پر می‌شود: صفحه‌های ثابت و عنوان نوشته‌ها. هر ردیف آدرس خودش را دارد. گفت‌وگو جهت لاتین دارد. عنوان فارسی داخل نتیجه با dir="auto" جهت خودش را نگه می‌دارد. انتخاب با صفحه‌کلید کلاس sel می‌گیرد، نه حلقه‌ی تمرکز سراسری. ورودی پالت outline ندارد.

کلید ` ترمینال را باز می‌کند. آن گفت‌وگو dir="ltr" است. آنجا help معنی دارد. این میانبرها جای منو نیستند. منو هنوز در سرصفحه است و با Tab به همان ترتیب سند می‌رسد. اینکه این ترتیب در فارسی باید با خواندن یکی باشد، در تمرکز از همان لبه‌ای شروع می‌شود که خواندن است.

چه چیزی عمومی است

ریپازیتوری خصوصی به این صفحه نمی‌رسد: نه نام، نه توضیح، نه لینک. اسم مشتری ساخته نمی‌شود.

صفحه‌ی همکاری می‌گوید چه کاری خوشامد است. تنها تماس عمومی تلگرام است، @MH759.

آدرس‌ها را هم شریک نمی‌کنم. فارسی و انگلیسی دو فایل‌اند. اگر جفت نباشد، صفحه ادعای ترجمه نمی‌کند. قرارداد نشانی در نشانی متعارف خود صفحه است است.

هر نوشته یک فایل مارک‌داون است

مجموعه‌ی وبلاگ فقط title و description و date را لازم دارد. updated و برچسب اختیاری‌اند. draft پیش‌فرضش خاموش است و در ساخت تولید، پیش‌نویس از فهرست حذف می‌شود. نام فایل نامک است. بدنه‌ی همان فایل زمان مطالعه را می‌سازد و در صفحه‌ی نوشته کنار تاریخ می‌نشیند. تاریخ با formatDate و زبان صفحه قالب می‌شود. عنوان در frontmatter تنها h1 صفحه است. بدنه‌ی نوشته عنوان سطح یک دیگری نمی‌سازد.

نظر زیر نوشته به giscus وصل است، ولی فقط وقتی repoId و categoryId پر باشند. در پیکربندی فعلی هر دو خالی‌اند، پس بخش نظر اصلاً در صفحه نیست. جای خالی‌اش را با یک جعبه‌ی ساختگی پر نکرده‌ام.

فهرست وبلاگ فقط نوشته‌های همان زبان را نشان می‌دهد. شمارنده‌ها با fa-IR یا en-US قالب می‌شوند. جست‌وجوی همان صفحه Pagefind است و زبان دیگر را داخل آن فهرست قاطی نمی‌کند. پالت فرمان، برعکس، هر دو درخت را دارد، چون ابزار پرش است نه فهرست یک زبان.

سه تم، یک سند

تم پیش‌فرض neon است. دکمهٔ سرصفحه بین neon و cyber و light می‌چرخد و نام را در localStorage می‌گذارد. قبل از رنگ شدن صفحه، اسکریپت کوچک همان مقدار را روی html می‌خواند تا تم ذخیره‌شده یک لحظه تم پیش‌فرض را نشان ندهد. theme-color با تم عوض می‌شود: تیره، سبز سایبر، یا روشن.

همان اسکریپت اگر prefers-reduced-motion روشن باشد کلاس no-motion را می‌گذارد. انتقال نما هم در آن حالت قطع می‌شود. حرکت غنی و تم دو سوئیچ جدا هستند. یکی در data-motion است و موقع ساخت صفحه تعیین می‌شود. دیگری را خواننده در مرورگر عوض می‌کند.

صفحه‌ی درباره ساعت را در Asia/Tehran نشان می‌دهد، با زبان همان صفحه. این برچسب «ساعت من در تهران» است. نشانی خیابان از آن درنمی‌آید و ایمیل عمومی هم کنارش ساخته نمی‌شود.

خوراک هر زبان جداست، روی /fa/rss.xml یا /en/rss.xml، و در نقشه‌ی سایت نیست. تصویر اشتراک هم جداست، زیر /og/ و با زبان و نامک. هر دو موقع ساخت ساخته می‌شوند. خرده‌نان و عنوان صفحه از همان زبان می‌آیند. چیزی نیست که مرورگر بعداً از روی یک فایل انگلیسی برای فارسی حدس بزند.

اگر یک چیز از این نوشته بماند این است: سایت برای حس لحظه‌ی اول ساخته شده، با صفحه‌ی استاتیک و دو زبان، و با حرکتی که باید خودش را توجیه کند.

↑↓EnterEsc

guest@mh-honarvar: ~