DEV Community: Donna Brown

How to Build a Developer Blog using Next JS 13 and Contentlayer - Part three

Donna Brown — Wed, 06 Sep 2023 22:35:57 +0000

Add more directories and pages

Make directories: about, blog, projects under the app directory. Create a page.tsx in each directory. Since the layout is not changing you don’t need to have a layout.tsx file in each directory. Placeholder text is included for app/about/page.tsx.

About Page
app/about/page.tsx

import React from "react";

const About = () => {
  return (
    <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quos laborum
        aut voluptates qui vitae incidunt iusto ipsam, nam molestiae
        reprehenderit quisquam cum molestias ut nesciunt? Culpa incidunt nobis
        libero?
      </p>
      <p>Voluptate natus maiores, alias sapiente nisi possimus?</p>
      <p>
        Ex amet eu labore nisi irure sit magna. Culpa minim dolor consequat
        dolore pariatur deserunt aliquip nisi eu ex dolor pariatur enim. Lorem
        pariatur cillum ullamco minim nulla ex voluptate. Occaecat esse mollit
        ipsum magna consectetur nulla occaecat non sit sint amet. Pariatur quis
        duis ut laboris ipsum velit fugiat do commodo consectetur adipisicing ut
        reprehenderit.
      </p>
    </div>
  );
};

export default About;

Blog Page
app/blog/page.tsx

import React from "react";
import { allPosts } from "contentlayer/generated";
import { compareDesc } from "date-fns";
import PostCard from "@/components/PostCard";

import "../../app/globals.css";

