this repo has no description
www.baileykane.co/
Convert to typescript
+251
-172
+8
-4
components/BaseLayout.js
components/BaseLayout.tsx
+8
-4
components/BaseLayout.js
components/BaseLayout.tsx
···
1
1
import Head from "next/head";
2
2
import NavBar from "./NavBar";
3
3
4
+
interface BaseLayoutProps {
5
+
children: React.ReactElement;
6
+
navbarVisible?: boolean;
7
+
titleText?: string;
8
+
}
9
+
4
10
export default function BaseLayout({
5
11
children,
6
12
navbarVisible = true,
7
13
titleText,
8
-
}) {
9
-
navbarVisible = navbarVisible ? "" : "invisible";
10
-
14
+
}: BaseLayoutProps): React.ReactElement {
11
15
var title = "Bailey Kane";
12
16
13
17
if (typeof titleText !== "undefined") {
···
27
31
select-none text-stone-900 dark:text-stone-100"
28
32
>
29
33
<div className="max-w-7xl w-full p-2 space-y-4">
30
-
<NavBar className={navbarVisible} />
34
+
<NavBar className={navbarVisible ? "" : "invisible"} />
31
35
<main>{children}</main>
32
36
</div>
33
37
</div>
+2
-4
components/BaseMap.js
components/BaseMap.tsx
+2
-4
components/BaseMap.js
components/BaseMap.tsx
···
1
1
import React, { useEffect } from "react";
2
2
import mapboxgl from "mapbox-gl";
3
3
4
-
const BaseMap = () => {
4
+
export default function BaseMap(): React.ReactElement {
5
5
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
6
6
7
7
useEffect(() => {
···
55
55
});
56
56
57
57
return <div id="mapContainer" className="w-full h-full" />;
58
-
};
59
-
60
-
export default BaseMap;
58
+
}
+11
-1
components/Button.js
components/Button.tsx
+11
-1
components/Button.js
components/Button.tsx
···
1
-
export default function Button({ href, target = "_blank", className }) {
1
+
interface ButtonProps {
2
+
href: string;
3
+
target?: string;
4
+
className?: string;
5
+
}
6
+
7
+
export default function Button({
8
+
href,
9
+
target = "_blank",
10
+
className,
11
+
}: ButtonProps): React.ReactElement {
2
12
return (
3
13
<a href={href} target={target}>
4
14
<button
+9
-1
components/HomeSectionItem.js
components/HomeSectionItem.tsx
+9
-1
components/HomeSectionItem.js
components/HomeSectionItem.tsx
···
1
1
import Link from "next/link";
2
2
3
+
interface HomeSectionItemProps {
4
+
link: string;
5
+
name: string;
6
+
description: string;
7
+
emoji: string;
8
+
className: string;
9
+
}
10
+
3
11
export default function HomeSectionItem({
4
12
link,
5
13
name,
6
14
description,
7
15
emoji,
8
16
className,
9
-
}) {
17
+
}: HomeSectionItemProps): React.ReactElement {
10
18
return (
11
19
<Link href={link} passHref>
12
20
<div
+12
-2
components/LibraryCard.js
components/LibraryCard.tsx
+12
-2
components/LibraryCard.js
components/LibraryCard.tsx
···
1
+
import type LibraryCard from "@/types/LibraryCard";
1
2
import Button from "./Button";
2
3
import DragToRotateElement from "./effects/DragToRotateElement";
3
4
import FlashlightEffect from "./effects/FlashlightEffect";
4
5
5
-
export default function LibraryCard({ libraryCard, onClick }) {
6
-
const { name, link, branch, acquiredDate, imagePath } = libraryCard;
6
+
interface LibraryCardProps {
7
+
libraryCard: LibraryCard;
8
+
onClick: () => void;
9
+
}
10
+
11
+
export default function LibraryCard({
12
+
libraryCard,
13
+
onClick,
14
+
}: LibraryCardProps): React.ReactElement {
15
+
const { name, link, branch, acquiredDate, imagePath } =
16
+
libraryCard as LibraryCard;
7
17
8
18
const formattedDate = new Date(acquiredDate).toLocaleDateString("en-US", {
9
19
month: "long",
-7
components/MissingContent.js
-7
components/MissingContent.js
+5
components/MissingContent.tsx
+5
components/MissingContent.tsx
-97
components/MusicItem.js
-97
components/MusicItem.js
···
1
-
import { Component } from "react";
2
-
import { micromark } from "micromark";
3
-
4
-
export default class MusicItem extends Component {
5
-
getContentBytype(type, embedUrl) {
6
-
let content;
7
-
8
-
// console.log(type);
9
-
10
-
switch (type) {
11
-
case "YouTube":
12
-
content = (
13
-
<iframe
14
-
src={embedUrl}
15
-
className="aspect-video h-full w-full"
16
-
allowFullScreen
17
-
/>
18
-
);
19
-
break;
20
-
case "Google Photos":
21
-
content = <div>Google Photos</div>;
22
-
break;
23
-
case "File":
24
-
content = <div>File</div>;
25
-
break;
26
-
case "Other":
27
-
content = <div>Other</div>;
28
-
break;
29
-
default:
30
-
content = <div>Unspecified</div>;
31
-
break;
32
-
}
33
-
34
-
return content;
35
-
}
36
-
37
-
render() {
38
-
return (
39
-
<div className="section-item flex flex-col transition divide-y divide-purple-300">
40
-
<div className="group font-serif text-lg hover:underline">
41
-
{this.props.info.linkUrl ? (
42
-
<a
43
-
href={this.props.info.linkUrl}
44
-
target="_blank"
45
-
className="h-full w-full"
46
-
>
47
-
<div className="p-2 flex flex-row hover:underline group-hover:animate-wiggle">
48
-
<h3 className="basis-11/12 dark:text-stone-100 line-clamp-1">
49
-
{this.props.info.title}
50
-
</h3>
51
-
<div className="text-right basis-1/12 dark:text-stone-100">
52
-
<img
53
-
src="img/external-link-outline-svgrepo-com.svg"
54
-
className="inline dark:invert"
55
-
/>
56
-
</div>
57
-
</div>
58
-
</a>
59
-
) : (
60
-
<div className="p-2">
61
-
<h3 className="dark:text-stone-100 line-clamp-1">
62
-
{this.props.info.title}
63
-
</h3>
64
-
</div>
65
-
)}
66
-
</div>
67
-
<div className="flex flex-row flex-wrap sm:h-40 h-fit divide-x divide-purple-300 dark:divide-purple-300">
68
-
<div className="w-full sm:basis-1/3 p-2 h-full break-words text-ellipsis">
69
-
<div
70
-
dangerouslySetInnerHTML={{
71
-
__html: micromark(
72
-
this.props.info.description ? this.props.info.description : ""
73
-
),
74
-
}}
75
-
className="prose prose-stone dark:prose-invert
76
-
prose-sm font-light prose-a:font-light leading-normal dark:text-stone-100
77
-
"
78
-
/>
79
-
</div>
80
-
{this.props.info.type == "YouTube" ? (
81
-
<div
82
-
className="sm:basis-2/3 h-full
83
-
bg-center bg-[url('/img/loading.svg')] dark:bg-[url('/img/loading-dark.svg')]"
84
-
>
85
-
{this.getContentBytype(
86
-
this.props.info.type,
87
-
this.props.info.embedUrl
88
-
)}
89
-
</div>
90
-
) : (
91
-
<></>
92
-
)}
93
-
</div>
94
-
</div>
95
-
);
96
-
}
97
-
}
+94
components/MusicItem.tsx
+94
components/MusicItem.tsx
···
1
+
import { micromark } from "micromark";
2
+
3
+
export default function MusicItem(): React.ReactElement {
4
+
function getContentBytype(type, embedUrl) {
5
+
let content;
6
+
7
+
// console.log(type);
8
+
9
+
switch (type) {
10
+
case "YouTube":
11
+
content = (
12
+
<iframe
13
+
src={embedUrl}
14
+
className="aspect-video h-full w-full"
15
+
allowFullScreen
16
+
/>
17
+
);
18
+
break;
19
+
case "Google Photos":
20
+
content = <div>Google Photos</div>;
21
+
break;
22
+
case "File":
23
+
content = <div>File</div>;
24
+
break;
25
+
case "Other":
26
+
content = <div>Other</div>;
27
+
break;
28
+
default:
29
+
content = <div>Unspecified</div>;
30
+
break;
31
+
}
32
+
33
+
return content;
34
+
}
35
+
36
+
return (
37
+
<div className="section-item flex flex-col transition divide-y divide-purple-300">
38
+
<div className="group font-serif text-lg hover:underline">
39
+
{this.props.info.linkUrl ? (
40
+
<a
41
+
href={this.props.info.linkUrl}
42
+
target="_blank"
43
+
className="h-full w-full"
44
+
>
45
+
<div className="p-2 flex flex-row hover:underline group-hover:animate-wiggle">
46
+
<h3 className="basis-11/12 dark:text-stone-100 line-clamp-1">
47
+
{this.props.info.title}
48
+
</h3>
49
+
<div className="text-right basis-1/12 dark:text-stone-100">
50
+
<img
51
+
src="img/external-link-outline-svgrepo-com.svg"
52
+
className="inline dark:invert"
53
+
/>
54
+
</div>
55
+
</div>
56
+
</a>
57
+
) : (
58
+
<div className="p-2">
59
+
<h3 className="dark:text-stone-100 line-clamp-1">
60
+
{this.props.info.title}
61
+
</h3>
62
+
</div>
63
+
)}
64
+
</div>
65
+
<div className="flex flex-row flex-wrap sm:h-40 h-fit divide-x divide-purple-300 dark:divide-purple-300">
66
+
<div className="w-full sm:basis-1/3 p-2 h-full break-words text-ellipsis">
67
+
<div
68
+
dangerouslySetInnerHTML={{
69
+
__html: micromark(
70
+
this.props.info.description ? this.props.info.description : ""
71
+
),
72
+
}}
73
+
className="prose prose-stone dark:prose-invert
74
+
prose-sm font-light prose-a:font-light leading-normal dark:text-stone-100
75
+
"
76
+
/>
77
+
</div>
78
+
{this.props.info.type == "YouTube" ? (
79
+
<div
80
+
className="sm:basis-2/3 h-full
81
+
bg-center bg-[url('/img/loading.svg')] dark:bg-[url('/img/loading-dark.svg')]"
82
+
>
83
+
{this.getContentBytype(
84
+
this.props.info.type,
85
+
this.props.info.embedUrl
86
+
)}
87
+
</div>
88
+
) : (
89
+
<></>
90
+
)}
91
+
</div>
92
+
</div>
93
+
);
94
+
}
+3
-2
components/ProjectContent.js
components/ProjectContent.tsx
+3
-2
components/ProjectContent.js
components/ProjectContent.tsx
···
1
1
import { micromark } from "micromark";
2
2
import Button from "./Button";
3
+
import type Project from "@/types/Project";
3
4
4
-
export default function ProjectContent({ project }) {
5
+
export default function ProjectContent({ project }): React.ReactElement {
5
6
const {
6
7
title,
7
8
longDescription,
···
11
12
markdown,
12
13
link,
13
14
githubLink,
14
-
} = project;
15
+
} = project as Project;
15
16
16
17
const formattedDate = new Date(date).toLocaleDateString("en-US", {
17
18
month: "long",
+10
-2
components/ProjectSectionItem.js
components/ProjectSectionItem.tsx
+10
-2
components/ProjectSectionItem.js
components/ProjectSectionItem.tsx
···
1
1
import Link from "next/link";
2
+
import type Project from "../types/Project";
2
3
3
-
export default function ProjectSectionItem({ project }) {
4
-
const { title, description, previewImage, date, emoji, slug } = project;
4
+
interface ProjectSectionItemProps {
5
+
project: Project;
6
+
}
7
+
8
+
export default function ProjectSectionItem({
9
+
project,
10
+
}: ProjectSectionItemProps): React.ReactElement {
11
+
const { title, description, previewImage, date, emoji, slug } =
12
+
project as Project;
5
13
6
14
const dateObj = new Date(date);
7
15
+9
-2
components/RecipeContent.js
components/RecipeContent.tsx
+9
-2
components/RecipeContent.js
components/RecipeContent.tsx
···
1
1
import { micromark } from "micromark";
2
+
import type Recipe from "@/types/Recipe";
3
+
4
+
interface RecipeContentProps {
5
+
recipe: Recipe;
6
+
}
2
7
3
-
export default function RecipeContent({ recipe }) {
8
+
export default function RecipeContent({
9
+
recipe,
10
+
}: RecipeContentProps): React.ReactElement {
4
11
const {
5
12
title,
6
13
date,
···
11
18
totalTime,
12
19
ingredients,
13
20
content,
14
-
} = recipe;
21
+
} = recipe as Recipe;
15
22
16
23
const dateObj = new Date(date);
17
24
return (
-37
components/RecipeSectionItem.js
-37
components/RecipeSectionItem.js
···
1
-
import Link from "next/link";
2
-
import { Component } from "react";
3
-
import Image from "next/image";
4
-
5
-
export default class RecipeSectionItem extends Component {
6
-
render() {
7
-
return (
8
-
<Link href={this.props.link} passHref>
9
-
<div
10
-
className="section-item h-32 sm:h-96 w-full sm:flex sm:flex-col grid grid-cols-3
11
-
group cursor-pointer transition hover:scale-105
12
-
sm:divide-y divide-x sm:divide-x-0 divide-stone-800 dark:divide-stone-100
13
-
overflow-hidden"
14
-
>
15
-
<div className="p-2 h-24 self-center content-center sm:self-start col-span-2">
16
-
<h3 className="mb-1 font-semibold">{this.props.name}</h3>
17
-
<p
18
-
className="text-stone-800 dark:text-stone-100
19
-
line-clamp-2"
20
-
>
21
-
{this.props.description}
22
-
</p>
23
-
</div>
24
-
<div className="h-full overflow-hidden">
25
-
<Image
26
-
className="h-full w-full object-cover overflow-hidden"
27
-
src={this.props.icon}
28
-
width={"600"}
29
-
height={"600"}
30
-
alt={`Thumbnail of ${this.props.name}`}
31
-
></Image>
32
-
</div>
33
-
</div>
34
-
</Link>
35
-
);
36
-
}
37
-
}
+46
components/RecipeSectionItem.tsx
+46
components/RecipeSectionItem.tsx
···
1
+
import Link from "next/link";
2
+
import Image from "next/image";
3
+
4
+
interface Props {
5
+
link: string;
6
+
description: string;
7
+
icon: string;
8
+
name: string;
9
+
}
10
+
11
+
export default function RecipeSectionItem({
12
+
link,
13
+
description,
14
+
icon,
15
+
name,
16
+
}: Props): React.ReactElement {
17
+
return (
18
+
<Link href={link} passHref>
19
+
<div
20
+
className="section-item h-32 sm:h-96 w-full sm:flex sm:flex-col grid grid-cols-3
21
+
group cursor-pointer transition hover:scale-105
22
+
sm:divide-y divide-x sm:divide-x-0 divide-stone-800 dark:divide-stone-100
23
+
overflow-hidden"
24
+
>
25
+
<div className="p-2 h-24 self-center content-center sm:self-start col-span-2">
26
+
<h3 className="mb-1 font-semibold">{name}</h3>
27
+
<p
28
+
className="text-stone-800 dark:text-stone-100
29
+
line-clamp-2"
30
+
>
31
+
{description}
32
+
</p>
33
+
</div>
34
+
<div className="h-full overflow-hidden">
35
+
<Image
36
+
className="h-full w-full object-cover overflow-hidden"
37
+
src={icon}
38
+
width={"600"}
39
+
height={"600"}
40
+
alt={`Thumbnail of ${name}`}
41
+
></Image>
42
+
</div>
43
+
</div>
44
+
</Link>
45
+
);
46
+
}
-5
components/SectionList.js
-5
components/SectionList.js
+11
components/SectionList.tsx
+11
components/SectionList.tsx
+11
-4
components/SocialLink.js
components/SocialLink.tsx
+11
-4
components/SocialLink.js
components/SocialLink.tsx
···
1
-
export default function SocialLink({ href, icon, children }) {
1
+
interface Props {
2
+
href: string;
3
+
icon?: string;
4
+
children: React.ReactNode;
5
+
}
6
+
7
+
export default function SocialLink({
8
+
href,
9
+
icon,
10
+
children,
11
+
}: Props): React.ReactElement {
2
12
const iconURL = icon ? icon : new URL(href).origin + "/favicon.ico";
3
-
// console.log("Social link for", href);
4
-
// console.log("icon", icon);
5
-
// console.log("iconUrl:", iconURL);
6
13
7
14
return (
8
15
<a