Hello Comments!

For this weeks weekend project I decided to dive a bit deeper into Google Firebase and built a commenting system for this Gridsome-based blog from scratch. It was definitely not worth the time in the sense of adding commenting possibility to a blog but as a learning journey I’d say this was a fun little project.

Gridsome is a JAMstack tool which means that features like commenting need to be implemented either as a third-party solution or by using a separate backend functionality be it serverless functions, a traditional REST backend or something similar. Firebase is an interesting app development platform startup that was aquired by Google in 2014. What makes Firebase intresting for this kind of applications is its realtime database and hosted pluggable authentication system. Google offers a fairly generous free tier for the services so testing it out for a personal project like this is costs you only your time.

I’ll write more in depth about technical details later but for now, I’m happy to get this thing published. The biggest lesson learned here was that as with any tehcnologies, even though the 2 minute demo seems really clean and easy, most real worl implementations need to focus on details that are hard to get right if you care about user experience and security.

(Obviously, this first implementation is very unpolished and not feature-complete, but it should work, that’s the most important thing for now.)

Better GraphQL Explorer for Gridsome

Gridsome data layer is built on GraphQL and the development server comes bundled with a graphical UI for studying the schema building queries. This UI, however, is not very useful if you don’t already know GraphQL. I recently found out that there is a much better tool called graphiql-explorer that allows you to build GraphQL queries graphically and that it can be very easily used with Gridsome as a VS Code plugin.

GraphiQL Explorer inside VS Code

(Note: if you happen to use some other editor, you should be able to install graphiql-explorer by adding it in the dev server config with configureServer-hook.)

The 1-minute install

  1. Install the vscode-graphiql-explorer-extension.
  2. In your repository root, while your development server is running, generate a GraphQL schema for the plugin with following command: npx get-graphql-schema http://localhost:8080/___graphql > schema.graphql (the first part of the URL should be your development server URL). You might want to add schema.graphql to gitignore as well.
  3. Profit!11

You can now use the GraphiQL explorer inside your VS Code. Run Explore schema with GraphiQL command to see it in action.

Notes

  • The two other commands added by this extension don’t currently work with the custom Gridsome GraphQL blocks inside -vue files. What you can do is either copy the code in an open explorer window or open it in a new file and then run the explore-command. I opened a ticket for fixing this, it seems that it might be fixed quite soon.
  • graphiql-explorer is bundled with Gatsby and according to Gridsome developers, they might switch to using it in Gridsome as well. There’s actually an old ticket about this, too.
  • Shout-out to @eunjae_lee for leading me into this rabbit hole 🙂

Building An Open Graph Image Builder (Part 1)

I’ve been slowly updating this blog to the modern world from the ages when people wrote their XML-feeds by hand (yes, it was a thing). One of the “new” things Web sites nowadays have in their meta tags are Open Graph preview images (or social previews). These images are used to make preview cards in various places, for example when posting links to Twitter and other sites.

There are tools like Pablo for creating these images online. Recently I’ve switched to creating them manually with Pixelmator but I’ve long been looking for a Web-based solution that could be integrated better with my other blogging workflows.

Two days ago I happened to stumble on to ZEIT Now’s blog post Social Cards as a Service where they dogfood their own serverless platform by building a simple image generator tool that uses Puppeteer to render the images. I immediately dove in to the source code hoping that I could modify it to my own needs but it looked way too complicated for my taste. (In other words, I didn’t understand most of it.) The UI got me thinking that building a simple framework around Tailwind would probably be super easy and would allow lots more control. So I sat down for two evenings and came up with Open Graph Image Builder.

This is still a work in progress and I’m not sure how far I want to develop this but so far it has been a fun little project.

The Toolchain

My absolutely favourite frontend tool for simple projects like this has been Vue CLI. Problem with that is that as soon as you start thinking about publishing something, you’ll have gazillion things to glue together and configure before you have a production-ready site. (I should probably invest some time into a proper cookiecutter template…) This exactly is why I recently wrote Tulip, a simple one page starter template for Gridsome (which is just Vue with some JAMstack flavor).

Tulip ships with Tailwind CSS preconfigured so I was immediately ready to build something interesting.

The third weapon of choise was ZEIT Now. I’ve been following their journey for a long time because of Simon Willison but never actually tried the platform. As it was their inspiration that led me to this path it was only appropriate to try out the service with this project. The first installation and publishing workflow via the deploy button in Tulip repository was unbelievably easy, even easier than Netlify if it’s even possible. (Although I did have an issue with GitLab import. It didn’t work so I pushed my code in GitHub instead and after that everything has been smooth sailing.)

Example output:

Tulip starter for Gridsome preview

To Be Continued…

The project is just getting started and I want to learn the ZEIT platform a bit more to be able to write about it better. I’ll also probably implement a proper backend rendering for the images so it’ll be a bit more useful in practise.

In part 2 of this series I’ll dive deeper into the code, going through some of the challenges and design decisions along the way.

In the mean time, check out the project source code and follow me on Twitter!

Howto: Draft Posts With Gridsome

Gridsome is a Vue-based static site generator inspired by Gatsby. As of version 0.7 there is no official way to have a publishing flow that separates draft and published posts. For me this is a big deal as I like to iterate on my writings for several days or weeks before publishing them. Luckily, there is an easy way to add support for draft posts yourself.

Adding a New GraphQL Property

At the heart of a Gridsome site is a GraphQL data layer that you can use and manipulate in development mode. Gridsome fetches any sources you define into this GraphQL storage in development mode and during the build process writes the data into static files as instructed in your configuration.

The naive way of importing any data into Gridsome just adds it into the storage and it then respectively gets published as you build the site. A super simple way to implement draft functionality is to simply add an attribute to your data object and then filtering by this attribute when building the site.

Add the following javascript in a file called gridsome.server.js in the root of your Gridsome project:

module.exports = function(api) {   api.loadSource(store => {     if (process.env.NODE_ENV === 'production') {       const posts = store.getContentType('Post')        posts.data().forEach(node => {         if (node.published !== true) {           posts.removeNode(node.id)         }       })     }   }) }

(Change the Post ContentType to match whatever your source plugin typeName has been configured to in gridsome.configjs plugins section. The default for source-filesystem-plugin is FileNode.)

Now, when you run gridsome build, the API that loads your sources at build time filters out each post that hasn’t got a published-attribute that evaluates to true. (Note that if you have a blog with lots of content and you don’t want to add a new attribute to all of them, you might want to reverse the logic, for example to if (node.draft !== true). I like to explicitly mark published posts, YMMV.)

For Markdown and Front Matter content you can now add published: false to your post meta to be able to filter out draft posts in production. (Modifying other content sources is left to the reader.)

Hello Gridsome!

The publishing frequency of this blog has been somewhat .. irregular to say the least. The previous attempt to bring it to life didn’t quite catch on in the end as a positive problem called life got in the way. But now there’s been just too long break from blogging in English for me so I had to revitalize this project once more. Cue Gridsome.

Gridsome is an interesting static site generator built for Vue. It can read all kinds of data sources from REST APIs to Markdown files and then build the end result as a fully static site that can be deployed very easily pretty much anywhere. I opted for Netlify as I’ve found it super easy and reliable way to host static sites straight from GitLab.

The migration from a fully dynamic Django site to a fully static Vue site was a somewhat interesting experience, I’m planning to write about it in near future. But for now, here’s to yet another awakening of the Hoyci Blog!