const Blog = () => {
  const posts = allPosts.sort((a, b) =>
    compareDesc(new Date(a.date), new Date(b.date))
  );
  return (
    <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
      <div className='space-y-2 pt-6 pb-8 md:space-y-5'>
        <h1 className='text-3xl mb-8'>Developer Blog</h1>

        {posts.map((post, idx) => (
          <div key={idx}>
            <hr className='grey-200 h-1 mb-10'></hr>
            <PostCard key={idx} {...post} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Blog;

Projects Page
This page contains three components.
components/Fork.tsx which draws a fork.

https://github.com/donnabrown77/developer-blog/blob/main/components/Fork.tsx
components/Star.tsx which draws a star.
https://github.com/donnabrown77/developer-blog/blob/main/components/Star.tsx

components/Card.tsx which displays the github project data display in a card.
https://github.com/donnabrown77/developer-blog/blob/main/components/Card.tsx

Card.tsx uses types created in the file types.d.ts in the root directory.

export type PrimaryLanguage = {
  color: string;
  id: string;
  name: string;
};

export type Repository = {
  description: string;
  forkCount: number;
  id?: number;
  name: string;
  primaryLanguage: PrimaryLanguage;
  stargazerCount: number;
  url: string;
};

type DataProps = {
  viewer: {
    login: string;
    repositories: {
      first: number;
      privacy: string;
      orderBy: { field: string; direction: string };
      nodes: {
        [x: string]: any;
        id: string;
        name: string;
        description: string;
        url: string;
        primaryLanguage: PrimaryLanguage;
        forkCount: number;
        stargazerCount: number;
      };
    };
  };
};

export type ProjectsProps = {
  data: Repository[];
};

export type SvgProps = {
  width: string;
  height: string;
  href?: string;
};

You can provide a link to your github projects instead of accessing them this way but I wanted to display them on my website instead of making the users leave.

You will need to generate a personal access token from github. The github token is included in the .env.local file in this format:
GITHUB_TOKEN="Your token"

Go to your Github and your profile. Choose Settings. It’s near the bottom of the menu.

Go to Developer Settings. It’s at the bottom of the menu. Go to Personal access tokens.

Choose generate new token ( classic ). You’ll see a menu with various permissions you can check. Everything is unchecked by default. At a minimum, you will want to check “public_repo”, which is under “repo”, and you’ll also want to check “read:user”, which is under “user.” Then click “Generate token”. Save that token (somewhere safe make sure it doesn’t make its way into your repository), and put it in your .env.local file. Now the projects should be able to be read with that token.

More information: https://docs.github.com/en/enterprise-server@3.6/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token.

app/projects/page.tsx

import React from "react";
import { GraphQLClient, gql } from "graphql-request";
import Card from "@/components/Card";
import type { DataProps, Repository } from "@/types";

/**
 *
 * @param
 * @returns displays the list of user's github projects and descriptions
 */

export default async function Projects() {
  const endpoint = "https://api.github.com/graphql";

  if (!process.env.GITHUB_TOKEN) {
    return (
      <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
        <div className='mx-auto divide-y'>
          <div className='space-y-2 pt-6 pb-8 md:space-y-5'>
            <h1 className='text-left text-3xl font-bold leading-9 tracking-tight sm:leading-10 md:text-3xl md:leading-14'>
              Projects
            </h1>
            <p className='text-lg text-left leading-7'>
              Invalid Github token. Unable to access Github projects.
            </p>
          </div>
        </div>
      </div>
    );
  }
  const graphQLClient = new GraphQLClient(endpoint, {
    headers: {
      authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
    },
  });

  const query = gql`
    {
      viewer {
        login
        repositories(
          first: 20
          privacy: PUBLIC
          orderBy: { field: CREATED_AT, direction: DESC }
        ) {
          nodes {
            id
            name
            description
            url
            primaryLanguage {
              color
              id
              name
            }
            forkCount
            stargazerCount
          }
        }
      }
    }
  `;

  const {
    viewer: {
      repositories: { nodes: data },
    },
  } = await graphQLClient.request<DataProps>(query);

  return (
    <>
      <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
        <div className='mx-auto divide-y'>
          <div className='space-y-2 pt-6 pb-8 md:space-y-5'>
            <h1 className='text-left text-3xl font-bold leading-9 tracking-tight sm:leading-10 md:text-3xl md:leading-14'>
              Projects
            </h1>
            <p className='text-lg text-left leading-7'>
              List of GitHub projects
            </p>
          </div>
          <div className='container py-4 mx-auto'>
            <div className='flex flex-wrap md:flex-wrap:nowrap'>
              {data.map(
                ({
                  id,
                  url,
                  name,
                  description,
                  primaryLanguage,
                  stargazerCount,
                  forkCount,
                }: Repository) => (
                  <Card
                    key={id}
                    url={url}
                    name={name}
                    description={description}
                    primaryLanguage={primaryLanguage}
                    stargazerCount={stargazerCount}
                    forkCount={forkCount}
                  />
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

This code checks for the github environment variable. If this variable is correct, it then creates a GraphQLClient to access the github api. The graphql query is set up to return the first 20 repositories by id, name, description, url, primary language, forks, and stars. You can adjust this to your needs by changing the query. The results are displayed in a Card component.

Since we have not yet created a navigation menu type localhost://about, localhost://blog, localhost://projects to see your pages.

Header, Navigation Bar, and Theme Changer

Make a directory called _data at the top level. Add the file headerNavLinks.ts to this directory. This file contains names of your directories.

_data/headerNavLinks.ts

const headerNavLinks = [
{ href: "/blog", title: "Blog" },
{ href: "/projects", title: "Projects" },
{ href: "/about", title: "About" },
];


export default headerNavLinks;

Now add:
components/Header.tsx

"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Navbar from "./Navbar";

const Header = () => {
  // useEffect only runs on the client, so now we can safely show the UI
  const [hasMounted, setHasMounted] = useState(false);

  // When mounted on client, now we can show the UI
  // Avoiding hydration mismatch
  // https://www.npmjs.com/package/next-themes#avoid-hydration-mismatch
  useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }

  return (
    <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0 pt-0'>
      <header className='flex items-center justify-between py-10'>
        <div>
          <Link href='#'>
            <div className='flex lg:px-0'>
              {/* logo */}
              <Link href='/'>
                <div
                  id='logo'
                  className='flex-shrink-0 flex items-center bg-primary  h-16 w-25 border-radius'
                >
                  <span
                    id='logo-text'
                    className='text-blue-800  dark:text-blue-400 font-weight:bold text-3xl'
                  >
                    Logo
                  </span>
                </div>
              </Link>
            </div>
          </Link>
        </div>
        <Navbar />
      </header>
    </div>
  );
};

export default Header;

Next is the navigation bar.

app/components/NavBar.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import ThemeChanger from "./ThemeChanger";
import Hamburger from "./Hamburger";
import LetterX from "./LetterX";
import headerNavLinks from "@/data/headerNavLinks";
// names of header links are in
// separate file which allow them to be changed without affecting this component
/**
 *
 * @returns jsx to display the navigation bar
 */
const Navbar = () => {
  const [navShow, setNavShow] = useState(false);

  const onToggleNav = () => {
    setNavShow((status) => {
      if (status) {
        document.body.style.overflow = "auto";
      } else {
        // Prevent scrolling
        document.body.style.overflow = "hidden";
      }
      return !status;
    });
  };

  return (
    <div className='flex items-center text-base leading-5 '>
      {/* show horizontal nav link medium or greater width */}
      <div className='hidden md:block'>
        {headerNavLinks.map((link) => (
          <Link
            key={link.title}
            href={link.href}
            className='p-1 font-medium sm:p-4 transition duration-150 ease-in-out'
          >
            {link.title}
          </Link>
        ))}
      </div>

      <div className='md:hidden'>
        <button
          type='button'
          className='ml-1 mr-1 h-8 w-8 rounded py-1'
          aria-controls='mobile-menu'
          aria-expanded='false'
          onClick={onToggleNav}
        >
          <Hamburger />
        </button>
        {/* when mobile menu is open move this div to x = 0
              when mobile menu is closed, move the element to the right by its own width,
              effectively pushing it out of the viewport horizontally.*/}

        <div
          className={`fixed top-0 left-0 z-10 h-full w-full transform bg-gray-100 opacity-95 duration-300 ease-in-out dark:bg-black ${
            navShow ? "translate-x-0" : "translate-x-full"
          }`}
        >
          <div className='flex justify-end'>
            <button
              type='button'
              className='mr-5 mt-14 h-8 w-8 rounded'
              aria-label='Toggle Menu'
              onClick={onToggleNav}
            >
              {/* X */}
              <LetterX />
            </button>
          </div>
          <nav className='fixed mt-8 h-full'>
            {headerNavLinks.map((link) => (
              <div key={link.title} className='px-12 py-4'>
                <Link
                  href={link.href}
                  className='text-2xl  tracking-widest text-grey-900 dark:text-grey-100'
                  onClick={onToggleNav}
                >
                  {link.title}
                </Link>
              </div>
            ))}
          </nav>
        </div>
      </div>
      <ThemeChanger />
    </div>
  );
};

export default Navbar;

Now for the theme change code.
app/components/ThemeChanger.tsx

"use client";
import React, { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import Moon from "./Moon";
import Sun from "./Sun";

/**
 *
 * @returns jsx to switch based on user touching the moon icon
 */
const ThemeChanger = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  if (!mounted) return null;

  return (
    <div>
      {theme === "light" ? (
        <button
          className='ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4  text-gray-900 hover:text-gray-400'
          aria-label='Toggle light and dark mode'
          type='button'
          onClick={() => setTheme("dark")}
        >
          <Moon />
        </button>
      ) : (
        <button
          className='ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4  text-gray-50 hover:text-gray-400'
          aria-label='Toggle light and dark mode'
          onClick={() => setTheme("light")}
        >
          <Sun />
        </button>
      )}
    </div>
  );
};

export default ThemeChanger;

Links to the svg components Hamburger, LetterX, Moon, Sun, LetterX :
https://github.com/donnabrown77/developer-blog/blob/main/components/Hamburger.tsx
https://github.com/donnabrown77/developer-blog/blob/main/components/LetterX.tsx
https://github.com/donnabrown77/developer-blog/blob/main/components/Moon.tsx
https://github.com/donnabrown77/developer-blog/blob/main/components/Sun.tsx

Now set up the theme provider which calls next themes.
app/components/Theme-provider.tsx

"use client";

import React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

// https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564

export function ThemeProvider(props: ThemeProviderProps) {
  return <NextThemesProvider {...props} />;
}

app/providers.tsx

"use client";

import React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

// https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564
// needs to be called NextThemesProvider not ThemesProvider
// not sure why
export function Providers(props: ThemeProviderProps) {
  return <NextThemesProvider {...props} />;
}

Modify app/layout.tsx to call the theme provider.

Add these two lines to the top:

import Header from "@/components/Header";
import { Providers } from "./providers";

Wrap the calls to the providers around the call to children.

<Providers attribute='class' defaultTheme='system' enableSystem>
<Header />
{children}
</Providers>

In tailwind.config.ts, after plugins[], add:
darkMode: "class",

Run npm dev. You should have everything working except the footer.
For the footer, you can use the social icons here:
https://github.com/donnabrown77/developer-blog/blob/main/components/social-icons/Mail.tsx
I created a social-icons directory under app/components for the icons.
The footer is a component:
https://github.com/donnabrown77/developer-blog/blob/main/components/Footer.tsx

Footer uses a file called siteMetaData.js that you customize for your site.
_data/siteMetData.js

const siteMetadata = {
url: "https://yourwebsite.com",
title: "Next.js Coding Starter Blog",
author: "Your name here",
headerTitle: "Developer Blog",
description: "A blog created with Next.js and Tailwind.css",
language: "en-us",
email: "youremail@email.com",
github: "your github link",
linkedin: "your linkedin",
locale: "en-US",
};


module.exports = siteMetadata;

Now add in app/layout.tsx, like this:


<Header />
{children}
<Footer />

SEO
Next JS 13 comes with SEO features.

In app/layout.tsx, you can modify the defaults such as this:

export const metadata: Metadata = {
title: "Home",
description: "A developer blog using Next JS 13",
};

For the blog pages, add this to app/posts/[slug]/page.tsx. This uses dynamic information, such as the current route parameters to return a metadata object.

export const generateMetadata = ({ params }: any) => {
const post = allPosts.find(
(post: any) => post._raw.flattenedPath === params.slug
);
return { title: post?.title, excerpt: post?.excerpt };
};

Link to github project:
https://github.com/donnabrown77/developer-blog

Some of the resources I used:
https://nextjs.org/docs/app/building-your-application/routing/colocation
https://darrenwhite.dev/blog/nextjs-tailwindcss-theming
https://nextjs.org/blog/next-13-2#built-in-seo-support-with-new-metadata-api
https://darrenwhite.dev/blog/dark-mode-nextjs-next-themes-tailwind-css
https://claritydev.net/blog/copy-to-clipboard-button-nextjs-mdx-rehype
https://blog.openreplay.com/build-a-mdx-powered-blog-with-contentlayer-and-next/
https://www.sandromaglione.com/techblog/contentlayer-blog-template-with-nextjs
https://jpreagan.com/blog/give-your-blog-superpowers-with-mdx-in-a-next-js-project
https://jpreagan.com/blog/fetch-data-from-the-github-graphql-api-in-next-js
https://dev.to/arshadyaseen/build-a-blog-app-with-new-nextjs-13-app-folder-and-contentlayer-2d6h

How to Build a Developer Blog using Next JS 13 and Contentlayer - Part two

Donna Brown — Wed, 06 Sep 2023 22:35:47 +0000

Next JS 13 structure

The blog directory structure will follow a similar approach to the link listed below but I named the directory posts and placed it under the app directory.
https://nextjs.org/docs/getting-started/project-structure

Create the file app/posts/page.tsx. Add this code to the file.

app/posts/page.tsx

import Link from "next/link";
import { allPosts, Post } from "contentlayer/generated";
import { compareDesc } from "date-fns";

function PostCard(post: Post) {
  return (
    <div>
      <h2>
        <Link href={post.url}>{post.title}</Link>
      </h2>
      <p>{post.excerpt}</p>
    </div>
  );
}

function page() {
  const posts = allPosts.sort((a, b) =>
    compareDesc(new Date(a.date), new Date(b.date))
  );

  return (
    <div>
      <div>
        {posts.map((post, idx) => (
          <PostCard key={idx} {...post} />
        ))}
      </div>
    </div>
  );
}

export default page;

This code sorts the generated posts by date. It then displays the link to the post, the title, and the excerpt.

Create the directory app/posts/[slug]. Then create the file app/posts/[slug]/page.tsx. The square brackets mean this is a dynamic segment. When you don’t know the exact name of the file ahead of time and want to create routes from dynamic data. Note the function generateMetaData. Dynamic information, such as the current route parameters, can be set by exporting a generateMeta function that returns a Metadata object.

app/posts/[slug]/page.tsx

import { DetailedHTMLProps, HTMLAttributes } from "react";
import { allPosts } from "contentlayer/generated";
import { useMDXComponent } from "next-contentlayer/hooks";
import type { MDXComponents } from "mdx/types";
import { format, parseISO } from "date-fns";
import { notFound } from "next/navigation";
import { CopyButton } from "@/components/CopyButton";
import "../../globals.css";

export const generateStaticParams = async () =>
  allPosts.map((post: any) => ({ slug: post._raw.flattenedPath }));

export const generateMetadata = ({ params }: any) => {
  const post = allPosts.find(
    (post: any) => post._raw.flattenedPath === params.slug
  );
  return { title: post?.title, excerpt: post?.excerpt };
};

const PostLayout = ({ params }: { params: { slug: string } }) => {
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);

  // 404 if the post does not exist.
  if (!post) notFound();

  const MDXContent = useMDXComponent(post!.body.code);

  const mdxComponents: MDXComponents = {
    // Override the default <pre> element
    pre: function ({
      children,
      ...props
    }: DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>) {
      const propsObj = { ...props };
      const propsValues = Object.values(propsObj);
      const [, , dataLanguage, dataTheme, code] = propsValues;
      const lang = dataLanguage || "shell";

      return (
        <pre data-language={lang} data-theme={dataTheme} className={"py-4"}>
          <div className='bg-gray-50 rounded-md overflow-x-auto'>
            <div
              className={
                "bg-gray-200 dark:text-black flex items-center relative px-4 py-2 text-sm font-sans justify-between rounded-t-md"
              }
            >
              {lang}
              <CopyButton text={code} />
            </div>

            <div className={"p-2"}>{children}</div>
          </div>
        </pre>
      );
    },
  };

  return (
    <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
      <h1 className='text-xl'>{post.title}</h1>
      <p>
        <span className='text-gray-500 dark:text-gray-400'>
          {format(parseISO(post.date), "LLLL d, yyyy")}
        </span>
      </p>
      <article>
        <MDXContent components={mdxComponents} />
      </article>
    </div>
  );
};

export default PostLayout;

Create the file app/components/CopyButton.tsx. CopyButton implements copy to clipboard functionality.

app/components/CopyButton.tsx

"use client"; // The "use client" directive is a convention to declare a boundary
// between a Server and Client Component module graph.

import { useState } from "react";
import ClipBoard from "./ClipBoard";

type Text = {
  text: string;
};
/**
 * CopyButton implements copy to clipboard functionality
 * @param text
 * @returns
 */
export const CopyButton = ({ text }: Text) => {
  const [isCopied, setIsCopied] = useState(false);

  const copy = async () => {
    await navigator.clipboard.writeText(text);
    setIsCopied(true);

    setTimeout(() => {
      setIsCopied(false);
    }, 10000);
  };

  return (
    <button
      className='dark:text-black flex ml-auto gap-2'
      disabled={isCopied}
      onClick={copy}
    >
      {/* clipboard icon */}
      <ClipBoard />
      {isCopied ? "Copied!" : "Copy code"}
    </button>
  );
};

Create the file app/components/Clipboard.tsx for the clipboard icon.

import React from "react";

const ClipBoard = () => {
  return (
    <svg
      stroke='#000'
      fill='none'
      strokeWidth='2'
      viewBox='0 0 24 24'
      strokeLinecap='round'
      strokeLinejoin='round'
      className='h-4 w-4'
      height='1em'
      width='1em'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'></path>
      <rect x='8' y='2' width='8' height='4' rx='1' ry='1'></rect>
    </svg>
  );
};

export default ClipBoard;

Modify contentlayer.config.ts:

Add these lines after the first line.

import rehypePrettyCode from "rehype-pretty-code";
import { visit } from "unist-util-visit";


/** @type {import('rehype-pretty-code').Options} */
const options: import("rehype-pretty-code").Options = {
  theme: {
   light: "light-plus",
  },
};

Inside mdx{}, add:

rehypePlugins: [
      () => (tree) => {
        visit(tree, (node) => {
          if (node?.type === "element" && node?.tagName === "pre") {
            const [codeEl] = node.children;
            if (codeEl.tagName !== "code") return;
            node.raw = codeEl.children?.[0].value;
          }
        });
      },
      [rehypePrettyCode, options],
      () => (tree) => {
        visit(tree, (node) => {
          // Select all div elements that contain a data-rehype-pretty-code-fragment data attribute.
          if (node?.type === "element" && node?.tagName === "div") {
            if (!("data-rehype-pretty-code-fragment" in node.properties)) {
              return;
            }
            // Iterate over the pre children within each div (one for each theme) and
            // add the raw code content as a property to them.
            for (const child of node.children) {
              if (child.tagName === "pre") {
                child.properties["raw"] = node.raw;
              }
            }
          }
        });
      },
    ],

This function traverses the node tree of the content and extracts the unmodified ( raw text ) from all code elements nested inside the pre tag. It then stores the text content on the pre node. This will give us a way to keep the unmodified code content from the node’s raw property.

Delete all the lines after the first three lines in globals.css. Add these lines after the tailwind setup:


pre > code {
  display: grid;
}

code {
  counter-reset: line;
}

/* Apply line numbers only when showLineNumbers is specified: */
code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);

  /* Other styling */
  display: inline-block;
  width: 1rem;
  margin-right: 2rem;
  text-align: right;
  color: gray;
}

When you select a post containing a code block you should see syntax highlighting. Before the code block you should see the name of the programming language and a copy button. If you click the copy button, the text will be pasted in an editor. You should see something like this:

In part three, I will show how to add a navbar, how to switch between dark and light mode, how to display stats on your github projects, and add information for seo.

Part Three
https://dev.to/dbrownsoftware/how-to-build-a-developer-blog-using-next-js-13-and-contentlayer-part-three-1155

How to Build a Developer Blog using Next JS 13 and Contentlayer - Part one

Donna Brown — Wed, 06 Sep 2023 22:35:30 +0000

Introduction

This tutorial will show how to create a customizable blog for developers to write about technical topics and provide coding solutions. This blog will have these features:

Code highlighting and formatting with a copy button
Dark and light modes
Responsive
Display of github projects
Add tags and categories to posts
Search for specific topics in blog
Sitemap for SEO

Github repository: https://github.com/donnabrown77/developer-blog

Prerequisites
JavaScript, React, Vscode. Knowledge of TypeScript, Next JS, Tailwind CSS is helpful.

Installation

npx create-next-app@latest --ts

Install the following npm packages:

npm install @next/mdx contentlayer date-fns encoding graphql graphql-request next-contentlayer next-themes rehype-pretty-code remark-gfm shiki shiki-themes unist-utils-visit

Package descriptions:

@next/mdx - Sources data from local files, allowing you to create pages with an .mdx extension, directly in your /pages or /app directory.

contentlayer - A content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application’s pages.

date-fns - Toolset for manipulating JavaScript dates in a browser and Node.js.

encoding - Is a simple wrapper around iconv-lite to convert strings from one encoding to another.

graphql - JavaScript reference implementation for GraphQL, a query language for apis.

graphql-request - Minimal GraphQL client supporting Node and browsers for scripts or simple apps

next-contentlayer - Plugin to tightly integrate Contentlayer into a Next.js

next-themes - An abstraction for themes in your Next.js app.

rehype-pretty-code - plugin powered by the Shiki syntax highlighter that provides beautiful code blocks for Markdown or MDX.

remark-gfm - plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)

shiki - syntax highlighter

shiki-themes - themes for shiki

unist-utils-visit - utility to visit nodes in a tree

Create sample blog posts

The blog post is a text file using a .mdx extension. MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. Each .mdx file uses frontmatter. Frontmatter is placed at the top of the MDX file between sets of three hyphens (---). Each frontmatter field should be placed on its own line.

Here is a definition of frontmatter: https://kabartolo.github.io/chicago-docs-demo/docs/mdx-guide/writing/#frontmatter

Make a new directory called _posts in your root directory. I used the underscore as the first character for the directory name to make it a private folder in Next JS. Private folders are not considered by Next JS’s routing system. Here is a link to a explanation of private folders: https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders.
This is where the mdx files are located. I created five frontmatter categories: title, date, tags, and author. Tags describe the topic or topics for a blog post. A tag is used for searching a specific blog topic. Here are links to sample mdx files:

https://github.com/donnabrown77/developer-blog/tree/main/_posts

You can change these to whatever you need.

next.config.js, tsconfig.json, contentlayerconfig.ts

Create a file called next.config.js in your root directory.

/** @type {import('next').NextConfig} */
const nextConfig = {};


const { withContentlayer } = require("next-content layer");


module.exports = withContentlayer({
experimental: {
appDir: true,
// https://stackoverflow.com/questions/75571651/using-remark-and-rehype-plugins-with-nextjs-13/75571708#75571708
mdxRs: false,
},
});

Modify tsconfig.json to look like this:

"baseUrl": ".",
"paths": {
"@/*": ["./*"],
"@/components/*": ["components/*"],
"@/data/*": ["_data/*"],
"contentlayer/generated": ["./.contentlayer/generated"],
}

Create the file contentlayer.config.ts in the root directory.
Contentlayer is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application.

Add this code to that file:

import { defineDocumentType, makeSource } from "contentlayer/source-files";

const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },
    date: {
      type: "date",
      description: "The date of the post",
      required: true,
    },
    tags: {
      type: "json",
      description: "post topics",
      required: true,
    },
    excerpt: {
      type: "string",
      description: "summary of post",
      required: true,
    },
    author: {
      type: "string",
      description: "who wrote the post",
      required: false,
    },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
  },
}));

