mirror of
https://github.com/yusufipk/teknolojirehberleri.xyz.git
synced 2026-09-11 10:56:08 +00:00
(oluşturuldu) blog görünümü oluşturuldu
This commit is contained in:
Yusuf İpek
+1
-1
@@ -13,7 +13,7 @@ export default function Home({ posts }) {
|
||||
<div className="homepage">
|
||||
<Searchbar search={search} setSearch={setSearch} />
|
||||
|
||||
<h1 className="heading-1">Rehberler</h1>
|
||||
<h1>Rehberler</h1>
|
||||
<div className="homepage_posts">
|
||||
{filteredPosts.slice(0, 21).map((post) => (
|
||||
<li key={post.id}>
|
||||
|
||||
+4
-2
@@ -1,3 +1,5 @@
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
images: {
|
||||
domains: ["images.ctfassets.net"],
|
||||
},
|
||||
};
|
||||
|
||||
Generated
+997
-2
File diff suppressed because it is too large
Load Diff
@@ -9,9 +9,11 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"contentful": "^8.4.2",
|
||||
"next": "11.0.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-markdown": "^6.0.3",
|
||||
"sass": "^1.36.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+2
-4
@@ -2,16 +2,14 @@ export default function Hakkinda() {
|
||||
return (
|
||||
<div className="about">
|
||||
<div>
|
||||
<h1 className="heading-1 u-center-text u-margin-bottom-small">
|
||||
Site Hakkında
|
||||
</h1>
|
||||
<h1 className="u-center-text u-margin-bottom-small">Site Hakkında</h1>
|
||||
<p>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber
|
||||
yazabilir.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="heading-2">Nasıl Rehber Yazarım?</h2>
|
||||
<h2>Nasıl Rehber Yazarım?</h2>
|
||||
<ul className="about_list">
|
||||
<li>
|
||||
<a href="#">Örnek rehberi</a> indirin ve kuralları okuyun.{" "}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -1,16 +1,17 @@
|
||||
.heading-1,
|
||||
.heading-2,
|
||||
.heading-3,
|
||||
.heading-4 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.heading-1 {
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading-2 {
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -41,3 +42,51 @@ a {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user