cdransf/augurymetal.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: navigate next13.x upgrade

Browse source
This commit is contained in:
Cory Dransfeldt 2023-06-17 11:36:33 -07:00
parent f2029bf4a1
commit 5a7a14da50
No known key found for this signature in database
23 changed files with 85 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.idea/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/augurymetal.com.iml Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

2
components/Card.tsx
View file

@ -1,5 +1,5 @@
import Image from './Image'
import Link from './Link'
import Link from 'next/link'
const Card = ({ title, description, imgSrc, href }) => (
<div className="md p-4 md:w-1/2" style={{ maxWidth: '544px' }}>

2
components/Footer.tsx
View file

@ -1,4 +1,4 @@
import Link from './Link'
import Link from 'next/link'
import siteMetadata from '@/data/siteMetadata'
import SocialIcon from '@/components/social-icons'

6
components/LayoutWrapper.tsx
View file

@ -1,6 +1,6 @@
import Image from '@/components/Image'
import headerNavLinks from '@/data/headerNavLinks'
import Link from './Link'
import Link from 'next/link'
import SectionContainer from './SectionContainer'
import Footer from './Footer'
import MobileNav from './MobileNav'
@ -17,8 +17,8 @@ const LayoutWrapper = ({ children }: Props) => {
<Image
src="/static/images/header-banner.jpg"
alt="header banner"
width="1500px"
height="600px"
width="1500"
height="600"
/>
</Link>
<div className="flex h-screen flex-col justify-between">

27
components/Link.tsx
View file

@ -1,27 +0,0 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import Link from 'next/link'
import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
const CustomLink = ({
href,
...rest
}: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => {
const isInternalLink = href && href.startsWith('/')
const isAnchorLink = href && href.startsWith('#')
if (isInternalLink) {
return (
<Link href={href}>
<a {...rest} />
</Link>
)
}
if (isAnchorLink) {
return <a href={href} {...rest} />
}
return <a target="_blank" rel="noopener noreferrer" href={href} {...rest} />
}
export default CustomLink

2
components/MDXComponents.tsx
View file

@ -2,7 +2,6 @@
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'
@ -16,7 +15,6 @@ export const MDXComponents: ComponentMap = {
Image,
//@ts-ignore
TOCInline,
a: CustomLink,
pre: Pre,
wrapper: Wrapper,
//@ts-ignore

4
components/MobileNav.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react'
import Link from './Link'
import Link from 'next/link'
import headerNavLinks from '@/data/headerNavLinks'
const MobileNav = () => {
@ -21,7 +21,7 @@ const MobileNav = () => {
<div className="sm:hidden">
<button
type="button"
className="mt-2 ml-1 mr-1 h-8 w-8 rounded py-1"
className="ml-1 mr-1 mt-2 h-8 w-8 rounded py-1"
aria-label="Toggle Menu"
onClick={onToggleNav}
>

4
components/Pagination.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
interface Props {
page: string
@ -11,7 +11,7 @@ export default function Pagination({ page, totalPages, currentPage }: Props) {
const nextPage = currentPage + 1 <= totalPages
return (
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<nav className="flex justify-between">
{!prevPage && (
<button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>

46
components/PhotoGallery.tsx
View file

@ -1,42 +1,38 @@
import { useState } from 'react'
import Lightbox from 'react-image-lightbox'
import 'react-image-lightbox/style.css'
import Lightbox from 'yet-another-react-lightbox'
import 'yet-another-react-lightbox/styles.css'
import Image from './Image'
const PhotoGallery = (props) => {
const { title, data } = props
const [isOpen, setIsOpen] = useState(false)
const [photoIndex, setPhotoIndex] = useState(0)
const slides = data.map((d) => {
return { src: d }
})
return (
<div className="grid grid-cols-4 gap-2 p-2">
{data.length
? data.map((d: string, index: number) => (
<Image
key={d}
alt={title}
onClick={() => {
setPhotoIndex(index)
setIsOpen(true)
}}
src={d}
className="w-1/4 cursor-pointer object-cover"
width="300px"
height="300px"
/>
<div className="relative flex h-24 flex-col items-center overflow-hidden" key={d}>
<Image
alt={title}
onClick={() => {
setPhotoIndex(index)
setIsOpen(true)
}}
src={d}
quality={75}
loading="lazy"
fill
style={{ objectFit: 'cover' }}
className="-mt-18 w-full max-w-none cursor-pointer"
/>
</div>
))
: null}
{isOpen && (
<Lightbox
mainSrc={data[photoIndex]}
nextSrc={data[(photoIndex + 1) % data.length]}
prevSrc={data[(photoIndex + data.length - 1) % data.length]}
onCloseRequest={() => setIsOpen(false)}
onMovePrevRequest={() => setPhotoIndex((photoIndex + data.length - 1) % data.length)}
onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % data.length)}
/>
)}
<Lightbox index={photoIndex} open={isOpen} slides={slides} close={() => setIsOpen(false)} />
</div>
)
}

9
components/Tag.tsx
View file

@ -7,10 +7,11 @@ interface Props {
const Tag = ({ text }: Props) => {
return (
<Link href={`/tags/${kebabCase(text)}`}>
<a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
{text.split(' ').join('-')}
</a>
<Link
className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href={`/tags/${kebabCase(text)}`}
>
{text.split(' ').join('-')}
</Link>
)
}

8
layouts/AuthorLayout.tsx
View file

@ -28,7 +28,7 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
<>
<PageSEO title={`Band - ${name}`} description={`Band - ${name}`} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Band
</h1>
@ -38,8 +38,8 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
<Image
src={bannerimage}
alt="avatar"
width="1250px"
height="579px"
width="1250"
height="579"
className="rounded-sm"
/>
<div className="flex space-x-3 pt-8">
@ -54,7 +54,7 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
<SocialIcon kind="lastfm" href={lastfm} />
</div>
</div>
<div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>
<div className="prose max-w-none pb-8 pt-8 dark:prose-dark xl:col-span-2">{children}</div>
</div>
</div>
</>

4
layouts/ListLayout.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
import Tag from '@/components/Tag'
import { ComponentProps, useState } from 'react'
import Pagination from '@/components/Pagination'
@ -25,7 +25,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
return (
<>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
{title}
</h1>

10
layouts/PostLayout.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
import PageTitle from '@/components/PageTitle'
import SectionContainer from '@/components/SectionContainer'
import { BlogSEO } from '@/components/SEO'
@ -61,7 +61,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
style={{ gridTemplateRows: 'auto 1fr' }}
>
<dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
<dl className="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
<dt className="sr-only">Authors</dt>
<dd>
<ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
@ -70,8 +70,8 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
{author.avatar && (
<Image
src={author.avatar}
width="64px"
height="64px"
width="64"
height="64"
alt="avatar"
className="h-10 w-10 rounded-full"
/>
@ -97,7 +97,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
</dd>
</dl>
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">
{children}
{youtubeId ? <YoutubeVideo title={title} data={youtubeId} /> : null}
</div>

4
layouts/PostSimple.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
import PageTitle from '@/components/PageTitle'
import SectionContainer from '@/components/SectionContainer'
import { BlogSEO } from '@/components/SEO'
@ -45,7 +45,7 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
style={{ gridTemplateRows: 'auto 1fr' }}
>
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
</div>
<Comments frontMatter={frontMatter} />
<footer>

12
package.json
View file

@ -22,12 +22,12 @@
"gray-matter": "^4.0.2",
"image-size": "1.0.0",
"mdx-bundler": "^8.0.0",
"next": "12.1.0",
"next": "^13.4.6",
"next-themes": "^0.0.14",
"postcss": "^8.4.5",
"preact": "^10.6.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"reading-time": "1.3.0",
"rehype-autolink-headings": "^6.1.0",
"rehype-citation": "^0.2.0",
@ -41,7 +41,8 @@
"sharp": "^0.30.5",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^3.0.18",
"unist-util-visit": "^4.0.0"
"unist-util-visit": "^4.0.0",
"yet-another-react-lightbox": "^3.11.1"
},
"devDependencies": {
"@next/bundle-analyzer": "12.0.9",
@ -53,7 +54,7 @@
"cross-env": "^7.0.3",
"dedent": "^0.7.0",
"eslint": "^8.19.0",
"eslint-config-next": "13.1.1",
"eslint-config-next": "^13.4.6",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.2.1",
"file-loader": "^6.0.0",
@ -64,7 +65,6 @@
"next-remote-watch": "^1.0.0",
"prettier": "^2.4.1",
"prettier-plugin-tailwindcss": "^0.1.4",
"react-image-lightbox": "^5.1.4",
"socket.io": "^4.4.0",
"socket.io-client": "^4.4.0",
"typescript": "^4.8.3"

4
pages/404.tsx
View file

@ -1,9 +1,9 @@
import Link from '@/components/Link'
import Link from 'next/link'
export default function FourZeroFour() {
return (
<div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
<div className="space-x-2 pt-6 pb-8 md:space-y-5">
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
404
</h1>

4
pages/index.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
import { PageSEO } from '@/components/SEO'
import Tag from '@/components/Tag'
import siteMetadata from '@/data/siteMetadata'
@ -21,7 +21,7 @@ export default function Home({ posts }: InferGetStaticPropsType<typeof getStatic
<>
<PageSEO title={siteMetadata.title} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Latest
</h1>

6
pages/tags.tsx
View file

@ -1,4 +1,4 @@
import Link from '@/components/Link'
import Link from 'next/link'
import { PageSEO } from '@/components/SEO'
import Tag from '@/components/Tag'
import siteMetadata from '@/data/siteMetadata'
@ -18,7 +18,7 @@ export default function Tags({ tags }: InferGetStaticPropsType<typeof getStaticP
<>
<PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
<div className="space-x-2 pt-6 pb-8 md:space-y-5">
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
Tags
</h1>
@ -27,7 +27,7 @@ export default function Tags({ tags }: InferGetStaticPropsType<typeof getStaticP
{Object.keys(tags).length === 0 && 'No tags found.'}
{sortedTags.map((t) => {
return (
<div key={t} className="mt-2 mb-2 mr-5">
<div key={t} className="mb-2 mr-5 mt-2">
<Tag text={t} />
<Link
href={`/tags/${kebabCase(t)}`}

4
pages/tour-archive.tsx
View file

@ -1,9 +1,9 @@
import Link from '@/components/Link'
import Link from 'next/link'
export default function TourArchive() {
return (
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Tour archive
</h1>

4
pages/tour.tsx
View file

@ -1,7 +1,7 @@
import siteMetadata from '@/data/siteMetadata'
import tourData from '@/data/tourData'
import TourDate from '@/components/TourDate'
import Link from '@/components/Link'
import Link from 'next/link'
import { PageSEO } from '@/components/SEO'
export default function Tour() {
@ -9,7 +9,7 @@ export default function Tour() {
<>
<PageSEO title={`Tour - ${siteMetadata.author}`} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Tour
</h1>

7
tailwind.config.js
View file

@ -32,10 +32,7 @@ module.exports = {
sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
},
colors: {
primary: colors.blue,
//@ts-ignore
gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
blue: {
primary: {
DEFAULT: '#7AB5C4',
50: '#F9FCFC',
100: '#EBF4F6',
@ -48,6 +45,8 @@ module.exports = {
800: '#2E5C68',
900: '#1D3A41',
},
//@ts-ignore
gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
},
typography: (theme) => ({
DEFAULT: {

BIN
yarn.lock Normal file
View file

Binary file not shown.