feat: add OG images

fixes: #21
hmajid2301 · Nov 12, 2022 · dbfa160 · dbfa160
1 parent 9f3d113
commit dbfa160
Show file tree

Hide file tree

Showing 123 changed files with 304 additions and 18 deletions.
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -11,7 +11,7 @@ tasks:
 
   new_post:
     cmds:
-      - hugo new --kind post-bundle posts/{{now | date "1995-01-23"}}-{{.ARTICLE_NAME}}
+      - hugo new --kind post-bundle posts/{{now | date "2006-01-02"}}-{{.ARTICLE_NAME}}
     env:
       ARTICLE_NAME: foo
 

diff --git a/archetypes/post-bundle/index.md b/archetypes/post-bundle/index.md
@@ -1,6 +1,6 @@
 ---
 title: {{ replace .Name "-" " " | title }}
-date: {{ dateFormat "1995-01-23" .Date }}
+date: {{ dateFormat "2006-01-02" .Date }}
 canonicalUrl: {{ site.BaseURL }}posts/{{ replace .Name "-" " " | title }}/
 draft: true
 tags: 

diff --git a/archetypes/talk-bundle/index.md b/archetypes/talk-bundle/index.md
@@ -1,6 +1,6 @@
 ---
 title: {{ replace .Name "-" " " | title }}
-date: {{ dateFormat "1995-01-23" .Date }}
+date: {{ dateFormat "2006-01-02" .Date }}
 canonicalUrl: {{ site.BaseURL }}talks/{{ title }}/
 ShowToc: false
 ShowReadingTime: false

diff --git a/...ts/2018-09-03-react-native-expo-with-virtualbox-and-genymotion/images/cover.png b/...ts/2018-09-03-react-native-expo-with-virtualbox-and-genymotion/images/cover.png
diff --git a/content/posts/2018-09-03-react-native-expo-with-virtualbox-and-genymotion/index.md b/content/posts/2018-09-03-react-native-expo-with-virtualbox-and-genymotion/index.md
@@ -7,6 +7,8 @@ tags:
   - android
   - virtualbox
   - expo
+cover:
+  image: images/cover.png
 ---
 My home PC runs Windows for various conveniences, such as gaming. However, for development, I run an Ubuntu virtual
 machine (VM) and Genymotion (on Windows) for testing my app. Genymotion also uses VirtualBox to run its Android

diff --git a/...debugging-react-native-apps-in-webstorm-and-visual-studio-code/images/cover.png b/...debugging-react-native-apps-in-webstorm-and-visual-studio-code/images/cover.png
diff --git a/...8-09-07-debugging-react-native-apps-in-webstorm-and-visual-studio-code/index.md b/...8-09-07-debugging-react-native-apps-in-webstorm-and-visual-studio-code/index.md
@@ -7,6 +7,8 @@ tags:
   - debugging
   - vscode
   - webstorm
+cover:
+  image: images/cover.png
 ---
 Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots
 of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug

diff --git a/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/images/cover.png b/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/images/cover.png
diff --git a/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md b/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md
@@ -6,6 +6,8 @@ tags:
   - python
   - sqlalchemy
   - database
+cover:
+  image: images/cover.png
 ---
 SQLAlchemy is an Object-relational mapping (ORM) made for the Python programming language. ORMs in theory allow
 programmers to abstract away SQL. In simple terms they allow us to interact with a database using purely Python

diff --git a/content/posts/2018-10-27-debugging-a-react-native-webview/images/cover.png b/content/posts/2018-10-27-debugging-a-react-native-webview/images/cover.png
diff --git a/content/posts/2018-10-27-debugging-a-react-native-webview/index.md b/content/posts/2018-10-27-debugging-a-react-native-webview/index.md
@@ -6,6 +6,8 @@ tags:
   - react-native
   - expo
   - debugging
+cover:
+  image: images/cover.png
 ---
 The _core_ logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst
 developing this code there are bound to be errors and issues with the WebView code. Figuring out how to debug

diff --git a/content/posts/2018-10-31-running-expo-react-native-in-docker/images/cover.png b/content/posts/2018-10-31-running-expo-react-native-in-docker/images/cover.png
diff --git a/content/posts/2018-10-31-running-expo-react-native-in-docker/index.md b/content/posts/2018-10-31-running-expo-react-native-in-docker/index.md
@@ -7,6 +7,8 @@ tags:
   - docker
   - expo
   - docker-compose
+cover:
+  image: images/cover.png
 ---
 Running Expo/React Native in a Docker container can sometimes cause issues. In this example, I will be running
 Docker 🐳 within a guest VM (Ubuntu) which will run on my host machine (Windows). My host machine will also

