ewinderickx/Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from Tonel/main

Browse Source 
Next.js 13 Update
This commit is contained in:
Scott Gallant
2023-01-11 10:23:31 -04:00
committed by GitHub
parent 4e97734a1a 0517c67193
commit 55aff47104
16 changed files with 3040 additions and 5023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -32,3 +32,6 @@ yarn-error.log*
# vercel
.vercel
# IntelliJ IDEA
.idea

75
components/BlogList.js
View File

@@ -1,45 +1,44 @@
import Link from 'next/link'
import ReactMarkdown from 'react-markdown'
import Link from "next/link"
import ReactMarkdown from "react-markdown"
import styles from "../styles/BlogList.module.css"
import Image from "next/image"
function truncateSummary(content) {
return content.slice(0, 200).trimEnd()
}
function reformatDate(fullDate) {
const date = new Date(fullDate)
return date.toDateString().slice(4)
}
const BlogList = ({ allBlogs }) => {
function truncateSummary(content) {
return content.slice(0, 200).trimEnd()
}
function reformatDate(fullDate) {
const date = new Date(fullDate)
return date.toDateString().slice(4)
}
return (
<>
<ul className={styles.list}>
{allBlogs.length > 1 &&
allBlogs.map(post => (
<Link key={post.slug} href={{ pathname: `/blog/${post.slug}` }}>
<a className={styles.blog__link}>
<li>
<div className={styles.hero_image}>
<img
src={post.frontmatter.hero_image}
alt={post.frontmatter.hero_image}
/>
</div>
<div className={styles.blog__info}>
<h2>{post.frontmatter.title}</h2>
<h3> {reformatDate(post.frontmatter.date)}</h3>
<p>
<ReactMarkdown
children={truncateSummary(post.markdownBody)}
/>
</p>
</div>
</li>
</a>
<ul>
{
allBlogs && allBlogs.length > 1 &&
allBlogs.map(post => (
<li key={post.slug}>
<Link href={{ pathname: `/blog/${post.slug}` }} className={styles.blog__link}>
<div className={styles.hero_image}>
<Image
width={384}
height={288}
src={post.frontmatter.hero_image}
alt={post.frontmatter.hero_image}
/>
</div>
<div className={styles.blog__info}>
<h2>{post.frontmatter.title}</h2>
<h3>{reformatDate(post.frontmatter.date)}</h3>
<ReactMarkdown disallowedElements={["a"]}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
</div>
</Link>
))}
</ul>
</>
</li>
))
}
</ul>
)
}
export default BlogList

46
components/Header.js
View File

@@ -1,28 +1,26 @@
import Link from "next/link";
import styles from '../styles/Header.module.css'
import Link from "next/link"
import styles from "../styles/Header.module.css"
export default function Header(props) {
return (
<header className={styles.header}>
<nav
className={styles.nav}
role="navigation"
aria-label="main navigation"
>
<Link href="/" passHref>
<h1>{props.siteTitle}</h1>
</Link>
<div>
<Link href={`${typeof window !== "undefined" &&
window.location.pathname == "/info" ?
"/" : "/info"}`} passHref>
<h1>{`${typeof window !== "undefined" &&
window.location.pathname == "/info" ?
"close" : "info"}`}</h1>
</Link>
</div>
</nav>
</header>
);
const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/info"
return (
<header className={styles.header}>
<nav
className={styles.nav}
role="navigation"
aria-label="main navigation"
>
<Link href="/">
<h1>{props.siteTitle}</h1>
</Link>
<div>
<Link href={isInfoPage ? "/" : "/info"}>
<h1>{isInfoPage ? "close" : "info"}</h1>
</Link>
</div>
</nav>
</header>
)
}

37
components/Layout.js
View File

@@ -1,23 +1,22 @@
import Header from "./Header";
import Meta from './Meta'
import styles from '../styles/Layout.module.css'
import Header from "./Header"
import Meta from "./Meta"
import styles from "../styles/Layout.module.css"
export default function Layout(props) {
const pathname = props.pathname
return (
<section
className={styles.layout}
style={{
backgroundColor: `${props.bgColor && props.bgColor}`,
color: `${props.pathname == "info" && 'white'}`
}}
>
<Meta
siteTitle={props.siteTitle}
siteDescription={props.siteDescription}
/>
<Header siteTitle={props.siteTitle} />
<div className={styles.content}>{props.children}</div>
</section>
);
<section
className={styles.layout}
style={{
backgroundColor: `${props.bgColor && props.bgColor}`,
color: props.pathname === "info" ? "white" : undefined
}}
>
<Meta
siteTitle={props.siteTitle}
siteDescription={props.siteDescription}
/>
<Header siteTitle={props.siteTitle} />
<div className={styles.content}>{props.children}</div>
</section>
)
}

