Skip to content

Commit 92032b7

Browse files
malikpiaramalikpiara
committed
Added shadcn, tags to posts and a new mobile navigation.
1 parent 87a29b3 commit 92032b7

11 files changed

Lines changed: 230 additions & 53 deletions

File tree

‎app/(moonwith)/[...slug]/page.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,7 @@ export default function Page({ params }: { params: { slug: string } }) {
3030
return (
3131
<article className='py-6 prose dark:prose-invert text-lg'>
3232
<h1 className='text-primary dark:text-secondary'>{page.title}</h1>
33-
{page.description && (
34-
<p className='text-xl text-primary dark:text-gray'>
35-
{page.description}
36-
</p>
37-
)}
33+
{page.description && <p className='text-xl '>{page.description}</p>}
3834
<hr />
3935
<MDXContent code={page.body} />
4036
</article>

‎app/(moonwith)/dashboard/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function Dashboard() {
4545
<article className='py-6 prose dark:prose-invert'>
4646
<h1 className='text-primary dark:text-secondary italic'>Software</h1>
4747

48-
<div className='bg-white rounded-2xl p-5 dark:bg-primary'>
48+
<div className='bg-white rounded-2xl p-5 dark:bg-eggshell/5'>
4949
<h2 className='text-primary dark:text-secondary m-0'>Activity Map</h2>
5050
<p>
5151
Below you can see how many blog posts I have published in the last 30
@@ -56,7 +56,7 @@ export default function Dashboard() {
5656
</div>
5757

5858
<Link className='no-underline font-normal' href='https://logicola.org/'>
59-
<div className='bg-white rounded-2xl p-5 mt-5 dark:bg-primary hover:scale-105 transition-all'>
59+
<div className='bg-white rounded-2xl p-5 mt-5 dark:bg-eggshell/5 hover:scale-105 transition-all'>
6060
<h2 className='text-primary dark:text-secondary m-0'>Logicola 3</h2>
6161
<p>
6262
An e-learning platform to help college students learn formal and
@@ -70,7 +70,7 @@ export default function Dashboard() {
7070
className='no-underline font-normal'
7171
href={'https://earnest.cards'}
7272
>
73-
<div className='bg-white rounded-2xl p-5 mt-5 dark:bg-primary hover:scale-105 transition-all'>
73+
<div className='bg-white rounded-2xl p-5 mt-5 dark:bg-eggshell/5 hover:scale-105 transition-all'>
7474
<h2 className='text-primary dark:text-secondary m-0'>
7575
Earnest Cards
7676
</h2>

‎app/(moonwith)/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,15 @@ export default function Home() {
1515
<div className='prose dark:prose-invert mt-6'>
1616
{posts.map((post) => (
1717
<article
18-
className='hover:bg-eggshell rounded-xl transition-all duration-700 p-2 dark:hover:bg-primary'
18+
className='hover:bg-eggshell rounded-xl transition-all duration-700 p-2 dark:hover:bg-eggshell/5'
1919
key={post._meta.path}
2020
>
2121
<Link className='no-underline' href={`/posts/${post.slug}`}>
2222
<h2 className='text-primary mt-2 dark:text-secondary'>
2323
{post.title}
2424
</h2>
2525
</Link>
26-
{post.description && (
27-
<p className='dark:text-gray text-lg'>{post.description}</p>
28-
)}
26+
{post.description && <p className='text-lg'>{post.description}</p>}
2927
</article>
3028
))}
3129
</div>

‎components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "app/global.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎components/moonwith/header.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ModeToggle } from '../mode-toggle';
44
import Image from 'next/image';
55
import logo from '../../public/logomark.svg';
66
import { useState } from 'react';
7+
import { Button } from '../ui/button';
78

89
interface NavItem {
910
label: string;
@@ -90,24 +91,28 @@ export function Header() {
9091
</svg>
9192
</button>
9293
{isDropdownVisible && (
93-
<div className='w-full' id='navbar-hamburger'>
94-
<ul className='flex flex-col font-medium mt-4 rounded-lg'>
94+
<div
95+
className='w-full h-screen self-center content-center text-center'
96+
id='navbar-hamburger'
97+
>
98+
<div className='flex flex-col rounded-lg'>
9599
{items.map((item: NavItem) => {
96100
return (
97-
<li
101+
<Button
102+
asChild
98103
key={item.label}
99-
className='block py-2 px-3 text-primary rounded hover:text-white hover:bg-primary dark:text-inherit dark:hover:text-white dark:hover:bg-blue-600'
104+
className=' text-4xl font-light bg-transparent py-2 px-3 text-primary rounded hover:text-white dark:text-inherit mb-5'
100105
>
101106
<Link
102-
className='transition-all duration-300 hover:opacity-100'
107+
className='transition-all duration-300 hover:opacity-100 w-full'
103108
href={item.destination}
104109
>
105110
{item.label}
106111
</Link>
107-
</li>
112+
</Button>
108113
);
109114
})}
110-
</ul>
115+
</div>
111116
</div>
112117
)}
113118
</div>

‎components/ui/button.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9+
{
10+
variants: {
11+
variant: {
12+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
13+
destructive:
14+
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
15+
outline:
16+
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17+
secondary:
18+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
19+
ghost: "hover:bg-accent hover:text-accent-foreground",
20+
link: "text-primary underline-offset-4 hover:underline",
21+
},
22+
size: {
23+
default: "h-10 px-4 py-2",
24+
sm: "h-9 rounded-md px-3",
25+
lg: "h-11 rounded-md px-8",
26+
icon: "h-10 w-10",
27+
},
28+
},
29+
defaultVariants: {
30+
variant: "default",
31+
size: "default",
32+
},
33+
}
34+
)
35+
36+
export interface ButtonProps
37+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38+
VariantProps<typeof buttonVariants> {
39+
asChild?: boolean
40+
}
41+
42+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43+
({ className, variant, size, asChild = false, ...props }, ref) => {
44+
const Comp = asChild ? Slot : "button"
45+
return (
46+
<Comp
47+
className={cn(buttonVariants({ variant, size, className }))}
48+
ref={ref}
49+
{...props}
50+
/>
51+
)
52+
}
53+
)
54+
Button.displayName = "Button"
55+
56+
export { Button, buttonVariants }

‎content-collections.ts‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { defineCollection, defineConfig } from "@content-collections/core";
2-
import { compileMDX } from "@content-collections/mdx";
1+
import { defineCollection, defineConfig } from '@content-collections/core';
2+
import { compileMDX } from '@content-collections/mdx';
33

44
const posts = defineCollection({
5-
name: "Post",
6-
directory: "content/posts",
7-
include: "**/*.mdx",
5+
name: 'Post',
6+
directory: 'content/posts',
7+
include: '**/*.mdx',
88
schema: (z) => ({
99
title: z.string(),
1010
description: z.string(),
1111
date: z.string(),
12+
published: z.boolean().optional().default(true),
13+
tags: z.array(z.string()).optional().default([]),
1214
}),
1315
transform: async (document, context) => {
1416
const body = await compileMDX(context, document);
@@ -22,24 +24,24 @@ const posts = defineCollection({
2224
});
2325

2426
const pages = defineCollection({
25-
name: "pages",
26-
directory: "content/pages",
27-
include: "**/*.md(x)?",
28-
schema: (z) => ({
29-
title: z.string(),
30-
description: z.string(),
31-
}),
32-
transform: async (document, context) => {
33-
const body = await compileMDX(context, document);
34-
const slug = document._meta.path;
35-
return {
36-
...document,
37-
body,
38-
slug,
39-
};
40-
},
41-
});
27+
name: 'pages',
28+
directory: 'content/pages',
29+
include: '**/*.md(x)?',
30+
schema: (z) => ({
31+
title: z.string(),
32+
description: z.string(),
33+
}),
34+
transform: async (document, context) => {
35+
const body = await compileMDX(context, document);
36+
const slug = document._meta.path;
37+
return {
38+
...document,
39+
body,
40+
slug,
41+
};
42+
},
43+
});
4244

4345
export default defineConfig({
4446
collections: [posts, pages],
45-
});
47+
});

‎content/posts/rsms.mdx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
---
22
title: Advice from Rasmus Andersson
33
description: In order to be great at something, you have to do it 10 000 times.
4-
date: "2023-04-15"
4+
date: '2023-04-15'
5+
tags: ['interview']
56
---
67

78
[Rasmus Andersson](https://rsms.me/) designed the [Inter typeface](https://rsms.me/inter/), co-created Spotify and GraphQL, and shaped Figma as their lead designer. His mastery of design and proficiency with computer science, makes him an industry titan and one of my personal heroes.
89

9-
It's important to underline his work ethic, as well as his prolificacy. He spends his free time tinkering and working on passion projects. Besides the most well-known work, there are a thousand of other [projects](https://rsms.me/projects/), which include multiple programming languages.
10+
It's important to underline his work ethic, as well as his prolificacy. He spends his free time tinkering and working on passion projects. Besides the most well-known work, there are a thousand of other [projects](https://rsms.me/projects/), which include multiple programming languages.
1011

1112
Some time ago, I decided to reach out and ask for advice. He was kind enough to share his thoughts on [a tweetstorm](https://twitter.com/rsms/status/1645135344134942721) I'm compiling here.
1213

13-
Rasmus's advice echoes what other people I admire have told me in the past. Working hard and [showing up every day](https://moonwith.com/posts/train) probably matters more than any other thing. Sometimes, it can be discouraging to not see results right away but we have to trust the process.
14+
Rasmus's advice echoes what other people I admire have told me in the past. Working hard and [showing up every day](https://moonwith.com/posts/train) probably matters more than any other thing. Sometimes, it can be discouraging to not see results right away but we have to trust the process.
1415

1516
### Rasmus Andersson
17+
1618
Every person is different and we all have a unique perspective, so it's hard to give general advice, but anyhow:
1719

18-
Do! Make! Do a lot of work, do A LOT of work. The saying that in order to be great at something, you have to do it 10 000 times is true (in most cases.)
20+
Do! Make! Do a lot of work, do A LOT of work. The saying that in order to be great at something, you have to do it 10 000 times is true (in most cases.)
1921

2022
You can read all the books in the world about playing soccer but the only way you can be a great soccer player is (obviously) by playing a lot of soccer (and maybe reading a few books.) The same is true for any path to mastery — you have to practice, a lot.
2123

@@ -29,7 +31,7 @@ What I often see in the software industry is people putting themselves into silo
2931

3032
A furniture designer doing that would be pretty terrible at designing chairs;
3133

32-
"I design the most exquisite legs"
34+
"I design the most exquisite legs"
3335

3436
Very pretty! But they break if you put the chair on a carpet and apply lateral force, so we can't ship that.
3537

‎lib/utils.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,29 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-slot": "^1.2.3",
1314
"@tailwindcss/typography": "^0.5.12",
1415
"@types/node": "20.12.12",
1516
"@types/react": "18.3.3",
1617
"@types/react-dom": "18.2.25",
1718
"@vercel/analytics": "^1.3.1",
1819
"@vercel/og": "^0.8.5",
1920
"autoprefixer": "10.4.19",
21+
"class-variance-authority": "^0.7.1",
2022
"classnames": "^2.5.1",
23+
"clsx": "^2.1.1",
2124
"date-fns": "^4.1.0",
2225
"eslint": "8.57.0",
2326
"eslint-config-next": "14.2.3",
27+
"lucide-react": "^0.539.0",
2428
"next": "14.2.30",
2529
"next-themes": "^0.3.0",
2630
"postcss": "8.4.38",
2731
"react": "18.3.1",
2832
"react-dom": "18.2.0",
33+
"tailwind-merge": "^3.3.1",
2934
"tailwindcss": "3.4.3",
35+
"tailwindcss-animate": "^1.0.7",
3036
"typescript": "5.4.5"
3137
},
3238
"devDependencies": {

0 commit comments

Comments
 (0)