diff --git a/content/posts/2018-11-05-pytest-with-background-thread-fixtures/images/cover.png b/content/posts/2018-11-05-pytest-with-background-thread-fixtures/images/cover.png
diff --git a/content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md b/content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md
@@ -6,6 +6,8 @@ tags:
   - python
   - pytest
   - testing
+cover:
+  image: images/cover.png
 ---
 Recently I had to test some of my Python :snake: :snake: :snake: code which required an external dependency and communicating by using TCP sockets :electric_plug: . You can think of this dependency as essentially a database because it stored information. However, when testing my Python code, I couldn't rely on there always being a TCP server to send messages to.
 

diff --git a/...g-multiple-docker-containers-to-setup-nginx-flask-and-postgres/images/cover.png b/...g-multiple-docker-containers-to-setup-nginx-flask-and-postgres/images/cover.png
diff --git a/...-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md b/...-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md
@@ -7,6 +7,8 @@ tags:
   - python
   - docker-compose
   - flask
+cover:
+  image: images/cover.png
 ---
 ## Terminology
 

diff --git a/...8-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/images/cover.png b/...8-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/images/cover.png
diff --git a/...osts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md b/...osts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md
@@ -7,6 +7,8 @@ tags:
   - docker-compose
   - python
   - sqlalchemy
+cover:
+  image: images/cover.png
 ---
 SQLAlchemy is an object-relational mapper (ORM), it allow us to interact with a database using Python functions and objects. For example, if we have a table called
 `Cats` we could retrieve every row with a command like `Cats.query.all()`. The main advantage of this is that it allows us to abstract away the SQL.

diff --git a/...18-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/images/cover.png b/...18-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/images/cover.png
diff --git a/...posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md b/...posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md
@@ -7,6 +7,8 @@ tags:
   - python
   - pytest
   - flask
+cover:
+  image: images/cover.png
 ---
 Pytest is a popular Python library used for testing. It is my preferred testing library because it requires less boilerplate code than the alternatives such as (the builtin) unittest, the built in testing library.
 In this article, I will show you how you can use `pytest-flask` and `pytest-mock` to test your Flask app. These two

diff --git a/...eme-your-expo-react-native-app-with-redux-and-react-navigation/images/cover.png b/...eme-your-expo-react-native-app-with-redux-and-react-navigation/images/cover.png
diff --git a/...12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md b/...12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md
@@ -7,6 +7,8 @@ tags:
   - react-native
   - react-navigation
   - expo
+cover:
+  image: images/cover.png
 ---
 Recently whilst developing a React Native app (with Expo),
 I built a simple tab navigator using React Navigation library.

diff --git a/...avigator-tabnavigator-and-stacknavigator-with-react-navigation/images/cover.png b/...avigator-tabnavigator-and-stacknavigator-with-react-navigation/images/cover.png
diff --git a/...-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md b/...-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md
@@ -6,6 +6,8 @@ tags:
   - react-native
   - react-navigation
   - expo