16
components/Meta.js
View File

@@ -1,14 +1,12 @@
import Head from 'next/head'
import Head from "next/head"
export default function Meta(props) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<title>{props.siteTitle}</title>
<meta name="Description" content={props.description}></meta>
</Head>
</>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<title>{props.siteTitle}</title>
<meta name="Description" content={props.description}></meta>
</Head>
)
}

6
data/config.json
View File

@@ -1,5 +1,5 @@
{
"title":"Brevifolia",
"description":"Starter blog using Tina CMS with Next.js.",
"repositoryUrl":"https://github.com/kendallstrautman/brevifolia-next-tinacms"
"title": "Brevifolia",
"description": "Starter blog using Tina CMS with Next.js.",
"repositoryUrl": "https://github.com/kendallstrautman/brevifolia-next-tinacms"
}

5389
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@@ -8,16 +8,17 @@
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.0.4",
"gray-matter": "^4.0.3",
"next": "12.0.10",
"node-glob": "^1.2.0",
"next": "13.0.4",
"glob": "^8.0.3",
"raw-loader": "^4.0.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^8.0.0"
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.3"
},
"devDependencies": {
"eslint": "8.8.0",
"eslint-config-next": "12.0.10"
"eslint": "8.27.0",
"eslint-config-next": "13.0.4"
}
}

15
pages/_app.js
View File

@@ -1,7 +1,18 @@
import '../styles/globals.css'
import "../styles/globals.css"
import { Work_Sans } from "@next/font/google"
// importing the Work Sans font with
// the Next.js 13 Font Optimization Feature
const workSans = Work_Sans({
weight: ["400", "700"],
style: ["normal", "italic"],
subsets: ["latin"],
})
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
return <main className={workSans.className}>
<Component {...pageProps} />
</main>
}
export default MyApp

2
pages/api/hello.js
View File

@@ -1,5 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
res.status(200).json({ name: "John Doe" })
}

54
pages/blog/[slug].js
View File

