chore: FIXes and new updates and new blog post with some responsivene…

…ss fix

content/blog/scheduling-with-timeout-and-interval-decorators-forwarding-call-apply-and-function-binding/index.mdx

@@ -0,0 +1,26 @@
+---
+title:
+  'Scheduling with Timeout and Interval, Decorators, forwarding, call/apply and
+  function binding'
+date: '2024-08-04'
+author: 'Ojo Oluwasetemi Stephen 00S'
+description:
+  'In this episode, we will be looking at scheduling with setTimeout,
+  setInterval (setImmediate nodejs, process.nextTick), decorators, forwarding,
+  call/apply and function binding.'
+tags:
+  - 'livestream'
+  - 'javascript'
+  - 'youtube'
+isPublished: true
+---
+
+https://www.youtube.com/watch?v=kmEptHfk-HE
+
+[Read More on JavaScript.info](https://javascript.info/advanced-functions)
+
+[To watch all the preview episodes of my live JavaScript stream, check this playlist out](https://www.youtube.com/playlist?list=PLTGotybrmgJ1UjOCs73eHwuzguV6Xv9kY)
+
+- Scheduling: setTimeout and setInterval
+- Decorators and forwarding, call/apply
+- Function binding

generate/blogpost.mjs

@@ -3,7 +3,7 @@ import axios from 'axios'
 import dotenv from 'dotenv'
 import fakeUa from 'fake-useragent'
 import fs from 'fs'
-import inquirer from 'inquirer'
+import prompts from 'prompts'
 import jsToYaml from 'json-to-pretty-yaml'
 import mkdirp from 'mkdirp'
 import { createRequire } from 'module'
@@ -15,9 +15,6 @@ import tinify from 'tinify'
 import { fileURLToPath } from 'url'
 import util from 'util'
 
-
-
-
 // Get the root path to our project (Like `__dirname`).
 const root = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url)
@@ -42,19 +39,37 @@ const listify = a =>
     : null
 
 async function generateBlogPost() {
-  const {title, description, tags, isPublished} = await inquirer.prompt([
+
+  // create a prompt for blog post or youtube video post
+  const {postType} = await prompts([
     {
-      type: 'input',
+      type: 'select',
+      name: 'postType',
+      message: 'What type of post do you want to create?',
+      choices: [
+        {title: 'Blog Post', value: 'blog'},
+        {title: 'YouTube Video', value: 'youtube'},
+      ],
+    },
+  ])
+
+  console.log(postType)
+
+  // process.exit(0)
+
+  const {title, description, tags, isPublished} = await prompts([
+    {
+      type: 'text',
       name: 'title',
       message: 'Title',
     },
     {
-      type: 'input',
+      type: 'text',
       name: 'description',
       message: 'Description',
     },
     {
-      type: 'input',
+      type: 'text',
       name: 'tags',
       message: 'Tags (comma separated)',
     },
@@ -64,7 +79,7 @@ async function generateBlogPost() {
       message: 'Do you want to publish?',
     },
     // {
-    //   type: 'input',
+    //   type: 'text',
     //   name: 'keywords',
     //   message: 'Keywords (comma separated)',
     // },
@@ -74,7 +89,10 @@ async function generateBlogPost() {
   const destination = fromRoot('/content/blog', slug)
   mkdirp.sync(destination)
 
-  const bannerCredit = await getBannerPhoto(title, destination)
+  let bannerCredit = null
+  if (postType !== 'youtube') {
+    bannerCredit = await getBannerPhoto(title, destination)
+  }
 
   const yaml = jsToYaml.stringify(
     removeEmpty({
@@ -108,9 +126,9 @@ async function getBannerPhoto(title, destination) {
     wait: false,
   })
 
-  const {unsplashPhotoId} = await inquirer.prompt([
+  const {unsplashPhotoId} = await prompts([
     {
-      type: 'input',
+      type: 'text',
       name: 'unsplashPhotoId',
       message: `What's the Unsplash Photo ID for the banner for this post?`,
     },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "oos-personal-website",
+  "name": "oos-website",
   "description": "I write about modern JavaScript, web development, computer science and opinions are mine.🚀",
   "version": "1.0.0",
   "private": "true",
@@ -36,18 +36,16 @@
     "gatsby-plugin-image": "^3",
     "gatsby-plugin-manifest": "^5",
     "gatsby-plugin-mdx": "^5",
-    "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-nprogress": "^5",
     "gatsby-plugin-offline": "^6.13.2",
-    "gatsby-plugin-remove-serviceworker": "^1.0.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^5",
     "gatsby-plugin-sitemap": "^5",
     "gatsby-plugin-styled-components": "^5",
     "gatsby-plugin-twitter": "^5",
-    "gatsby-plugin-typography": "^5",
     "gatsby-plugin-workerize-loader": "^2",
     "gatsby-remark-autolink-headers": "^6",
+    "gatsby-remark-code-buttons": "^2.0.7",
     "gatsby-remark-copy-linked-files": "^6",
     "gatsby-remark-embedder": "^6",
     "gatsby-remark-images": "^6",
@@ -63,25 +61,20 @@
     "postcss": "8",
     "postcss-loader": "4",
     "prismjs": "^1.15.0",
+    "prompts": "^2.4.2",
     "react": "^18",
     "react-dom": "^18",
     "react-helmet": "^6.1.0",
     "react-tooltip": "^5",
     "react-use-gesture": "^9.1.3",
     "react-utterances": "^0.6.4",
     "reading-time": "^1.5.0",
-    "rehype-document": "^7",
-    "rehype-format": "^5",
-    "rehype-stringify": "^10",
-    "remark-rehype": "^11",
     "styled-components": "^6",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7",
     "babel-preset-gatsby": "^3",
-    "cross-env": "^7.0.2",
-    "dotenv-cli": "^4.0.0",
     "eslint": "^7.12.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-kentcdodds": "^16.1.0",
@@ -94,8 +87,6 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "esm": "^3.2.25",
-    "gatsby-remark-code-buttons": "^2.0.7",
     "husky": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
     "is-ci-cli": "^2.1.2",
@@ -106,7 +97,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
-    "start-server-and-test": "^1.11.5",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-config-styled-components": "^0.1.1",

src/components/PortfolioCard.js

@@ -18,6 +18,11 @@ const PortfolioCardStyles = styled.div`
         box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
           rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
       }
+      /* phones */
+      @media screen and (min-device-width: 320px) and (max-device-width: 768px) {
+        max-width: 300px;
+        height: 100%;
+      }
     }
   }
   .card-details {

src/pages/index.jsx

@@ -40,6 +40,13 @@ const TopProjectStyles = styled.div`
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
       rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   }
+
+  /* phones */
+  @media screen and (min-device-width: 320px) and (max-device-width: 768px) {
+    h1 {
+      margin-top: 30rem;
+    }
+  }
 `
 
 const LatestPostStyles = styled.div`
@@ -175,9 +182,10 @@ function Hero({site}) {
         I&apos;m <Typing text={name} />
       </h1>
       <p>
-        I&apos;m a <mark className="ibm-plex-mono-regular-italic">{jobTitle}</mark>
-        . I specialize in building web applications with TypeScript, JavaScript, React, and Node.js. You can
-        explore my projects on{' '}
+        I&apos;m a{' '}
+        <mark className="ibm-plex-mono-regular-italic">{jobTitle}</mark>. I
+        specialize in building web applications with TypeScript, JavaScript,
+        React, and Node.js. You can explore my projects on{' '}
         <a
           href={`https://github.com/${siteMetadata?.socials?.github}`}
           target="_blank"

src/styles/theme.css

@@ -204,7 +204,7 @@ pre[data-line] {
 .gatsby-code-button {
 }
 .gatsby-code-button-icon {
-  fill: white;
+  fill: red;
 }
 .gatsby-code-button-toaster {
 }