Updates: Chirpy theme, Embeddings

Updates: Chirpy theme, Embeddings
Merge pull request #14 from iamwatchdogs/update

- Update Chirpy theme version.
- Added LinkedIn and Twitter Embedding templates.
- Update Docs accordingly.

Author: iamwatchdogs

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+{
+  "name": "Jekyll",
+  "image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",
+  "onCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
+  "postCreateCommand": "bash .devcontainer/post-create.sh",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.defaultProfile.linux": "bash"
+      },
+      "extensions": [
+        // Liquid tags auto-complete
+        "killalau.vscode-liquid-snippets",
+        // Liquid syntax highlighting and formatting
+        "Shopify.theme-check-vscode",
+        // Shell
+        "timonwong.shellcheck",
+        "mkhl.shfmt",
+        // Common formatter
+        "EditorConfig.EditorConfig",
+        "esbenp.prettier-vscode",
+        "stylelint.vscode-stylelint",
+        "yzhang.markdown-all-in-one",
+        // Git
+        "mhutchie.git-graph"
+      ]
+    }
+  }
+}

.devcontainer/post-create.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+if [ -f package.json ]; then
+  bash -i -c "nvm install --lts && nvm install-latest-npm"
+  npm i
+  npm run build
+fi
+
+# Install dependencies for shfmt extension
+curl -sS https://webi.sh/shfmt | sh &>/dev/null
+
+# Add OMZ plugins
+git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting
+git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
+sed -i -E "s/^(plugins=\()(git)(\))/\1\2 zsh-syntax-highlighting zsh-autosuggestions\3/" ~/.zshrc
+
+# Avoid git log use less
+echo -e "\nunset LESS" >>~/.zshrc

.github/workflows/pages-deploy.yml

@@ -37,12 +37,12 @@ jobs:
 
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3
+          ruby-version: 3.3
           bundler-cache: true
 
       - name: Build site
@@ -53,11 +53,11 @@ jobs:
       - name: Test site
         run: |
           bundle exec htmlproofer _site \
-            \-\-disable-external=true \
+            \-\-disable-external \
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "_site${{ steps.pages.outputs.base_path }}"
 
@@ -70,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.gitignore

@@ -17,7 +17,11 @@ package-lock.json
 
 # IDE configurations
 .idea
-.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+!.vscode/tasks.json
 
 # Misc
+_sass/vendors
 assets/js/dist

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ms-vscode-remote.remote-containers"]
+}

.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  // Prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  // Shopify Liquid
+  "files.associations": {
+    "*.html": "liquid"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
+  },
+  // Formatter
+  "[html][liquid]": {
+    "editor.defaultFormatter": "Shopify.theme-check-vscode"
+  },
+  "[shellscript]": {
+    "editor.defaultFormatter": "mkhl.shfmt"
+  },
+  // Disable vscode built-in stylelint
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  // Stylint extension settings
+  "stylelint.snippet": ["css", "scss"],
+  "stylelint.validate": ["css", "scss"],
+  // Run tasks in macOS
+  "terminal.integrated.profiles.osx": {
+    "zsh": { "path": "/bin/zsh", "args": ["-l", "-i"] }
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run Jekyll Server",
+      "type": "shell",
+      "command": "./tools/run.sh",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "detail": "Runs the Jekyll server with live reload."
+    },
+    {
+      "label": "Build Jekyll Site",
+      "type": "shell",
+      "command": "./tools/test.sh",
+      "group": {
+        "kind": "build"
+      },
+      "problemMatcher": [],
+      "detail": "Build the Jekyll site for production."
+    }
+  ]
+}

Gemfile

@@ -2,27 +2,13 @@
 
 source "https://rubygems.org"
 
-gem "jekyll-theme-chirpy", "~> 6.2", ">= 6.2.2"
+gem "jekyll-theme-chirpy", "~> 7.2", ">= 7.2.4"
 
-group :test do
-  gem "html-proofer", "~> 4.4"
-end
+gem "html-proofer", "~> 5.0", group: :test
 
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
 
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
-
-# Lock jekyll-sass-converter to 2.x on Linux-musl
-if RUBY_PLATFORM =~ /linux-musl/
-  gem "jekyll-sass-converter", "~> 2.0"
-end
+gem "wdm", "~> 0.2.0", :platforms => [:mingw, :x64_mingw, :mswin]

README.md

@@ -34,11 +34,11 @@ With Notebook, you can easily contribute to technical content and gain valuable
 
 Hey there, fellow developer !!!... I'm happy to see you intrested in contributing to this open source project. Since, this project is an open notebook for everyone, you're always welcome to make your techinal writing contribution by writing you own blog, tip & trick, documentation and much more. All you have to do is write down your content in `markdown` *(just like how wrote this README.md file)* and place those file within `_posts` directory. 
 
