diff --git a/commons/home.js b/commons/home.js index cb4b29f..c438e6b 100644 --- a/commons/home.js +++ b/commons/home.js @@ -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 }) {

Rehberler

- {filteredPosts.slice(0, 21).map((post) => ( -
  • - {post.title} + {filteredPosts.slice(0, 21).map((rehber) => ( +
  • + + {rehber.fields.title} +
    • ))}
    diff --git a/pages/404.js b/pages/404.js new file mode 100644 index 0000000..302fc42 --- /dev/null +++ b/pages/404.js @@ -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 ( +
    + + 404 + +

    404

    +

    Aradığınız sayfa bulunamadı!

    +

    + Sizi anasayfaya yönlendiriyorum. +

    +
    + ); +} diff --git a/pages/index.js b/pages/index.js index e1bcd4d..0952345 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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 (
    @@ -12,18 +13,26 @@ export default function App({ posts }) { /> - +
    ); } 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, }; } diff --git a/pages/rehber/[slug].js b/pages/rehber/[slug].js index d8d99a2..d075658 100644 --- a/pages/rehber/[slug].js +++ b/pages/rehber/[slug].js @@ -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 (
    - Loading... + Yükleniyor...

    Yükleniyor...

    ); - const { title, featuredImage, rehber, description } = posts.fields; + const { title, rehber, description } = posts.fields; return (
    @@ -22,20 +21,7 @@ export default function PostDetails({ posts }) { - - - {featuredImage.fields.file.fileName} - {rehber}
    ); diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss index b08d7e1..37eb2ec 100644 --- a/styles/base/_typography.scss +++ b/styles/base/_typography.scss @@ -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; - } -} diff --git a/styles/components/searchbar.scss b/styles/components/searchbar.scss index 5a88658..83149dd 100644 --- a/styles/components/searchbar.scss +++ b/styles/components/searchbar.scss @@ -12,6 +12,8 @@ transition: all 0.2s; + color: var(--color-primary); + &:hover, &:focus { border: 1.5px solid var(--color-tertiary); diff --git a/styles/globals.scss b/styles/globals.scss index 607ce69..375043c 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -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"); diff --git a/styles/pages/404.scss b/styles/pages/404.scss new file mode 100644 index 0000000..d950ab4 --- /dev/null +++ b/styles/pages/404.scss @@ -0,0 +1,9 @@ +.not-found { + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + justify-content: center; + + animation: moveInBottom 1s; +} diff --git a/styles/pages/homepage.scss b/styles/pages/homepage.scss index 550da63..4bf524d 100644 --- a/styles/pages/homepage.scss +++ b/styles/pages/homepage.scss @@ -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; } } diff --git a/styles/pages/rehber.scss b/styles/pages/rehber.scss new file mode 100644 index 0000000..7b9df77 --- /dev/null +++ b/styles/pages/rehber.scss @@ -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; + } + } +}