this repo has no description www.baileykane.co/
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Convert to typescript

BK610 05be8431 ed4cc66c

+251 -172
+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
··· 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
··· 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
··· 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
··· 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
··· 1 - import { Component } from "react"; 2 - 3 - export default class MissingContent extends Component { 4 - render() { 5 - return <div>The content you're looking for seems to be missing, friend 😕</div>; 6 - } 7 - }
+5
components/MissingContent.tsx
··· 1 + export default function MissingContent(): React.ReactElement { 2 + return ( 3 + <div>The content you're looking for seems to be missing, friend 😕</div> 4 + ); 5 + }
-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
··· 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 + }
+20 -4
components/NavBar.js components/NavBar.tsx
··· 17 17 // return upURL; 18 18 // } 19 19 20 - const NavItem = ({ link, title, icon, animation }) => { 20 + interface NavItemProps { 21 + link: string; 22 + title: string; 23 + icon?: string; 24 + animation?: string; 25 + } 26 + 27 + function NavItem({ 28 + link, 29 + title, 30 + icon, 31 + animation, 32 + }: NavItemProps): React.ReactElement { 21 33 return ( 22 34 <Link href={link}> 23 35 <div ··· 39 51 </div> 40 52 </Link> 41 53 ); 42 - }; 54 + } 43 55 44 - export default function NavBar(props) { 56 + interface NavBarProps { 57 + className?: string; 58 + } 59 + 60 + export default function NavBar({ className }: NavBarProps): React.ReactElement { 45 61 const { asPath } = useRouter(); 46 62 47 63 var breadcrumbs = asPath.split("/"); ··· 50 66 // Shorthand for going up one URL level: "." 51 67 return ( 52 68 <nav 53 - className={`${props.className} py-2 select-none font-light text-sm text-stone-800 dark:text-stone-200 border-b border-stone-800 dark:border-stone-200`} 69 + className={`${className} py-2 select-none font-light text-sm text-stone-800 dark:text-stone-200 border-b border-stone-800 dark:border-stone-200`} 54 70 > 55 71 <NavItem link="/" title="home" icon="🏠" animation="wigglelg" /> 56 72 {breadcrumbs.map((breadcrumb, k) => (
+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
··· 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
··· 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
··· 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
··· 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
··· 1 - const SectionList = (props) => { 2 - return <div className={`gap-4 ${props.className}`}>{props.children}</div>; 3 - }; 4 - 5 - export default SectionList;
+11
components/SectionList.tsx
··· 1 + interface Props { 2 + className?: string; 3 + children: React.ReactNode; 4 + } 5 + 6 + export default function SectionList({ 7 + className, 8 + children, 9 + }: Props): React.ReactElement { 10 + return <div className={`gap-4 ${className}`}>{children}</div>; 11 + }
+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