Skip to content

Commit 68f4d89

Browse files
wrongbytewrongbyte
committed
style: prettier formatting
1 parent 620bbb1 commit 68f4d89

15 files changed

+300
-234
lines changed

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": true,
4+
"trailingComma": "all",
5+
"singleQuote": true,
6+
"arrowParens": "always",
7+
"endOfLine": "auto",
8+
"printWidth": 100
9+
}

‎package-lock.json

+22
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"dev": "next dev",
77
"build": "next build && next export",
88
"start": "next start",
9-
"lint": "next lint"
9+
"lint": "next lint",
10+
"format": "prettier --write 'src/**/*.{ts,tsx}'"
1011
},
1112
"dependencies": {
1213
"@mdx-js/loader": "^2.0.0",
@@ -31,6 +32,7 @@
3132
"eslint": "8.11.0",
3233
"eslint-config-next": "12.1.0",
3334
"gh-pages": "^4.0.0",
35+
"prettier": "^2.7.1",
3436
"typescript": "4.6.2"
3537
}
3638
}

‎src/components/Header.tsx

+34-26
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,37 @@ import { useTheme } from 'next-themes';
33
import Link from 'next/link';
44

55
export default function Header() {
6-
const pathname = useRouter().pathname;
7-
const { theme, setTheme } = useTheme();
8-
const changeTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');
9-
10-
return (
11-
<header>
12-
<Link href='/'><a className="text-6xl font-name font-semibold text-black-600 mt-10 flex justify-center">wrongbyte</a></Link>
13-
<div className='pages flex justify-center gap-5 mt-2 text-gray-500'>
14-
<Link href='/'>
15-
<a className={`${pathname === '/' && 'active'}`}>posts</a>
16-
</Link>
17-
<Link href='/about'>
18-
<a className={`${pathname === '/about' && 'active'}`}>about</a>
19-
</Link>
20-
{/* <Link href='/'> */}
21-
<a className={`${pathname === '/writeups' && 'active'}`}>writeups</a>
22-
{/* </Link> */}
23-
<Link href='https://github.com/wrongbyte'>
24-
<a className='inline'>github</a>
25-
</Link>
26-
<a onClick={changeTheme} className='inline cursor-pointer'>{theme === 'dark' ? 'light' : 'dark'} theme</a>
27-
</div>
28-
<div className="py-4"><div className="w-full border-t hr border-gray-300"></div></div>
29-
</header>
30-
)
31-
}
6+
const pathname = useRouter().pathname;
7+
const { theme, setTheme } = useTheme();
8+
const changeTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');
9+
10+
return (
11+
<header>
12+
<Link href="/">
13+
<a className="text-6xl font-name font-semibold text-black-600 mt-10 flex justify-center">
14+
wrongbyte
15+
</a>
16+
</Link>
17+
<div className="pages flex justify-center gap-5 mt-2 text-gray-500">
18+
<Link href="/">
19+
<a className={`${pathname === '/' && 'active'}`}>posts</a>
20+
</Link>
21+
<Link href="/about">
22+
<a className={`${pathname === '/about' && 'active'}`}>about</a>
23+
</Link>
24+
{/* <Link href='/'> */}
25+
<a className={`${pathname === '/writeups' && 'active'}`}>writeups</a>
26+
{/* </Link> */}
27+
<Link href="https://github.com/wrongbyte">
28+
<a className="inline">github</a>
29+
</Link>
30+
<a onClick={changeTheme} className="inline cursor-pointer">
31+
{theme === 'dark' ? 'light' : 'dark'} theme
32+
</a>
33+
</div>
34+
<div className="py-4">
35+
<div className="w-full border-t hr border-gray-300"></div>
36+
</div>
37+
</header>
38+
);
39+
}

‎src/components/Layout.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { ReactNode } from "react";
2-
import Header from "./Header";
1+
import { ReactNode } from 'react';
2+
import Header from './Header';
33

