NoWhyLogs
1.0.0
aka NowHylogs
? /Juditkaramazov
? Portfólio
☕ Blog
Lembra quando me apaixonei por ... Astro ? Bem, aqui vamos nós de novo! Os recursos de segurança do tipo TypeScript e recursos amigáveis ao desenvolvedor, a interatividade dinâmica da React e os componentes reutilizáveis ... e Astro , é claro.
Se, por acaso, você desejar começar com sua flexibilidade característica e resultados legais, permita -me lembrá -lo de que alcançar esse objetivo não poderia ser mais fácil quando o Astro se juntar à partida. Agora, e caso este seja outro desses momentos de necessidade de Speed ™ para você, considere as etapas a seguir.
Abra seu terminal e execute o seguinte comando:
npm create astro@latestExistem até modelos iniciais disponíveis:
# 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 >Finalmente:
npm run devFácil, certo? Sinta -se à vontade para verificar a documentação do Astro ou entrar no servidor Discord. Aproveite o passeio, companheiro astronauta! ?
Dica
Tudo o que você decidir fazer, lembre -se de respeitar o código de conduta enquanto interage com o projeto e a própria plataforma. Muito obrigado pelo seu tempo e paciência!
Há alguns dias, iniciei meu primeiro não por que os jogos - entrada de devlog da seguinte forma:
À medida que as últimas horas acaloradas deste dia de agosto se afastam de Barcelona, estamos esfriando nossas telas com algumas palavras digitais estranhas e devastadas, explicando a natureza e a arquitetura deste site. Ferozmente humano, inerentemente espontâneo.
Com toda a honestidade, demorei muito tempo para articular meus pensamentos em palavras - e demorei ainda mais para reunir a coragem e a força mental necessárias para finalmente criar um site que poderia servir como uma representação válida de minhas desventuras como algo mais do que um "desenvolvedor de sites" - um rótulo que parei de usar quando percebi que meu trabalho estava atingindo as margens do conceito de "software", sem mais fronteiras relevantes.
Você se lembra do emblemático da estrada de pimenta quente de pimenta. ( "Você está brincando, Judit? É uma obra -prima; é claro, lembramos!" , Huh, bem. Prazer em vê -lo novamente, pessoal.) "Apenas um espelho para o sol" é uma dessas linhas que bateu duro por não Razão específica, e depois de toneladas de altos e baixos, momentos em que me perguntei silenciosamente: "Quem eu deveria ser?" E alguns outros episódios infelizes, porém humanos, eu disse a mim mesma que precisava de um espaço que eventualmente pudesse me tornar algo Semelhante a esse espelho para o sol . Um espelho para a alma, se é que alguma coisa.
Como alguns de vocês provavelmente sabem, eu já possuo um blog particular, onde posso compartilhar alguns de meus pensamentos, análise e absurdo; No entanto, ainda não trabalhei em uma fogueira onde podia sentar, dedicar um tempo para digerir a essência do video game development e representar a viagem em si na forma de um "diário" ou "blog de desenvolvimento". É por isso que o NowHylogs (um personal devlog containing relevant information on my progress as an indie developer ) existe, suponho. Quando o nevoeiro se torna muito denso, todos precisamos encontrar nosso próprio farol.
Falando em faróis! A pontuação anterior não é simplesmente adorável ?
Embora simples e acessível, eu me esforcei para fazer No Why Games - Devlog A Mirror (outro!) Das minhas intenções e regras internas como desenvolvedor, sempre colocando primeiro performance , accessibility e best practices .
"Como você fez isso, Judit?, Perguntou absolutamente ninguém. Deixe -me compartilhar alguns segredos e recursos para que você possa ver o que tem sido a chave ?
Sem dúvida, o que tem a ver com o conceito de Accessibility se traduz em um imenso oceano de possibilidades, dúvidas e coisas novas para aprender todos os dias. No entanto, eu queria ter certeza de que esse devlog era as accessible as possible (e não apenas graças aos marcos adequados), o que significa que você será capaz de navegar usando:
KeyboardVoiceOver ? ️ Dica
Como exemplo, você pode ativar a narração em um iPhone executando o iOS 17 ou mais tarde. Isso pode ser feito a partir de configurações -> Acessibilidade -> VoiceOver.
Imagens OG, também conhecidas como "imagens sociais" (esta é uma imagem exibida sempre que compartilhamos o URL do nosso site em plataformas como Twitter, WhatsApp, Discord etc.), desempenham um papel essencial no engajamento da mídia social - mas não vamos Normalmente, tenho tempo para prepará -los um por um ... certo? Certo...? ( Talvez eu seja o único que enfrenta esse problema ... )
Embora seja possível usar uma imagem OG padrão como um retrocesso (neste caso, public/nowhylogs-og.jpg ), eu queria evitar o uso estático (e até o uso excessivo) da mesma imagem que está sendo exibida após post após post sempre que nenhum outro OGIMAGE é especificado no frontMatter.
Graças à biblioteca de Satori, capaz de converter HTML e CSS em SVG (ele tem suas limitações, como os idiomas RTL ainda não sendo suportados ... mas dê tempo!), Foi possível gerar imagens dinâmicas de OG no tempo de construção para postagens que não inclua nenhum . Então, você encontrará uma bela imagem exibindo:
Post title .Author name .Site title . Se você precisar usar caracteres que não sejam de latina, lembre-se de adicionar sua fonte preferida em 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.Lembre -se das muitas vezes em que você tentou encontrar algo específico em um site sem ferramentas de pesquisa? O que as divindades que você orou para dizer sobre isso, querido estranho? Não diga mais nada! Como é isso que geralmente acontece comigo até hoje em dia, incluí novamente uma pesquisa global capacitada pelo FUSE.JS , uma biblioteca leve de busca difusa ... com zero dependências!
Para mais informações, fique à vontade para visitar:
Dica
Dado que eu já usei o Fuse.js naquela época, você também pode verificar como eu o implementei em meu amado Karamablog. Eu prometo que você não se arrepende!
Você já está usando seus óculos de sol? Não há necessidade. Assim como é obrigatório hoje em dia, incorporei um theme switcher para aprimorar a experiência visual para os leitores. Por que? Porque, embora diga "devlog", ainda é um blog - e nossas retinas devem importar muito para nós!
Para obter mais informações sobre esse recurso específico e seus componentes, por favor, dê uma olhada em:
"Podemos parar de discutir Seo-thingys pela primeira vez, Judit?" , não bem, não bem ! Se é uma questão de discussão, é simplesmente porque sua existência pode nos beneficiar, de certa forma. Deixe -me explicar:
O que chamamos de "conteúdo amigável para SEO" é o tipo de conteúdo criado de uma maneira que ajude os mecanismos de pesquisa a classificá -lo alto - e não, não se trata de palavras -chave. Curiosamente, o que chamamos de "SEO" realmente deve ajudar os mecanismos de pesquisa a encontrar, entender e conectar seu conteúdo ao tópico que você está tentando cobrir.
Lembra da dynamic ogImage que discutimos antes? Até essas imagens (gráficos abertos) são úteis para compartilhamento de mídias sociais e SEO ... e isso é apenas uma parte disso!
Vamos dar uma olhada no nosso arquivo Config.ts, por exemplo:
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 ,
}Todos esses elementos (incluindo URLs canônicos, cartões sociais etc.) são essenciais para tornar nosso site facilmente rastejado e indexado pelos mecanismos de pesquisa , levando a uma melhor visibilidade nos resultados dos mecanismos de pesquisa.
Como todos sabem, o RSS é um feed da web que permite que usuários e aplicativos acessem atualizações em sites em um formato padronizado e legível por computador. Se você sentir que maconha rapidamente o que lhe interessa e meus registros são relevantes para você ... Não hesite em apertar o botão ondulado! ?
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 ) ,
} ) ) ,
} )
}Quanto mais fácil, melhor!
Você pode executar todos os comandos da raiz do projeto usando seu lindo terminal:
| Comando | Ação |
|---|---|
npm install | Instalar dependências. |
npm run dev | Inicie o servidor de desenvolvimento local no localhost:4321 . |
npm run build | Construa seu site de produção para ./dist/ |
npm run preview | Visualize sua construção localmente. |
npm run format:check | Verifique o formato do código com mais bonito. |
npm run format | Códigos de formato com mais bonito. |
npm run sync | Gere tipos de texto TypeScript para todos os módulos Astro. Saiba mais aqui. |
npm run lint | FILHA COM ESLINT. |
docker compose up -d | Corra NowHylogs no Docker. |
docker compose run app npm install | Execute qualquer comando acima no contêiner do docker. |
docker build -t nowhylogs . | Construa a imagem do Docker para NowHylogs. |
docker run -p 4321:80 nowhylogs | Corra NowHylogs no Docker. O site estará acessível em http://localhost:4321 . |
Ah, sim ... os estilos, os estilos ...!
Primeiro, permita -me compartilhar alguns dos elementos -chave que tornaram possível a existência deste site:
No entanto, essa é apenas uma parte mínima do trabalho real (humano) por trás deste pequeno projeto.
Quanto à própria paleta de cores, agora que não por que os jogos são uma coisa, eu precisava (um pouco) me distanciar do estilo que eu estava tão acostumado, como você poderia ver em meu portfólio e blog pessoal. Essa distância, assim como a nova aproximação a mim mesma (o desenvolvedor independente agora), não teria sido possível sem um artista extremamente conhecido por aqui: @Aunedelec.
Permita -me começar dizendo que sinto muito por destruir seu logotipo incrivelmente bonito, mas acontece que eu sou o pior artista que você já encontrará em toda a sua vida. Todas as piadas à parte, se não fosse por nossas conversas enquanto compartilhava um café em Viena, sua paciência, apoio, olho agudo e habilidades extremas, eu nunca teria reunido a coragem de abraçar videogames de uma maneira que não se limite a escrever , falando e pensando sobre eles .
Se houver algo que eu gostaria de acrescentar aqui: "Obrigado por seu talento, apoio e companhia", isso é imenso: "Obrigado por fazer parte da minha vida". Não importa o quão escuro o céu possa parecer às vezes, essas nuvens sempre pálidas na frente do sol ... e Grenoble tem um sol bonito para admirar da varanda!
Los Jugadores, filho Mis Amigos . Dito isto, não consegui fechar este novo capítulo da minha vida perturbadora sem entoar um alto e sincero: Thank you! ? .
Para o nosso incrível patrocinador, @Entreprises LEMRHALI , thank you so much por seu apoio, calma, conhecimento, paciência e toda a existência. Ultimamente, "incerteza" é um trabalho que se espalha uma sombra enorme em nossas terras - e acredite em mim quando digo que adoraria mudar essa realidade se fosse possível para mim (onde eu esqueci minha varinha mágica tempo? No entanto, acredito que tudo encontrará seu lugar mais cedo ou mais tarde.
Como alguém disse uma vez:
Uma rodovia interestadual-sessenta e cinco-que vai do Alabama até apenas tímida de Chicago. Deveria estar deixando o tempo nesta parte do Kentucky, mas a luz do dia simplesmente não vai agitar. O sol simplesmente não vai embora.
Que se traduz em: Hay Esperanza.
Este trabalho vive sob o teto robusto, quente e bonito da licença do MIT; Qualquer que seja o conteúdo visual ou escrito, você sempre encontrará uma referência adequada especificando os autores e sites por trás dele.
Atualmente, as atribuições são essenciais e quem participou direta ou indiretamente neste projeto merece o melhor reconhecimento possível. Dito isto, e somente se você gostou do que encontrou aqui, lembre -se de que pode tornar o dinossauro extremamente feliz se você ...
