Skip to content

Instantly share code, notes, and snippets.

View kjmczk's full-sized avatar

kjmczk

72 followers · 0 following
View GitHub Profile
@kjmczk
kjmczk / _document.tsx
Created May 30, 2021 05:27
pages/_document.tsx - MDX Blog with Dark Mode - Medium
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render(): React.ReactElement {
return (
<Html>
<Head />
<body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<Main />
@kjmczk
kjmczk / tailwind.config.js
Last active May 30, 2021 05:27
tailwind.config.js - MDX Blog with Dark Mode - Medium
// tailwind.config.js
module.exports = {
// ...
theme: {
extend: {
typography: (theme) => ({
dark: {
css: {
color: theme('colors.gray.300'),
h1: {
@kjmczk
kjmczk / Header.tsx
Created May 30, 2021 05:24
components/Header.tsx - MDX Blog with Dark Mode - Medium
// components/Header.tsx
import ThemeSwitch from './theme-switch';
const Header: React.FC = () => {
return (
<header className="py-2">
<div className="flex justify-between items-center">
...
<ThemeSwitch />
</div>
@kjmczk
kjmczk / theme-switch.tsx
Created May 30, 2021 05:23
components/theme-switch.tsx - MDX Blog with Dark Mode - Medium
// components/theme-switch.tsx
import { useState, useEffect } from 'react';
import { useTheme } from 'next-themes';
import Switch from 'react-switch';
import { IconContext } from 'react-icons';
import { FaMoon, FaSun } from 'react-icons/fa';
const ThemeSwitch: React.FC = () => {
const { theme, setTheme } = useTheme();
@kjmczk
kjmczk / _app.tsx
Created May 30, 2021 05:21
pages/_app.tsx - MDX Blog with Dark Mode - Medium
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
import 'tailwindcss/tailwind.css';
const MyApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
return (
<ThemeProvider attribute="class">
<Component {...pageProps} />
@kjmczk
kjmczk / Tips.tsx
Created April 30, 2021 08:28
components/Tips.tsx - MDX Blog Simple - Medium
// components/Tips.tsx
type Props = {
tips: string[];
};
const Tips: React.FC<Props> = ({ tips }: Props) => {
return (
<>
<h2>Tips</h2>
<ul>
@kjmczk
kjmczk / Directions.tsx
Created April 30, 2021 08:27
components/Directions.tsx - MDX Blog Simple - Medium
// components/Directions.tsx
type Props = {
directions: string[];
};
const Directions: React.FC<Props> = ({ directions }: Props) => {
return (
<>
<h2>Directions</h2>
<ol>
@kjmczk
kjmczk / Ingredients.tsx
Created April 30, 2021 08:27
components/Ingredients.tsx - MDX Blog Simple - Medium
// components/Ingredients.tsx
type Props = {
ingredients: string[];
};
const Ingredients: React.FC<Props> = ({ ingredients }: Props) => {
return (
<>
<h2>Ingredients</h2>
<ul>
@kjmczk
kjmczk / [slug].tsx
Last active May 14, 2021 06:43
pages/posts/[slug].tsx - MDX Blog Simple - Medium
// pages/posts/[slug].tsx
import { GetStaticProps, GetStaticPaths } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
import Directions from '../../components/Directions';
import Ingredients from '../../components/Ingredients';
import Layout from '../../components/Layout';
@kjmczk
kjmczk / Thumbnail.tsx
Created April 30, 2021 08:21
components/Thumbnail.tsx - MDX Blog Simple - Medium
// components/Thumbnail.tsx
import Image from 'next/image';
import Link from 'next/link';
type Props = {
title: string;
src: string;
slug?: string;
};