this repo has no description
www.baileykane.co/
In progress pages to app migration
+302
-59
+1
-1
app/PostHogPageView.tsx
+1
-1
app/PostHogPageView.tsx
+54
-1
app/layout.tsx
+54
-1
app/layout.tsx
···
2
2
import { PostHogProvider } from "./providers";
3
3
import type { Metadata } from "next";
4
4
5
+
{
6
+
/* <Head>
7
+
<meta name="application-name" content="Baileykane.co" />
8
+
<meta name="apple-mobile-web-app-capable" content="yes" />
9
+
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
10
+
<meta name="apple-mobile-web-app-title" content="Baileykane.co" />
11
+
<meta name="description" content="Baileykane.co" />
12
+
<meta name="format-detection" content="telephone=no" />
13
+
<meta name="mobile-web-app-capable" content="yes" />
14
+
<meta name="msapplication-config" content="/icons/browserconfig.xml" />
15
+
<meta name="msapplication-TileColor" content="#2B5797" />
16
+
<meta name="msapplication-tap-highlight" content="no" />
17
+
<meta name="theme-color" content="#ddd7fe" />
18
+
<meta charSet="UTF-8" />
19
+
<link
20
+
rel="icon"
21
+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🅱️</text></svg>"
22
+
></link>
23
+
24
+
<link
25
+
rel="shortcut icon"
26
+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🅱️</text></svg>"
27
+
/>
28
+
<link rel="manifest" href="/manifest.json" />
29
+
30
+
<meta name="twitter:card" content="summary" />
31
+
<meta name="twitter:url" content="https://baileykane.co" />
32
+
<meta name="twitter:title" content="Bailey Kane" />
33
+
<meta
34
+
name="twitter:description"
35
+
content="Bailey Kane | Helping small businesses get more done with technology"
36
+
/>
37
+
<meta
38
+
name="twitter:image"
39
+
content="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🅱️</text></svg>"
40
+
/>
41
+
<meta name="twitter:creator" content="@BK610" />
42
+
43
+
<meta property="og:type" content="website" />
44
+
<meta property="og:title" content="Bailey Kane" />
45
+
<meta
46
+
property="og:description"
47
+
content="Bailey Kane | Helping small businesses get more done with technology"
48
+
/>
49
+
<meta property="og:site_name" content="Bailey Kane's personal website" />
50
+
<meta property="og:url" content="https://baileykane.co" />
51
+
<meta
52
+
property="og:image"
53
+
content="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🅱️</text></svg>"
54
+
/>
55
+
</Head>; */
56
+
}
57
+
5
58
export const metadata: Metadata = {};
6
59
7
60
export default function RootLayout({
···
13
66
}) {
14
67
return (
15
68
<html lang="en">
16
-
<body>
69
+
<body className="antialiased">
17
70
<PostHogProvider>{children}</PostHogProvider>
18
71
</body>
19
72
</html>
+17
app/page.tsx
+17
app/page.tsx
···
1
+
import Home from "@/components/pageContent/HomePage";
2
+
import { importCSVDataAsJson } from "@/lib/sheetsConnector";
3
+
4
+
export default async function Page() {
5
+
// Fetch data directly in a Server Component
6
+
const sectionsList = await getSections();
7
+
// Forward fetched data to your Client Component
8
+
return <Home sectionsList={sectionsList} />;
9
+
}
10
+
11
+
async function getSections() {
12
+
const sectionsList = await importCSVDataAsJson(
13
+
process.env.NEXT_PUBLIC_HOME_DATA_URL ?? "fail"
14
+
);
15
+
16
+
return sectionsList;
17
+
}
+2
-2
app/providers.tsx
+2
-2
app/providers.tsx
···
7
7
8
8
export function PostHogProvider({ children }: { children: React.ReactNode }) {
9
9
useEffect(() => {
10
-
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
11
-
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
10
+
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "undefined", {
11
+
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "undefined",
12
12
capture_pageview: false,
13
13
capture_pageleave: true, // Enable pageleave capture
14
14
});
+3
-3
components/ProjectContent.tsx
+3
-3
components/ProjectContent.tsx
···
19
19
year: "numeric",
20
20
});
21
21
22
-
const longDescriptionHtml = micromark(longDescription);
23
-
const markdownHtml = micromark(markdown);
22
+
const longDescriptionHtml = micromark(longDescription || "Coming soon");
23
+
const markdownHtml = micromark(markdown || "Coming soon");
24
24
25
25
return (
26
26
<div>
···
31
31
<h1 className="mt-4 font-bold">{title}</h1>
32
32
{image && <img src={image} className="rounded-lg" alt={imageAltText} />}
33
33
<div className="mt-2 space-x-2">
34
-
<Button href={link} />
34
+
<Button href={link || ""} />
35
35
{githubLink && (
36
36
<a href={githubLink} target="_blank">
37
37
<button
+146
components/pageContent/HomePage.tsx
+146
components/pageContent/HomePage.tsx
···
1
+
"use client";
2
+
3
+
import HomeSectionItem from "@/components/HomeSectionItem";
4
+
import BaseLayout from "@/components/BaseLayout";
5
+
import SectionList from "@/components/SectionList";
6
+
import SocialLink from "@/components/SocialLink";
7
+
// import { importCSVDataAsJson } from "@/lib/sheetsConnector";
8
+
import Link from "next/link";
9
+
// import type { GetStaticProps } from "next";
10
+
import type { Key } from "react";
11
+
12
+
interface HomeProps {
13
+
sectionsList: {
14
+
data: Array<HomeSection>;
15
+
};
16
+
}
17
+
18
+
interface HomeSection {
19
+
name: string;
20
+
link: string;
21
+
description: string;
22
+
emoji: string;
23
+
}
24
+
25
+
export default function Home({ sectionsList }: HomeProps): React.ReactElement {
26
+
return (
27
+
<BaseLayout navbarVisible={false}>
28
+
<div className="max-w-5xl mx-auto w-full grid grid-cols-1 sm:grid-cols-2 gap-6">
29
+
<div>
30
+
<h1 className="mb-2">Hello hello, this is Bailey speaking.</h1>
31
+
<div className="prose prose-stone dark:prose-invert prose-a:no-underline leading-relaxed">
32
+
<p>
33
+
I help small business owners{" "}
34
+
<b>solve problems with technology,</b> so they can{" "}
35
+
<b>reclaim their time</b> and{" "}
36
+
<b>focus on the things that matter</b>. Contact me at{" "}
37
+
<a
38
+
className=""
39
+
href="mailto:bailey.orion.kane@gmail.com"
40
+
target="_blank"
41
+
>
42
+
<code className="underline">bailey.orion.kane@gmail.com</code>
43
+
</a>
44
+
.
45
+
</p>
46
+
<p>Some things I do:</p>
47
+
<ul className="list-disc">
48
+
<li>
49
+
<b>Build websites</b> for businesses, portfolios, or for fun
50
+
</li>
51
+
<li>
52
+
<b>Create bespoke tools</b> and systems to work more efficiently
53
+
</li>
54
+
<li>
55
+
<b>Connect systems</b> and tools together
56
+
</li>
57
+
</ul>
58
+
<div className="mx-auto not-prose">
59
+
<Link href={"/projects"} className="rounded-lg">
60
+
<p
61
+
className="w-full text-center px-4 py-2 font-semibold text-stone-900 dark:text-white
62
+
bg-gradient-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
63
+
border border-stone-800 dark:border-stone-200 rounded-lg group transition hover:scale-105"
64
+
>
65
+
Example projects →
66
+
</p>
67
+
</Link>
68
+
</div>
69
+
<p>
70
+
I enjoy working with <b>small business owners and individuals</b>.
71
+
Even more fun if they work in{" "}
72
+
<span className="underline decoration-green-700 dark:decoration-green-400 underline-offset-2">
73
+
climate
74
+
</span>
75
+
,{" "}
76
+
<span className="underline decoration-purple-700 dark:decoration-purple-400 underline-offset-2">
77
+
arts
78
+
</span>
79
+
,{" "}
80
+
<span className="underline decoration-orange-600 dark:decoration-orange-400 underline-offset-2">
81
+
music
82
+
</span>
83
+
, or{" "}
84
+
<span className="underline decoration-blue-700 dark:decoration-blue-400 underline-offset-2">
85
+
education
86
+
</span>
87
+
.
88
+
</p>
89
+
<p>
90
+
If this sounds like you and you might have a project to work on
91
+
together, or you just want to say hi, please get in touch.
92
+
</p>
93
+
<p>Talk to you soon 👋</p>
94
+
</div>
95
+
<div className="pt-4 mt-4 border-t border-t-stone-400 dark:border-t-stone-500">
96
+
<div className="w-fit flex gap-2 items-center">
97
+
<SocialLink href="https://www.linkedin.com/in/baileykane/">
98
+
LinkedIn{" "}
99
+
</SocialLink>
100
+
<SocialLink
101
+
href="https://bsky.app/profile/baileykane.co"
102
+
icon="/img/bluesky_favicon.png"
103
+
>
104
+
Bluesky
105
+
</SocialLink>
106
+
</div>
107
+
</div>
108
+
</div>
109
+
<div className="py-6 px-2 sm:px-4 rounded-lg bg-stone-100 dark:bg-stone-800 w-full flex flex-col relative z-10">
110
+
<h3 className="text-stone-600 dark:text-stone-300 mb-2 border-b border-b-stone-400 dark:border-b-stone-500">
111
+
All of my projects
112
+
</h3>
113
+
<div className="h-full w-full items-center">
114
+
<SectionList className="item-list flex flex-col">
115
+
{sectionsList.data.map((section: HomeSection, k: Key) => (
116
+
<HomeSectionItem
117
+
link={
118
+
section.link ? section.link : section.name.toLowerCase()
119
+
}
120
+
name={section.name}
121
+
description={section.description}
122
+
emoji={section.emoji}
123
+
key={k}
124
+
/>
125
+
))}
126
+
</SectionList>
127
+
</div>
128
+
</div>
129
+
</div>
130
+
</BaseLayout>
131
+
);
132
+
}
133
+
134
+
// // Reference: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms
135
+
// export const getStaticProps = (async () => {
136
+
// const sectionsList = await importCSVDataAsJson(
137
+
// process.env.NEXT_PUBLIC_HOME_DATA_URL
138
+
// );
139
+
140
+
// return {
141
+
// props: {
142
+
// sectionsList,
143
+
// },
144
+
// revalidate: 60,
145
+
// };
146
+
// }) satisfies GetStaticProps<HomeProps>;
+2
-1
next-env.d.ts
+2
-1
next-env.d.ts
···
1
1
/// <reference types="next" />
2
2
/// <reference types="next/image-types/global" />
3
+
/// <reference types="next/navigation-types/compat/navigation" />
3
4
4
5
// NOTE: This file should not be edited
5
-
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
6
+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+1
-1
package.json
+1
-1
package.json
+6
-4
pages/_app.tsx
+6
-4
pages/_app.tsx
···
1
1
import "@/styles/globals.css";
2
2
import { useEffect } from "react";
3
-
import { Router } from "next/router";
3
+
import { useRouter } from "next/compat/router";
4
4
import posthog from "posthog-js";
5
5
import { PostHogProvider } from "posthog-js/react";
6
6
···
18
18
19
19
export default function MyApp({ Component, pageProps }): React.ReactElement {
20
20
useEffect(() => {
21
-
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
21
+
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "undefined", {
22
22
api_host:
23
23
process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
24
24
// person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
···
27
27
},
28
28
});
29
29
30
+
const router = useRouter();
31
+
30
32
const handleRouteChange = () => posthog?.capture("$pageview");
31
33
32
-
Router.events.on("routeChangeComplete", handleRouteChange);
34
+
router.events.on("routeChangeComplete", handleRouteChange);
33
35
34
36
return () => {
35
-
Router.events.off("routeChangeComplete", handleRouteChange);
37
+
router.events.off("routeChangeComplete", handleRouteChange);
36
38
};
37
39
}, []);
38
40
+28
-28
pages/api/garden.ts
+28
-28
pages/api/garden.ts
···
1
1
// pages/api/party.js - PartyKit API Route for Next.js Pages Router
2
-
import { NextApiRequest, NextApiResponse } from "next";
3
-
import { Server } from "partykit/server";
2
+
// import { NextApiRequest, NextApiResponse } from "next";
3
+
// import { Server } from "partykit/server";
4
4
5
-
const flowers = [];
5
+
// const flowers = [];
6
6
7
-
export default function handler(req: NextApiRequest, res: NextApiResponse) {
8
-
if (req.method === "GET") {
9
-
// Clean up old flowers (older than 24 hours)
10
-
const now = Date.now();
11
-
while (flowers.length && now - flowers[0].createdAt > 86400000) {
12
-
flowers.shift();
13
-
}
14
-
res.status(200).json({ flowers });
15
-
} else if (req.method === "POST") {
16
-
const newFlower = {
17
-
id: Date.now(),
18
-
createdAt: Date.now(),
19
-
color: getRandomColor(),
20
-
};
21
-
flowers.push(newFlower);
22
-
res.status(201).json(newFlower);
23
-
} else {
24
-
res.setHeader("Allow", ["GET", "POST"]);
25
-
res.status(405).end(`Method ${req.method} Not Allowed`);
26
-
}
27
-
}
7
+
// export default function handler(req: NextApiRequest, res: NextApiResponse) {
8
+
// if (req.method === "GET") {
9
+
// // Clean up old flowers (older than 24 hours)
10
+
// const now = Date.now();
11
+
// while (flowers.length && now - flowers[0].createdAt > 86400000) {
12
+
// flowers.shift();
13
+
// }
14
+
// res.status(200).json({ flowers });
15
+
// } else if (req.method === "POST") {
16
+
// const newFlower = {
17
+
// id: Date.now(),
18
+
// createdAt: Date.now(),
19
+
// color: getRandomColor(),
20
+
// };
21
+
// flowers.push(newFlower);
22
+
// res.status(201).json(newFlower);
23
+
// } else {
24
+
// res.setHeader("Allow", ["GET", "POST"]);
25
+
// res.status(405).end(`Method ${req.method} Not Allowed`);
26
+
// }
27
+
// }
28
28
29
-
function getRandomColor(): string {
30
-
const colors = ["#FF69B4", "#FFD700", "#8A2BE2", "#FF4500", "#00FF7F"];
31
-
return colors[Math.floor(Math.random() * colors.length)];
32
-
}
29
+
// function getRandomColor(): string {
30
+
// const colors = ["#FF69B4", "#FFD700", "#8A2BE2", "#FF4500", "#00FF7F"];
31
+
// return colors[Math.floor(Math.random() * colors.length)];
32
+
// }
pages/index.tsx
pages/temp.tsx
pages/index.tsx
pages/temp.tsx
+7
-5
pages/library-cards.tsx
+7
-5
pages/library-cards.tsx
···
19
19
const [selectedCard, setSelectedCard] = useState(null);
20
20
21
21
const setSelected = (element: React.ReactElement) => {
22
-
if (selectedCard == element) {
23
-
setSelectedCard(null);
24
-
} else {
25
-
setSelectedCard(element);
22
+
if (selectedCard) {
23
+
if (selectedCard == element) {
24
+
setSelectedCard(null);
25
+
} else {
26
+
setSelectedCard(element);
27
+
}
26
28
}
27
29
};
28
30
···
91
93
// Reference: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms
92
94
export const getStaticProps = (async () => {
93
95
const libraryCardsList = await importCSVDataAsJson(
94
-
process.env.NEXT_PUBLIC_LIBRARY_CARDS_DATA_URL
96
+
process.env.NEXT_PUBLIC_LIBRARY_CARDS_DATA_URL || "undefined"
95
97
);
96
98
97
99
return {
+1
-1
public/manifest.json
+1
-1
public/manifest.json
···
1
1
{
2
2
"name": "Bailey Kane",
3
3
"short_name": "BK",
4
-
"description": "Bailey Kane | Builder, engineer, artist",
4
+
"description": "Bailey Kane | Helping small businesses get more done with technology",
5
5
"icons": [
6
6
{
7
7
"src": "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🅱️</text></svg>",
+1
tailwind.config.js
+1
tailwind.config.js
+15
-2
tsconfig.json
+15
-2
tsconfig.json
···
19
19
"@/components/*": ["components/*"],
20
20
"@/lib/*": ["lib/*"],
21
21
"@/pages/*": ["pages/*"],
22
+
"@/app/*": ["app/*"],
22
23
"@/styles/*": ["styles/*"],
23
24
"@/public/*": ["public/*"]
24
-
}
25
+
},
26
+
"plugins": [
27
+
{
28
+
"name": "next"
29
+
}
30
+
],
31
+
"strictNullChecks": false
25
32
},
26
-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
33
+
"include": [
34
+
"**/*.ts",
35
+
"**/*.tsx",
36
+
"next-env.d.ts",
37
+
"types/*.{ts,tsx}",
38
+
".next/types/**/*.ts"
39
+
],
27
40
"exclude": ["node_modules"]
28
41
}