44
export default function Layout({ children }: { children: ReactNode }) {
5-
return (
6-
<>
7-
<div className="flex flex-col h-screen justify-between">
8-
<Header />
9-
<main className='xl:w-7/12 lg:w-4/5 w-11/12 mx-auto mt-3 mb-auto'>{children}</main>
10-
<footer className=" flex justify-center"><span className="mb-3">• wrongbyte © • 2022 •</span></footer>
11-
</div>
12-
</>
13-
)
14-
}
5+
return (
6+
<>
7+
<div className="flex flex-col h-screen justify-between">
8+
<Header />
9+
<main className="xl:w-7/12 lg:w-4/5 w-11/12 mx-auto mt-3 mb-auto">{children}</main>
10+
<footer className=" flex justify-center">
11+
<span className="mb-3">• wrongbyte © • 2022 •</span>
12+
</footer>
13+
</div>
14+
</>
15+
);
16+
}

‎src/components/MDXComponents.tsx

+21-17
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,33 @@ import { CodeBlock, rainbow, dracula } from 'react-code-blocks';
22
import { useTheme } from 'next-themes';
33

44
interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {
5-
className?: string
5+
className?: string;
66
}
77

88
interface aProps extends React.ComponentPropsWithoutRef<'a'> {
9-
href?: string
9+
href?: string;
1010
}
1111

1212
export const Code = (props: CodeProps) => {
13-
const { theme } = useTheme();
13+
const { theme } = useTheme();
1414

15-
if (!props.className) return <span className='code'>{props.children}</span>
16-
17-
return (
18-
<div className='codeBlock'>
19-
<CodeBlock
20-
text={props.children}
21-
language={props.className.split('-')[1]}
22-
theme={theme === 'light' ? rainbow : dracula}
23-
/>
24-
</div>
25-
)
26-
}
15+
if (!props.className) return <span className="code">{props.children}</span>;
16+
17+
return (
18+
<div className="codeBlock">
19+
<CodeBlock
20+
text={props.children}
21+
language={props.className.split('-')[1]}
22+
theme={theme === 'light' ? rainbow : dracula}
23+
/>
24+
</div>
25+
);
26+
};
2727

2828
export const A = (props: aProps) => {
29-
return <a className='article-link' href={props.href}>{props.children}</a>
30-
}
29+
return (
30+
<a className="article-link" href={props.href}>
31+
{props.children}
32+
</a>
33+
);
34+
};

‎src/components/Preview.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
import Link from "next/link";
2-
import { PostPreview } from "../types/PostPreview";
1+
import Link from 'next/link';
2+
import { PostPreview } from '../types/PostPreview';
33

4-
export default function Preview (props: PostPreview) {
5-
return (
6-
<div>
7-
<Link href={`/posts/${props.slug}`} passHref><h1 className="font-title text-3xl cursor-pointer">{props.title}</h1></Link>
8-
<p className="text-gray-500">{props.date}</p>
9-
<p className="">{props.description}</p>
10-
<div className="py-4"><div className="w-full border-t hr border-gray-300"></div></div>
11-
</div>
12-
)
13-
}
4+
export default function Preview(props: PostPreview) {
5+
return (
6+
<div>
7+
<Link href={`/posts/${props.slug}`} passHref>
8+
<h1 className="font-title text-3xl cursor-pointer">{props.title}</h1>
9+
</Link>
10+
<p className="text-gray-500">{props.date}</p>
11+
<p className="">{props.description}</p>
12+
<div className="py-4">
13+
<div className="w-full border-t hr border-gray-300"></div>
14+
</div>
15+
</div>
16+
);
17+
}

‎src/lib/getPosts.ts

+18-20
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,24 @@ import matter from 'gray-matter';
44
const postDirectory = './src/posts/';
55

66
export const parsePost = (file: string) => {
7-
const readPost = (filename: string) => fs.readFileSync(`${postDirectory}${filename}`).toString();
8-
let { data: metadata, content: body } = matter(readPost(file));
9-
let [day, month, year] = metadata.date.split('-');
10-
let postDate = new Date(Number(year), Number(month) - 1, Number(day));
11-
let postSlug = file.split('.mdx')[0]
7+
const readPost = (filename: string) => fs.readFileSync(`${postDirectory}${filename}`).toString();
8+
let { data: metadata, content: body } = matter(readPost(file));
9+
let [day, month, year] = metadata.date.split('-');
10+
let postDate = new Date(Number(year), Number(month) - 1, Number(day));
11+
let postSlug = file.split('.mdx')[0];
1212

13-
return {
14-
title: metadata.title,
15-
description: metadata.description,
16-
date: postDate,
17-
content: body,
18-
slug: postSlug
19-
}
20-
}
13+
return {
14+
title: metadata.title,
15+
description: metadata.description,
16+
date: postDate,
17+
content: body,
18+
slug: postSlug,
19+
};
20+
};
2121

