In 2015, I decided to lunch my blog Olaban. I wanted to have a place where I can talk about my interests, specifically games and game design. At the time, I had very basic web development experience (I still do, but I picked up a few tricks 😄), and I wanted to have a blog in the fastest way possible. In the same time, I loved trying new web technologies and to my delight a new blogging platform just appeared: Ghost.

Ghost had a very easy and seamless installation process and I was lucky to find a quite cool theme for my blog: Vapor by Seth Lily. I ended up publishing few posts but unfortunately, due to a variety of events happening in my life and to my never ending curse of procrastination, I abandoned writing in it. In fact, my last blog post was three years ago! Time flies fast!

To regain my writing kindle, and to get my self involved with a new technology, I decided to remake Olaban. However, this time I wanted to support both English and Arabic. Moreover, I wanted full control over the theme. So, I ended up looking for static site generators as they are the thing that cool programmers use for their blogs nowadays 😛. Since I have worked with Vue extensively, I got attracted to VuePress. VuePress was intended initially as a project to generate docs for Vue and its side projects. However, with community love and contribution, it grew to be a general-purpose static site generator. Additionally, it supports integrating Vue components within the markdown files! giving the developers unlimited control and infinite possibilities.

In addition to VuePress, I used Vuetify as my user interface framework which is solid bootstrap-inspired frontend framework for Vue application. I faced some trouble at first getting Vuetify to work with VuePress, especially with getting icons to work. After some googling and trial and error, I was thankfully able to make them work together. To do so, all you need to do is to update the enhanceApp.js with the following:

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
}) => {
  Vue.use(Vuetify);
  options.vuetify = new Vuetify({
    icons: {
      iconfont: "mdi",
    },
  });
};

Another important thing you would need to do (if your blog is multi-lingual is) to integrate the localization of Vuetify with the localization (i.e internationalization) of VuePress using some vue watch magic:

watch: {
  $lang() {
    this.$vuetify.rtl = this.$lang == "ar-SA";
  },
},

Since VuePress does not give special css classes to the html generated from the markdown, I wasn't sure how can I localize the css for two languages. Especially since Arabic text requires right-to-left alignment. So I ended up encompassing the <Content /> component with two separate components: <ArabicContent /> and <EnglishContent /> and using scoped css styles I was able to customize the css based on language. But you might ask how does a scoped css in a parent component affect a child component? Answer: Deep Selectors. For example, this css will force the paragraphs alignment to be rtl in Arabic mode:

/deep/ p {
  direction: rtl;
}

Other than these few issues, integrating Vuetify and VuePress was a smooth process. I will definitely be on the look for using VuePres again as I loved my experience with it and I would highly recommend it for blog, and simple content projects. Writing blog posts in markdown is quite easy too, however I was surprised when I realized there are zero PC editors for rtl markdown! That's a side project waiting to be hacked! (I was actually able to find a Mac rtl editor and a web rtl editor but nothing for PC yet). More importantly, I am happy that I finally got to remake my blog, and I hope I get to be more consistent in my writings in the following days.