Membuat Blog JamStack dengan Framework GatsbyJs Part 4

March 31, 2023

Muhammad Syukri

Styling di GatsbyJs

NOTE: CSS adalah salah satu styling language (bahasa desain), bagian dari markup language yang dapat “mewarnai” atau mendesain suatu halaman website. CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML. SASS adalah bahasa yang membantu web developer membuat CSS untuk membangun website dengan cepat dan mudah.

Pada bahasan kali ini, akan dibahasa penggunaan SASS sebagai Styling di GatsbyJS.

Menambahkan gatsby-plugin-sass

Berikut langkah-langkahnya:

Install dengan perintah

npm install sass gatsby-plugin-sass

Konfigurasi file gatsby-config.js

module.exports = {
    plugins: [
        'gatsby-plugin-sass'
    ],
}

Menambahkan CSS Modules

mkdir styles

Isi file index.scss

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0;
    -webkit-font-smooting: antialiased;
    -moz-osx-font-smooting: grayscale;
}
....... dst ......

Buat file header.module.scss di folder components

.header {
    padding: 1rem 0 3rem;
}

.title {
    color: #000000;
    font-size: 3rem;
    text-decoration: none;
}

.nav-list {
    display: flex;
    list-style-type: none;
    margin: 0;
}

.nav-item {
    color: #999999;
    font-size: .9rem;
    margin-right: 1.3rem;
    text-decoration: none;
}

.nav-item: hover {
    color: #666666;
}

.active-nav-item {
    color: #333333;
}

Edit file header.js di folder components Tambahkan baris berikut

import React from "react"
import { Link } from "gatsby"

import headerStyles from "./header.module.scss"

