Skip to content

Commit 1fda6e4

Browse files
committed
style: fix formatting
1 parent 68f4d89 commit 1fda6e4

File tree

13 files changed

+235
-236
lines changed

13 files changed

+235
-236
lines changed

.prettierrc

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

src/components/Header.tsx

+32-32
Original file line numberDiff line numberDiff line change
@@ -3,37 +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');
6+
const pathname = useRouter().pathname;
7+
const { theme, setTheme } = useTheme();
8+
const changeTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');
99

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-
);
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+
);
3939
}

src/components/Layout.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import { ReactNode } from 'react';
22
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">
11-
<span className="mb-3">• wrongbyte © • 2022 •</span>
12-
</footer>
13-
</div>
14-
</>
15-
);
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">
10+
{children}
11+
</main>
12+
<footer className=" flex justify-center">
13+
<span className="mb-3">• wrongbyte © • 2022 •</span>
14+
</footer>
15+
</div>
16+
</>
17+
);
1618
}

src/components/MDXComponents.tsx

+18-18
Original file line numberDiff line numberDiff line change
@@ -2,33 +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>;
15+
if (!props.className) return <span className="code">{props.children}</span>;
1616

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-
);
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+
);
2626
};
2727

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

src/components/Preview.tsx

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

44
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-
);
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+
);
1717
}

src/lib/getPosts.ts

+16-15
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,25 @@ 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) =>
8+
fs.readFileSync(`${postDirectory}${filename}`).toString();
9+
let { data: metadata, content: body } = matter(readPost(file));
10+
let [day, month, year] = metadata.date.split('-');
11+
let postDate = new Date(Number(year), Number(month) - 1, Number(day));
12+
let postSlug = file.split('.mdx')[0];
1213

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

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

2728
export default postList;

src/pages/_app.tsx

+7-7
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

1616
export default MyApp;

src/pages/about.tsx

+37-35
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
11
import Head from 'next/head';
22

33
export default function About() {
4-
return (
5-
<>
6-
<Head>
7-
<title>about me</title>
8-
<meta name="description" content="about" />
9-
</Head>
4+
return (
5+
<>
6+
<Head>
7+
<title>about me</title>
8+
<meta name="description" content="about" />
9+
</Head>
1010

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-
);
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
23+
computer science in general.
24+
<br />I am primarily interested in backend and the several existing
25+
paradigms and languages available to make useful tools. My current
26+
technologies include languages such as{' '}
27+
<span className="active">Javascript, Typescript and Python</span>,
28+
along with libraries like <span className="active">React</span> and
29+
databases such as{' '}
30+
<span className="active">MySQL, PostgreSQL and MongoDB.</span>
31+
<br />
32+
You can reach me at [email protected]. Also, take a look on my{' '}
33+
<a href="https://github.com/wrongbyte" className="active inline">
34+
github
35+
</a>
36+
.
37+
</p>
38+
</div>
39+
</main>
40+
</>
41+
);
4042
}

0 commit comments

Comments
 (0)