commit d79980820380a0381d1994af883cf38a9f1a18a4 Author: Cory Dransfeldt Date: Sat May 21 17:27:30 2022 -0700 initial commit diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..828bdc3 --- /dev/null +++ b/.env.example @@ -0,0 +1,22 @@ +NEXT_PUBLIC_GISCUS_REPO= +NEXT_PUBLIC_GISCUS_REPOSITORY_ID= +NEXT_PUBLIC_GISCUS_CATEGORY= +NEXT_PUBLIC_GISCUS_CATEGORY_ID= +NEXT_PUBLIC_UTTERANCES_REPO= +NEXT_PUBLIC_DISQUS_SHORTNAME= + + +MAILCHIMP_API_KEY= +MAILCHIMP_API_SERVER= +MAILCHIMP_AUDIENCE_ID= + +BUTTONDOWN_API_URL=https://api.buttondown.email/v1/ +BUTTONDOWN_API_KEY= + +CONVERTKIT_API_URL=https://api.convertkit.com/v3/ +CONVERTKIT_API_KEY= +// curl https://api.convertkit.com/v3/forms?api_key= to get your form ID +CONVERTKIT_FORM_ID= + +KLAVIYO_API_KEY= +KLAVIYO_LIST_ID= \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +node_modules diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..2ea7367 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,38 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + env: { + browser: true, + amd: true, + node: true, + es6: true, + }, + plugins: ['@typescript-eslint'], + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:jsx-a11y/recommended', + 'plugin:prettier/recommended', + 'next', + 'next/core-web-vitals', + ], + rules: { + 'prettier/prettier': 'error', + 'react/react-in-jsx-scope': 'off', + 'jsx-a11y/anchor-is-valid': [ + 'error', + { + components: ['Link'], + specialLink: ['hrefLeft', 'hrefRight'], + aspects: ['invalidHref', 'preferButton'], + }, + ], + 'react/prop-types': 0, + 'no-unused-vars': 0, + 'react/no-unescaped-entities': 0, + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + }, +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..1a4ca02 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,202 @@ +## Source: https://github.com/alexkaratarakis/gitattributes +## Modified * text=auto to * text eol=lf to force LF endings. + +## GITATTRIBUTES FOR WEB PROJECTS +# +# These settings are for any web project. +# +# Details per file setting: +# text These files should be normalized (i.e. convert CRLF to LF). +# binary These files are binary and should be left untouched. +# +# Note that binary is a macro for -text -diff. +###################################################################### + +# Auto detect +## Force LF line endings automatically for files detected as +## text and leave all files detected as binary untouched. +## This will handle all files NOT defined below. +* text eol=lf + +# Source code +*.bash text eol=lf +*.bat text eol=crlf +*.cmd text eol=crlf +*.coffee text +*.css text +*.htm text diff=html +*.html text diff=html +*.inc text +*.ini text +*.js text +*.json text +*.jsx text +*.less text +*.ls text +*.map text -diff +*.od text +*.onlydata text +*.php text diff=php +*.pl text +*.ps1 text eol=crlf +*.py text diff=python +*.rb text diff=ruby +*.sass text +*.scm text +*.scss text diff=css +*.sh text eol=lf +*.sql text +*.styl text +*.tag text +*.ts text +*.tsx text +*.xml text +*.xhtml text diff=html + +# Docker +Dockerfile text + +# Documentation +*.ipynb text +*.markdown text +*.md text +*.mdwn text +*.mdown text +*.mkd text +*.mkdn text +*.mdtxt text +*.mdtext text +*.txt text +AUTHORS text +CHANGELOG text +CHANGES text +CONTRIBUTING text +COPYING text +copyright text +*COPYRIGHT* text +INSTALL text +license text +LICENSE text +NEWS text +readme text +*README* text +TODO text + +# Templates +*.dot text +*.ejs text +*.haml text +*.handlebars text +*.hbs text +*.hbt text +*.jade text +*.latte text +*.mustache text +*.njk text +*.phtml text +*.tmpl text +*.tpl text +*.twig text +*.vue text + +# Configs +*.cnf text +*.conf text +*.config text +.editorconfig text +.env text +.gitattributes text +.gitconfig text +.htaccess text +*.lock text -diff +package-lock.json text -diff +*.toml text +*.yaml text +*.yml text +browserslist text +Makefile text +makefile text + +# Heroku +Procfile text + +# Graphics +*.ai binary +*.bmp binary +*.eps binary +*.gif binary +*.gifv binary +*.ico binary +*.jng binary +*.jp2 binary +*.jpg binary +*.jpeg binary +*.jpx binary +*.jxr binary +*.pdf binary +*.png binary +*.psb binary +*.psd binary +# SVG treated as an asset (binary) by default. +*.svg text +# If you want to treat it as binary, +# use the following line instead. +# *.svg binary +*.svgz binary +*.tif binary +*.tiff binary +*.wbmp binary +*.webp binary + +# Audio +*.kar binary +*.m4a binary +*.mid binary +*.midi binary +*.mp3 binary +*.ogg binary +*.ra binary + +# Video +*.3gpp binary +*.3gp binary +*.as binary +*.asf binary +*.asx binary +*.fla binary +*.flv binary +*.m4v binary +*.mng binary +*.mov binary +*.mp4 binary +*.mpeg binary +*.mpg binary +*.ogv binary +*.swc binary +*.swf binary +*.webm binary + +# Archives +*.7z binary +*.gz binary +*.jar binary +*.rar binary +*.tar binary +*.zip binary + +# Fonts +*.ttf binary +*.eot binary +*.otf binary +*.woff binary +*.woff2 binary + +# Executables +*.exe binary +*.pyc binary + +# RC files (like .babelrc or .eslintrc) +*.*rc text + +# Ignore files (like .npmignore or .gitignore) +*.*ignore text diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..313b131 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ +public/sitemap.xml +.vercel + +# production +/build +*.xml +# rss feed +/public/feed.xml + +# misc +.DS_Store + +# debug +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..d37daa0 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx --no-install lint-staged diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..215f501 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Timothy Lin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e238684 --- /dev/null +++ b/README.md @@ -0,0 +1,222 @@ +![tailwind-nextjs-banner](/public/static/images/twitter-card.png) + +# Tailwind Nextjs Starter Blog + +[![GitHub Repo stars](https://img.shields.io/github/stars/timlrx/tailwind-nextjs-starter-blog?style=social)](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/stargazers/) +[![GitHub forks](https://img.shields.io/github/forks/timlrx/tailwind-nextjs-starter-blog?style=social)](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/network/) +[![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Ftimlrxx)](https://twitter.com/timlrxx) +[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&link=https://github.com/sponsors/timlrx)](https://github.com/sponsors/timlrx) + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog) + +This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs. + +Check out the documentation below to get started. + +Facing issues? Check the [FAQ page](https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki) and do a search on past issues. Feel free to open a new issue if none has been posted previously. + +Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed! + +## Examples + +- [Demo Blog](https://tailwind-nextjs-starter-blog.vercel.app/) - this repo +- [My personal blog](https://www.timlrx.com) - modified to auto-generate blog posts with dates +- [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes! +- [GautierArcin's demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate) +- [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions +- [Thinh's Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents +- [Leo's Blog](https://leohuynh.dev) - Tuan Anh Huynh's personal site. Add Snippets Page, Author Profile Card, Image Lightbox, ... +- [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more. +- [fiqrychoerudin.dev](https://www.fiqrychoerudin.dev/) - simple portfolio. +- [irvin.dev](https://www.irvin.dev/) - Irvin Lin's personal site. Added YouTube embedding. +- [the all JavaScript Blog](https://the-all-javascript-blog.vercel.app/) - a JavaScript enlightenment blog uses this +- [KirillSo.com](https://www.kirillso.com/) - Personal blog & website. +- [DevBoy Blog](https://devboy.vercel.app/) - M.Reza's personal blog +- [slightlysharpe.com](https://slightlysharpe.com) - [Tincre's](https://tincre.com) main company blog +- [blog.b00st.com](https://blog.b00st.com) - [b00st.com's](https://b00st.com) main music promotion blog +- [astrosaurus.me](https://astrosaurus.me/) - Ephraim Atta-Duncan's Personal Blog +- [dhanrajsp.me](https://dhanrajsp.me/) - Dhanraj's personal site and blog. +- [blog.r00ks.io](https://blog.r00ks.io/) - Austin Rooks's personal blog ([source code](https://github.com/Austionian/blog.r00ks)). +- [alfoncode.com](https://alfoncode.com) - Alfonso García's personar website. Customized design ([source code](https://github.com/alfoncode/personal-web)) + +Using the template? Feel free to create a PR and add your blog to this list. + +## Motivation + +I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from [Tailwindlabs blog](https://github.com/tailwindlabs/blog.tailwindcss.com). + +I wanted it to be nearly as feature-rich as popular blogging templates like [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and [Hugo Academic](https://github.com/wowchemy/wowchemy-hugo-modules) but with the best of React's ecosystem and current web development's best practices. + +## Features + +- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute +- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/) +- Lightweight, 45kB first load JS, uses Preact in production build +- Mobile-friendly view +- Light and dark theme +- Self-hosted font with [Fontsource](https://fontsource.org/) +- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics +- [MDX - write JSX in markdown documents!](https://mdxjs.com/) +- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus) +- Math display supported via [KaTeX](https://katex.org/) +- Citation and bibliography support via [rehype-citation](https://github.com/timlrx/rehype-citation) +- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization) +- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler) +- Support for tags - each unique tag will be its own page +- Support for multiple authors +- Blog templates +- TOC component +- Support for nested routing of blog posts +- Newsletter component with support for mailchimp, buttondown, convertkit and klaviyo +- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus +- Projects page +- Preconfigured security headers +- SEO friendly with RSS feed, sitemaps and more! + +## Sample posts + +- [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide) +- [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs) +- [A tour of math typesetting](https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator) +- [Simple MDX image grid](https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada) +- [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine) +- [Example of Nested Route Post](https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing) + +## Quick Start Guide + +1. JS (official support) + +```bash +npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git +``` + +or with TypeScript (community support) + +```bash +npx degit timlrx/tailwind-nextjs-starter-blog#typescript +``` + +2. Personalize `siteMetadata.js` (site related information) +3. Modify the content security policy in `next.config.js` if you want to use + any analytics provider or a commenting solution other than giscus. +4. Personalize `authors/default.md` (main author) +5. Modify `projectsData.js` +6. Modify `headerNavLinks.js` to customize navigation links +7. Add blog posts +8. Deploy on Vercel + +## Installation + +```bash +npm install +``` + +## Development + +First, run the development server: + +```bash +npm start +``` + +or + +```bash +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +## Extend / Customize + +`data/siteMetadata.js` - contains most of the site related information which should be modified for a user's need. + +`data/authors/default.md` - default author information (required). Additional authors can be added as files in `data/authors`. + +`data/projectsData.js` - data used to generate styled card on the projects page. + +`data/headerNavLinks.js` - navigation links. + +`data/logo.svg` - replace with your own logo. + +`data/blog` - replace with your own blog posts. + +`public/static` - store assets such as images and favicons. + +`tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site. + +`css/prism.css` - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes). + +`components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons use [heroicons](https://heroicons.com/). + +`components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed. + +`layouts` - main templates used in pages. + +`pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) for more information. + +`next.config.js` - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains. + +## Post + +### Frontmatter + +Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/). + +Currently 10 fields are supported. + +``` +title (required) +date (required) +tags (required, can be empty array) +lastmod (optional) +draft (optional) +summary (optional) +images (optional, if none provided defaults to socialBanner in siteMetadata config) +authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified) +layout (optional list which should correspond to the file names in `data/layouts`) +canonicalUrl (optional, canonical url for the post for SEO) +``` + +Here's an example of a post's frontmatter: + +``` +--- +title: 'Introducing Tailwind Nexjs Starter Blog' +date: '2021-01-12' +lastmod: '2021-01-18' +tags: ['next-js', 'tailwind', 'guide'] +draft: false +summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.' +images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg'] +authors: ['default', 'sparrowhawk'] +layout: PostLayout +canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog +--- +``` + +### Compose + +Run `node ./scripts/compose.js` to bootstrap a new post. + +Follow the interactive prompt to generate a post with pre-filled front matter. + +## Deploy + +**Vercel** +The easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +**Netlify / GitHub Pages / Firebase etc.** +As the template uses `next/image` for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/). An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the `next/image` component with a standard `` tag. See [`next/image` documentation](https://nextjs.org/docs/basic-features/image-optimization) for more details. + +The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information. + +## Support + +Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project [sponsor](https://github.com/sponsors/timlrx). + +## Licence + +[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timrlx.com) diff --git a/components/Card.tsx b/components/Card.tsx new file mode 100644 index 0000000..143681e --- /dev/null +++ b/components/Card.tsx @@ -0,0 +1,56 @@ +import Image from './Image' +import Link from './Link' + +const Card = ({ title, description, imgSrc, href }) => ( +
+
+ {imgSrc && + (href ? ( + + {title} + + ) : ( + {title} + ))} +
+