@@ -1,26 +1,16 @@
import Image from "next/image"
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import matter from "gray-matter"
import ReactMarkdown from "react-markdown"
import glob from "glob"
import Layout from "../../components/Layout"
import styles from "../../styles/Blog.module.css"
const glob = require('glob')
import Layout from '../../components/Layout'
function reformatDate(fullDate) {
const date = new Date(fullDate)
return date.toDateString().slice(4)
}
export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
function reformatDate(fullDate) {
const date = new Date(fullDate)
return date.toDateString().slice(4)
}
/*
** Odd fix to get build to run
** It seems like on first go the props
** are undefined — could be a Next bug?
*/
if (!frontmatter) return <></>
return (
<Layout siteTitle={siteTitle}>
<article className={styles.blog}>
@@ -37,7 +27,7 @@ export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
<h3>{reformatDate(frontmatter.date)}</h3>
</div>
<div className={styles.blog__body}>
<ReactMarkdown children={markdownBody} />
<ReactMarkdown>{markdownBody}</ReactMarkdown>
</div>
<h2 className={styles.blog__footer}>Written By: {frontmatter.author}</h2>
</article>
@@ -45,10 +35,15 @@ export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
)
}
export async function getStaticProps({ ...ctx }) {
const { slug } = ctx.params
const content = await import(`../../posts/${slug}.md`)
export async function getStaticProps(context) {
// extracting the slug from the context
const { slug } = context.params
const config = await import(`../../data/config.json`)
// retrieving the Markdown file associated to the slug
// and reading its data
const content = await import(`../../posts/${slug}.md`)
const data = matter(content.default)
return {
@@ -61,20 +56,21 @@ export async function getStaticProps({ ...ctx }) {
}
export async function getStaticPaths() {
//get all .md files in the posts dir
const blogs = glob.sync('posts/**/*.md')
// getting all .md files from the posts directory
const blogs = glob.sync("posts/**/*.md")
//remove path and extension to leave filename only
// converting the file names to their slugs
const blogSlugs = blogs.map(file =>
file
.split('/')[1]
.replace(/ /g, '-')
.split("/")[1]
.replace(/ /g, "-")
.slice(0, -3)
.trim()
)
// create paths with `slug` param
const paths = blogSlugs.map(slug => `/blog/${slug}`)
// creating a path for each of the `slug` parameter
const paths = blogSlugs.map(slug => { return { params: { slug: slug} } })
return {
paths,
fallback: false,

76
pages/index.js
View File

@@ -1,48 +1,58 @@
import matter from 'gray-matter'
import Layout from '../components/Layout'
import BlogList from '../components/BlogList'
import matter from "gray-matter"
import Layout from "../components/Layout"
import BlogList from "../components/BlogList"
const Index = props => {
return (
<Layout
pathname="/"
siteTitle={props.title}
siteDescription={props.description}
>
<section>
<BlogList allBlogs={props.allBlogs} />
</section>
</Layout>
<Layout
pathname="/"
siteTitle={props.title}
siteDescription={props.description}
>
<section>
<BlogList allBlogs={props.allBlogs} />
</section>
</Layout>
)
}
export default Index
export async function getStaticProps() {
// getting the website config
const siteConfig = await import(`../data/config.json`)
//get posts & context from folder
const posts = (context => {
const keys = context.keys()
const values = keys.map(context)
const data = keys.map((key, index) => {
// Create slug from filename
const slug = key
.replace(/^.*[\\\/]/, '')
.split('.')
const webpackContext = require.context("../posts", true, /\.md$/)
// the list of file names contained
// inside the "posts" directory
const keys = webpackContext.keys()
const values = keys.map(webpackContext)
// getting the post data from the files contained
// in the "posts" folder
const posts = keys.map((key, index) => {
// dynamically creating the post slug
// from file name
const slug = key
.replace(/^.*[\\\/]/, "")
.split(".")
.slice(0, -1)
.join('.')
const value = values[index]
// Parse yaml metadata & markdownbody in document
const document = matter(value.default)
return {
frontmatter: document.data,
markdownBody: document.content,
slug,
}
})
return data
})(require.context('../posts', true, /\.md$/))
.join(".")
// getting the .md file value associated
// with the current file name
const value = values[index]
// parsing the YAML metadata and markdown body
// contained in the .md file
const document = matter(value.default)
return {
frontmatter: document.data,
markdownBody: document.content,
slug,
}
})
return {
props: {

10
pages/info.js
View File

@@ -1,10 +1,9 @@
import Layout from '../components/Layout'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import Layout from "../components/Layout"
import matter from "gray-matter"
import ReactMarkdown from "react-markdown"
import styles from "../styles/Info.module.css"
export default function Info({ frontmatter, markdownBody, title }) {
console.log(markdownBody)
return (
<Layout
pathname="info"
@@ -12,7 +11,7 @@ export default function Info({ frontmatter, markdownBody, title }) {
siteTitle={title}
>
<section className={styles.info_blurb}>
<ReactMarkdown children={markdownBody} />
<ReactMarkdown>{markdownBody}</ReactMarkdown>
</section>
</Layout>
)
@@ -21,6 +20,7 @@ export default function Info({ frontmatter, markdownBody, title }) {
export async function getStaticProps() {
const content = await import(`../data/info.md`)
const config = await import(`../data/config.json`)
const data = matter(content.default)
return {

18
styles/BlogList.module.css
View File

@@ -1,16 +1,16 @@
.blog__link {
opacity: 0.7;
opacity: 0.7;
}
.blog__link:hover {
opacity: 1;
}
.blog__link:hover li div.hero_image img {
li .blog__link:hover div.hero_image img {
opacity: 0.8;
transition: opacity 0.3s ease;
}
.blog__link:hover li .blog__info h2,
.blog__link:hover li .blog__info h3,
.blog__link:hover li .blog__info p {
li .blog__link:hover .blog__info h2,
li .blog__link:hover .blog__info h3,
li .blog__link:hover .blog__info p {
transform: translateX(10px);
transition: transform 0.5s ease-out;
}
@@ -22,10 +22,10 @@
}
.hero_image img {
object-fit: cover;
object-position: 50% 50%;
opacity: 1;
transition: opacity 0.3s ease;
min-height: 100%;
width: 100%;
transition: opacity 0.3s ease;
}
.blog__info {
display: flex;
@@ -42,7 +42,7 @@
transform: translateX(0px);
transition: transform 0.5s ease-out;
}
.blog__link li {
li .blog__link {
opacity: inherit;
display: flex;
justify-content: center;
@@ -60,7 +60,7 @@
max-width: 900px;
}
@media (min-width: 768px) {
.blog__link li {
li .blog__link {
min-height: 250px;
height: 33.333vh;
flex-direction: row;

4
styles/globals.css
View File

@@ -1,5 +1,3 @@
@import url("https://fonts.googleapis.com/css?family=Work+Sans&display=swap");
* {
box-sizing: inherit;
}
@@ -9,7 +7,6 @@ overflow-y: scroll;
}
body {
margin: 0;
font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
overflow-x: hidden;
color: #000;
font-size: 16px;
@@ -136,7 +133,6 @@ h4,
h5,
h6,
p {
font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
margin-left: 0;
margin-right: 0;
margin-top: 0;

2297
yarn.lock
View File

File diff suppressed because it is too large Load Diff