NoWhyLogs
1.0.0
AKA Nowhylogs
؟ /جوديكارامازوف
؟ مَلَفّ
☕ مدونة
تذكر عندما وقعت في حب ... Astro ؟ حسنًا ، هنا نذهب مرة أخرى! ميزات السلامة من نوع TypeScript وميزات المطورين ، والتفاعل الديناميكي للتفاعل والمكونات القابلة لإعادة الاستخدام ... و Astro ، بالطبع.
إذا كنت ترغب في البدء بأي فرصة في البدء بمرونتها المميزة ونتائجها الأنيقة ، اسمح لي أن أذكرك بأن تحقيق مثل هذا الهدف لا يمكن أن يكون أسهل بمجرد انضمام Astro إلى المباراة. الآن ، وفي حال كان هذا واحدًا آخر من أولئك الذين يحتاجون إلى لحظات Speed ™ بالنسبة لك ، يرجى النظر في الخطوات التالية.
افتح المحطة الخاصة بك وقم بتشغيل الأمر التالي:
npm create astro@latestحتى أن هناك قوالب بداية متاحة:
# create a new project with an official example
npm create astro@latest -- --template < example-name >
# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template < github-username > / < github-repo >أخيراً:
npm run devسهل ، أليس كذلك؟ لا تتردد في التحقق من وثائق Astro أو القفز إلى خادم Discord. استمتع بالرحلة ، زميل رائد فضاء! ؟
نصيحة
مهما قررت القيام به ، يرجى تذكر احترام مدونة قواعد السلوك أثناء التفاعل مع المشروع والمنصة نفسها. شكرا جزيلا لك على وقتك وصبرك!
قبل يومين ، بدأت أول ألعاب لا ولاي - إدخال Devlog على النحو التالي:
نظرًا لأن آخر ساعات ساخنة من يوم أغسطس تتسلل إلى برشلونة ، فإننا نبرد على شاشاتنا مع بعض الكلمات الرقمية الغريبة والحربية التي تشرح طبيعة هذا الموقع والهندسة المعمارية. بشرية بشدة ، تلقائي بطبيعته.
بكل صدق ، استغرق الأمر مني وقتًا طويلاً لتوضيح أفكاري في الكلمات - واستغرق الأمر وقتًا أطول لجمع الشجاعة اللازمة والقوة العقلية لإنشاء موقع أخيرًا يمكن أن يكون بمثابة تمثيل صحيح لمغامراتي الخاطئة كشيء آخر من "مطور موقع ويب" - تسمية توقفت عن استخدامها عندما أدركت أن عملي كان يصل إلى شواطئ مفهوم "البرمجيات" ، مع عدم وجود حدود ذات صلة بعد الآن.
هل تتذكر طريق Red Hot Chili Pepper Trippin؟ ( "هل تمزح ، جوديت؟ إنها تحفة ؛ بالطبع نتذكر!" ، هاه ، حسنًا. من الجيد رؤيتك مرة أخرى ، يا شباب.) "مجرد مرآة للشمس" هي واحدة من تلك الخطوط التي ضربت بشدة لا سبب محدد ، وبعد الكثير من المرتفعات والانخفاضات ، لحظات سألتني بصمت مرة أخرى: "من من المفترض أن أكون؟" ، وبعض الحلقات الأخرى المؤسفة والبشرية ، أخبرت نفسي أنني بحاجة إلى مساحة يمكن أن تصبح في النهاية شيئًا على غرار تلك المرآة للشمس . مرآة للروح ، إن وجدت.
كما يعلم البعض منكم ، أنا أملك بالفعل مدونة خاصة حيث يمكنني مشاركة بعض أفكاري والتحليلات والهراء ؛ ومع ذلك ، ما زلت لا أعمل على نار حيث يمكنني الجلوس ، وأخذ الوقت الكافي لهضم جوهر video game development ، وتمثيل الرحلة نفسها في شكل "مذكرات" أو "مدونة ديف". لهذا السبب يوجد Nowhylogs ( personal devlog containing relevant information on my progress as an indie developer ) ، أفترض. عندما يصبح الضباب كثيفًا للغاية ، نحتاج جميعًا إلى العثور على منارة خاصة بنا.
الحديث عن المنارات! أليست النتيجة السابقة جميلة ؟
على الرغم من أنها بسيطة ويمكن الوصول إليها ، إلا أنني بذلت بعض الجهد في صنع No Why Games - Devlog مرآة (واحدة أخرى!) من نواياي وقواعد داخلية كمطور ، وأداء دائمًا performance accessibility best practices أولاً.
"كيف فعلت ذلك ، جوديت؟ ، لم تسأل أحد على الإطلاق. اسمحوا لي أن أشارك بعض الأسرار والميزات حتى تتمكن من رؤية ما هو المفتاح ؟ ، إذن.
مما لا شك فيه ، كل ما يتعلق بمفهوم Accessibility يترجم إلى محيط هائل من الاحتمالات والشكوك وأشياء جديدة للتعلم كل يوم. ومع ذلك ، أردت أن أتأكد من أن هذا devlog كان as accessible as possible (وليس فقط بفضل المعالم المناسبة) ، مما يعني أنك ستكون قادرًا على التنقل فيها باستخدام:
KeyboardVoiceOver ؟ ️ نصيحة
على سبيل المثال ، يمكنك تشغيل الصوت على جهاز iPhone يعمل على تشغيل iOS 17 أو أحدث. يمكن القيام بذلك من الإعدادات -> إمكانية الوصول -> التعليق الصوتي.
صور OG ، المعروفة أيضًا باسم "الصور الاجتماعية" (هذه ، صورة معروضة عندما نشارك عنوان URL لموقع الويب الخاص بنا على منصات مثل Twitter و WhatsApp و Discord ، وما إلى ذلك) ، تلعب دورًا أساسيًا في مشاركة التواصل الاجتماعي - لكننا لا نستمر ". عادة ما يكون لديك الوقت لإعدادهم واحدا تلو الآخر ... أليس كذلك؟ يمين...؟ ( ربما أنا الوحيد الذي يواجه هذه المشكلة ... )
على الرغم من أنه من الممكن استخدام صورة OG افتراضية كاحتفال (في هذه الحالة ، public/nowhylogs-og.jpg ) ، أردت تجنب الاستخدام الثابت (وحتى الاستخدام المفرط) لنفس الصورة التي يتم عرضها بعد المنشور كلما يتم تحديد Ogimage في المواجهة.
بفضل مكتبة Satori ، قادرة على تحويل HTML و CSS إلى SVG (لها قيودها ، مثل لغات RTL لم يتم دعمها بعد ... ولكن أعطها وقتًا!) لا تشمل أي . بعد ذلك ، ستجد صورة جميلة تعرض:
Post title .Author name .Site title . إذا كنت بحاجة إلى استخدام أحرف غير لاتين ، فيرجى تذكر إضافة خطك المفضل في src/utils/loadGoogleFont.ts :
async function loadGoogleFonts (
text : string
) : Promise <
Array < { name : string ; data : ArrayBuffer ; weight : number ; style : string } >
> {
const fontsConfig = [
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono" ,
weight : 400 ,
style : "normal" ,
} ,
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono:wght@700" ,
weight : 700 ,
style : "bold" ,
} ,
]
// Rest of the code.هل تتذكر عدة مرات حاولت العثور على شيء محدد على موقع ويب بدون أدوات بحث؟ ماذا كانت الآلهة التي صليت لقولها عن ذلك يا عزيزي الغريب؟ قل لا أكثر! نظرًا لأن هذا هو ما يحدث بالنسبة لي حتى هذه الأيام ، فقد أدرجت مرة أخرى بحثًا عالميًا تم تمكينه بواسطة Fuse.js ، وهي مكتبة خفيفة الوزن غامضة ... مع تبعيات صفرية!
لمزيد من المعلومات ، لا تتردد في الزيارة:
نصيحة
بالنظر إلى أنني استخدمت بالفعل Fuse.js في اليوم ، يمكنك أيضًا التحقق من كيفية تنفيذه في Karamablog المحبوب. أعدك أنك لن تندم!
هل ترتدي نظارتك الشمسية بالفعل؟ لا حاجة. مثلما هو إلزامي في الوقت الحاضر ، قمت بدمج theme switcher لتعزيز التجربة المرئية للقراء. لماذا؟ لأنه على الرغم من أنها تقول "Devlog" ، إلا أنها لا تزال مدونة - ويجب أن تكون شبكية العين لدينا مهمة بالنسبة لنا!
لمزيد من المعلومات حول هذه الميزة المحددة ومكوناتها ، من فضلك ، إلقاء نظرة على:
"هل يمكننا التوقف عن مناقشة SEO-Thingys لمرة واحدة ، جوديت؟" ، ليس تماما ، ليس تماما ! إذا كانت مسألة مناقشة ، فذلك ببساطة لأن وجودها قد يفيدنا ، في بعض النواحي. اسمحوا لي أن أشرح:
ما نسميه "المحتوى الصديق لكبار المسئولين الاقتصاديين" هو نوع المحتوى الذي تم إنشاؤه بطريقة تساعد محركات البحث على ترتيبها عالياً - ولا ، لا يتعلق الأمر بالكلمات الرئيسية. من الممتع ، ما نسميه "SEO" حقًا هو المساعدة في البحث عن محتوى البحث وفهمه وتوصيله بالموضوع الذي تحاول تغطيته.
هل تتذكر dynamic ogImage التي ناقشناها من قبل؟ حتى مثل هذه الصور (Open Graph Ones) مفيدة لمشاركة وسائل التواصل الاجتماعي وكبار المسئولين الاقتصاديين ... وهذا مجرد جزء منها!
دعنا نلقي نظرة على ملف config.ts الخاص بنا ، على سبيل المثال:
export const SITE : Site = {
website : "https://nowhylogs.vercel.app/" ,
author : "Judit Lázaro" ,
desc : "A minimal devlog containing No Why Games' misadventures." ,
title : "No Why Games - Devlog" ,
ogImage : "nowhylogs-og.jpg" ,
lightAndDarkMode : true ,
postPerPage : 3 ,
scheduledPostMargin : 15 * 60 * 1000 ,
}كل هذه العناصر (بما في ذلك عناوين URL الكنسي ، والبطاقات الاجتماعية ، وما إلى ذلك) ضرورية لجعل موقعنا يزحف بسهولة وفهرسته بواسطة محركات البحث ، مما يؤدي إلى أفضل رؤية في نتائج محرك البحث.
كما تعلمون جميعًا ، فإن RSS عبارة عن موجز ويب يسمح للمستخدمين والتطبيقات بالوصول إلى التحديثات إلى مواقع الويب بتنسيق موحد قابل للقراءة بالكمبيوتر. إذا شعرت برغبة في الاعتراض بسرعة من خلال ما يثير اهتمامك وسجلاتي أن تكون ذات صلة بالنسبة لك ... لا تتردد في ضرب الزر الموجود! ؟
import rss from "@astrojs/rss"
import { getCollection } from "astro:content"
import getSortedPosts from "@utils/getSortedPosts"
import { SITE } from "@config"
export async function GET ( ) {
const posts = await getCollection ( "blog" )
const sortedPosts = getSortedPosts ( posts )
return rss ( {
title : SITE . title ,
description : SITE . desc ,
site : SITE . website ,
items : sortedPosts . map ( ( { data , slug } ) => ( {
link : `posts/ ${ slug } /` ,
title : data . title ,
description : data . description ,
pubDate : new Date ( data . modDatetime ?? data . pubDatetime ) ,
} ) ) ,
} )
}أسهل ، كان ذلك أفضل!
يمكنك تشغيل جميع الأوامر من جذر المشروع باستخدام محطة جميلة:
| يأمر | فعل |
|---|---|
npm install | تثبيت التبعيات. |
npm run dev | ابدأ خادم DEV المحلي في localhost:4321 . |
npm run build | بناء موقع الإنتاج الخاص بك إلى ./dist/ |
npm run preview | معاينة بنيتك محليا. |
npm run format:check | تحقق من تنسيق الرمز مع أجمل. |
npm run format | تنسيق الرموز مع أجمل. |
npm run sync | إنشاء أنواع typescript لجميع الوحدات النمطية Astro. تعرف على المزيد هنا. |
npm run lint | الوبر مع eslint. |
docker compose up -d | تشغيل Nowhylogs على Docker. |
docker compose run app npm install | قم بتشغيل أي أمر أعلاه في حاوية Docker. |
docker build -t nowhylogs . | بناء صورة Docker لـ Nowhylogs. |
docker run -p 4321:80 nowhylogs | تشغيل Nowhylogs على Docker. يمكن الوصول إلى الموقع على http://localhost:4321 . |
آه ، نعم ... الأنماط ، الأنماط ...!
أول الأشياء أولاً ، اسمح لي بمشاركة بعض العناصر الرئيسية التي جعلت وجود هذا الموقع ممكنًا:
ومع ذلك ، هذا مجرد جزء الحد الأدنى من العمل الحقيقي (الإنسان) وراء هذا المشروع الصغير.
أما بالنسبة إلى لوحة الألوان نفسها ، فلا بعد أن تكون الألعاب شيئًا ، كان عليّ (قليلاً) أن يبعد نفسي عن الأسلوب الذي اعتدت عليه ، كما يمكن أن ترى في محفظتي الشخصية ومدويتي. هذه المسافة ، وكذلك التقريب الجديد لنفسي (مطور Indie الآن) ، لم تكن ممكنة بدون فني معروف للغاية هنا: Aunedelec.
اسمحوا لي أن أبدأ بالقول إنني آسف للغاية لتدمير شعارك الجميل بشكل لا يصدق ، لكن تبين أنني أسوأ فنان ستجده طوال حياتك. جانبا جميع النكات ، إذا لم يكن ذلك لمحادثاتنا أثناء مشاركة القهوة في فيينا ، وصبرك ، ودعمك ، وعينه الشديدة ، ومهاراتها الشديدة ، فلن أجمع أبدًا الشجاعة لاحتضان ألعاب الفيديو بطريقة لا تقتصر على الكتابة والتحدث والتفكير فيهم .
إذا كان هناك شيء أرغب في إضافته هنا بخلاف: "شكرًا لك على موهبتك ودعمك وشركتك" ، فهذا أمر هائل: "شكرًا لكونك جزءًا من حياتي". بغض النظر عن مدى الظلام ، قد تبدو السماء في بعض الأحيان ، فإن تلك الغيوم كانت دائمًا شاحبة أمام الشمس ... و Grenoble لديها شمس جميلة جدًا للاستمتاع بها من الشرفة!
لوس جوجادوريس الابن ميس أميجوس . ومع ذلك ، لم أستطع إغلاق هذا الفصل الجديد من حياتي المزعجة دون أن أتعامل بصوت عالٍ وصادق: Thank you! ? .
إلى راعينا المذهل ، @Entreprises LEMRHALI ، thank you so much على دعمكم والهدوء والمعرفة والصبر والوجود بأكمله. في الآونة الأخيرة ، "عدم اليقين" هو عمل ينشر ظلًا كبيرًا حول أراضينا - وصدقوني عندما أقول إنني أحب تغيير هذا الواقع إذا كان من الممكن أن أفعل ذلك فقط (أين نسيت عصامي السحرية هذا الوقت؟ ومع ذلك ، أعتقد أن كل شيء سيجد مكانه عاجلاً وليس آجلاً.
كما قال شخص ما:
طريق سريع بين الولايات-خمسون-يركض من ألاباما إلى خجول من شيكاغو. يجب أن يترك الوقت في هذا الجزء من كنتاكي ، لكن ضوء النهار لن يهتز. الشمس لن تختفي.
الذي يترجم إلى: هاي إسبيرانزا.
يعيش هذا العمل تحت السقف القوي والدافئ والجميل لترخيص معهد ماساتشوستس للتكنولوجيا ؛ مهما كانت المحتوى المرئي أو المكتوب ، ستجد دائمًا مرجعًا مناسبًا يحدد المؤلفين ومواقع الويب وراءه.
تعتبر الصفات ضرورية هذه الأيام ، وكل من شارك بشكل مباشر أو غير مباشر في هذا المشروع يستحق أفضل اعتراف ممكن. ومع ذلك ، وفقط إذا استمتعت بما وجدته هنا ، تذكر أنه يمكنك جعل الديناصورات سعيدة للغاية إذا كنت ...
