/dinhanhthi.com-v4-gatsby

Version 4 of dinhanhthi.com using GatbsyJS & TailwindCSS.

Primary LanguageTypeScriptBSD Zero Clause License0BSD

v4.dinhanhthi.com

Version 4 of dinhanhthi.com using GatbsyJS & TailwindCSS.

🚸 UPDATE on May 01, 2022: I DISCONTINUE THIS PROJECT because Gatbsy doesn't support flexibility for sizes, positions,... for images in markdown files (I know we can use mdx with a custom component but I'd rather use markdown syntax with additional customizations). It's less flexible than 11ty. For this reason, I continue to use 11ty.

👉 A demo of what I did.

It's not complete but useful anyway

If you want to know how I migrate the styles from 11ty the current version to Gatsby.

🎉 What I've done so far:

  • Gatsby 4
  • General layout, navigation with full buttons, search bar (search function isn't implemented yet).
  • Dark / light mode.
  • Fully integrated TailwindCSS + how to create custom classes, groups,....
  • Page generation (without styles): custom page (about, index,...), categories, tags, single-post blog, single-post notes,...
  • Integrated KaTeX for math equations.
  • Code syntax highlighting.
  • Eslint.
  • Finish styling About page like the actual version.

Dev

gatsby develop # or `npm run dev`
# http://localhost:5555/
# http://localhost:5555/___graphql

# For a production build
gatsby build

# Note that: @react-icons/all-files lacks some icons
npm install react-icons --save

First install

npm i

# Error:  Cannot find module 'eslint'?
npm link eslint

Ipsum

Check the examples.

---
title: "All-in-One Components"
tags: [mlops, ml, thu nghiem]
---

import { LoremIpsum } from 'react-lorem-ipsum';

<LoremIpsum p={2} />

Notes for writing

  1. Tag: tags: [mlops, Thu Nghiem] => slugs: mlops, thu-nghiem
  2. Post icon: icon: airflow.svg or icon: header/airflow.svg (all icons must be stored in /src/img/header/)

Using Mdx

Create a new field / node in mdx

Read this using createNodeField.

Fake dark

Open dev tool > ctrl + shift + p > Emulate CSS prefers-color-scheme: dark / light.

Or go to 3 dots (next to settings) > More tools > Rendering > search for "prefers-color-scheme"

Custom CSS?

Just add them to src/main.scss.

Markdown things

http://localhost:5555/blog/blog-test/

Change default url of markdown /blog/ (read more)

// gatsby-node.js
const value = createFilePath({ node, getNode })
createNodeField({
  name: 'slug',
  node,
  value: `/blog${value}`,
})

KaTeX

How to install KaTeX with new version of Gatsby? The versions are important. If you are using Gatbsy v4, follow this.

gatsby-remark-images problems with mdx

❗ Before continuing: If we wanna use markdown in caption of the image (bold text, link,...), we have to disable showCaptions in the below option and customize the css rule.

![Alt that will be used as caption.](./img/home.jpg)
_This is a caption with **bold text** and `code`._

If we don't use markdown inside caption: Things in gatsby-config.js (The order is important, I don't know why!).

module.exports = {
  plugins: [
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-remark-images',
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          'gatsby-remark-unwrap-images', // We need this to overcome the err <figcaption> cannot inside <p>
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 900, // Tip to get by default 100% width of the container
              linkImagesToOriginal: false,
              showCaptions: ['title', 'alt'],
              // markdownCaptions: true, // if "true" => parsing error, I don't know why???
              loading: 'lazy',
            },
          },
        ]
      }
    }
  ]
}
# Alt as caption
![Example image description](./img/home.jpg)

# Title as caption
![Example image description](./img/home.jpg "This is the caption.")

Tailwind things

Markdown styles with prose

Custom elements here.

Important

Using !important like !transition or sm:hover:!tw-font-bold (ref)

Custom classes

Using @apply for a group of classes, ref.

Also a custom class like

@tailwind base;

@layer base {
  /* Paragraphs should have a bottom margin to separate them, by default. */
  p {
    @apply mb-3;
  }
}

Understanding @layer

👉 Read more.

Difference between base, components and utilities, read here.

  • base: override browser default styles, eg: p, html,...
  • components: container's classes, eg: container, mx-auto, px-2,... We can add some custom things like btn with @apply.
  • utilities: the meat of tailwind.
  • There are other layers too.

References