NoWhyLogs
1.0.0
AKA NOWHYLOGS
? / Juditkaramazov
? Portefeuille
☕ Blog
Tu te souviens quand je suis tombé amoureux de ... Astro ? Eh bien, c'est reparti! Sécurité de type dynamique et fonctionnalités adaptées aux développeurs, interactivité dynamique de React et composants réutilisables ... et Astro , bien sûr.
Si par hasard, vous vouliez commencer avec sa flexibilité caractéristique et ses résultats intéressants, permettez-moi de vous rappeler que la réalisation d'un tel objectif ne pourrait pas être plus facile une fois qu'Astro rejoint le match. Maintenant, et juste au cas où c'est un autre de ces moments Besoin de Speed ™ pour vous, veuillez considérer les étapes suivantes.
Ouvrez votre terminal et exécutez la commande suivante:
npm create astro@latestIl existe même des modèles de démarrage disponibles:
# 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 >Enfin:
npm run devFacile, non? N'hésitez pas à vérifier la documentation d'Astro ou à sauter dans leur serveur Discord. Profitez de la balade, collègue astronaute! ?
Conseil
Quoi que vous décidiez de faire, n'oubliez pas de respecter le code de conduite tout en interagissant avec le projet et la plate-forme elle-même. Merci beaucoup pour votre temps et votre patience!
Il y a quelques jours, j'ai commencé mon premier NO NO NO WHORS - Entrée Devlog comme suit:
Alors que les dernières heures chauffées de ce jour d'août s'éloignent de Barcelone, nous refroidissons nos écrans avec des mots numériques étranges et digraphiques expliquant la nature et l'architecture de ce site. Férocement humain, intrinsèquement spontané.
En toute honnêteté, il m'a fallu beaucoup de temps pour articuler mes pensées en mots - et il m'a fallu encore plus de temps pour rassembler le courage et la force mentale nécessaires pour enfin créer un site qui pourrait servir de représentation valide de mes mésaventures comme autre chose qu'un "développeur de site Web" - une étiquette que j'ai cessé d'utiliser lorsque j'ai réalisé que mon travail atteignit les rives du concept de "logiciel", sans frontières pertinentes.
Vous souvenez-vous de la route emblématique de Red Hot Chili Pepper? ( "Tu plaisantes, Judit? C'est un chef-d'œuvre; bien sûr, nous nous souvenons!" , Huh, eh bien. Ravi de vous revoir, les gars.) "Juste un miroir pour le soleil" est l'une de ces lignes qui frappent dur pour non raison spécifique, et après des tonnes de hauts et de bas, des moments où je me suis à nouveau demandé silencieusement: "Qui suis-je censé être?", Et d'autres épisodes malheureux mais humains, je me suis dit que j'avais besoin d'un espace qui pourrait éventuellement devenir quelque chose Semblable à ce miroir pour le soleil . Un miroir pour l'âme, le cas échéant.
Comme certains d'entre vous le savent probablement, je possède déjà un blog privé où je peux partager certaines de mes pensées, analyse et non-sens; Cependant, je n'ai toujours pas travaillé sur un feu de joie où je pouvais m'asseoir, prendre le temps de digérer l'essence du video game development et de représenter le voyage lui-même sous la forme d'un "journal" ou d'un "blog de développement". C'est pourquoi Nowhylogs (un personal devlog containing relevant information on my progress as an indie developer ) existe, je suppose. Lorsque le brouillard devient beaucoup trop dense, nous devons tous trouver notre propre phare.
En parlant de phares! Le score précédent n'est-il pas juste charmant ?
Bien que simple et accessible, je mets un certain effort pour ne faire No Why Games - Devlog un miroir (un autre!) De mes intentions et des règles intérieures en tant que développeur, mettant toujours performance , accessibility et best practices en premier.
"Comment as-tu fait ça, Judit?, A demandé à personne. Permettez-moi de partager quelques secrets et fonctionnalités afin que vous puissiez voir ce qui a été la" clé ?, Alors.
Sans aucun doute, tout ce qui a à voir avec le concept d' Accessibility se traduit par un immense océan de possibilités, de doutes et de nouvelles choses à apprendre chaque jour. Cependant, je voulais m'assurer que ce Devlog était as accessible as possible (et pas seulement grâce à des points de repère appropriés), ce qui signifie que vous serez capable d'y naviguer en utilisant:
KeyboardVoiceOver ? ️ Conseil
Par exemple, vous pouvez activer la voix off sur un iPhone exécutant iOS 17 ou version ultérieure. Cela peut être fait à partir des paramètres -> Accessibilité -> voix off.
Les images OG, également connues sous le nom de "images sociales" (c'est une image affichée chaque fois que nous partageons notre site Web URL sur des plateformes telles que Twitter, WhatsApp, Discord, etc.), jouent un rôle essentiel dans l'engagement des médias sociaux - mais nous ne faisons pas T a généralement le temps de les préparer un par un ... non? Droite...? ( Peut-être que je suis le seul à faire face à ce problème ... )
Bien qu'il soit possible d'utiliser une image OG par défaut comme secours (dans ce cas, public/nowhylogs-og.jpg ), je voulais éviter l'utilisation statique (et même la surutilisation) de la même image affichée après la publication chaque fois qu'aucun autre Ogimage est spécifié dans la masse de front.
Grâce à la bibliothèque de Satori, capable de convertir HTML et CSS en SVG (il a ses limites, comme les langues RTL ne sont pas encore prises en charge ... mais donnez-lui le temps!), Il a été possible de générer des images OG dynamiques à l'heure de la construction pour les messages qui n'inclure aucun . Ensuite, vous trouverez une belle image affichant:
Post title .Author name .Site title . Si vous avez besoin d'utiliser des caractères non latins, n'oubliez pas d'ajouter votre police préférée dans 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.Rappelez-vous les nombreuses fois où vous avez essayé de trouver quelque chose de spécifique sur un site Web sans outils de recherche? Qu'est-ce que les divinités ont prié pour dire à ce sujet, cher étranger? Dis plus! Comme c'est ce qui m'arrive généralement jusqu'à ces jours, j'ai inclus à nouveau une recherche globale habilitée par Fuse.js , une bibliothèque de recherche floue légère ... avec zéro dépendances!
Pour plus d'informations, n'hésitez pas à visiter:
Conseil
Étant donné que j'ai déjà utilisé Fuse.js dans la journée, vous pouvez également vérifier comment je l'ai implémenté dans mon très bien-aimé Karamablog. Je vous promets que vous ne le regretterez pas!
Portez-vous déjà vos lunettes de soleil? Pas besoin. Tout comme il est obligatoire de nos jours, j'ai incorporé un theme switcher pour améliorer l'expérience visuelle des lecteurs. Pourquoi? Parce que même si cela dit "Devlog", c'est toujours un blog - et nos rétines devraient avoir beaucoup d'importance pour nous!
Pour plus d'informations sur cette fonctionnalité spécifique et ses composants, veuillez consulter:
"Pouvons-nous cesser de discuter des Seo-Thingys pour une fois, Judit?" , pas tout à fait, pas tout à fait ! Si c'est une question de discussion, c'est simplement parce que son existence pourrait nous profiter, à certains égards. Laissez-moi expliquer:
Ce que nous appelons "contenu convivial", c'est le type de contenu créé d'une manière qui aide les moteurs de recherche à le classer haut - et non, il ne s'agit pas de mots clés. Curieusement, ce que nous appelons "SEO" est vraiment destiné à aider les moteurs de recherche à trouver, à comprendre et à connecter votre contenu au sujet que vous essayez de couvrir.
Rappelez-vous l' dynamic ogImage dont nous avons discuté auparavant? Même ces images (celles des graphiques ouvertes) sont utiles pour le partage des médias sociaux et le référencement ... et ce n'est qu'une partie de celui-ci!
Jetons un coup d'œil à notre fichier config.ts, par exemple:
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 ,
}Tous ces éléments (y compris les URL canoniques, les cartes sociales, etc.) sont essentiels pour rendre notre site facilement rampé et indexé par les moteurs de recherche , ce qui conduit à une meilleure visibilité dans les résultats des moteurs de recherche.
Comme vous le savez tous, RSS est un flux Web qui permet aux utilisateurs et aux applications d'accéder aux mises à jour des sites Web dans un format standardisé et lisible par ordinateur. Si vous avez l'impression de faire passer rapidement ce qui vous intéresse et que mes journaux vous permettent d'être pertinents pour vous ... n'hésitez pas à appuyer sur le bouton ondulé! ?
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 ) ,
} ) ) ,
} )
}Le plus facile, mieux c'est!
Vous pouvez exécuter toutes les commandes à partir de la racine du projet en utilisant votre magnifique terminal:
| Commande | Action |
|---|---|
npm install | Installez les dépendances. |
npm run dev | Démarrez le serveur de développement local sur localhost:4321 . |
npm run build | Construisez votre site de production sur ./dist/ |
npm run preview | Aperçu de votre construction localement. |
npm run format:check | Vérifiez le format de code avec plus joli. |
npm run format | Codes de format avec plus joli. |
npm run sync | Générez des types de typeScript pour tous les modules Astro. Apprenez-en plus ici. |
npm run lint | Lint avec Eslint. |
docker compose up -d | Exécutez Nowhylogs sur Docker. |
docker compose run app npm install | Exécutez n'importe quelle commande ci-dessus dans le conteneur Docker. |
docker build -t nowhylogs . | Construisez l'image Docker pour Nowhylogs. |
docker run -p 4321:80 nowhylogs | Exécutez Nowhylogs sur Docker. Le site Web sera accessible sur http://localhost:4321 . |
Ah, oui ... les styles, les styles ...!
Tout d'abord, permettez-moi de partager certains des éléments clés qui ont rendu possible l'existence de ce site:
Cependant, ce n'est qu'une partie minimale du vrai travail (humain) derrière ce petit projet.
Quant à la palette de couleurs elle-même, maintenant que non pourquoi les jeux sont une chose, je devais (légèrement) me distancier du style auquel j'étais si habitué, car vous pouviez voir dans mon portefeuille et mon blog personnel. Cette distance, ainsi que la nouvelle approximation pour moi-même (le développeur indépendant maintenant), n'aurait pas été possible sans un artiste extrêmement bien connu ici: @aunedelec.
Permettez-moi de commencer par dire que je suis extrêmement désolé de détruire votre logo incroyablement beau, mais il s'avère que je suis le pire artiste que vous jamais trouver que vous ne trouverez jamais dans toute votre vie. Toutes les blagues à part, si ce n'était pas pour nos conversations tout en partageant un café à Vienne, votre patience, votre soutien, votre œil vif et vos compétences extrêmes, je n'aurais jamais rassemblé le courage d'embrasser les jeux vidéo d'une manière qui ne se limite pas à l'écriture , parler et y penser .
S'il y a quelque chose que je voudrais ajouter ici à part: "Merci pour votre talent, votre soutien et votre compagnie", c'est un immense: "Merci d'avoir fait partie de ma vie". Peu importe à quel point le ciel peut parfois être sombre, ces nuages sont toujours pâles devant le soleil ... et Grenoble a un très beau soleil à admirer depuis le balcon!
Los Jugadores Son Mis Amigos . Cela dit, je ne pouvais pas fermer ce nouveau chapitre de ma vie dérangeante sans intoner un fort et sincère: Thank you! ? .
À notre incroyable sponsor, @Entreprises LEMRHALI , thank you so much pour votre soutien, votre calme, votre connaissance, votre patience et votre existence entière. Dernièrement, "l'incertitude" est une œuvre répandue une ombre assez énorme autour de nos terres - et croyez-moi quand je dis que j'adorerais changer cette réalité si seulement il était possible pour moi de le faire (où ai-je oublié ma baguette magique ceci temps? Cependant, je crois que tout trouvera sa place le plus tôt possible.
Comme quelqu'un l'a dit un jour:
Une autoroute interétatique - Soixante-cinq - en alabama jusqu'à Chicago. Cela devrait arrêter de fumer dans cette partie du Kentucky, mais la lumière du jour ne tremblera pas. Le soleil ne disparaîtra pas.
Qui se traduit par: Hay Esperanza.
Ce travail vit sous le toit robuste, chaleureux et magnifique de la licence du MIT; Quel que soit le contenu visuel ou écrit, vous trouverez toujours une référence appropriée spécifiant les auteurs et les sites Web derrière.
Les attributions sont essentielles de nos jours, et celui qui a participé directement ou indirectement dans ce projet mérite la meilleure reconnaissance possible. Cela dit, et seulement si vous avez apprécié ce que vous avez trouvé ici, rappelez-vous que vous pouvez rendre le dinosaure extrêmement heureux si vous ...
