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:
+1
-1
@@ -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
@@ -1,3 +1,5 @@
|
|||||||
module.exports = {
|
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"
|
"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
@@ -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.{" "}
|
||||||
|
|||||||
@@ -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,
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user