+ {href ? ( + + {title} + + ) : ( + title + )} +

+

{description}

+ {href && ( + + Learn more → + + )} +
+
+
+) + +export default Card diff --git a/components/ClientReload.tsx b/components/ClientReload.tsx new file mode 100644 index 0000000..e8713e9 --- /dev/null +++ b/components/ClientReload.tsx @@ -0,0 +1,23 @@ +import { useEffect } from 'react' +import Router from 'next/router' + +/** + * Client-side complement to next-remote-watch + * Re-triggers getStaticProps when watched mdx files change + * + */ +export const ClientReload = () => { + // Exclude socket.io from prod bundle + useEffect(() => { + import('socket.io-client').then((module) => { + const socket = module.io() + socket.on('reload', () => { + Router.replace(Router.asPath, undefined, { + scroll: false, + }) + }) + }) + }, []) + + return null +} diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..4e45fb1 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,32 @@ +import Link from './Link' +import siteMetadata from '@/data/siteMetadata' +import SocialIcon from '@/components/social-icons' + +export default function Footer() { + return ( +
+
+
+ + + + + + +
+
+
{siteMetadata.author}
+
{` • `}
+
{`© ${new Date().getFullYear()}`}
+
{` • `}
+ {siteMetadata.title} +
+
+ + Tailwind Nextjs Theme + +
+
+
+ ) +} diff --git a/components/Image.tsx b/components/Image.tsx new file mode 100644 index 0000000..fde277a --- /dev/null +++ b/components/Image.tsx @@ -0,0 +1,5 @@ +import NextImage, { ImageProps } from 'next/image' + +const Image = ({ ...rest }: ImageProps) => + +export default Image diff --git a/components/LayoutWrapper.tsx b/components/LayoutWrapper.tsx new file mode 100644 index 0000000..08ef946 --- /dev/null +++ b/components/LayoutWrapper.tsx @@ -0,0 +1,59 @@ +import siteMetadata from '@/data/siteMetadata' +import headerNavLinks from '@/data/headerNavLinks' +import Logo from '@/data/logo.svg' +import Link from './Link' +import SectionContainer from './SectionContainer' +import Footer from './Footer' +import MobileNav from './MobileNav' +import ThemeSwitch from './ThemeSwitch' +import { ReactNode } from 'react' + +interface Props { + children: ReactNode +} + +const LayoutWrapper = ({ children }: Props) => { + return ( + +
+
+
+ +
+
+ +
+ {typeof siteMetadata.headerTitle === 'string' ? ( +
+ {siteMetadata.headerTitle} +
+ ) : ( + siteMetadata.headerTitle + )} +
+ +
+
+
+ {headerNavLinks.map((link) => ( + + {link.title} + + ))} +
+ + +
+
+
{children}
+
+
+ + ) +} + +export default LayoutWrapper diff --git a/components/Link.tsx b/components/Link.tsx new file mode 100644 index 0000000..1c46655 --- /dev/null +++ b/components/Link.tsx @@ -0,0 +1,27 @@ +/* eslint-disable jsx-a11y/anchor-has-content */ +import Link from 'next/link' +import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react' + +const CustomLink = ({ + href, + ...rest +}: DetailedHTMLProps, HTMLAnchorElement>) => { + const isInternalLink = href && href.startsWith('/') + const isAnchorLink = href && href.startsWith('#') + + if (isInternalLink) { + return ( + + + + ) + } + + if (isAnchorLink) { + return + } + + return +} + +export default CustomLink diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx new file mode 100644 index 0000000..b10d775 --- /dev/null +++ b/components/MDXComponents.tsx @@ -0,0 +1,36 @@ +/* eslint-disable react/display-name */ +import React, { useMemo } from 'react' +import { ComponentMap, getMDXComponent } from 'mdx-bundler/client' +import Image from './Image' +import CustomLink from './Link' +import TOCInline from './TOCInline' +import Pre from './Pre' +import { BlogNewsletterForm } from './NewsletterForm' + +const Wrapper: React.ComponentType<{ layout: string }> = ({ layout, ...rest }) => { + const Layout = require(`../layouts/${layout}`).default + return +} + +export const MDXComponents: ComponentMap = { + Image, + //@ts-ignore + TOCInline, + a: CustomLink, + pre: Pre, + wrapper: Wrapper, + //@ts-ignore + BlogNewsletterForm, +} + +interface Props { + layout: string + mdxSource: string + [key: string]: unknown +} + +export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }: Props) => { + const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource]) + + return +} diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx new file mode 100644 index 0000000..e1c3863 --- /dev/null +++ b/components/MobileNav.tsx @@ -0,0 +1,78 @@ +import { useState } from 'react' +import Link from './Link' +import headerNavLinks from '@/data/headerNavLinks' + +const MobileNav = () => { + 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 ( +
+ +
+ + +
+
+ ) +} + +export default MobileNav diff --git a/components/NewsletterForm.tsx b/components/NewsletterForm.tsx new file mode 100644 index 0000000..efd9765 --- /dev/null +++ b/components/NewsletterForm.tsx @@ -0,0 +1,84 @@ +import React, { useRef, useState } from 'react' + +import siteMetadata from '@/data/siteMetadata' + +const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => { + const inputEl = useRef(null) + const [error, setError] = useState(false) + const [message, setMessage] = useState('') + const [subscribed, setSubscribed] = useState(false) + + const subscribe = async (e: React.FormEvent) => { + e.preventDefault() + + const res = await fetch(`/api/${siteMetadata.newsletter.provider}`, { + body: JSON.stringify({ + email: inputEl.current.value, + }), + headers: { + 'Content-Type': 'application/json', + }, + method: 'POST', + }) + + const { error } = await res.json() + if (error) { + setError(true) + setMessage('Your e-mail address is invalid or you are already subscribed!') + return + } + + inputEl.current.value = '' + setError(false) + setSubscribed(true) + setMessage('Successfully! 🎉 You are now subscribed.') + } + + return ( +
+
{title}
+
+
+ + +
+
+ +
+
+ {error && ( +
{message}
+ )} +
+ ) +} + +export default NewsletterForm + +export const BlogNewsletterForm = ({ title }) => ( +
+
+ +
+
+) diff --git a/components/PageTitle.tsx b/components/PageTitle.tsx new file mode 100644 index 0000000..fa05fb5 --- /dev/null +++ b/components/PageTitle.tsx @@ -0,0 +1,13 @@ +import { ReactNode } from 'react' + +interface Props { + children: ReactNode +} + +export default function PageTitle({ children }: Props) { + return ( +

+ {children} +

+ ) +} diff --git a/components/Pagination.tsx b/components/Pagination.tsx new file mode 100644 index 0000000..39e5fef --- /dev/null +++ b/components/Pagination.tsx @@ -0,0 +1,41 @@ +import Link from '@/components/Link' + +interface Props { + totalPages: number + currentPage: number +} + +export default function Pagination({ totalPages, currentPage }: Props) { + const prevPage = currentPage - 1 > 0 + const nextPage = currentPage + 1 <= totalPages + + return ( +
+ +
+ ) +} diff --git a/components/Pre.tsx b/components/Pre.tsx new file mode 100644 index 0000000..8cf91bc --- /dev/null +++ b/components/Pre.tsx @@ -0,0 +1,75 @@ +import { useState, useRef, ReactNode } from 'react' + +interface Props { + children: ReactNode +} + +const Pre = ({ children }: Props) => { + const textInput = useRef(null) + const [hovered, setHovered] = useState(false) + const [copied, setCopied] = useState(false) + + const onEnter = () => { + setHovered(true) + } + const onExit = () => { + setHovered(false) + setCopied(false) + } + const onCopy = () => { + setCopied(true) + navigator.clipboard.writeText(textInput.current.textContent) + setTimeout(() => { + setCopied(false) + }, 2000) + } + + return ( +
+ {hovered && ( + + )} + + 
{children}
+
+ ) +} + +export default Pre diff --git a/components/SEO.tsx b/components/SEO.tsx new file mode 100644 index 0000000..9bea68f --- /dev/null +++ b/components/SEO.tsx @@ -0,0 +1,195 @@ +import Head from 'next/head' +import { useRouter } from 'next/router' +import siteMetadata from '@/data/siteMetadata' +import { AuthorFrontMatter } from 'types/AuthorFrontMatter' +import { PostFrontMatter } from 'types/PostFrontMatter' + +interface CommonSEOProps { + title: string + description: string + ogType: string + ogImage: + | string + | { + '@type': string + url: string + }[] + twImage: string + canonicalUrl?: string +} + +const CommonSEO = ({ + title, + description, + ogType, + ogImage, + twImage, + canonicalUrl, +}: CommonSEOProps) => { + const router = useRouter() + return ( + + {title} + + + + + + + + {Array.isArray(ogImage) ? ( + ogImage.map(({ url }) => ) + ) : ( + + )} + + + + + + + + ) +} + +interface PageSEOProps { + title: string + description: string +} + +export const PageSEO = ({ title, description }: PageSEOProps) => { + const ogImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner + const twImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner + return ( + + ) +} + +export const TagSEO = ({ title, description }: PageSEOProps) => { + const ogImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner + const twImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner + const router = useRouter() + return ( + <> + + + + + + ) +} + +interface BlogSeoProps extends PostFrontMatter { + authorDetails?: AuthorFrontMatter[] + url: string +} + +export const BlogSEO = ({ + authorDetails, + title, + summary, + date, + lastmod, + url, + images = [], + canonicalUrl, +}: BlogSeoProps) => { + const publishedAt = new Date(date).toISOString() + const modifiedAt = new Date(lastmod || date).toISOString() + const imagesArr = + images.length === 0 + ? [siteMetadata.socialBanner] + : typeof images === 'string' + ? [images] + : images + + const featuredImages = imagesArr.map((img) => { + return { + '@type': 'ImageObject', + url: `${siteMetadata.siteUrl}${img}`, + } + }) + + let authorList + if (authorDetails) { + authorList = authorDetails.map((author) => { + return { + '@type': 'Person', + name: author.name, + } + }) + } else { + authorList = { + '@type': 'Person', + name: siteMetadata.author, + } + } + + const structuredData = { + '@context': 'https://schema.org', + '@type': 'Article', + mainEntityOfPage: { + '@type': 'WebPage', + '@id': url, + }, + headline: title, + image: featuredImages, + datePublished: publishedAt, + dateModified: modifiedAt, + author: authorList, + publisher: { + '@type': 'Organization', + name: siteMetadata.author, + logo: { + '@type': 'ImageObject', + url: `${siteMetadata.siteUrl}${siteMetadata.siteLogo}`, + }, + }, + description: summary, + } + + const twImageUrl = featuredImages[0].url + + return ( + <> + + + {date && } + {lastmod && } + + + ) +} + +export default GAScript + +// https://developers.google.com/analytics/devguides/collection/gtagjs/events +export const logEvent = (action, category, label, value) => { + window.gtag?.('event', action, { + event_category: category, + event_label: label, + value: value, + }) +} diff --git a/components/analytics/Plausible.tsx b/components/analytics/Plausible.tsx new file mode 100644 index 0000000..5d73d24 --- /dev/null +++ b/components/analytics/Plausible.tsx @@ -0,0 +1,27 @@ +import Script from 'next/script' + +import siteMetadata from '@/data/siteMetadata' + +const PlausibleScript = () => { + return ( + <> + + + ) +} + +export default PlausibleScript + +// https://plausible.io/docs/custom-event-goals +export const logEvent = (eventName, ...rest) => { + return window.plausible?.(eventName, ...rest) +} diff --git a/components/analytics/SimpleAnalytics.tsx b/components/analytics/SimpleAnalytics.tsx new file mode 100644 index 0000000..bb36ed8 --- /dev/null +++ b/components/analytics/SimpleAnalytics.tsx @@ -0,0 +1,25 @@ +import Script from 'next/script' + +const SimpleAnalyticsScript = () => { + return ( + <> + +