Skip to content

Commit 3ceacdd

Browse files
manuarora700manuarora700
committed
➕ ADD: Basic layout, Home design
1 parent 86b272f commit 3ceacdd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+10490
-70
lines changed

‎components/BlogPost.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Link from "next/link";
2+
// import useSWR from 'swr';
3+
import format from "comma-number";
4+
5+
// import fetcher from '@/lib/fetcher';
6+
7+
const BlogPost = ({ title, summary, slug }) => {
8+
// const { data } = useSWR(`/api/views/${slug}`, fetcher);
9+
const views = 23212;
10+
11+
return (
12+
<Link href={`/blog/${slug}`}>
13+
<a className="w-full">
14+
<div className="mb-8 w-full">
15+
<div className="flex flex-col md:flex-row justify-between">
16+
<h4 className="text-lg blog-heading md:text-xl mb-2 w-full text-gray-900 dark:text-gray-100">
17+
{title}
18+
</h4>
19+
<p className="text-gray-500 text-left md:text-right w-32 mb-4 md:mb-0">
20+
{`${views ? format(views) : "–––"} views`}
21+
</p>
22+
</div>
23+
<p className="text-gray-600 dark:text-gray-400">{summary}</p>
24+
</div>
25+
</a>
26+
</Link>
27+
);
28+
};
29+
30+
export default BlogPost;

‎components/Container.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Head from "next/head";
2+
import { useRouter } from "next/router";
3+
import { useState, useEffect } from "react";
4+
import NextLink from "next/link";
5+
6+
import Footer from "@/components/Footer";
7+
8+
export default function Container(props) {
9+
const [mounted, setMounted] = useState(false);
10+
11+
// After mounting, we have access to the theme
12+
useEffect(() => setMounted(true), []);
13+
14+
const { children, ...customMeta } = props;
15+
const router = useRouter();
16+
const meta = {
17+
title: "Manu Arora – Developer, writer, creator.",
18+
description: `Full-Stack developer, JavaScript enthusiast, Freelancer and a Learner.`,
19+
image: "https://manuarora.in/static/images/banner.png",
20+
type: "website",
21+
...customMeta,
22+
};
23+
24+
return (
25+
<div className="bg-white dark:bg-black">
26+
<Head>
27+
<title>{meta.title}</title>
28+
<meta name="robots" content="follow, index" />
29+
<meta content={meta.description} name="description" />
30+
<meta property="og:url" content={`https://leerob.io${router.asPath}`} />
31+
<link rel="canonical" href={`https://leerob.io${router.asPath}`} />
32+
<meta property="og:type" content={meta.type} />
33+
<meta property="og:site_name" content="Lee Robinson" />
34+
<meta property="og:description" content={meta.description} />
35+
<meta property="og:title" content={meta.title} />
36+
<meta property="og:image" content={meta.image} />
37+
<meta name="twitter:card" content="summary_large_image" />
38+
<meta name="twitter:site" content="@leeerob" />
39+
<meta name="twitter:title" content={meta.title} />
40+
<meta name="twitter:description" content={meta.description} />
41+
<meta name="twitter:image" content={meta.image} />
42+
{meta.date && (
43+
<meta property="article:published_time" content={meta.date} />
44+
)}
45+
</Head>
46+
<nav className="sticky-nav flex justify-between items-center max-w-4xl w-full p-8 my-0 md:my-8 mx-auto bg-white dark:bg-black bg-opacity-60">
47+
<a href="#skip" className="sr-only focus:not-sr-only">
48+
Skip to content
49+
</a>
50+
<button
51+
aria-label="Toggle Dark Mode"
52+
type="button"
53+
className="bg-gray-200 dark:bg-gray-800 rounded p-3 h-10 w-10"
54+
// onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
55+
>
56+
{mounted && (
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
viewBox="0 0 24 24"
60+
fill="currentColor"
61+
stroke="currentColor"
62+
className="h-4 w-4 text-gray-800 dark:text-gray-200"
63+
>
64+
{/* {theme === "dark" ? (
65+
<path
66+
strokeLinecap="round"
67+
strokeLinejoin="round"
68+
strokeWidth={2}
69+
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
70+
/>
71+
) : ( */}
72+
<path
73+
strokeLinecap="round"
74+
strokeLinejoin="round"
75+
strokeWidth={2}
76+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
77+
/>
78+
{/* )} */}
79+
</svg>
80+
)}
81+
</button>
82+
<div>
83+
<NextLink href="/">
84+
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">Home</a>
85+
</NextLink>
86+
<NextLink href="/blog">
87+
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">Blog</a>
88+
</NextLink>
89+
<NextLink href="/about">
90+
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">About</a>
91+
</NextLink>
92+
</div>
93+
</nav>
94+
<main
95+
id="skip"
96+
className="flex flex-col justify-center bg-white dark:bg-black px-8"
97+
>
98+
{children}
99+
<Footer />
100+
</main>
101+
</div>
102+
);
103+
}