-> First time ???... Then I highly recommend you to check out [CONTRIBUTING.md](CONTRIBUTING.md "goto CONTRIBUTING.md").
+> First time ???... Then I highly recommend you to check out [CONTRIBUTING.md](docs/CONTRIBUTING.md "goto CONTRIBUTING.md").
 
-- **Step 1:** Make sure you install the required dependencies like `Ruby`, `bundler` and `Jekyll` framework. Installation varies from platform to platform, so make sure to check out the [CONTRIBUTING.md](CONTRIBUTING.md "goto CONTRIBUTING.md").
+- **Step 1:** Setting up development environment. Refer to [CONTRIBUTING.md](docs/CONTRIBUTING.md "goto CONTRIBUTING.md") that guide you to setup the required evironment for the project.
 
-- **Step 2:** After installing the required dependencies, [fork](https://github.com/Grow-with-Open-Source/Notebook/fork "Let's fork this repo") this repository and clone it in your local system, using the following command:
+- **Step 2:** After setting up environment, [fork](https://github.com/Grow-with-Open-Source/Notebook/fork "Let's fork this repo") this repository and clone it in your local system, using the following command:
 ```bash
 git clone https://github.com/<your-github-profile>/Notebook.git
 ```
@@ -80,7 +80,7 @@ unique_key_value:
 ```yml
 shamith_watchdogs:
   name: Shamith Nakka
-  twitter: Shamith29188225
+  twitter: shamith_nakka
   url: https://github.com/iamwatchdogs/
 ```
 
@@ -90,15 +90,16 @@ shamith_watchdogs:
 
 - **Step 6:** Now to the actual task, Create a new markdown file with `YYYY-MM_DD-your-post-name.md` *(make sure your post name is in small letters and separated by single dash)* within the [`_post`](/tree/main/_posts/) directory.
 
-- **Step 7:** Each and every markdown file that you have created for content writing should contain the following meta data (or) config:
+- **Step 7:** Each and every markdown file that you have created for content writing should contain the following meta data called `Front Matter
+`:
 ```md
  ---
   title: <title>
   date: YYYY-MM-DD HH:MM:SS +/-TTTT
   categories: [<main_categories>, <sub_categories_1>, ..., <sub_categories_n>]
   tags: [<tag_1>, ..., <tag_n>]
   author: <respective_author_key_value>
-  img_path: "/assets/img/<your_img_directory_name>/"
+  media_subpath: "/assets/img/<your_img_directory_name>/"
   image:
     path: <name_of_the_img_for_page_cover>
     alt: <alternative_text>
@@ -118,7 +119,7 @@ date: 2023-09-21 20:34:00 +0530
 categories: [Welcome, Guide]
 tags: [introduction]
 author: shamith_watchdogs
-img_path: "/assets/img/welcome-page/"
+media_subpath: "/assets/img/welcome-page"
 image:
   path: "welcome-img.jpg"
   alt: "Welcome Page"
@@ -132,10 +133,10 @@ image:
 
 > [!NOTE] 
 > - Note that the `+/-TTTT` in the `date` section refers the **UTC offset**. You can find your **UTC offset** value by searching for your country in the [list of UTC](https://en.wikipedia.org/wiki/List_of_UTC_offsets "Goto List of UTC offsets"). And if you're from India, you can use the above UTC offset from the example.
-> - Also not that `img_path` and `image` *(including its sub attributes)* are optional and only need when you're going to add images to your post.
+> - Also not that `media_subpath` and `image` *(including its sub attributes)* are optional and only need when you're going to add images to your post.
 > - If there are more than one person working on a single post use `authors` attribute instead of `author`. And the input for the `authors` attribute will be a list of key of authors specified within the [`authors.yml`](_data/authors.yml) file.
 
-- **Step 8:** Now, you can proceed to write your technical content. And if you have any images that are part of your technical writing, then create a new directory using your post's name within `assets/img` directory as `assets/img/<your-post-name>`. Now add your images to your folder. After adding images to your folder, don't forget to add location to `img_path` attribute as `img_path: ../../assets/img/<your-post-name>`. Now, you can directly access your images with specifying full relative path.
+- **Step 8:** Now, you can proceed to write your technical content. And if you have any images that are part of your technical writing, then create a new directory using your post's name within `assets/img` directory as `assets/img/<your-post-name>`. Now add your images to your folder. After adding images to your folder, don't forget to add location to `media_subpath` attribute as `media_subpath: ../../assets/img/<your-post-name>`. Now, you can directly access your images with specifying full relative path.
 
 > [!NOTE] 
 > It's highly suggested to use CDN links for images. But if you could not for any reason, then you can proceed with above process.