Skip to content

Commit

Permalink
Website: 404 tracking
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnapoli
mnapoli committed Sep 22, 2023
1 parent 14b1272 commit cef2d5f
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 57 deletions.
6 changes: 4 additions & 2 deletions website/next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const { withPlausibleProxy } = require('next-plausible')

const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.jsx',
Expand All @@ -6,7 +8,7 @@ const withNextra = require('nextra')({
defaultShowCopyCode: true,
})

module.exports = withNextra({
module.exports = withNextra(withPlausibleProxy()({
// Redirect old .html links
async redirects() {
const { redirects } = require('./redirects');
Expand All @@ -28,7 +30,7 @@ module.exports = withNextra({
...redirectList,
]
},
})
}));

// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = withNextra({ /* other next.js config */ })
14 changes: 14 additions & 0 deletions website/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@heroicons/react": "^2.0.18",
"@octokit/graphql": "^7.0.1",
"next": "^13.4.9",
"next-plausible": "^3.11.1",
"next-seo": "^6.1.0",
"nextra": "^2.8.0",
"nextra-theme-docs": "^2.8.0",
Expand Down
123 changes: 69 additions & 54 deletions website/src/pages/404.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,75 @@
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import { BookOpenIcon, BugAntIcon } from '@heroicons/react/24/solid'
import { ChevronRightIcon } from '@heroicons/react/20/solid';
import { BookOpenIcon, BugAntIcon } from '@heroicons/react/24/solid';
import { usePlausible } from 'next-plausible';
import { useEffect } from 'react';

<main className="mx-auto w-full max-w-7xl px-6 pb-16 pt-10 sm:pb-24 lg:px-8">
<div className="mx-auto mt-20 max-w-2xl text-center sm:mt-24">
<div className="text-base font-semibold leading-8 text-blue-500">404</div>
<h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">This page does not exist</h1>
<div className="mt-4 text-base leading-7 text-gray-600 sm:mt-6 sm:text-lg sm:leading-8">
Sorry, we couldn’t find the page you’re looking for.
export default function NotFound() {
const plausible = usePlausible();
useEffect(() => {
// Track 404s so we can fix them
plausible('404', { props: { path: document.location.pathname } });
}, []);

return <main className="mx-auto w-full max-w-7xl px-6 pb-16 pt-10 sm:pb-24 lg:px-8">
<div className="mx-auto mt-20 max-w-2xl text-center sm:mt-24">
<div className="text-base font-semibold leading-8 text-blue-500">404</div>
<h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">This page does not
exist</h1>
<div className="mt-4 text-base leading-7 text-gray-600 sm:mt-6 sm:text-lg sm:leading-8">
Sorry, we couldn’t find the page you’re looking for.
</div>
</div>
</div>
<div className="mx-auto mt-16 flow-root max-w-lg sm:mt-20">
<h2 className="sr-only">Popular pages</h2>
<ul role="list" className="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5">
<div className="mx-auto mt-16 flow-root max-w-lg sm:mt-20">
<h2 className="sr-only">Popular pages</h2>
<ul role="list" className="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5">

<li className="relative flex gap-x-6 py-6">
<div className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<BookOpenIcon className="h-6 w-6 text-blue-500" aria-hidden="true" />
</div>
<div className="flex-auto">
<h3 className="text-sm font-semibold leading-6 text-gray-900">
<a href="/docs/">
<span className="absolute inset-0" aria-hidden="true" />
Documentation
</a>
</h3>
<div className="mt-2 text-sm leading-6 text-gray-600">Read the Bref documentation</div>
</div>
<div className="flex-none self-center">
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</li>
<li className="relative flex gap-x-6 py-6">
<div
className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<BookOpenIcon className="h-6 w-6 text-blue-500" aria-hidden="true" />
</div>
<div className="flex-auto">
<h3 className="text-sm font-semibold leading-6 text-gray-900">
<a href="/docs/">
<span className="absolute inset-0" aria-hidden="true" />
Documentation
</a>
</h3>
<div className="mt-2 text-sm leading-6 text-gray-600">Read the Bref documentation</div>
</div>
<div className="flex-none self-center">
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</li>

<li className="relative flex gap-x-6 py-6">
<div className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<BugAntIcon className="h-6 w-6 text-blue-500" aria-hidden="true" />
</div>
<div className="flex-auto">
<h3 className="text-sm font-semibold leading-6 text-gray-900">
<a href="https://github.com/brefphp/bref/issues/new?labels=bug&template=bug_report.md&title=404" target="_blank">
<span className="absolute inset-0" aria-hidden="true" />
Open a bug report
</a>
</h3>
<div className="mt-2 text-sm leading-6 text-gray-600">Report the broken link in a GitHub issue</div>
</div>
<div className="flex-none self-center">
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</li>
<li className="relative flex gap-x-6 py-6">
<div
className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<BugAntIcon className="h-6 w-6 text-blue-500" aria-hidden="true" />
</div>
<div className="flex-auto">
<h3 className="text-sm font-semibold leading-6 text-gray-900">
<a href="https://github.com/brefphp/bref/issues/new?labels=bug&template=bug_report.md&title=404"
target="_blank">
<span className="absolute inset-0" aria-hidden="true" />
Open a bug report
</a>
</h3>
<div className="mt-2 text-sm leading-6 text-gray-600">Report the broken link in a GitHub issue
</div>
</div>
<div className="flex-none self-center">
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</li>

</ul>
<div className="mt-10 flex justify-center">
<a href="/" className="text-sm font-semibold leading-6 text-blue-500">
<span aria-hidden="true">&larr;</span>
Back to the home page
</a>
</ul>
<div className="mt-10 flex justify-center">
<a href="/" className="text-sm font-semibold leading-6 text-blue-500">
<span aria-hidden="true">&larr;</span>
Back to the home page
</a>
</div>
</div>
</div>
</main>
</main>
}
7 changes: 6 additions & 1 deletion website/src/pages/_app.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '../../styles/main.css';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import PlausibleProvider from 'next-plausible';
const redirects = require('../../redirects').redirects;

export default function MyApp({ Component, pageProps }) {
Expand All @@ -24,5 +25,9 @@ export default function MyApp({ Component, pageProps }) {
}
}, []);

return <Component {...pageProps} />
return (
<PlausibleProvider domain="bref.sh" trackOutboundLinks={true}>
<Component {...pageProps} />
</PlausibleProvider>
)
}

0 comments on commit cef2d5f

Please sign in to comment.