export default makeSource({
  contentDirPath: "_posts",
  documentTypes: [Post],
  mdx: {},
});

Create a components directory.

In the components directory, create two files MagnifyingGlass.tsx and Postcard.tsx. MagnifyingGlass.tsx is the svg to draw a maginifying glass used for an input control. PostCard.tsx returns the jsx for a single post.

app/components/MagnifyingGlass.tsx

import React from "react";
/**
 *
 * @returns svg for search input control
 */
const MagnifyingGlass = () => {
  return (
    <svg
      className='absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300'
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      stroke='currentColor'
    >
      <path d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
    </svg>
  );
};

export default MagnifyingGlass;

app/components/PostCard.tsx

import React from "react";
import { Post } from "contentlayer/generated";
import Link from "next/link";
import { format, parseISO } from "date-fns";

/**
 *
 * @param post
 * @returns jsx to display post
 */
const PostCard = (post: Post) => {
  let tags = [...post.tags];
  return (
    <article className='mb-12'>
      <div className='space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0'>
        <dl>
          <dd className='text-gray-500 dark:text-gray-400 text-base font-medium leading-6'>
            <time dateTime={post.date} className='mr-2 '>
              {format(parseISO(post.date), "LLLL d, yyyy")}
            </time>
          </dd>
        </dl>
        <span className='text-gray-500 dark:text-gray-400'>{post.author}</span>
        <div className='space-y-5 xl:col-span-3'>
          <div className='space-y-6'>
            <div>
              <h2 className='text-2xl font-bold leading-8 tracking-tight'>
                <Link href={post.url}>{post.title}</Link>
              </h2>
              <div className='flex flex-wrap'>
                {post.tags && (
                  <ul className='inline-flex'>
                    {tags.map((tag) => (
                      <li
                        key={post.date}
                        className='mr-3 uppercase block text-sm text-blue-800 dark:text-blue-400 font-medium'
                      >
                        {tag}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>

            <div className='text-gray-500 dark:text-gray-400 prose max-w-none'>
              {post.excerpt}
            </div>
          </div>
          <div className='text-base font-medium leading-6'>
            <Link
              href={post.url}
              className=' text-blue-800 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-200'
            >
              Read more →
            </Link>
          </div>
        </div>
      </div>
    </article>
  );
};

export default PostCard;

Changes to page.tsx in app directory.

Remove everything from page.tsx and replace it with this code. Note the use of “use client”; at the top of the file which makes it a client component instead of the default server component in Next JS 13. When a user types in characters in the input control, the text is compared to the tags field of the mdx file. If there are posts with any of those tags, the page is rerendered to show only posts containing those tags.

"use client";
import React, { useState } from "react";
import { allPosts } from "contentlayer/generated";
import { compareDesc } from "date-fns";
import PostCard from "@/components/PostCard";
import MagnifyingGlass from "@/components/MagnifyingGlass";
import "./globals.css";

export default function Home() {
  // handleInput will contain an array of topics or nothing
  // if there is something returned, look for a matching post
  // then display matching posts
  const [topic, setTopic] = useState<string>("");
  // get text from input control, use the value to set the topic.
  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTopic(event.currentTarget.value);
  };

  // given an array of tags, return if there is a matching topic
  function findTags(t: string[]) {
    for (const element of t) {
      // Matching topics are not case sensitive
      let str1: string = element.toString().toLowerCase();
      let str2: string = topic.toString().toLowerCase();
      if (str1 === str2) return true;
    }
    return false;
  }
  let posts = allPosts.sort((a, b) =>
    compareDesc(new Date(a.date), new Date(b.date))
  );

  // test array of tags for matching topic
  let filteredPosts = posts.filter((post) => findTags(post.tags));
  // if there are a posts which match the topic, display only those posts
  if (filteredPosts.length > 0) posts = filteredPosts;

  return (
    <div className='mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0'>
      <div className='space-y-2 pt-6 pb-8 md:space-y-5'>
        <h1 className='text-3xl mb-8'>Developer Blog</h1>
        <div className='relative max-w-lg mb-5 dark:bg-transparent'>
          <input
            type='text'
            aria-label='Search articles'
            placeholder='Search articles'
            value={topic}
            onChange={handleInput}
            size={100}
            className='block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100'
          ></input>
          <MagnifyingGlass />
        </div>
        {posts.map((post, idx) => (
          <div key={idx}>
            <hr className='grey-200 h-1 mb-10'></hr>
            <PostCard key={idx} {...post} />
          </div>
        ))}
      </div>
    </div>
  );
}

Try running npm run dev. Your screen should look like this:

Part Two
https://dev.to/dbrownsoftware/how-to-build-a-developer-blog-using-next-js-13-and-contentlayer-part-two-bp4

How to read a CSV file using React functional components

Donna Brown — Mon, 16 May 2022 18:30:03 +0000

Here is code to read in a .csv file using React hooks and functional components. CsvReader is a functional component which uses the useState hook to save the filename and data read in from the file to state variables. This is GitHub link: https://github.com/donnabrown77/csv-reader.

I included a child component to display the CSV data in an HTML table. Here is a link to this code:
https://dev.to/dbrownsoftware/how-to-create-a-reusable-html-table-in-react-30pf.

First create a functional component and state variables.

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);
}

Each line of csv data is separated by a newline character. So that needs to be removed. Use the map function to replace commas with a space. Then call setCsvArray with the row data.

Next, write a function to handle the file upload.

const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

Setup the functional component. Return jsx with input type="file" and accept=".csv" and a button with an onClick event handler. DisplayTable is a child component I wrote to display html table without hard coding the table header, row, and cell data. It is optional.

return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;

This is the final result:

import React from "react";
import { useState } from "react";
import DisplayTable from "./DisplayTable";

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);

  const processCSV = (str) => {
    // split the file data into rows from the newline character
    let rows = str.split("\n");

    // remove comma
    rows = rows.map(function (row) {
      return row.replace(/,/g, " ");
    });
    setCsvArray(rows);
  };

  const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

  return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;

How to create a reusable HTML table in React

Donna Brown — Mon, 16 May 2022 18:26:34 +0000

Here is code to display an HTML table in React. I assumed the first row to be a table header. This may not work for some cases where there may more than one table header. I kept the .css file simple.

import React from "react";
import "./DisplayTable.css";

const Table = (props) => {
  let body = props.body;
  let heading = props.heading;

  return (
    <table>
      <TableHeader heading={heading} />
      <tbody>
        {body.map((row, index) => (
          <TableRow key={index} row={row} />
        ))}
      </tbody>
    </table>
  );
};

const TableRow = (props) => {
  let row = props.row;
  return (
    <tr key={row}>
      {row.map((val, index) => (
        <td key={index}>{val}</td>
      ))}
    </tr>
  );
};

const TableHeader = (props) => {
  let heading = props.heading;
  if (heading) {
    return (
      <thead>
        <tr>
          {heading.map((head, index) => (
            <th key={index}>{head}</th>
          ))}
        </tr>
      </thead>
    );
  }
};

const DisplayTable = (props) => {
  // convert each row of data to an array of rows
  const body = Object.entries(props.value).map(([key, value]) => {
    return value.split(" ");
  });

  // take first row off to get table data
  body.shift();

  // get first row off to make table headings
  const firstRow = props.value[0];
  let heading;
  if (firstRow) {
    heading = firstRow.split(" ");
  }

  // make an array of strings
  return <Table body={body} heading={heading}></Table>;
};

export default DisplayTable;

DisplayTable.css

td {
  text-align: right;
}