fixed whole skill issues

This commit is contained in:
bluestar_ 2023-12-23 13:21:32 +07:00
parent 68a78ff3ae
commit b627911311
19 changed files with 439 additions and 81 deletions

View file

@ -1,5 +1,4 @@
{
"tabWidth": 2,
"useTabs": false,
"semi": false
}

View file

@ -9,14 +9,17 @@
"format": "prettier . --write"
},
"dependencies": {
"@phosphor-icons/react": "^2.0.15",
"gray-matter": "^4.0.3",
"markdown-it": "^14.0.0",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"react-tooltip": "^5.25.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"autoprefixer": "^10.0.1",
"daisyui": "^4.4.23",
"postcss": "^8",
"prettier": "^3.1.1",
"tailwindcss": "^3.3.0"

282
pnpm-lock.yaml generated
View file

@ -5,6 +5,18 @@ settings:
excludeLinksFromLockfile: false
dependencies:
"@phosphor-icons/react":
specifier: ^2.0.15
version: 2.0.15(react-dom@18.2.0)(react@18.2.0)
fs:
specifier: 0.0.1-security
version: 0.0.1-security
gray-matter:
specifier: ^4.0.3
version: 4.0.3
markdown-it:
specifier: ^14.0.0
version: 14.0.0
next:
specifier: 14.0.4
version: 14.0.4(react-dom@18.2.0)(react@18.2.0)
@ -14,6 +26,9 @@ dependencies:
react-dom:
specifier: ^18
version: 18.2.0(react@18.2.0)
react-tooltip:
specifier: ^5.25.0
version: 5.25.0(react-dom@18.2.0)(react@18.2.0)
devDependencies:
"@tailwindcss/typography":
@ -22,9 +37,6 @@ devDependencies:
autoprefixer:
specifier: ^10.0.1
version: 10.4.16(postcss@8.4.32)
daisyui:
specifier: ^4.4.23
version: 4.4.23(postcss@8.4.32)
postcss:
specifier: ^8
version: 8.4.32
@ -44,6 +56,32 @@ packages:
engines: { node: ">=10" }
dev: true
/@floating-ui/core@1.5.2:
resolution:
{
integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==,
}
dependencies:
"@floating-ui/utils": 0.1.6
dev: false
/@floating-ui/dom@1.5.3:
resolution:
{
integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==,
}
dependencies:
"@floating-ui/core": 1.5.2
"@floating-ui/utils": 0.1.6
dev: false
/@floating-ui/utils@0.1.6:
resolution:
{
integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==,
}
dev: false
/@isaacs/cliui@8.0.2:
resolution:
{
@ -249,6 +287,20 @@ packages:
fastq: 1.16.0
dev: true
/@phosphor-icons/react@2.0.15(react-dom@18.2.0)(react@18.2.0):
resolution:
{
integrity: sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==,
}
engines: { node: ">=10" }
peerDependencies:
react: ">= 16.8"
react-dom: ">= 16.8"
dependencies:
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@pkgjs/parseargs@0.11.0:
resolution:
{
@ -342,6 +394,22 @@ packages:
}
dev: true
/argparse@1.0.10:
resolution:
{
integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==,
}
dependencies:
sprintf-js: 1.0.3
dev: false
/argparse@2.0.1:
resolution:
{
integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==,
}
dev: false
/autoprefixer@10.4.16(postcss@8.4.32):
resolution:
{
@ -451,6 +519,13 @@ packages:
fsevents: 2.3.3
dev: true
/classnames@2.3.2:
resolution:
{
integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==,
}
dev: false
/client-only@0.0.1:
resolution:
{
@ -495,16 +570,6 @@ packages:
which: 2.0.2
dev: true
/css-selector-tokenizer@0.8.0:
resolution:
{
integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==,
}
dependencies:
cssesc: 3.0.0
fastparse: 1.1.2
dev: true
/cssesc@3.0.0:
resolution:
{
@ -514,29 +579,6 @@ packages:
hasBin: true
dev: true
/culori@3.3.0:
resolution:
{
integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==,
}
engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
dev: true
/daisyui@4.4.23(postcss@8.4.32):
resolution:
{
integrity: sha512-IFQRGoGoAke8chxPcDqQJFldVVd51JL7b4mRA3LqsLexW/6xicZzz9X3GXdGdnYsu8QPxZN4uzQZ5fwRNYXOSg==,
}
engines: { node: ">=16.9.0" }
dependencies:
css-selector-tokenizer: 0.8.0
culori: 3.3.0
picocolors: 1.0.0
postcss-js: 4.0.1(postcss@8.4.32)
transitivePeerDependencies:
- postcss
dev: true
/didyoumean@1.2.2:
resolution:
{
@ -579,6 +621,14 @@ packages:
}
dev: true
/entities@4.5.0:
resolution:
{
integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==,
}
engines: { node: ">=0.12" }
dev: false
/escalade@3.1.1:
resolution:
{
@ -587,6 +637,25 @@ packages:
engines: { node: ">=6" }
dev: true
/esprima@4.0.1:
resolution:
{
integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==,
}
engines: { node: ">=4" }
hasBin: true
dev: false
/extend-shallow@2.0.1:
resolution:
{
integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==,
}
engines: { node: ">=0.10.0" }
dependencies:
is-extendable: 0.1.1
dev: false
/fast-glob@3.3.2:
resolution:
{
@ -601,13 +670,6 @@ packages:
micromatch: 4.0.5
dev: true
/fastparse@1.1.2:
resolution:
{
integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==,
}
dev: true
/fastq@1.16.0:
resolution:
{
@ -645,6 +707,13 @@ packages:
}
dev: true
/fs@0.0.1-security:
resolution:
{
integrity: sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==,
}
dev: false
/fsevents@2.3.3:
resolution:
{
@ -712,6 +781,19 @@ packages:
}
dev: false
/gray-matter@4.0.3:
resolution:
{
integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==,
}
engines: { node: ">=6.0" }
dependencies:
js-yaml: 3.14.1
kind-of: 6.0.3
section-matter: 1.0.0
strip-bom-string: 1.0.0
dev: false
/hasown@2.0.0:
resolution:
{
@ -741,6 +823,14 @@ packages:
hasown: 2.0.0
dev: true
/is-extendable@0.1.1:
resolution:
{
integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==,
}
engines: { node: ">=0.10.0" }
dev: false
/is-extglob@2.1.1:
resolution:
{
@ -809,6 +899,25 @@ packages:
}
dev: false
/js-yaml@3.14.1:
resolution:
{
integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==,
}
hasBin: true
dependencies:
argparse: 1.0.10
esprima: 4.0.1
dev: false
/kind-of@6.0.3:
resolution:
{
integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==,
}
engines: { node: ">=0.10.0" }
dev: false
/lilconfig@2.1.0:
resolution:
{
@ -832,6 +941,15 @@ packages:
}
dev: true
/linkify-it@5.0.0:
resolution:
{
integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==,
}
dependencies:
uc.micro: 2.0.0
dev: false
/lodash.castarray@4.4.0:
resolution:
{
@ -871,6 +989,28 @@ packages:
engines: { node: 14 || >=16.14 }
dev: true
/markdown-it@14.0.0:
resolution:
{
integrity: sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==,
}
hasBin: true
dependencies:
argparse: 2.0.1
entities: 4.5.0
linkify-it: 5.0.0
mdurl: 2.0.0
punycode.js: 2.3.1
uc.micro: 2.0.0
dev: false
/mdurl@2.0.0:
resolution:
{
integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==,
}
dev: false
/merge2@1.4.1:
resolution:
{
@ -1188,6 +1328,14 @@ packages:
hasBin: true
dev: true
/punycode.js@2.3.1:
resolution:
{
integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==,
}
engines: { node: ">=6" }
dev: false
/queue-microtask@1.2.3:
resolution:
{
@ -1208,6 +1356,21 @@ packages:
scheduler: 0.23.0
dev: false
/react-tooltip@5.25.0(react-dom@18.2.0)(react@18.2.0):
resolution:
{
integrity: sha512-/eGhmlwbHlJrVoUe75fb58rJfAy9aZnTvQAK9ZUPM0n9mmBGpEk13vDPiQVCeUuax+fBej+7JPsUXlhzaySc7w==,
}
peerDependencies:
react: ">=16.14.0"
react-dom: ">=16.14.0"
dependencies:
"@floating-ui/dom": 1.5.3
classnames: 2.3.2
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/react@18.2.0:
resolution:
{
@ -1275,6 +1438,17 @@ packages:
loose-envify: 1.4.0
dev: false
/section-matter@1.0.0:
resolution:
{
integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==,
}
engines: { node: ">=4" }
dependencies:
extend-shallow: 2.0.1
kind-of: 6.0.3
dev: false
/shebang-command@2.0.0:
resolution:
{
@ -1308,6 +1482,13 @@ packages:
}
engines: { node: ">=0.10.0" }
/sprintf-js@1.0.3:
resolution:
{
integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==,
}
dev: false
/streamsearch@1.1.0:
resolution:
{
@ -1360,6 +1541,14 @@ packages:
ansi-regex: 6.0.1
dev: true
/strip-bom-string@1.0.0:
resolution:
{
integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==,
}
engines: { node: ">=0.10.0" }
dev: false
/styled-jsx@5.1.1(react@18.2.0):
resolution:
{
@ -1482,6 +1671,13 @@ packages:
}
dev: false
/uc.micro@2.0.0:
resolution:
{
integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==,
}
dev: false
/update-browserslist-db@1.0.13(browserslist@4.22.2):
resolution:
{

10
posts/lorem.md Normal file
View file

@ -0,0 +1,10 @@
---
title: "lorem ipsum"
date: ""
tags:
- sit amet
---
### Lorem ipsum
Sit commodo voluptate do quis excepteur veniam aliquip ut dolore. Exercitation elit incididunt aute ipsum deserunt ullamco. Sit cupidatat elit cupidatat aute Lorem non in aute esse nostrud in labore ullamco magna. Minim Lorem mollit est est amet magna. Magna dolore dolore nisi nostrud dolore ut reprehenderit sint cupidatat officia. Commodo reprehenderit tempor est consequat magna pariatur pariatur officia mollit sint dolore elit commodo dolor.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/pfp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

Before

Width:  |  Height:  |  Size: 629 B

17
src/components/About.jsx Normal file
View file

@ -0,0 +1,17 @@
// About.js
const About = () => {
return (
<>
<span className="font-bold text-lg px-4">About</span>
<div className="p-2">
<div className="border-t md:border-t-2"></div>
</div>
<div className="p-4 text-balance max-w-md">
Time changes world changes everything changes I mean should I accept the
world?
</div>
</>
)
}
export default About

14
src/components/Avatar.jsx Normal file
View file

@ -0,0 +1,14 @@
import Image from "next/image"
import { Tooltip } from "react-tooltip"
const Avatar = () => {
return (
<>
<div className="rounded-2xl overflow-hidden w-24" id="status">
<Image src="/pfp.png" width={128} height={128} alt="Profile picture" />
</div>
<Tooltip anchorSelect="#status" content="Nothing is impossible now!" />
</>
)
}
export default Avatar

View file

@ -0,0 +1,15 @@
import Link from "next/link"
const ProfileLink = ({ href, LinkIcon }) => {
return (
<Link
href={href}
aria-label={href}
className={`bg-base-200 mx-3 rounded-lg p-1.5 transition-transform duration-200 ease-in-out hover:scale-110`}
>
{LinkIcon}
</Link>
)
}
export default ProfileLink

View file

@ -0,0 +1,13 @@
const Profile = () => {
return (
<div className="text-gray-300 text-lg">
<p className="space-x-1">
<span className="text-gray-100 text-lg font-bold">bluestar</span>
<span className="font-extralight">she/her</span>
</p>
<div className="text-sm font-bold">Acer Pricker</div>
</div>
)
}
export default Profile

View file

@ -0,0 +1,28 @@
import LinkIcon from "./LinkIcon"
import { DiscordLogo, GithubLogo, InstagramLogo } from "@phosphor-icons/react"
const SocialLinks = () => {
const profileLinks = [
{
href: "https://discord.com/users/829156179803504670",
LinkIcon: <DiscordLogo size={28} color="#F3F4F6" weight="bold" />,
},
{
href: "https://www.instagram.com/bluestar.pics",
LinkIcon: <InstagramLogo size={28} color="#F3F4F6" weight="bold" />,
},
{
href: "https://github.com/bluestarowo",
LinkIcon: <GithubLogo size={28} color="#F3F4F6" weight="bold" />,
},
]
return (
<div className="flex">
{profileLinks.map((link, index) => (
<LinkIcon key={index} href={link.href} LinkIcon={link.LinkIcon} />
))}
</div>
)
}
export default SocialLinks

40
src/pages/blog.jsx Normal file
View file

@ -0,0 +1,40 @@
import fs from "fs"
import matter from "gray-matter"
import Link from "next/link"
export async function getStaticProps() {
const files = fs.readdirSync("posts")
const posts = files.map((fileName) => {
const slug = fileName.replace(".md", "")
const readFile = fs.readFileSync(`posts/${fileName}`, "utf-8")
const { data: frontmatter } = matter(readFile)
return {
slug,
frontmatter,
}
})
return {
props: {
posts,
},
}
}
export default function Blog({ posts }) {
return (
<div className="grid grid-cols-1 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>
</Link>
</div>
))}
</div>
)
}

View file

@ -1,5 +1,8 @@
import Image from "next/image"
import { Inter } from "next/font/google"
import About from "~/components/About"
import Avatar from "~/components/Avatar"
import Profile from "~/components/Profile"
import SocialLinks from "~/components/SocialLinks"
const inter = Inter({ subsets: ["latin"] })
@ -8,33 +11,14 @@ export default function Home() {
<main
className={`flex min-h-screen items-center justify-center ${inter.className}`}
>
<div>
<div className="">
<div className="flex flex-row space-x-3 p-4 items-center">
<div className="avatar">
<div className="rounded-2xl w-24 border-zinc-700">
<img src="https://cdn.discordapp.com/avatars/829156179803504670/e7b883373d4ca9e7c288d47aca47cad6.png?size=1024" />
</div>
</div>
<div className=" text-gray-300 text-lg">
<p className="space-x-1">
<span className="text-gray-100">bluestar</span>
<span className="font-extralight">she/her</span>
</p>
</div>
<div className="backdrop-blur-md bg-gray-700/50 rounded-lg">
<div className="flex flex-row space-x-3 p-4 items-center ">
<Avatar />
<Profile />
</div>
<div>
<span className="font-bold text-lg px-4">About</span>
<div className="w-full border-b border-[#3f3f46]"></div>
<div className="p-4 text-balance max-w-md">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
optio vitae id, aut accusamus magni deleniti delectus saepe quis
quidem quae possimus harum voluptas repellat recusandae
blanditiis, sint ipsa ducimus!
</div>
</div>
<SocialLinks />
<About />
</div>
</div>
</main>

37
src/pages/post/[slug].jsx Normal file
View file

@ -0,0 +1,37 @@
import fs from "fs"
import matter from "gray-matter"
import md from "markdown-it"
export async function getStaticPaths() {
const files = fs.readdirSync("posts")
const paths = files.map((fileName) => ({
params: {
slug: fileName.replace(".md", ""),
},
}))
return {
paths,
fallback: false,
}
}
export async function getStaticProps({ params: { slug } }) {
const fileName = fs.readFileSync(`posts/${slug}.md`, "utf-8")
const { data: frontmatter, content } = matter(fileName)
return {
props: {
frontmatter,
content,
},
}
}
export default function PostPage({ frontmatter, content }) {
const proseClass = "prose p-4 prose-invert prose-neutral mx-auto bg-gray-700/50 backdrop-blue-md backdrop-blur-md h-screen"
return (
<div className={proseClass}>
<h1 className="border-b-2 p-1">{frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
</div>
)
}

View file

@ -3,5 +3,12 @@
@tailwind utilities;
:root {
background-color: rgb(32, 32, 32);
--background-image: url("/illust_111261733_20231222_212212.jpg");
background-image: var(--background-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: rgb(255, 255, 255);
height: 100%;
}

View file

@ -8,8 +8,5 @@ module.exports = {
theme: {
extend: {},
},
plugins: [require("@tailwindcss/typography"), require("daisyui")],
daisyui: {
themes: ["black"],
},
plugins: [require("@tailwindcss/typography")],
}