yusufipek/teknolojirehberleri.xyz
1
0
Fork 0
mirror of https://github.com/yusufipk/teknolojirehberleri.xyz.git synced 2026-09-11 10:56:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

404 sayfası eklendi

Browse Source
This commit is contained in:
Yusuf İpek
2021-08-13 16:24:25 +03:00
parent 2f74cdf1f1
commit 87bb65e089
10 changed files with 144 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
commons/home.js
+11 -7
View File
@@ -1,12 +1,14 @@
import { useState } from "react";
import Searchbar from "../components/searchbar";
export default function Home({ posts }) {
import Link from "next/link";
export default function Home({ rehberler }) {
const [search, setSearch] = useState("");
const filteredPosts =
search.length === 0
? posts
: posts.filter((post) =>
post.title.toLowerCase().includes(search.toLowerCase())
? rehberler
: rehberler.filter((rehber) =>
rehber.fields.title.toLowerCase().includes(search.toLowerCase())
);
return (
@@ -15,9 +17,11 @@ export default function Home({ posts }) {
<h1>Rehberler</h1>
<div className="homepage_posts">
{filteredPosts.slice(0, 21).map((post) => (
<li key={post.id}>
<a href="https://searx.yusufipek.me">{post.title}</a>
{filteredPosts.slice(0, 21).map((rehber) => (
<li key={rehber.fields.title}>
<Link href={`/rehber/${rehber.fields.slug}`}>
{rehber.fields.title}
</Link>
</li>
))}
</div>
pages/404.js
+27
View File
@@ -0,0 +1,27 @@
import Link from "next/link";
import Head from "next/head";
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function NotFound() {
const router = useRouter();
useEffect(() => {
setTimeout(() => {
router.push("/");
}, 3000);
}, []);
return (
<div className="not-found">
<Head>
<title>404</title>
</Head>
<h1 className="heading-1">404</h1>
<h2 className="heading-2">Aradığınız sayfa bulunamadı!</h2>
<p>
Sizi <Link href="/">anasayfaya</Link> yönlendiriyorum.
</p>
</div>
);
}
pages/index.js
+14 -5
View File
@@ -1,7 +1,8 @@
import { createClient } from "contentful";
import Head from "next/head";
import Home from "../commons/home";
export default function App({ posts }) {
export default function App({ rehberler }) {
return (
<div>
<Head>
@@ -12,18 +13,26 @@ export default function App({ posts }) {
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Home posts={posts} />
<Home rehberler={rehberler} />
</div>
);
}
export async function getStaticProps() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await res.json();
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_KEY,
});
const res = await client.getEntries({
content_type: "rehber",
order: "-fields.date",
});
return {
props: {
posts,
rehberler: res.items,
},
revalidate: 10,
};
}
pages/rehber/[slug].js
+2 -16
View File
@@ -1,5 +1,4 @@
import Head from "next/head";
import Image from "next/image";
import { createClient } from "contentful";
import ReactMarkdown from "react-markdown";
@@ -8,13 +7,13 @@ export default function PostDetails({ posts }) {
return (
<div className="loading">
<Head>
<title> Loading... </title>
<title> Yükleniyor... </title>
</Head>
<h1 className="heading-1 u-center-text">Yükleniyor...</h1>
</div>
);
const { title, featuredImage, rehber, description } = posts.fields;
const { title, rehber, description } = posts.fields;
return (
<div className="markdown">
<Head>
@@ -22,20 +21,7 @@ export default function PostDetails({ posts }) {
<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>
);
styles/base/_typography.scss
-48
View File
@@ -42,51 +42,3 @@ 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;
}
}
styles/components/searchbar.scss
+2
View File
@@ -12,6 +12,8 @@
transition: all 0.2s;
color: var(--color-primary);
&:hover,
&:focus {
border: 1.5px solid var(--color-tertiary);
styles/globals.scss
+2
View File
@@ -14,5 +14,7 @@
@import "./pages/homepage.scss";
@import "./pages/hakkinda.scss";
@import "./pages/rehber.scss";
@import "./pages/404.scss";
@import url("https://fontlibrary.org//face/nunito-sans");
styles/pages/404.scss
+9
View File
@@ -0,0 +1,9 @@
.not-found {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: center;
animation: moveInBottom 1s;
}
styles/pages/homepage.scss
+2 -1
View File
@@ -14,11 +14,12 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 12rem);
width: 50%;
width: 55%;
min-height: 100vh;
li {
margin-top: 2rem;
margin-right: 2rem;
text-align: center;
}
}
styles/pages/rehber.scss
+75
View File
@@ -0,0 +1,75 @@
.loading {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.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: 3.6rem;
font-weight: bold;
}
h2 {
font-size: 3rem;
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;
}
img {
margin: auto;
display: block;
min-width: 60%;
max-width: 60%;
}
pre {
background-color: #333333;
padding: 1rem;
border-radius: 1rem;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
code {
color: var(--color-primary);
font-size: 1.5rem;
}
}
}