mirror of https://github.com/garritfra/garrit.xyz
Garrit Franke
3 years ago
5 changed files with 61 additions and 236 deletions
@ -1,48 +1,47 @@
|
||||
import Layout from "../../components/Layout"; |
||||
import BlogList from "../../components/BlogList"; |
||||
import Page from "../../components/Page"; |
||||
import matter from "gray-matter"; |
||||
|
||||
const Index = (props) => { |
||||
return ( |
||||
<Layout pathname="/" siteTitle="Garrit's Notes" siteDescription=""> |
||||
<section> |
||||
<BlogList posts={props.posts} /> |
||||
</section> |
||||
</Layout> |
||||
); |
||||
return ( |
||||
<Page siteTitle="Garrit's Notes"> |
||||
<BlogList posts={props.posts} /> |
||||
</Page> |
||||
); |
||||
}; |
||||
|
||||
export async function getStaticProps() { |
||||
//get posts & context from folder
|
||||
const posts = ((context) => { |
||||
const keys = context.keys(); |
||||
const values = keys.map(context); |
||||
//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(".") |
||||
.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("../../content/posts", true, /\.md$/)); |
||||
const data = keys.map((key, index) => { |
||||
// Create slug from filename
|
||||
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("../../content/posts", true, /\.md$/)); |
||||
|
||||
return { |
||||
props: { |
||||
posts, |
||||
description: "", |
||||
}, |
||||
}; |
||||
return { |
||||
props: { |
||||
posts, |
||||
description: "", |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
export default Index; |
||||
|
@ -1,90 +1,16 @@
|
||||
a:hover { |
||||
opacity: 1; |
||||
} |
||||
a:hover li div.hero_image img { |
||||
opacity: 0.8; |
||||
transition: opacity 0.3s ease; |
||||
} |
||||
a:hover li .blog__info h2, |
||||
a:hover li .blog__info h3, |
||||
a:hover li .blog__info p { |
||||
transform: translateX(10px); |
||||
transition: transform 0.5s ease-out; |
||||
} |
||||
@media (prefers-reduced-motion) { |
||||
a:hover li .blog__info h2, |
||||
a:hover li .blog__info h3, |
||||
a:hover li .blog__info p { |
||||
transform: translateX(0px); |
||||
} |
||||
} |
||||
.hero_image { |
||||
width: 100%; |
||||
height: 33vh; |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
.hero_image img { |
||||
object-fit: cover; |
||||
object-position: 50% 50%; |
||||
opacity: 1; |
||||
transition: opacity 0.3s ease; |
||||
min-height: 100%; |
||||
} |
||||
.blog__info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding: 1.5rem 1.25rem; |
||||
transform: translateX(0px); |
||||
transition: transform 0.3s ease-in; |
||||
} |
||||
.blog__info h2, |
||||
.blog__info h3, |
||||
.blog__info p { |
||||
transform: translateX(0px); |
||||
transition: transform 0.5s ease-out; |
||||
} |
||||
li { |
||||
opacity: inherit; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 38vh; |
||||
margin-bottom: 0; |
||||
} |
||||
h2 { |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
h3 { |
||||
margin-bottom: 1rem; |
||||
} |
||||
p { |
||||
max-width: 900px; |
||||
} |
||||
@media (min-width: 768px) { |
||||
li { |
||||
min-height: 250px; |
||||
height: 33.333vh; |
||||
flex-direction: row; |
||||
} |
||||
.hero_image { |
||||
height: 100%; |
||||
} |
||||
.hero_image img { |
||||
min-width: 100%; |
||||
height: 100%; |
||||
width: auto; |
||||
min-height: 0; |
||||
} |
||||
.blog__info { |
||||
min-width: 70%; |
||||
} |
||||
} |
||||
@media (min-width: 1280px) { |
||||
.blog__info { |
||||
padding: 3rem; |
||||
.blog__list { |
||||
&__post { |
||||
margin-bottom: 3em; |
||||
&__date { |
||||
color: $color-text-dark; |
||||
font-weight: 300; |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
color: $color-text-light; |
||||
} |
||||
} |
||||
} |
||||
h3 { |
||||
margin-bottom: 1.2rem; |
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
@ -1,3 +1,4 @@
|
||||
@import "header"; |
||||
@import "page"; |
||||
@import "footer"; |
||||
@import "blog-list"; |
||||
|
Loading…
Reference in new issue