From 1dfd5e5271c5dea7a22d8a2863f6ece8543c043f Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Fri, 7 Oct 2022 13:55:39 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E6=94=B9=E7=94=A8=20TypeScript?= =?UTF-8?q?=E3=80=82close=20#1.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 57 ++++++------------ components/{Card.js => Card.tsx} | 0 .../{ClientReload.js => ClientReload.tsx} | 2 +- components/{Footer.js => Footer.tsx} | 12 ++-- components/Image.js | 6 -- components/Image.tsx | 5 ++ .../{LayoutWrapper.js => LayoutWrapper.tsx} | 7 ++- components/{Link.js => Link.tsx} | 6 +- components/MDXComponents.js | 26 -------- components/MDXComponents.tsx | 36 +++++++++++ components/{MobileNav.js => MobileNav.tsx} | 47 ++++++--------- .../{NewsletterForm.js => NewsletterForm.tsx} | 6 +- components/{PageTitle.js => PageTitle.tsx} | 8 ++- components/{Pagination.js => Pagination.tsx} | 19 +++--- components/{Pre.js => Pre.tsx} | 10 ++- components/{SEO.js => SEO.tsx} | 48 ++++++++++++--- ...pAndComment.js => ScrollTopAndComment.tsx} | 33 +++++----- components/SectionContainer.js | 3 - components/SectionContainer.tsx | 9 +++ components/{TOCInline.js => TOCInline.tsx} | 34 ++++++----- components/{Tag.js => Tag.tsx} | 6 +- .../{ThemeSwitch.js => ThemeSwitch.tsx} | 0 ...GoogleAnalytics.js => GoogleAnalytics.tsx} | 0 .../analytics/{Plausible.js => Plausible.tsx} | 0 components/analytics/Posthog.js | 18 ------ ...SimpleAnalytics.js => SimpleAnalytics.tsx} | 0 components/analytics/{Umami.js => Umami.tsx} | 0 components/analytics/{index.js => index.tsx} | 10 ++- components/comments/{Disqus.js => Disqus.tsx} | 11 +++- components/comments/{Giscus.js => Giscus.tsx} | 35 ++++------- .../{Utterances.js => Utterances.tsx} | 10 ++- components/comments/{index.js => index.tsx} | 30 +++++++-- .../social-icons/{index.js => index.tsx} | 0 css/prism.css | 2 +- data/{headerNavLinks.js => headerNavLinks.ts} | 0 data/projectsData.js | 18 ------ data/projectsData.ts | 10 +++ data/references-data.bib | 2 +- data/siteMetadata.js | 8 +-- layouts/{AuthorLayout.js => AuthorLayout.tsx} | 13 +++- layouts/{ListLayout.js => ListLayout.tsx} | 14 +++-- layouts/{PostLayout.js => PostLayout.tsx} | 24 ++++++-- layouts/{PostSimple.js => PostSimple.tsx} | 15 ++++- lib/{generate-rss.js => generate-rss.ts} | 5 +- lib/{mdx.js => mdx.ts} | 25 ++++---- ...ark-code-title.js => remark-code-title.ts} | 5 +- ...atter.js => remark-extract-frontmatter.ts} | 7 ++- ...ark-img-to-jsx.js => remark-img-to-jsx.ts} | 17 ++++-- ...toc-headings.js => remark-toc-headings.ts} | 6 +- lib/{tags.js => tags.ts} | 10 +-- lib/utils/{files.js => files.ts} | 6 +- lib/utils/{formatDate.js => formatDate.ts} | 4 +- lib/utils/{htmlEscaper.js => htmlEscaper.ts} | 5 +- lib/utils/{kebabCase.js => kebabCase.ts} | 2 +- next-env.d.ts | 5 ++ next.config.js | 18 +++++- package-lock.json | Bin 1060808 -> 1038321 bytes package.json | 18 ++++-- pages/404.js | 31 ---------- pages/404.tsx | 24 ++++++++ pages/{_app.js => _app.tsx} | 3 +- pages/{_document.js => _document.tsx} | 4 +- pages/about.js | 21 ------- pages/about.tsx | 27 +++++++++ pages/api/{buttondown.js => buttondown.ts} | 4 +- pages/api/{convertkit.js => convertkit.ts} | 4 +- pages/api/emailoctopus.js | 33 ---------- pages/api/{klaviyo.js => klaviyo.ts} | 4 +- pages/api/{mailchimp.js => mailchimp.ts} | 5 +- pages/api/revue.js | 30 --------- pages/{blog.js => blog.tsx} | 14 ++++- pages/blog/{[...slug].js => [...slug].tsx} | 42 ++++++++++--- pages/blog/page/{[page].js => [page].tsx} | 18 ++++-- pages/{index.js => index.tsx} | 9 +-- pages/{projects.js => projects.tsx} | 2 +- pages/{tags.js => tags.tsx} | 5 +- pages/tags/{[tag].js => [tag].tsx} | 19 +++--- scripts/generate-sitemap.js | 1 - scripts/next-remote-watch.js | 2 +- tailwind.config.js | 14 +++-- tsconfig.json | 28 +++++++++ types/AuthorFrontMatter.ts | 11 ++++ types/PostFrontMatter.ts | 14 +++++ types/Toc.ts | 5 ++ 84 files changed, 645 insertions(+), 462 deletions(-) rename components/{Card.js => Card.tsx} (100%) rename components/{ClientReload.js => ClientReload.tsx} (92%) rename components/{Footer.js => Footer.tsx} (93%) delete mode 100644 components/Image.js create mode 100644 components/Image.tsx rename components/{LayoutWrapper.js => LayoutWrapper.tsx} (93%) rename components/{Link.js => Link.tsx} (71%) delete mode 100644 components/MDXComponents.js create mode 100644 components/MDXComponents.tsx rename components/{MobileNav.js => MobileNav.tsx} (54%) rename components/{NewsletterForm.js => NewsletterForm.tsx} (94%) rename components/{PageTitle.js => PageTitle.tsx} (59%) rename components/{Pagination.js => Pagination.tsx} (57%) rename components/{Pre.js => Pre.tsx} (92%) rename components/{SEO.js => SEO.tsx} (82%) rename components/{ScrollTopAndComment.js => ScrollTopAndComment.tsx} (61%) delete mode 100644 components/SectionContainer.js create mode 100644 components/SectionContainer.tsx rename components/{TOCInline.js => TOCInline.tsx} (76%) rename components/{Tag.js => Tag.tsx} (82%) rename components/{ThemeSwitch.js => ThemeSwitch.tsx} (100%) rename components/analytics/{GoogleAnalytics.js => GoogleAnalytics.tsx} (100%) rename components/analytics/{Plausible.js => Plausible.tsx} (100%) delete mode 100644 components/analytics/Posthog.js rename components/analytics/{SimpleAnalytics.js => SimpleAnalytics.tsx} (100%) rename components/analytics/{Umami.js => Umami.tsx} (100%) rename components/analytics/{index.js => index.tsx} (80%) rename components/comments/{Disqus.js => Disqus.tsx} (82%) rename components/comments/{Giscus.js => Giscus.tsx} (70%) rename components/comments/{Utterances.js => Utterances.tsx} (91%) rename components/comments/{index.js => index.tsx} (58%) rename components/social-icons/{index.js => index.tsx} (100%) rename data/{headerNavLinks.js => headerNavLinks.ts} (100%) delete mode 100644 data/projectsData.js create mode 100644 data/projectsData.ts rename layouts/{AuthorLayout.js => AuthorLayout.tsx} (82%) rename layouts/{ListLayout.js => ListLayout.tsx} (91%) rename layouts/{PostLayout.js => PostLayout.tsx} (91%) rename layouts/{PostSimple.js => PostSimple.tsx} (84%) rename lib/{generate-rss.js => generate-rss.ts} (87%) rename lib/{mdx.js => mdx.ts} (84%) rename lib/{remark-code-title.js => remark-code-title.ts} (82%) rename lib/{remark-extract-frontmatter.js => remark-extract-frontmatter.ts} (52%) rename lib/{remark-img-to-jsx.js => remark-img-to-jsx.ts} (75%) rename lib/{remark-toc-headings.js => remark-toc-headings.ts} (76%) rename lib/{tags.js => tags.ts} (70%) rename lib/utils/{files.js => files.ts} (71%) rename lib/utils/{formatDate.js => formatDate.ts} (72%) rename lib/utils/{htmlEscaper.js => htmlEscaper.ts} (75%) rename lib/utils/{kebabCase.js => kebabCase.ts} (59%) create mode 100644 next-env.d.ts delete mode 100644 pages/404.js create mode 100644 pages/404.tsx rename pages/{_app.js => _app.tsx} (89%) rename pages/{_document.js => _document.tsx} (86%) delete mode 100644 pages/about.js create mode 100644 pages/about.tsx rename pages/api/{buttondown.js => buttondown.ts} (87%) rename pages/api/{convertkit.js => convertkit.ts} (87%) delete mode 100644 pages/api/emailoctopus.js rename pages/api/{klaviyo.js => klaviyo.ts} (89%) rename pages/api/{mailchimp.js => mailchimp.ts} (74%) delete mode 100644 pages/api/revue.js rename pages/{blog.js => blog.tsx} (61%) rename pages/blog/{[...slug].js => [...slug].tsx} (57%) rename pages/blog/page/{[page].js => [page].tsx} (67%) rename pages/{index.js => index.tsx} (92%) rename pages/{projects.js => projects.tsx} (94%) rename pages/{tags.js => tags.tsx} (86%) rename pages/tags/{[tag].js => [tag].tsx} (66%) create mode 100644 tsconfig.json create mode 100644 types/AuthorFrontMatter.ts create mode 100644 types/PostFrontMatter.ts create mode 100644 types/Toc.ts diff --git a/README.md b/README.md index c4e4f66..e238684 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,13 @@ ![tailwind-nextjs-banner](/public/static/images/twitter-card.png) -# Ivan Li's Blog +# Tailwind Nextjs Starter Blog -[![Build Status](https://ci.ivanli.cc/api/badges/Ivan/tailwind-nextjs-blog/status.svg)](https://ci.ivanli.cc/Ivan/tailwind-nextjs-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. @@ -26,32 +31,13 @@ Feature request? Check the past discussions to see if it has been brought up pre - [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. -- [ghali.dev](https://ghali.dev) - Cyril's Blog - [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)). -- [honghong.me](https://honghong.me) - Tszhong's personal website ([source code](https://github.com/tszhong0411/home)) - [alfoncode.com](https://alfoncode.com) - Alfonso García's personar website. Customized design ([source code](https://github.com/alfoncode/personal-web)) -- [marceloformentao.dev](https://marceloformentao.dev) - Marcelo Formentão personal website ([source code](https://github.com/marceloavf/marceloformentao.dev)). -- [abiraja.com](https://www.abiraja.com/) - with a [runnable JS code snippet component!](https://www.abiraja.com/blog/querying-solana-blockchain) -- [einargudni.com](https://www.einargudni.com) - with a customized theme, command pallette and more ([source code](https://github.com/einargudnig/einargudni.com)) -- [bpiggin.com](https://www.bpiggin.com) - Ben Piggin's personal blog -- [maqib.cn](https://maqib.cn) - A blog of Chinese front-end developers 狂奔小马的博客 ([源码](https://github.com/maqi1520/nextjs-tailwind-blog)) -- [ambilena.com](https://ambilena.com/) - Electronic Music Blog & imprint for upcoming musicians. -- [kittan.ru](https://www.kittan.ru/) - Kittanb's personal blog about linux ([source code](https://github.com/kittanb/blog)) -- [nchristopher.me](https://nchristopher.me) - Nicholas Christopher's personal website and blog ([source code](https://github.com/nchristopher/blog)) -- [dalelarroder.com](https://dalelarroder.com) - Dale Larroder's personal website and blog ([source code](https://github.com/dlarroder/dalelarroder)) -- [devahoy.com](https://devahoy.com) - Chai's personal blog (Thai language) -- [0xchai.io](https://0xchai.io) - Chai's personal blog -- [techipedia](https://techipedia.vercel.app) - Simple blogging progressive web app with custom installation button and top progress bar -- [reubence.com](https://reubence.com) - Reuben Rapose's Digital Garden -- [axolo.co/blog](https://axolo.co/blog) - Engineering management news & axolo.co updates (with image preview for article in the home page) -- [musing.vercel.app](https://musing.vercel.app/) - Parth Desai's personal blog ([source code](https://github.com/pycoder2000/blog)) -- [onyourmental.com](https://www.onyourmental.com/) - [Curtis Warcup's](https://github.com/Cwarcup) website for the On Your Mental Podcast ([source code](https://github.com/Cwarcup/on-your-mental)) -- [cwarcup.com](https://www.cwarcup.com/) - Curtis Warcup's personal website and blog ([source code](https://github.com/Cwarcup/personal-blog). Using the template? Feel free to create a PR and add your blog to this list. @@ -81,7 +67,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea - Blog templates - TOC component - Support for nested routing of blog posts -- Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo, revue, and emailoctopus +- 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 @@ -98,27 +84,18 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea ## Quick Start Guide -1. Try installing the starter using the new [Pliny project CLI](https://github.com/timlrx/pliny): - -```bash -npm i -g @pliny/cli -pliny new --template=starter-blog my-blog -``` - -It supports the updated version of the blog with Contentlayer, optional choice of TS/JS and different package managers as well as more modularized components which will be the basis of the template going forward. - -Alternatively to stick with the current version, TypeScript and Contentlayer: - -```bash -npx degit 'timlrx/tailwind-nextjs-starter-blog#contentlayer' -``` - -or JS (official support) +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. @@ -188,7 +165,7 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/). -Currently 7 fields are supported. +Currently 10 fields are supported. ``` title (required) @@ -242,4 +219,4 @@ Using the template? Support this effort by giving a star on GitHub, sharing your ## Licence -[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timlrx.com) +[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timrlx.com) diff --git a/components/Card.js b/components/Card.tsx similarity index 100% rename from components/Card.js rename to components/Card.tsx diff --git a/components/ClientReload.js b/components/ClientReload.tsx similarity index 92% rename from components/ClientReload.js rename to components/ClientReload.tsx index babfba5..e8713e9 100644 --- a/components/ClientReload.js +++ b/components/ClientReload.tsx @@ -11,7 +11,7 @@ export const ClientReload = () => { useEffect(() => { import('socket.io-client').then((module) => { const socket = module.io() - socket.on('reload', (data) => { + socket.on('reload', () => { Router.replace(Router.asPath, undefined, { scroll: false, }) diff --git a/components/Footer.js b/components/Footer.tsx similarity index 93% rename from components/Footer.js rename to components/Footer.tsx index d4e2121..7b034be 100644 --- a/components/Footer.js +++ b/components/Footer.tsx @@ -7,12 +7,12 @@ export default function Footer() {