22-
let postList = fs.readdirSync(postDirectory)
23-
.map(parsePost)
24-
.sort(
25-
(post1, post2) =>
26-
(post2.date).getTime() - (post1.date).getTime()
27-
);
22+
let postList = fs
23+
.readdirSync(postDirectory)
24+
.map(parsePost)
25+
.sort((post1, post2) => post2.date.getTime() - post1.date.getTime());
2826

29-
export default postList;
27+
export default postList;

‎src/pages/_app.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import type { AppProps } from 'next/app';
44
import { ThemeProvider } from 'next-themes';
55

66
function MyApp({ Component, pageProps }: AppProps) {
7-
return (
8-
<ThemeProvider>
9-
<Layout>
10-
<Component {...pageProps} />
11-
</Layout>
12-
</ThemeProvider>
13-
)
7+
return (
8+
<ThemeProvider>
9+
<Layout>
10+
<Component {...pageProps} />
11+
</Layout>
12+
</ThemeProvider>
13+
);
1414
}
1515

16-
export default MyApp
16+
export default MyApp;

‎src/pages/about.tsx

+39-27
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
1-
import Head from "next/head";
1+
import Head from 'next/head';
22

3-
export default function About () {
4-
return(
5-
<>
6-
<Head>
7-
<title>about me</title>
8-
<meta name="description" content="about" />
9-
</Head>
10-
11-
<main className="flex gap-5 md:gap-10 md:mt-10 mt-5 flex-col md:flex-row">
12-
<div className="self-center">
13-
<img alt='profile picture' className='md:w-full w-36 rounded-full' src='https://res.cloudinary.com/practicaldev/image/fetch/s--a_5NFCrp--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/800212/baa42db6-3089-4e0c-8bbb-3bab71f4b318.jpg'/>
14-
</div>
15-
<div>
16-
<h1 className="font-title text-3xl font-bold">Welcome</h1>
17-
<p className="description text-gray-500">
18-
Hello! I am a junior web developer looking for learning more about computer science in general.
19-
<br/>
20-
I am primarily interested in backend and the several existing paradigms and languages available to make useful tools. My current technologies include languages such as <span className="active">Javascript, Typescript and Python</span>, along with libraries like <span className="active">React</span> and databases such as <span className="active">MySQL, PostgreSQL and MongoDB.</span>
21-
<br/>
22-
You can reach me at [email protected]. Also, take a look on my <a href='https://github.com/wrongbyte' className='active inline'>github</a>.
23-
</p>
24-
</div>
25-
</main>
26-
</>
27-
)
28-
}
3+
export default function About() {
4+
return (
5+
<>
6+
<Head>
7+
<title>about me</title>
8+
<meta name="description" content="about" />
9+
</Head>
10+
11+
<main className="flex gap-5 md:gap-10 md:mt-10 mt-5 flex-col md:flex-row">
12+
<div className="self-center">
13+
<img
14+
alt="profile picture"
15+
className="md:w-full w-36 rounded-full"
16+
src="https://res.cloudinary.com/practicaldev/image/fetch/s--a_5NFCrp--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/800212/baa42db6-3089-4e0c-8bbb-3bab71f4b318.jpg"
17+
/>
18+
</div>
19+
<div>
20+
<h1 className="font-title text-3xl font-bold">Welcome</h1>
21+
<p className="description text-gray-500">
22+
Hello! I am a junior web developer looking for learning more about computer science in
23+
general.
24+
<br />I am primarily interested in backend and the several existing paradigms and
25+
languages available to make useful tools. My current technologies include languages such
26+
as <span className="active">Javascript, Typescript and Python</span>, along with
27+
libraries like <span className="active">React</span> and databases such as{' '}
28+
<span className="active">MySQL, PostgreSQL and MongoDB.</span>
29+
<br />
30+
You can reach me at [email protected]. Also, take a look on my{' '}
31+
<a href="https://github.com/wrongbyte" className="active inline">
32+
github
33+
</a>
34+
.
35+
</p>
36+
</div>
37+
</main>
38+
</>
39+
);
40+
}

0 commit comments

Comments
 (0)