chore: sync with v1.0.0-canary.2

components/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,36 @@
+import Script from 'next/script'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const GAScript = () => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        src={`https://www.googletagmanager.com/gtag/js?id=${siteMetadata.analytics.googleAnalyticsId}`}
+      />
+
+      <Script strategy="lazyOnload">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${siteMetadata.analytics.googleAnalyticsId}', {
+              page_path: window.location.pathname,
+            });
+        `}
+      </Script>
+    </>
+  )
+}
+
+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,
+  })
+}

components/analytics/Plausible.tsx

@@ -0,0 +1,27 @@
+import Script from 'next/script'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const PlausibleScript = () => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        data-domain={siteMetadata.analytics.plausibleDataDomain}
+        src="https://plausible.io/js/plausible.js"
+      />
+      <Script strategy="lazyOnload">
+        {`
+            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+        `}
+      </Script>
+    </>
+  )
+}
+
+export default PlausibleScript
+
+// https://plausible.io/docs/custom-event-goals
+export const logEvent = (eventName, ...rest) => {
+  return window.plausible?.(eventName, ...rest)
+}

components/analytics/SimpleAnalytics.tsx

@@ -0,0 +1,25 @@
+import Script from 'next/script'
+
+const SimpleAnalyticsScript = () => {
+  return (
+    <>
+      <Script strategy="lazyOnload">
+        {`
+            window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
+        `}
+      </Script>
+      <Script strategy="lazyOnload" src="https://scripts.simpleanalyticscdn.com/latest.js" />
+    </>
+  )
+}
+
+// https://docs.simpleanalytics.com/events
+export const logEvent = (eventName, callback) => {
+  if (callback) {
+    return window.sa_event?.(eventName, callback)
+  } else {
+    return window.sa_event?.(eventName)
+  }
+}
+
+export default SimpleAnalyticsScript

components/analytics/index.tsx

@@ -0,0 +1,26 @@
+import GA from './GoogleAnalytics'
+import Plausible from './Plausible'
+import SimpleAnalytics from './SimpleAnalytics'
+import siteMetadata from '@/data/siteMetadata'
+
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void
+    plausible?: (...args: any[]) => void
+    sa_event?: (...args: any[]) => void
+  }
+}
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+const Analytics = () => {
+  return (
+    <>
+      {isProduction && siteMetadata.analytics.plausibleDataDomain && <Plausible />}
+      {isProduction && siteMetadata.analytics.simpleAnalytics && <SimpleAnalytics />}
+      {isProduction && siteMetadata.analytics.googleAnalyticsId && <GA />}
+    </>
+  )
+}
+
+export default Analytics

components/comments/Giscus.tsx

@@ -46,7 +46,7 @@ const Giscus = ({ mapping }: Props) => {
   return (
     <div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
       {enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
-      <div className="giscus-frame" id={COMMENTS_ID} />
+      <div className="giscus" id={COMMENTS_ID} />
     </div>
   )
 }

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -1,7 +1,7 @@
 ---
-title: 'Introducing Tailwind Nexjs Starter Blog'
+title: 'Introducing Tailwind Nextjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-07-18'
+lastmod: '2021-08-02'
 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.'
@@ -39,6 +39,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Lightweight, 38kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
+- 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/)

data/blog/new-features-in-v1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'New features in v1'
-date: '2021-07-21'
+date: 2021-07-28T15:32:14Z
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -15,6 +15,7 @@ A post on the new features introduced in v1.0. New features:
 - [Xdm MDX compiler](#xdm-mdx-compiler)
 - [Layouts](#layouts)
 - [Multiple authors](#multiple-authors)
+- [Analytics](#analytics)
 - [Blog comments system](#blog-comments-system)
 - [Copy button for code blocks](#copy-button-for-code-blocks)
 - [Line highlighting and line numbers](#line-highlighting-and-line-numbers)
@@ -146,9 +147,27 @@ export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
 Use the `MDXLayoutRenderer` component in a page where you want to accept a layout name to map to the desired layout.
 You need to pass the layout name from the layout folder (it has to be an exact match).
 
+## Analytics
+
+The template now supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics.
+Configure `siteMetadata.js` with the settings that correpond with the desired analytics provider.
+
+```js
+analytics: {
+    // supports plausible, simpleAnalytics or googleAnalytics
+    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    simpleAnalytics: false, // true or false
+    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+  },
+```
+
+Custom events are also supported. You can import the `logEvent` function from `@components/analytics/[ANALYTICS-PROVIDER]` file and call it when
+triggering certain events of interest. _Note_: Additional configuration might be required depending on the analytics provider, please check their official
+documentation for more information.
+
 ## Blog comments system
 
-We added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
+We have also added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
 To enable, simply configure `siteMetadata.js` comments property with the desired provider and settings as specified in the config file.
 
 ```js

