mindhas403/blueskychan.dev
1
0
Fork 0
mirror of https://github.com/blueskychan-dev/blueskychan.dev.git synced 2025-07-08 07:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Small update

Browse source
This commit is contained in:
Phapoom Saksri 2024-07-22 15:25:20 +07:00
parent 0716405e8d
commit f7d1b79ec3
7 changed files with 39 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 270 KiB

32
src/pages/404.jsx
View file

@ -1,23 +1,19 @@
// Have center box like index.jsx but instead of showing profile, it will show 404 error message
// *copilot detected!!!!!!!
import Head from "next/head"
export default function Custom404() {
export default function notFoundPage() {
return (
<>
<Head>
<title>404 Not Found</title>
</Head>
<main className="flex min-h-screen items-center justify-center">
<div className="backdrop-blur-md bg-[#1b1327]/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis">
<h1 className="center text-lg font-bold text-red-500 center">
404 Not Found :(
</h1>
<p className="text-lg font-bold text-white">
The page you're looking for is not found, Sorry ;-;
</p>
</div>
</main>
</>
<>
<Head>
<title>404 Not Found ;-;</title>
</Head>
<main className="flex min-h-s creen items-center justify-center">
<div className="backdrop-blur-md bg-[#1b1327]/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis flex flex-col items-center justify-center">
<h1 className="text-lg font-bold text-red-500">404 Not Found :(</h1>
<p className="text-lg font-bold text-white">
The page you're looking for is not found, Sorry ;-;
</p>
</div>
</main>
</>
)
}

4
src/pages/_document.jsx
View file

@ -4,8 +4,10 @@ import Script from "next/script"
export default function Document() {
return (
<Html lang="en">
<meta property="og:image" content="/favicon.webp" />
<link rel="icon" href="/favicon.webp" sizes="any" />
<Head />
<body className="flex backdrop-blur-sm flex-col justify-center items-center h-screen p-2">
<body className="flex backdrop-blur-sm backdrop-brightness-75 flex-col justify-center items-center h-screen p-2">
<div className="">
<Main />
<NextScript />

16
src/pages/blog.jsx
View file

@ -1,6 +1,7 @@
import fs from "fs"
import matter from "gray-matter"
import Link from "next/link"
import Head from "next/head"
export async function getStaticProps() {
const files = fs.readdirSync("posts")
@ -24,17 +25,28 @@ export async function getStaticProps() {
export default function Blog({ posts }) {
return (
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 p-4">
<>
<Head>
<title>My Blog :3</title>
<meta name="theme-color" content="#FFC0CB" />
<meta property="og:title" content="Blog" key="title" />
<meta
property="og:description"
content="My blog :3"
/>
</Head>
<div className="md:grid-cols-3 lg:grid-cols-4 p-4">
{posts.map(({ slug, frontmatter }) => (
<div
key={slug}
className="border-2 border-gray-300/80 bg-gray-700/50 rounded-xl shadow-lg overflow-hidden flex flex-col m-2 backdrop-blur-md"
>
<Link href={`/post/${slug}`}>
<h1 className="p-4 text-1xl font-bold ">{frontmatter.title}</h1>
<h1 className="p-4 text-1xl font-bold">{frontmatter.title}</h1>
</Link>
</div>
))}
</div>
</>
)
}

1
src/pages/index.jsx
View file

@ -18,7 +18,6 @@ export default function Home() {
property="og:description"
content="About some stupid person call blueskychan, or Mind :3"
/>
<link rel="icon" href="/favicon.webp" sizes="any" />
</Head>
<main>

1
src/pages/post/[slug].jsx
View file

@ -42,6 +42,7 @@ export default function PostPage({ frontmatter, content }) {
return (
<>
<Head>
<title>{frontmatter.title}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content={frontmatter.title} />
<meta property="og:description" content={frontmatter.desc} />

6
src/styles/globals.css
View file

@ -16,3 +16,9 @@ body {
background-size: cover;
background-position: center center;
}
@media only screen and (orientation: portrait) {
body {
--background-image: url("/mobile.jpg");
}
}