aka NoWhyLogs
- 🔧 Getting started
- 🚪 Introduction
- 🔮 Features
- 🧞 Commands
- 💅 Style
- 🙌 Immense thanks to them awesome Sponsors
- 🏛 License & Copyright
Remember when I fell in love with... Astro? Well, here we go again! TypeScript's type safety and developer-friendly features, React's dynamic interactivity and reusable components... and Astro, of course.
If by any chance you'd want to get started with its characteristic flexibility and neat results, allow me to remind you that achieving such a goal couldn't be easier once Astro joins the match. Now, and just in case this is another one of those Need for Speed™ moments for you, please consider the following steps.
Open your terminal and run the following command:
npm create astro@latestThere are even Starter Templates available:
# 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>Finally:
npm run devEasy, right? Feel free to check Astro's documentation or jump into their Discord server. Enjoy the ride, fellow astronaut! 🚀🧑🚀
Tip
Whatever you decide to do, please remember to respect the Code of Conduct while interacting with the project and the platform itself. Thank you so much for your time and patience!
A couple of days ago, I started my first No Why Games - Devlog entry as follows:
As the last heated hours of this day of August creep away from Barcelona, we are cooling down our screens with some weird, warbly digital words explaining this site’s nature and architecture. Fiercely human, inherently spontaneous.
In all honesty, it took me quite a long time to articulate my thoughts into words - and it took me even longer to gather the necessary courage and mental strength to finally create a site that could serve as a valid representation of my misadventures as something else than a "website developer" - a label that I stopped using when I realized that my work was reaching the shores of the concept of "software", with no relevant borders anymore.
Do you remember Red Hot Chili Pepper's emblematic Road Trippin'? ("Are you kidding, Judit? It's a masterpiece; of course we remember!", huh, well. Nice to see you again, guys.) "Just a mirror for the sun" is one of those lines that hit hard for no specific reason, and after tons of highs and lows, moments where I silently asked myself again: "Who am I supposed to be?", and some other unfortunate yet human episodes, I told myself that I needed a space that could eventually become something similar to that mirror for the sun. A mirror for the soul, if anything.
As some of you probably know, I already own a private blog where I can share some of my thoughts, analysis, and nonsense; however, I still didn't work on a bonfire where I could sit, take the time to digest video game development's essence, and represent the trip itself in the shape of a "diary" or "dev blog". That's why NoWhyLogs (a personal devlog containing relevant information on my progress as an indie developer) exists, I suppose. When the fog becomes way too dense, we all need to find our own lighthouse.
Speaking of lighthouses! Isn't the previous score just lovely?
While simple and accessible, I put some effort into making No Why Games - Devlog a mirror (another one!) of my intentions and inner rules as a developer, always putting performance, accessibility, and best practices first.
"How did you do that, Judit?, asked absolutely no one. Let me share a couple of secrets and features so that you can see what's been the 🔑 k e y 🔑, then.
Undoubtedly, whatever has to do with the concept of Accessibility translates into an immense ocean of possibilities, doubts, and new things to learn each day. However, I wanted to make sure that this devlog was as accessible as possible (and not only thanks to proper landmarks), which means that you'll be capable to navigate it by using:
Keyboard💻VoiceOver🎙️
Tip
As an example, you can turn on VoiceOver on an iPhone running IOS 17 or later. This can be done from settings -> Accessibility -> VoiceOver.
OG images, also known as "social images" (this is, an image displayed whenever we share our website URL on platforms such as Twitter, WhatsApp, Discord, etc.), play an essential role in social media engagement - but we don't usually have the time to prepare them one by one... right? Right...? (Perhaps I'm the only one facing this problem...)
Although it's possible to use a default OG image as a fallback (in this case, public/nowhylogs-og.jpg), I wanted to avoid the static usage (and even overuse) of the same image being displayed post after post whenever no other ogImage is specified in the frontmatter.
Thanks to Satori's library, capable of converting HTML and CSS to SVG (it has its limitations, like RTL languages not being supported yet... but give it time!), it's been possible to generate dynamic OG images at build time for posts that do not include any. Then, you will find a beautiful image displaying:
Post title.Author name.Site title.
If you need to use non-Latin characters, please remember to add your preferred font in 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.Remember the many times you tried to find something specific on a website with no search tools? What did the deities you prayed to say about that, dear stranger? Say no more! Since that is what usually happens to me even up to these days, I included again a global search empowered by Fuse.js, a lightweight fuzzy-search library... with zero dependencies!
For further information, feel free to visit:
Tip
Given that I already used Fuse.js back in the day, you can also check how I implemented it in my dearly beloved karamaBlog. I promise you won't regret it!
Are you wearing your sunglasses already? No need. Just as it's mandatory nowadays, I incorporated a theme switcher to enhance the visual experience for readers. Why? Because even though it says "devlog", it's still a blog - and our retinas should matter a lot to us!
For further information about this specific feature and its components, please, have a look at:
"Can we stop discussing SEO-thingys for once, Judit?", not quite, not quite! If it's a matter of discussion, it is simply because its existence might benefit us, in some ways. Let me explain:
What we call "SEO-friendly content" is the type of content that's created in a way that helps the search engines rank it high - and no, it's not all about keywords. Funnily, what we call "SEO" is really meant to help search engines find, understand, and connect your content to the topic you're trying to cover.
Remember the dynamic ogImage we discussed before? Even such images (Open Graph ones) are useful for social media sharing and SEO... and that's just a part of it!
Let's have a look at our config.ts file, for instance:
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,
}All of these elements (including canonical URLs, social cards, etc.) are essential in order to make our site easily crawled and indexed by search engines, leading to better visibility in search engine results.
As you all know, RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format. If you feel like quickly weed through what interests you and my logs happen to be relevant for you... do not hesitate to hit the wavy button! 📡
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),
})),
})
}The easier, the better! 🚀
You can run all commands from the root of the project using your beautiful terminal:
| Command | Action |
|---|---|
npm install |
Install dependencies. |
npm run dev |
Start local dev server at localhost:4321. |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally. |
npm run format:check |
Check code format with Prettier. |
npm run format |
Format codes with Prettier. |
npm run sync |
Generate TypeScript types for all Astro modules. Learn more here. |
npm run lint |
Lint with ESLint. |
docker compose up -d |
Run NoWhyLogs on Docker. |
docker compose run app npm install |
Run any command above into the docker container. |
docker build -t nowhylogs . |
Build Docker image for NoWhyLogs. |
docker run -p 4321:80 nowhylogs |
Run NoWhyLogs on Docker. The website will be accessible at http://localhost:4321. |
Ah, yes... the styles, the styles...!
First things first, allow me to share some of the key elements that made this site's existence possible:
- Code Formatting - Prettier
- Icons - Phosphor Icons
- Linting - ESLint
- Styling - TailwindCSS
- UI/UX - Figma Design File
However, that's just a minimal part of the real work (human one) behind this little project.
As for the color palette itself, now that No Why Games is a thing, I had to (slightly) distance myself from the style I was so used to, as you could get to see in my personal portfolio and blog. This distance, as well as the new approximation to myself (the indie developer now), wouldn't have been possible without an extremely-well-known-artist around here: @AuNedelec.
Allow me to start by saying that I'm extremely sorry for destroying your incredibly beautiful logo, but turns out that I am the worst artist you'll ever find in your entire life. All jokes aside, if it wasn't for our conversations while sharing a coffee in Viena, your patience, support, keen eye, and extreme skills, I would never have gathered the courage to embrace video games in a way that's not limited to writing, speaking, and thinking about them.
If there is something I'd want to add here other than: "thank you for your talent, support, and company", that's an immense: "thank you for being part of my life". No matter how dark the sky might look sometimes, those clouds always pale in front of the sun... and Grenoble has quite a beautiful sun to admire from the balcony!
Los jugadores son mis amigos. That said, I couldn't close this new chapter of my disturbing life without intoning a loud and sincere: Thank you! 🥳.
To our amazing Sponsor, @Entreprises LEMRHALI, thank you so much for your support, calm, knowledge, patience, and entire existence. Lately, "uncertainty" is a work spreading quite a huge shadow around our lands - and believe me when I say I'd love to change that reality if only it was possible for me to do so (where did I forget my magic wand this time? Ah...). However, I do believe that everything will find its place sooner than later.
As someone once said:
An interstate highway — sixty-five — running from Alabama up to just shy of Chicago. It ought to be quitting time in this part of Kentucky, but the daylight just won't shake. The sun just won't go away.
Which translates into: Hay esperanza.
This work lives under the robust, warm, and beautiful roof of the MIT License; whatever visual or written content scapes from it, you'll always find a proper reference specifying the authors and websites behind it.
Attributions are essential these days, and whoever took part directly or indirectly in this project deserves the best possible recognition. That said, and only if you enjoyed what you found here, remember that you can make the Dinosaur extremely happy if you...
