Skip to content

Commit 69b7d71

Browse files
michaelfortunatomichaelfortunato
committed
Update MNF button
1 parent a7ba534 commit 69b7d71

3 files changed

Lines changed: 174 additions & 75 deletions

File tree

‎components/Blog/layout.tsx‎

Lines changed: 79 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { blogInitialsFont } from "@/lib/fonts";
22
import type { ReactNode } from "react";
3-
import { BlogSettingsProvider, useBlogSettings } from "@/components/Blog/settings";
3+
import {
4+
BlogSettingsProvider,
5+
useBlogSettings,
6+
} from "@/components/Blog/settings";
47
import {
58
DropdownMenu,
69
DropdownMenuContent,
@@ -20,82 +23,92 @@ import { useTheme } from "next-themes";
2023
import { Ellipsis } from "lucide-react";
2124
type Props = {
2225
children: ReactNode;
26+
isIndexPage: boolean;
2327
footer?: ReactNode;
2428
};
2529

26-
function Header() {
30+
function MNFMenu(props: { variant: "index" | "note" }) {
2731
const { theme, setTheme } = useTheme();
2832
const {
2933
settings: { showCommitInformation },
3034
setShowCommitInformation,
3135
} = useBlogSettings();
3236

37+
return (
38+
<DropdownMenu>
39+
<DropdownMenuTrigger
40+
className={`md:inline-block bold ${blogInitialsFont.className} text-4xl relative inline-block after:content-['.'] after:absolute after:left-full`}
41+
render={<button>mnf</button>}
42+
/>
43+
<DropdownMenuContent className="" align="center">
44+
<DropdownMenuLinkItem href="/blog">Home</DropdownMenuLinkItem>
45+
<DropdownMenuSeparator />
46+
{props.variant == "note" ? (
47+
<DropdownMenuGroup>
48+
<DropdownMenuGroupLabel>UI Elements</DropdownMenuGroupLabel>
49+
{/* Place holder */}
50+
<DropdownMenuCheckboxItem disabled>
51+
Table of Contents
52+
</DropdownMenuCheckboxItem>
53+
54+
<DropdownMenuSub>
55+
<DropdownMenuSubTrigger>Footer</DropdownMenuSubTrigger>
56+
<DropdownMenuSubContent>
57+
<DropdownMenuCheckboxItem
58+
checked={showCommitInformation}
59+
onCheckedChange={(checked) =>
60+
setShowCommitInformation(checked === true)
61+
}
62+
>
63+
Commit Information
64+
</DropdownMenuCheckboxItem>
65+
{/* Place holder */}
66+
<DropdownMenuCheckboxItem disabled>
67+
{"Views & Likes"}
68+
</DropdownMenuCheckboxItem>
69+
</DropdownMenuSubContent>
70+
</DropdownMenuSub>
71+
</DropdownMenuGroup>
72+
) : null}
73+
<DropdownMenuGroup>
74+
<DropdownMenuGroupLabel>Theme</DropdownMenuGroupLabel>
75+
<DropdownMenuRadioGroup
76+
onValueChange={(value) => setTheme(value)}
77+
value={theme}
78+
>
79+
<DropdownMenuRadioItem
80+
onSelect={(e) => e.preventDefault()}
81+
value="light"
82+
className="hover:cursor-pointer"
83+
>
84+
Light
85+
</DropdownMenuRadioItem>
86+
<DropdownMenuRadioItem
87+
onSelect={(e) => e.preventDefault()}
88+
value="dark"
89+
className="hover:cursor-pointer"
90+
>
91+
Dark
92+
</DropdownMenuRadioItem>
93+
<DropdownMenuRadioItem
94+
onSelect={(e) => e.preventDefault()}
95+
value="system"
96+
className="hover:cursor-pointer"
97+
>
98+
System
99+
</DropdownMenuRadioItem>
100+
</DropdownMenuRadioGroup>
101+
</DropdownMenuGroup>
102+
</DropdownMenuContent>
103+
</DropdownMenu>
104+
);
105+
}
106+
107+
function Header(props: { isIndexPage: boolean }) {
33108
return (
34109
<div className={`px-16 md:flex md:items-center md:justify-between `}>
35110
<div className="flex justify-center">
36-
<DropdownMenu>
37-
<DropdownMenuTrigger
38-
className={`md:inline-block bold ${blogInitialsFont.className} text-4xl relative inline-block after:content-['.'] after:absolute after:left-full`}
39-
render={<button>mnf</button>}
40-
/>
41-
<DropdownMenuContent className="" align="center">
42-
<DropdownMenuLinkItem href="/blog">Home</DropdownMenuLinkItem>
43-
<DropdownMenuSeparator />
44-
<DropdownMenuGroup>
45-
<DropdownMenuGroupLabel>UI Elements</DropdownMenuGroupLabel>
46-
<DropdownMenuCheckboxItem>
47-
Table of Contents Widget
48-
</DropdownMenuCheckboxItem>
49-
<DropdownMenuCheckboxItem
50-
checked={showCommitInformation}
51-
onCheckedChange={(checked) =>
52-
setShowCommitInformation(checked === true)
53-
}
54-
>
55-
Commit Information
56-
</DropdownMenuCheckboxItem>
57-
<DropdownMenuSub>
58-
<DropdownMenuSubTrigger>
59-
<Ellipsis />
60-
</DropdownMenuSubTrigger>
61-
<DropdownMenuSubContent>
62-
{/* <DropdownMenuCheckboxItem> */}
63-
{/* Show Commit Information */}
64-
{/* </DropdownMenuCheckboxItem> */}
65-
</DropdownMenuSubContent>
66-
</DropdownMenuSub>
67-
</DropdownMenuGroup>
68-
<DropdownMenuGroup>
69-
<DropdownMenuGroupLabel>Theme</DropdownMenuGroupLabel>
70-
<DropdownMenuRadioGroup
71-
onValueChange={(value) => setTheme(value)}
72-
value={theme}
73-
>
74-
<DropdownMenuRadioItem
75-
onSelect={(e) => e.preventDefault()}
76-
value="light"
77-
className="hover:cursor-pointer"
78-
>
79-
Light
80-
</DropdownMenuRadioItem>
81-
<DropdownMenuRadioItem
82-
onSelect={(e) => e.preventDefault()}
83-
value="dark"
84-
className="hover:cursor-pointer"
85-
>
86-
Dark
87-
</DropdownMenuRadioItem>
88-
<DropdownMenuRadioItem
89-
onSelect={(e) => e.preventDefault()}
90-
value="system"
91-
className="hover:cursor-pointer"
92-
>
93-
System
94-
</DropdownMenuRadioItem>
95-
</DropdownMenuRadioGroup>
96-
</DropdownMenuGroup>
97-
</DropdownMenuContent>
98-
</DropdownMenu>
111+
<MNFMenu variant={props.isIndexPage ? "index" : "note"} />
99112
</div>
100113
<div className="hidden md:flex md:gap-4">
101114
{/* TODO: What to put here ? */}
@@ -112,7 +125,7 @@ const Layout = (props: Props) => {
112125
<BlogSettingsProvider>
113126
<div className="container flex flex-col min-h-screen">
114127
<div className="invisible h-16 w-full" />
115-
<Header />
128+
<Header isIndexPage={props.isIndexPage} />
116129
<div className="invisible h-20 w-full" />
117130
<article>{props.children}</article>
118131
{props.footer ? (

‎pages/blog/[...id].tsx‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,24 @@ function formatHeaderTimestamp(timestamp: Date): string {
3131
year: "numeric",
3232
});
3333
}
34+
import { blogInitialsFont } from "@/lib/fonts";
35+
import {
36+
DropdownMenu,
37+
DropdownMenuContent,
38+
DropdownMenuGroup,
39+
DropdownMenuSeparator,
40+
DropdownMenuTrigger,
41+
DropdownMenuRadioGroup,
42+
DropdownMenuRadioItem,
43+
DropdownMenuGroupLabel,
44+
DropdownMenuSub,
45+
DropdownMenuSubTrigger,
46+
DropdownMenuSubContent,
47+
DropdownMenuCheckboxItem,
48+
DropdownMenuLinkItem,
49+
} from "@/components/ui/dropdown-menu";
50+
import { useTheme } from "next-themes";
51+
import { Ellipsis } from "lucide-react";
3452

3553
function Header(metadata: PostMetadata) {
3654
const createdTimestamp = metadata.buildInfo.firstCommit.timestamp;
@@ -110,6 +128,81 @@ function Footer(metadata: PostMetadata) {
110128
);
111129
}
112130

131+
function MNFMenuForNote() {
132+
const { theme, setTheme } = useTheme();
133+
const {
134+
settings: { showCommitInformation },
135+
setShowCommitInformation,
136+
} = useBlogSettings();
137+
138+
return (
139+
<DropdownMenu>
140+
<DropdownMenuTrigger
141+
className={`md:inline-block bold ${blogInitialsFont.className} text-4xl relative inline-block after:content-['.'] after:absolute after:left-full`}
142+
render={<button>mnf</button>}
143+
/>
144+
<DropdownMenuContent className="" align="center">
145+
<DropdownMenuLinkItem href="/blog">Home</DropdownMenuLinkItem>
146+
<DropdownMenuSeparator />
147+
<DropdownMenuGroup>
148+
<DropdownMenuGroupLabel>UI Elements</DropdownMenuGroupLabel>
149+
{/* Place holder */}
150+
<DropdownMenuCheckboxItem disabled>
151+
Table of Contents
152+
</DropdownMenuCheckboxItem>
153+
154+
<DropdownMenuSub>
155+
<DropdownMenuSubTrigger>Footer</DropdownMenuSubTrigger>
156+
<DropdownMenuSubContent>
157+
<DropdownMenuCheckboxItem
158+
checked={showCommitInformation}
159+
onCheckedChange={(checked) =>
160+
setShowCommitInformation(checked === true)
161+
}
162+
>
163+
Commit Information
164+
</DropdownMenuCheckboxItem>
165+
{/* Place holder */}
166+
<DropdownMenuCheckboxItem disabled>
167+
{"Views & Likes"}
168+
</DropdownMenuCheckboxItem>
169+
</DropdownMenuSubContent>
170+
</DropdownMenuSub>
171+
</DropdownMenuGroup>
172+
<DropdownMenuGroup>
173+
<DropdownMenuGroupLabel>Theme</DropdownMenuGroupLabel>
174+
<DropdownMenuRadioGroup
175+
onValueChange={(value) => setTheme(value)}
176+
value={theme}
177+
>
178+
<DropdownMenuRadioItem
179+
onSelect={(e) => e.preventDefault()}
180+
value="light"
181+
className="hover:cursor-pointer"
182+
>
183+
Light
184+
</DropdownMenuRadioItem>
185+
<DropdownMenuRadioItem
186+
onSelect={(e) => e.preventDefault()}
187+
value="dark"
188+
className="hover:cursor-pointer"
189+
>
190+
Dark
191+
</DropdownMenuRadioItem>
192+
<DropdownMenuRadioItem
193+
onSelect={(e) => e.preventDefault()}
194+
value="system"
195+
className="hover:cursor-pointer"
196+
>
197+
System
198+
</DropdownMenuRadioItem>
199+
</DropdownMenuRadioGroup>
200+
</DropdownMenuGroup>
201+
</DropdownMenuContent>
202+
</DropdownMenu>
203+
);
204+
}
205+
113206
interface GetStaticPathsResult extends ParsedUrlQuery {
114207
id: string[];
115208
}
@@ -176,7 +269,7 @@ const Page: NextPageWithLayout<GetStaticPropsResult> = ({
176269
};
177270

178271
Page.getLayout = (page) => {
179-
return <Layout>{page}</Layout>;
272+
return <Layout isIndexPage={false}>{page}</Layout>;
180273
};
181274

182275
export const getStaticPaths: GetStaticPaths<

‎pages/blog/index.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,6 @@ function BlogIndexFooter({
154154
}: {
155155
serializedBuildInfo: SerializedBuildInfo;
156156
}) {
157-
const {
158-
settings: { showCommitInformation },
159-
} = useBlogSettings();
160-
161-
if (!showCommitInformation) {
162-
return null;
163-
}
164-
165157
return <BuildStamp serializedBuildInfo={serializedBuildInfo} />;
166158
}
167159

@@ -182,6 +174,7 @@ const Page: NextPageWithLayout<GetStaticPropsResult> = ({
182174
Page.getLayout = (page) => {
183175
return (
184176
<Layout
177+
isIndexPage={true}
185178
footer={
186179
<BlogIndexFooter
187180
serializedBuildInfo={page.props.websiteWideBuildInfo}

0 commit comments

Comments
 (0)