felschr/felschr.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add Bluesky link

Browse source
This commit is contained in:
Felix Schröter 2024-12-15 17:24:44 +01:00
parent 385fd7adcc
commit b8f3b3a986
Signed by: felschr
GPG key ID: 671E39E6744C807D
3 changed files with 56 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -33,7 +33,7 @@
"prism-themes": "^1.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-icons": "^4.7.1"
"react-icons": "^5.4.0"
},
"devDependencies": {
"@types/node": "^17.0.45",
@ -19101,9 +19101,9 @@
}
},
"node_modules/react-icons": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
"license": "MIT",
"peerDependencies": {
"react": "*"

2
package.json
View file

@ -39,7 +39,7 @@
"prism-themes": "^1.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-icons": "^4.7.1"
"react-icons": "^5.4.0"
},
"devDependencies": {
"@types/node": "^17.0.45",

78
src/components/organisms/Layout.tsx
View file

@ -1,30 +1,44 @@
import * as React from "react"
import { ReactNode, useMemo } from "react"
import { AppBar, Box, Button, Container, experimental_extendTheme as extendTheme, CssBaseline, Link, Toolbar, Typography, useTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript, Tooltip } from "@mui/material"
import CodeIcon from "@mui/icons-material/Code"
import GitHubIcon from "@mui/icons-material/GitHub"
import LinkedInIcon from "@mui/icons-material/LinkedIn"
import { BsMastodon } from "react-icons/bs"
import { FaGitlab } from "react-icons/fa"
import { Link as GatsbyLink } from "gatsby"
import { Footer } from "../atoms/Footer"
import * as React from "react";
import { ReactNode, useMemo } from "react";
import {
AppBar,
Box,
Button,
Container,
experimental_extendTheme as extendTheme,
CssBaseline,
Link,
Toolbar,
Typography,
useTheme,
Experimental_CssVarsProvider as CssVarsProvider,
getInitColorSchemeScript,
Tooltip,
} from "@mui/material";
import CodeIcon from "@mui/icons-material/Code";
import GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { BsMastodon } from "react-icons/bs";
import { FaGitlab, FaBluesky } from "react-icons/fa6";
import { Link as GatsbyLink } from "gatsby";
import { Footer } from "../atoms/Footer";
// this adds typings for using `theme.vars`
import type {} from "@mui/material/themeCssVarsAugmentation"
import type {} from "@mui/material/themeCssVarsAugmentation";
const pages = [
{ title: "Home", to: "/" },
{ title: "Blog", to: "/blog" },
]
];
type LayoutProps = {
pageTitle: string
preTitle?: ReactNode
children: ReactNode
}
pageTitle: string;
preTitle?: ReactNode;
children: ReactNode;
};
const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
const theme = useTheme()
const theme = useTheme();
return (
<main style={{ border: 0 }}>
@ -50,7 +64,6 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
>
Felix Schröter
</Typography>
<Box sx={{ flexGrow: 1, display: "flex", justifyContent: "end" }}>
{pages.map(({ title, to }) => (
<Button
@ -67,7 +80,9 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
</Toolbar>
</AppBar>
<Container style={{ marginTop: 68.5, marginBottom: 80, minHeight: "100%" }}>
<Container
style={{ marginTop: 68.5, marginBottom: 80, minHeight: "100%" }}
>
{preTitle}
<Typography variant="h1">{pageTitle}</Typography>
{children}
@ -89,18 +104,27 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
<BsMastodon size="1.25em" />
</Link>
</Tooltip>
<Tooltip title="Bluesky">
<Link rel="me" href="https://bsky.app/profile/felschr.com">
<FaBluesky size="1.25em" />
</Link>
</Tooltip>
<Tooltip title="LinkedIn">
<Link rel="me" href="https://www.linkedin.com/in/schroeter">
<LinkedInIcon />
</Link>
</Tooltip>
<Typography component={GatsbyLink} to="/terms-of-service" color="inherit">
<Typography
component={GatsbyLink}
to="/terms-of-service"
color="inherit"
>
Terms of Service
</Typography>
</Footer>
</main>
)
}
);
};
const theme = extendTheme({
colorSchemes: {
@ -109,8 +133,8 @@ const theme = extendTheme({
},
typography: {
h1: { fontSize: 48, paddingBottom: 20 },
}
})
},
});
const AppLayout = (props: LayoutProps) => {
return (
@ -119,7 +143,7 @@ const AppLayout = (props: LayoutProps) => {
<CssBaseline enableColorScheme />
<Layout {...props} />
</CssVarsProvider>
)
}
);
};
export default AppLayout
export default AppLayout;