+cover:
+  image: images/cover.png
 ---
 
 In this article, we will create a simple React Native (with [Expo](https://expo.io/)) application using React

diff --git a/...-04-19-how-to-add-your-own-type-definitions-to-definitelytyped/images/cover.png b/...-04-19-how-to-add-your-own-type-definitions-to-definitelytyped/images/cover.png
diff --git a/...sts/2019-04-19-how-to-add-your-own-type-definitions-to-definitelytyped/index.md b/...sts/2019-04-19-how-to-add-your-own-type-definitions-to-definitelytyped/index.md
@@ -4,6 +4,8 @@ canonicalURL: https://haseebmajid.dev/posts/2019-04-19-how-to-add-your-own-type-
 date: 2019-04-19
 tags:
   - typescript
+cover:
+  image: images/cover.png
 ---
 Recently I started using TypeScript (TS) with React Native. Now I won't be going over the benefits of
 typescript in this article there are plenty for other articles that will explain the benefits (and drawbacks).

diff --git a/...6-creating-a-simple-restful-app-using-openapi-flask-connexions/images/cover.png b/...6-creating-a-simple-restful-app-using-openapi-flask-connexions/images/cover.png
diff --git a/...019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md b/...019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md
@@ -6,7 +6,8 @@ tags:
   - flask
   - python
   - connexion
-thumbnail: images/swagger-ui.gif
+cover:
+  image: images/cover.png
 ---
 RESTful APIs are very popular at the moment and Python is a great language to develop
 web APIs with. In this article we will go over a documentation first approach to building APIs.

diff --git a/...9-09-23-using-gitlab-ci-to-publish-an-android-react-native-app/images/cover.png b/...9-09-23-using-gitlab-ci-to-publish-an-android-react-native-app/images/cover.png
diff --git a/...osts/2019-09-23-using-gitlab-ci-to-publish-an-android-react-native-app/index.md b/...osts/2019-09-23-using-gitlab-ci-to-publish-an-android-react-native-app/index.md
@@ -7,6 +7,8 @@ tags:
   - ci-cd
   - gitlab
   - android
+cover:
+  image: images/cover.png
 ---
 In this article I will show how you can use the GitLab CI with React Native to create a binary which can be published to the
 Google Play Store.

diff --git a/...publish-react-native-app-to-android-play-store-using-gitlab-ci/images/cover.png b/...publish-react-native-app-to-android-play-store-using-gitlab-ci/images/cover.png
diff --git a/...09-auto-publish-react-native-app-to-android-play-store-using-gitlab-ci/index.md b/...09-auto-publish-react-native-app-to-android-play-store-using-gitlab-ci/index.md
@@ -7,7 +7,8 @@ tags:
   - ci-cd
   - gitlab
   - android
-thumbnail: images/json-key.png
+cover:
+  image: images/cover.png
 ---
 In this article, I will show you how can automate the publishing of your AAB/APK to the `Google Play Console`.
 We will be using the [Gradle Play Publisher](https://github.com/Triple-T/gradle-play-publisher) (GPP) plugin to do

diff --git a/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/images/cover.png b/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/images/cover.png
diff --git a/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md b/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md
@@ -5,7 +5,8 @@ date: 2019-11-09
 tags:
   - react-native
   - android
-thumbnail: images/android-studio.gif
+cover:
+  image: images/cover.png
 ---
 In this article, we will go over how you can use add the new adaptive app icons to your Android app.
 In his article I will be using a React Native project, so the structure of your Android app may vary.

diff --git a/...-12-01-better-imports-with-typescript-aliases-babel-and-tspath/images/cover.png b/...-12-01-better-imports-with-typescript-aliases-babel-and-tspath/images/cover.png
diff --git a/...sts/2019-12-01-better-imports-with-typescript-aliases-babel-and-tspath/index.md b/...sts/2019-12-01-better-imports-with-typescript-aliases-babel-and-tspath/index.md
@@ -5,6 +5,8 @@ date: 2019-12-01
 tags:
   - typescript
   - javascript
+cover:
+  image: images/cover.png
 ---
 In this article, I will explain how you can use typescript aliases with Babel or TSPath.
 If you have been using TypeScript/JavaScript (TS/JS) and have a nested folder structure,

diff --git a/...-13-using-tox-with-a-makefile-to-automate-python-related-tasks/images/cover.png b/...-13-using-tox-with-a-makefile-to-automate-python-related-tasks/images/cover.png
diff --git a/.../2020-01-13-using-tox-with-a-makefile-to-automate-python-related-tasks/index.md b/.../2020-01-13-using-tox-with-a-makefile-to-automate-python-related-tasks/index.md
@@ -6,6 +6,8 @@ tags:
   - python
   - tox
   - makefile
+cover:
+  image: images/cover.png
 ---
 In this article, we will go over how we can use a makefile and tox to automate various Python related tools.
 This article assumes you are running bash (or equivalent).

diff --git a/...sts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/images/cover.png b/...sts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/images/cover.png
diff --git a/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md b/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md
@@ -6,7 +6,8 @@ tags:
   - react-native
   - react
   - react-hooks
-thumbnail: images/main.png
+cover:
+  image: images/cover.png
 ---
 In this article, I will show you how you can change the theme of your app depending on
 the time of the day. We will change the theme of the app depending on if the sun has set or risen.

diff --git a/...using-react-native-with-firebase-cloud-functions-and-gitlab-ci/images/cover.png b/...using-react-native-with-firebase-cloud-functions-and-gitlab-ci/images/cover.png
diff --git a/...0-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md b/...0-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md
@@ -8,7 +8,8 @@ tags:
   - firebase
   - gitlab
   - ci-cd
-thumbnail: images/firebase.gif
+cover:
+  image: images/cover.png
 ---
 In this article, we will talk about how you can use React Native with [Firebase Cloud Functions](https://firebase.google.com/docs/functions).
 We will also go over how we can automate the process of updating the cloud functions using [Gitlab CI](https://docs.gitlab.com/ee/ci/).

diff --git a/...sts/2020-02-23-an-example-gitlab-ci-file-for-react-native-apps/images/cover.png b/...sts/2020-02-23-an-example-gitlab-ci-file-for-react-native-apps/images/cover.png
diff --git a/content/posts/2020-02-23-an-example-gitlab-ci-file-for-react-native-apps/index.md b/content/posts/2020-02-23-an-example-gitlab-ci-file-for-react-native-apps/index.md
@@ -6,6 +6,8 @@ tags:
   - react-native
   - ci-cd
   - gitlab
+cover:
+  image: images/cover.png
 ---
 A bit of backstory when I first started developing React Native apps, I found there weren't
 any good example of Gitlab CI files. So in this article, I will show you an example `.gitlab-ci.yml`

diff --git a/content/posts/2020-03-28-how-to-deploy-docz-on-gitlab-pages/images/cover.png b/content/posts/2020-03-28-how-to-deploy-docz-on-gitlab-pages/images/cover.png
diff --git a/content/posts/2020-03-28-how-to-deploy-docz-on-gitlab-pages/index.md b/content/posts/2020-03-28-how-to-deploy-docz-on-gitlab-pages/index.md
@@ -6,7 +6,8 @@ tags:
   - gitlab
   - ci-cd
   - docz
-thumbnail: images/docs.png
+cover:
+  image: images/cover.png
 ---
 In this article I will show you how you can deploy a Docz website on Gitlab pages, using `.gitlab-ci.yml`.
 Most of this article should be applicable to Github pages as well.

diff --git a/content/posts/2020-04-05-using-react-hooks-context-local-storage/images/cover.png b/content/posts/2020-04-05-using-react-hooks-context-local-storage/images/cover.png
diff --git a/content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md b/content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md
@@ -6,6 +6,8 @@ tags:
   - react
   - react-hooks
   - react-context
+cover:
+  image: images/cover.png
 ---
 In this article, I will show how you can use React Context with React Hooks to store global state across a React app,
 then store that state in local storage. This can be used for example to store light vs dark theme, then whenever the

diff --git a/content/posts/2020-05-01-how-to-use-dind-with-gitlab-ci/images/cover.png b/content/posts/2020-05-01-how-to-use-dind-with-gitlab-ci/images/cover.png
diff --git a/content/posts/2020-05-01-how-to-use-dind-with-gitlab-ci/index.md b/content/posts/2020-05-01-how-to-use-dind-with-gitlab-ci/index.md
@@ -6,6 +6,8 @@ tags:
   - docker
   - gitlab
   - ci-cd
+cover:
+  image: images/cover.png
 ---
 Like most developers, we want to be able to automate as many and as much of processes as possible. Pushing Docker
 images to a registry is a task that can easily be automated. In this article, we will cover how you can use

diff --git a/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/images/cover.png b/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/images/cover.png
diff --git a/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md b/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md
@@ -5,6 +5,8 @@ date: 2020-05-10
 tags:
   - ajax
   - javascript
+cover:
+  image: images/cover.png
 ---
 
 ![demo](images/main.gif)

diff --git a/...ent/posts/2020-05-31-an-example-react-native-project-structure/images/cover.png b/...ent/posts/2020-05-31-an-example-react-native-project-structure/images/cover.png
diff --git a/content/posts/2020-05-31-an-example-react-native-project-structure/index.md b/content/posts/2020-05-31-an-example-react-native-project-structure/index.md
@@ -5,6 +5,8 @@ date: 2020-05-31
 tags:
   - react-native
   - structure
+cover:
+  image: images/cover.png
 ---
 In this article, I will go over an example project structure you can use for your React Native projects.
 This of couse my opinion so feel free to tweak the structure to your needs/preferences.

diff --git a/...s/2020-06-09-testing-a-connexion-flask-application-with-pytest/images/cover.png b/...s/2020-06-09-testing-a-connexion-flask-application-with-pytest/images/cover.png
diff --git a/...ent/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md b/...ent/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md
@@ -7,6 +7,8 @@ tags:
   - flask
   - testing
   - pytest
+cover:
+  image: images/cover.png
 ---
 In this article, I will show you how you can test a Python web service that was built using [Connexion](https://github.com/zalando/connexion/)
 (a wrapper library around Flask). We will go over how you can mock functions and how you can test

diff --git a/...-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/images/cover.png b/...-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/images/cover.png
diff --git a/...sts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md b/...sts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md
@@ -8,6 +8,8 @@ tags:
   - pytest
   - gitlab
   - ci-cd
+cover:
+  image: images/cover.png
 ---
 On a recent project, I was working on, I wanted to test my web service using docker-compose where I can run and kill
 Docker containers used by the application and see how my web application reacts to that. In this article, we will
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,8 @@ tags: @@
       - python
       - pytest
       - testing
+    cover:
+      image: images/cover.png
     ---
     Recently I had to test some of my Python :snake: :snake: :snake: code which required an external dependency and communicating by using TCP sockets :electric_plug: . You can think of this dependency as essentially a database because it stored information. However, when testing my Python code, I couldn't rely on there always being a TCP server to send messages to.
@@ Expand Down @@