kjmczk

// components/Meta.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';

import { SITE_URL, SITE_NAME, TWITTER_USERNAME } from '../utils/constants';

type Props = {
  pageTitle?: string;
};

kjmczk

// components/Header.tsx
import Link from 'next/link';

import { SITE_NAME } from '../utils/constants';

const Header: React.FC = () => {
  return (
    <header className="py-2">
      <Link href="/">
        <a className="text-2xl font-bold text-green-500">{SITE_NAME}</a>

kjmczk

// components/Layout.tsx
import Header from '../components/Header';
import Meta from '../components/Meta';

type Props = {
  children: React.ReactNode;
  pageTitle?: string;
};

const Layout: React.FC<Props> = ({ children, pageTitle }: Props) => {

kjmczk

// types/post.ts
export interface IPost {
  slug: string;
  date: string;
  thumbnail: string;
  title: string;
  description: string;
  yields: string;
  ingredients: string[];
  directions: string[];

kjmczk

// utils/constants.ts
export const SITE_URL = 'http://localhost:3000';
export const SITE_NAME = 'My Food Blog';
export const TWITTER_USERNAME = '@MyAwesomeFoodBlog';

kjmczk

// utils/mdxUtils.ts
import fs from 'fs';
import { join } from 'path';
import matter from 'gray-matter';

type Items = {
  [key: string]: string;
};

type Post = {

kjmczk

// pages/index.tsx
import { GetStaticProps } from 'next';
import Head from 'next/head';
import Link from 'next/link';

import Layout from '../components/Layout';
import Thumbnail from '../components/Thumbnail';
import { IPost } from '../types/post';
import { SITE_NAME } from '../utils/constants';
import { getAllPosts } from '../utils/mdxUtils';

kjmczk

// pages/_app.tsx
import type { AppProps } from 'next/app';

// import '../styles/globals.css' // remove
import 'tailwindcss/tailwind.css'; // add

const MyApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

kjmczk

// tailwind.config.js
module.exports = {
  purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
};

kjmczk

// pages/new.js

import useSWR from 'swr'; // add

const New = ({ token }) => {
  const { data: user } = useSWR('/api/user'); // add
  ...
  const onSubmit = handleSubmit(async ({ task }) => {
    ...
    // update