‎components/Footer.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import Link from "next/link";
2+
3+
const ExternalLink = ({ href, children }) => (
4+
<a
5+
className="text-gray-500 hover:text-gray-600 transition"
6+
target="_blank"
7+
rel="noopener noreferrer"
8+
href={href}
9+
>
10+
{children}
11+
</a>
12+
);
13+
14+
export default function Footer() {
15+
return (
16+
<footer className="flex flex-col justify-center items-start max-w-2xl mx-auto w-full mb-8">
17+
<hr className="w-full border-1 border-gray-200 dark:border-gray-800 mb-8" />
18+
<div className="w-full max-w-2xl grid grid-cols-1 gap-4 pb-16 sm:grid-cols-3">
19+
<div className="flex flex-col space-y-4">
20+
<Link href="/">
21+
<a className="text-gray-500 hover:text-gray-600 transition">Home</a>
22+
</Link>
23+
<Link href="/about">
24+
<a className="text-gray-500 hover:text-gray-600 transition">
25+
About
26+
</a>
27+
</Link>
28+
<Link href="/contact">
29+
<a className="text-gray-500 hover:text-gray-600 transition">
30+
Contact
31+
</a>
32+
</Link>
33+
</div>
34+
<div className="flex flex-col space-y-4">
35+
<ExternalLink href="https://github.com/manuarora700">
36+
GitHub
37+
</ExternalLink>
38+
39+
<ExternalLink href="https://twitter.com/mannupaaji">
40+
Twitter
41+
</ExternalLink>
42+
<ExternalLink href="https://instagram.com/maninthere">
43+
Instagram
44+
</ExternalLink>
45+
{/* <ExternalLink href="https://www.youtube.com/channel/UCZMli3czZnd1uoc1ShTouQw">
46+
YouTube
47+
</ExternalLink> */}
48+
</div>
49+
<div className="flex flex-col space-y-4">
50+
<Link href="/projects">
51+
<a className="text-gray-500 hover:text-gray-600 transition">
52+
Projects
53+
</a>
54+
</Link>
55+
<Link href="/setup">
56+
<a className="text-gray-500 hover:text-gray-600 transition">
57+
VSCode Setup
58+
</a>
59+
</Link>
60+
<Link href="/snippets">
61+
<a className="text-gray-500 hover:text-gray-600 transition">
62+
Snippets
63+
</a>
64+
</Link>
65+
</div>
66+
</div>
67+
</footer>
68+
);
69+
}

‎components/ProjectCard.js‎

Lines changed: 196 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/components/*": ["components/*"],
6+
"@/data/*": ["data/*"],
7+
"@/layouts/*": ["layouts/*"],
8+
"@/lib/*": ["lib/*"],
9+
"@/styles/*": ["styles/*"]
10+
}
11+
}
12+
}
13+

0 commit comments

Comments
 (0)