(oluşturuldu) blog görünümü oluşturuldu

This commit is contained in:
Yusuf İpek
2021-08-12 15:25:04 +03:00
parent 384d5bc799
commit 2f74cdf1f1
7 changed files with 1139 additions and 15 deletions
+1 -1
View File
@@ -13,7 +13,7 @@ export default function Home({ posts }) {
<div className="homepage"> <div className="homepage">
<Searchbar search={search} setSearch={setSearch} /> <Searchbar search={search} setSearch={setSearch} />
<h1 className="heading-1">Rehberler</h1> <h1>Rehberler</h1>
<div className="homepage_posts"> <div className="homepage_posts">
{filteredPosts.slice(0, 21).map((post) => ( {filteredPosts.slice(0, 21).map((post) => (
<li key={post.id}> <li key={post.id}>
+4 -2
View File
@@ -1,3 +1,5 @@
module.exports = { module.exports = {
reactStrictMode: true, images: {
} domains: ["images.ctfassets.net"],
},
};
+997 -2
View File
File diff suppressed because it is too large Load Diff
+2
View File
@@ -9,9 +9,11 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"contentful": "^8.4.2",
"next": "11.0.1", "next": "11.0.1",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-markdown": "^6.0.3",
"sass": "^1.36.0" "sass": "^1.36.0"
}, },
"devDependencies": { "devDependencies": {
+2 -4
View File
@@ -2,16 +2,14 @@ export default function Hakkinda() {
return ( return (
<div className="about"> <div className="about">
<div> <div>
<h1 className="heading-1 u-center-text u-margin-bottom-small"> <h1 className="u-center-text u-margin-bottom-small">Site Hakkında</h1>
Site Hakkında
</h1>
<p> <p>
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber
yazabilir. yazabilir.
</p> </p>
</div> </div>
<div> <div>
<h2 className="heading-2">Nasıl Rehber Yazarım?</h2> <h2>Nasıl Rehber Yazarım?</h2>
<ul className="about_list"> <ul className="about_list">
<li> <li>
<a href="#">Örnek rehberi</a> indirin ve kuralları okuyun.{" "} <a href="#">Örnek rehberi</a> indirin ve kuralları okuyun.{" "}
+78
View File
@@ -0,0 +1,78 @@
import Head from "next/head";
import Image from "next/image";
import { createClient } from "contentful";
import ReactMarkdown from "react-markdown";
export default function PostDetails({ posts }) {
if (!posts)
return (
<div className="loading">
<Head>
<title> Loading... </title>
</Head>
<h1 className="heading-1 u-center-text">Yükleniyor...</h1>
</div>
);
const { title, featuredImage, rehber, description } = posts.fields;
return (
<div className="markdown">
<Head>
<title>{title} - Teknoloji Rehberleri</title>
<meta name="description" content={description} />
<meta property="og:title" content={`${title} - Teknoloji Rehberleri`} />
<meta property="og:description" content={description} />
<meta
property="og:image"
content={`https:${featuredImage.fields.file.url}`}
/>
</Head>
<Image
src={`https:${featuredImage.fields.file.url}`}
alt={featuredImage.fields.file.fileName}
width={featuredImage.fields.file.details.image.width}
height={featuredImage.fields.file.details.image.height}
className="markdown_featuredImage"
/>
<ReactMarkdown>{rehber}</ReactMarkdown>
</div>
);
}
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_KEY,
});
export const getStaticPaths = async () => {
const res = await client.getEntries({ content_type: "rehber" });
const paths = res.items.map((item) => {
return {
params: { slug: item.fields.slug },
};
});
return {
paths,
fallback: true,
};
};
export async function getStaticProps({ params }) {
const { items } = await client.getEntries({
content_type: "rehber",
"fields.slug": params.slug,
});
if (!items.length) {
return { redirect: { destination: "/404", permanent: false } };
}
return {
props: { posts: items[0] },
revalidate: 10,
};
}
+55 -6
View File
@@ -1,16 +1,17 @@
.heading-1, h1,
.heading-2, h2,
.heading-3, h3,
.heading-4 { h4 {
color: var(--color-primary); color: var(--color-primary);
} }
.heading-1 { h1 {
font-weight: 500; font-weight: 500;
font-size: 3rem; font-size: 3rem;
text-align: center;
} }
.heading-2 { h2 {
font-size: 2.4rem; font-size: 2.4rem;
font-weight: normal; font-weight: normal;
} }
@@ -41,3 +42,51 @@ a {
color: var(--color-primary); color: var(--color-primary);
} }
} }
.markdown {
display: grid;
grid-template-columns: 60%;
justify-content: center;
justify-items: center;
min-height: 100vh;
padding: 1.5rem;
&_featuredImage {
margin-bottom: 1.5rem !important;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 4rem;
font-weight: bold;
}
h2 {
font-size: 3.2rem;
font-weight: bold;
}
h3 {
font-size: 2.7rem;
font-weight: bold;
}
h4 {
font-size: 2.2rem;
font-weight: bold;
}
p {
margin-bottom: 1.5rem;
}
li {
margin-bottom: 1rem;
}
}