salvatorelaisa.blog

Personal blog built on top of the Nuxt framework and exported as a static website.

Hosting and Continous Deployment is based on Github Pages & Actions.

The contents are my own personal thoughts and opinions. Images and videos that aren't of my own or made by me are always linked/embedded from external sources.

🛠️ Built on top of

• Nuxt 3 - main application framework based on Vue 3
  • @nuxt/content - module to easily integrate content from markdown files
  • @nuxt/google-fonts - module to easily integrate Google Fonts
  • @nuxt/studio - module to enable the integration with the Nuxt Studio editing UI
• vanilla CSS - every style has been written using regular CSS syntax, leveraging Vue's CSS Module support
• remark-reading-time - Medium's like reading time estimation
• rss - utility to help create the RSS .xml file
• sitemap - utility to help create the sitemap .xml file

I'm also integrating with Nuxt Studio to play a bit with visual editing, which comes pretty handy when editing/writing content from devices like the iPad Mini.

⚙️ Customizations

I've added some small new features over the starting Nuxt template to handle some more blog-specific functionalities

• light/dark mode switcher (client side)
• live textual search for posts (by title only)
• pinned posts (just add pinned: true in the frontmatter)
• "comments" to post through Threads or check the source markdown file on Github
• filter posts by tag
• "posts by year" page template, available at /post/year
• "Buy me a coffee" tip button
• "reading time" for posts
• "old post warning" for 2+ years old content
• "personal devices timeline" section
• CSS themes support (at the moment only an "xmas" one is included)
• basic CLI stats (total posts, drafts, device cards)

💻 CLI commands

Besides the typical dev scripts (mostly inherited from Nuxt) I've added some custom scripts to better manage the blog through terminal:

Command	Description
npm run new:post	Create new blog post
npm run new:device	Create new device card
npm run stats	Generate simple blog statistics
npm run drafts	List draft posts
npm run convert:webp path/to/file	Convert images to .webp

✅ Built-in todo utility

I've added an internal file-based todo list utility, it can be useful if you need to keep some notes within the project. The list is stored and read from a todo.md file. This is a very simple solution, with no interest in replacing full fledged todo app.

You can create and edit the file manually, but there are some small NPM scripts that can help to manage it:

Command	Description
npm run todo:init	Create the todo.md file
npm run todo:list	As it says, print the list on the terminal
npm run todo:add -- "content"	Add "content" to the todo list
npm run todo:done -- 1	Set todo item with provided index as done
npm run todo:remove -- 1	Remove todo item based on provided index

Note: the todo.md file is git-ignored by default so if you want it to be synced on every cloned copy of the repo you will have to remove it from the the .gitignore, but remember that in case of a public repository the file will be visible to anyone.

🖼️ Converting images to .webp

To achieve better page loading performance, you should use as much as possible formats like the .webp.

For this reason I've included a simple converter script based on sharp that can convert a single file or a whote folder of .png, .jpg/.jpeg files and convert them to .webp format, making it very easy to do some optimizations.

npm run convert:webp path/to/file-or-folder

the default .webp quality is set to 90, but you can change this using an optional flag

npm run convert:webp path/to/file-or-folder -- --quality 100

How to change theme

It's easier as changing a line in the /utils/config.ts, however you need a CSS theme file with the same name in /public/styles/themes.

If you wante to create a new theme you can just copy and rename one of the existing files and change the values of the CSS variables in it.

👀 Can I use this to bootstrap my new Nuxt blog?

Sure you can! But this repo is not structured as a template for new projects so you will need to delete all of my content (which is not free to use) and references and add your own. It's not difficult but just a bit tedious, have fun!

📄 License

Code released under the MIT license.