const Heade = () => {
    return (
        <header className={headerStyles.header}>
            <h1>
                <Link className={headerStyles.title} to="/">
                    My Projects
                </Link>
            </h1>
            <nav>
                <ul className={headerStyles.navList}>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">
                            Home
                        </Link>
                        <Link className={headStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/blog">
                            Blog
                        </Link>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/about">
                            About
                        </Link>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/contact">
                            Contact
                        </Link>
                    </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header

Buat file layout.module.scss pada folder components Tambahkan baris berikut

.container {
    margin: 0 auto;
    max-width: 750px;
    padding: 1rem;
}

Edit file layout.js di folder components Tambahkan baris berikut

import React from "react"
import Header from "./header"
import Footer from "./footer"

import "../styles/index.scss"

import * as layoutStyles from "./layout.module.scss"

const Layout = (props) => {
    return (
        <div className={layoutStyles.container}>
        <Header />
            {props.children}
        <Footer />
        </div>
    )
}

export default Layout

Menambahkan content pada file layout.module.scss di folder components

.content {
    flex-grow: 1;
}

API dengan GraphQL

NOTE: Berbeda dengan SQL dan NoSQL yang merupakan bahasa query database, GraphQL merupakan bahasa query untuk sebuah API (Application Program Interface) yang bisa juga dinobatkan sebagai konsep baru API. GraphQL diciptakan oleh tim internal Facebook yang juga digunakan untuk keperluan internal pada tahun 2012. Karena dianggap terlalu sakti untuk digunakan Facebook sendiri, akhirnya pada tahun 2015 Facebook merilis GraphQL untuk publik. Project GraphQL kemudian berpindah tangan dari Facebook ke organisasi baru yaitu GraphQL Foundation yang berada di bawah naungan Linux Foundation pada tahun 2018.

Cara mengakses GraphQL

Pada web browser ketikkan alamat http://localhost:8000/___graphql maka akan tampil halaman graphql berikut: tampilan halaman graphql

Contoh menampilkan siteMetadata title dan author dengan GraphQl

Pada halaman GraphQL sisi kiri ketikkan query berikut:

query MyQuery {
  site {
    siteMetadata {
      title
      author
    }
  }
}

Hasilnya akan terlihat seperti gambar berikut: tampilan halaman graphql

Plugin File System GatsbyJs

NOTE Plugin Gatsby adalah sebuah program tambahan yang memungkinkan pengguna untuk mengambil dan memproses data dengan lebih mudah pada aplikasi Gatsby yang sedang dibuat. Plugin ini berfungsi sebagai penghubung antara aplikasi Gatsby dan sumber data eksternal.

Salah satu jenis plugin Gatsby yang dapat digunakan adalah plugin untuk mengambil data dari sistem file lokal. Plugin ini akan membuat sebuah node dari file yang berada di dalam sistem file lokal, dan node tersebut dapat diproses dan dimanipulasi dengan bantuan plugin transformer yang berbeda-beda.

Contohnya, dengan menggunakan plugin gatsby-transformer-json, file dengan format JSON yang diambil dari sistem file lokal dapat diubah menjadi sebuah node JSON. Demikian juga dengan plugin gatsby-transformer-remark, file markdown yang diambil dari sistem file lokal dapat diubah menjadi sebuah node MarkdownRemark.

Dengan adanya plugin-plugin tersebut, pengguna dapat dengan mudah mengambil dan mengubah data dari sistem file lokal menjadi bentuk yang sesuai dengan kebutuhan aplikasi Gatsby yang sedang dibuat.

Untuk menggunakan plugin ini, langkah-langkah yang perlu dilakukan adalah sebagai berikut:

Pastikan plugin Gatsby untuk mengambil data dari sistem file lokal sudah terinstall pada proyek Gatsby yang sedang dibuat. Jika belum, install plugin tersebut dengan perintah
```
npm install gatsby-source-filesystem.
```
Buka file gatsby-config.js pada proyek Gatsby dan tambahkan konfigurasi plugin Gatsby untuk mengambil data dari sistem file lokal dengan menambahkan kode berikut:

module.exports = {
    siteMetadata: {
        title: 'My Projects',
        author: 'Muhammad Syukri'
    },
    plugins: [
        'gatsby-plugin-sass',
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'src',
                path: `${__dirname}/src/`
            }
        }
    ]
}

Pada kode di atas, terdapat parameter title dan author yang harus diberikan nama yang unik pada setiap instance plugin yang digunakan. Jadi jika ingin menggunakan plugin ini pada beberapa lokasi sistem file lokal, tambahkan konfigurasi plugin yang sama dengan nama yang berbeda.
Selanjutnya, parameter path harus diubah menjadi path yang sesuai dengan lokasi file yang ingin diambil. Path dapat berupa absolute path atau relative path. Sebagai contoh path di atas adalah src
Setelah konfigurasi plugin Gatsby untuk mengambil data dari sistem file lokal sudah ditambahkan, data pada file dapat diakses pada aplikasi Gatsby dengan menggunakan GraphQL. Gunakan query seperti contoh berikut untuk mengambil data pada file JSON, misalnya pada file header.js akan menampilkan data title.
```
query {
  site {
    siteMetadata {
      title
    }
  }
}
```
Pada file footer.js untuk menampilkan author, berikut kodenya.
```
query {
        site {
            siteMetadata {
                author
            }
        }
    }
```

Contoh implementasi di kode program

Import GraphQL dan useStaticQuery di file header.js

import { Link, graphql, useStaticQuery } from "gatsby"
... dst ...

const Header = () => {
    const data = useStaticQuery(graphql`
        query {
            site {
                siteMetadata {
                    title
                }
            }
        }
    `)
    ... dst ...
}

Edit file footer.js

....

import { graphql, useStaticQuery } from "gatsby"

....

const data = useStaticQuery(graphql`
    query {
        site {
            siteMetadata {
                author
            }
        }
    }
`)

.... dst ....

<p>
    Created by {data.site.siteMetadata.author}, © 2023
</p>

Transform Markdown

NOTE Gatsby-transformer-remark adalah salah satu plugin Gatsby yang digunakan untuk mengubah file markdown menjadi konten HTML yang dapat digunakan pada aplikasi Gatsby. Plugin ini dapat mengambil file markdown dari sistem file lokal atau dari sumber data lainnya, dan mengubahnya menjadi node yang dapat diproses pada aplikasi Gatsby.

Plugin ini menggunakan remark dan remark plugins untuk memproses dan mengubah file markdown menjadi HTML. Beberapa fitur yang dapat dilakukan dengan plugin ini antara lain:

Mengubah file markdown menjadi konten HTML yang dapat digunakan pada aplikasi Gatsby. Mengolah metadata pada file markdown, seperti title dan tags. Menambahkan fitur seperti syntax highlight untuk kode pada file markdown. Menambahkan tabel pada file markdown.

Buat file blog.js pada folder pages

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

import Layout from '../components/layout'

const BlogPage = () => {
    const data = useStaticQuery(graphql`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        frontmatter {
                            title
                            date
                        }
                    }
                }
            }
        }
    `)

    return (
        <Layout>
            <h1>Blog</h1>
            <ol>
                {data.allMarkdownRemark.edges.map((edge) => {
                    return (
                        <li>
                            <h2>{edge.node.frontmatter.title}</h2>
                            <p>{edge.node.frontmatter.date}</p>
                        </li>
                    )
                })}
            </ol>
        </Layout>
    )
}

export default BlogPage

Dalam contoh query di atas, allMarkdownRemark adalah nama node yang dihasilkan oleh plugin gatsby-transformer-remark pada aplikasi Gatsby. Node ini memiliki properti frontmatter untuk mengakses metadata pada file markdown, dan properti title dan date untuk mengakses konten yang dihasilkan oleh plugin ini.