data/projectsData.ts

@@ -1,7 +1,7 @@
 const projectsData = [
   {
     title: 'A Search Engine',
-    description: `What is you could look up any information in the world? Webpages, images, videos
+    description: `What if you could look up any information in the world? Webpages, images, videos
     and more. Google has many features to help you find exactly what you're looking
     for.`,
     imgSrc: '/static/images/google.png',

data/siteMetadata.js

@@ -16,6 +16,12 @@ const siteMetadata = {
   youtube: 'https://youtube.com',
   linkedin: 'https://www.linkedin.com',
   locale: 'en-US',
+  analytics: {
+    // supports plausible, simpleAnalytics or googleAnalytics
+    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    simpleAnalytics: false, // true or false
+    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+  },
   comment: {
     // Select a provider and use the environment variables associated to it
     // https://vercel.com/docs/environment-variables

lib/mdx.ts

@@ -118,7 +118,8 @@ export async function getFileBySlug<T>(type: 'authors' | 'blog', slug: string |
       readingTime: readingTime(code),
       slug: slug || null,
       fileName: fs.existsSync(mdxPath) ? `${slug}.mdx` : `${slug}.md`,
-      ...(frontmatter as T),
+      ...frontmatter,
+      date: frontmatter.date ? new Date(frontmatter.date).toISOString() : null,
     },
   }
 }
@@ -139,9 +140,13 @@ export async function getAllFilesFrontMatter(folder: 'blog') {
     }
     const source = fs.readFileSync(file, 'utf8')
     const matterFile = matter(source)
-    const data = matterFile.data as AuthorFrontMatter | PostFrontMatter
-    if ('draft' in data && data.draft !== true) {
-      allFrontMatter.push({ ...data, slug: formatSlug(fileName) })
+    const frontmatter = matterFile.data as AuthorFrontMatter | PostFrontMatter
+    if ('draft' in frontmatter && frontmatter.draft !== true) {
+      allFrontMatter.push({
+        ...frontmatter,
+        slug: formatSlug(fileName),
+        date: frontmatter.date ? new Date(frontmatter.date).toISOString() : null,
+      })
     }
   })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-nextjs-starter-blog",
-  "version": "v1.0.0-canary.1",
+  "version": "v1.0.0-canary.2",
   "private": true,
   "scripts": {
     "start": "next-remote-watch ./data",

pages/_app.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'next-themes'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
 
+import Analytics from '@/components/analytics'
 import LayoutWrapper from '@/components/LayoutWrapper'
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -12,6 +13,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <Head>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
+      <Analytics />
       <LayoutWrapper>
         <Component {...pageProps} />
       </LayoutWrapper>

pages/about.tsx

@@ -5,6 +5,7 @@ import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
 
 const DEFAULT_LAYOUT = 'AuthorLayout'
 
+// @ts-ignore
 export const getStaticProps: GetStaticProps<{
   authorDetails: { mdxSource: string; frontMatter: AuthorFrontMatter }
 }> = async () => {

pages/blog/[...slug].tsx

@@ -21,6 +21,7 @@ export async function getStaticPaths() {
   }
 }
 
+// @ts-ignore
 export const getStaticProps: GetStaticProps<{
   post: { mdxSource: string; frontMatter: PostFrontMatter }
   authorDetails: AuthorFrontMatter[]
@@ -33,6 +34,7 @@ export const getStaticProps: GetStaticProps<{
   const prev: { slug: string; title: string } = allPosts[postIndex + 1] || null
   const next: { slug: string; title: string } = allPosts[postIndex - 1] || null
   const post = await getFileBySlug<PostFrontMatter>('blog', slug)
+  // @ts-ignore
   const authorList = post.frontMatter.authors || ['default']
   const authorPromise = authorList.map(async (author) => {
     const authorResults = await getFileBySlug<AuthorFrontMatter>('authors', [author])