Skip to content

Commit b0fc24c

Browse files
MikuroXinaMikuroXina
authored
fix: Fix theme corruption (#478)
* Migrate dependencies * Migrate base utils * Migrate components * Fix ThemeChangeButton * Add Link to bring back external links * Fix splash animation * Fix blog theming
1 parent f464c74 commit b0fc24c

20 files changed

Lines changed: 1149 additions & 527 deletions

‎gatsby-config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ const config: GatsbyConfig = {
1010
// Learn more at: https://gatsby.dev/graphql-typegen
1111
graphqlTypegen: true,
1212
plugins: [
13-
"@chakra-ui/gatsby-plugin",
1413
"gatsby-plugin-sass",
1514
"gatsby-plugin-sitemap",
1615
{

‎package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,14 @@
1616
"prepare": "husky"
1717
},
1818
"dependencies": {
19-
"@chakra-ui/gatsby-plugin": "^3.1.3",
20-
"@chakra-ui/react": "^2.8.0",
21-
"@chakra-ui/styled-system": "^2.9.1",
19+
"@chakra-ui/react": "^3.27.0",
2220
"@chakra-ui/theme-tools": "^2.0.16",
2321
"@emotion/react": "^11.11.1",
24-
"@emotion/styled": "^11.11.0",
2522
"@fortawesome/fontawesome-svg-core": "^6.5.1",
2623
"@fortawesome/free-brands-svg-icons": "^6.4.0",
2724
"@fortawesome/free-solid-svg-icons": "^6.4.0",
2825
"@fortawesome/react-fontawesome": "^0.2.0",
2926
"date-fns": "^4.0.0",
30-
"framer-motion": "^11.0.0",
3127
"gatsby": "^5.13.7",
3228
"gatsby-omni-font-loader": "^2.0.2",
3329
"gatsby-plugin-manifest": "^5.13.1",
@@ -40,8 +36,10 @@
4036
"markdown-it-emoji": "^3.0.0",
4137
"markdown-it-footnote": "^4.0.0",
4238
"markdown-it-front-matter": "^0.2.3",
39+
"next-themes": "^0.4.6",
4340
"react": "^18.2.0",
4441
"react-dom": "^18.2.0",
42+
"react-icons": "^5.5.0",
4543
"yaml": "^2.3.4"
4644
},
4745
"devDependencies": {

‎pnpm-lock.yaml‎

Lines changed: 891 additions & 361 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/header.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,10 @@ import React from "react";
55
export const Header = (): JSX.Element => (
66
<Center as="header" w="100%" p={4} borderColor="shadowed" borderBottomWidth="2px">
77
<Flex as={Link} align="center" to="/">
8-
<Avatar
9-
w={8}
10-
h={8}
11-
mr={2}
12-
borderRadius="37%"
13-
name="Approversロゴ"
14-
src="/android-chrome-192x192.png"
15-
/>
8+
<Avatar.Root>
9+
<Avatar.Fallback name="Approversロゴ" />
10+
<Avatar.Image w={8} h={8} mr={2} borderRadius="37%" src="/android-chrome-192x192.png" />
11+
</Avatar.Root>
1612
<Heading as="span">Approvers</Heading>
1713
</Flex>
1814
</Center>

‎src/components/link.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { ComponentProps } from "react";
2+
import { Link as ChakraLink, chakra, defineRecipe } from "@chakra-ui/react";
3+
4+
const linkRecipe = defineRecipe({
5+
base: {
6+
fontStyle: "italic",
7+
textDecoration: "underline",
8+
},
9+
});
10+
11+
export const Link: (props: ComponentProps<ChakraLink>) => React.JSX.Element = chakra(
12+
ChakraLink,
13+
linkRecipe,
14+
);
15+
16+
export const ExternalLink = (props: ComponentProps<typeof Link>): React.JSX.Element => (
17+
<Link target="_blank" rel="noopener noreferrer" {...props} />
18+
);

‎src/components/navigation.tsx‎

Lines changed: 28 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,9 @@
1-
import {
2-
Button,
3-
Container,
4-
Drawer,
5-
DrawerBody,
6-
DrawerCloseButton,
7-
DrawerContent,
8-
DrawerHeader,
9-
DrawerOverlay,
10-
VStack,
11-
useColorMode,
12-
useColorModeValue,
13-
useDisclosure,
14-
} from "@chakra-ui/react";
15-
import React, { useRef } from "react";
1+
import { Button, Container, Drawer, VStack } from "@chakra-ui/react";
2+
import { ColorModeIcon, OppositeColorModeIcon, useColorMode } from "../utils/color-mode";
163
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
174
import { Link } from "gatsby";
5+
import React from "react";
186
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
19-
import { faMoon } from "@fortawesome/free-solid-svg-icons/faMoon";
20-
import { faSun } from "@fortawesome/free-solid-svg-icons/faSun";
217

228
export interface LinksProps {
239
links: readonly Readonly<{
@@ -40,45 +26,40 @@ const Links = ({ links }: LinksProps): JSX.Element => (
4026

4127
const ThemeChangeButton = (): JSX.Element => {
4228
const { toggleColorMode } = useColorMode();
43-
44-
const currentTheme = <FontAwesomeIcon icon={useColorModeValue(faSun, faMoon)} />;
45-
const oppositeTheme = <FontAwesomeIcon icon={useColorModeValue(faMoon, faSun)} />;
46-
4729
return (
48-
<Button leftIcon={currentTheme} onClick={toggleColorMode} rightIcon={oppositeTheme}>
30+
<Button onClick={toggleColorMode}>
31+
<ColorModeIcon />
4932
→
33+
<OppositeColorModeIcon />
5034
</Button>
5135
);
5236
};
5337

5438
export const Navigation = (props: LinksProps): JSX.Element => {
55-
const { isOpen, onOpen, onClose } = useDisclosure();
56-
const btnRef = useRef(null);
57-
5839
return (
59-
<>
60-
<Button
61-
ref={btnRef}
62-
pos="fixed"
63-
zIndex={100}
64-
bottom={0}
65-
m={8}
66-
leftIcon={<FontAwesomeIcon icon={faBars} />}
67-
onClick={onOpen}
68-
>
69-
メニュー
70-
</Button>
71-
<Drawer finalFocusRef={btnRef} isOpen={isOpen} onClose={onClose} placement="left">
72-
<DrawerOverlay />
73-
<DrawerContent>
74-
<DrawerCloseButton />
75-
<DrawerHeader borderBottomWidth="1px">Approvers</DrawerHeader>
76-
<DrawerBody>
40+
<Drawer.Root placement="left">
41+
<Drawer.Backdrop />
42+
<Drawer.Trigger asChild>
43+
<Button
44+
pos="fixed"
45+
zIndex={100}
46+
bottom={0}
47+
m={8}
48+
leftIcon={<FontAwesomeIcon icon={faBars} />}
49+
>
50+
メニュー
51+
</Button>
52+
</Drawer.Trigger>
53+
<Drawer.Positioner>
54+
<Drawer.Content>
55+
<Drawer.CloseTrigger />
56+
<Drawer.Header borderBottomWidth="1px">Approvers</Drawer.Header>
57+
<Drawer.Body>
7758
<Links {...props} />
78-
</DrawerBody>
59+
</Drawer.Body>
7960
<ThemeChangeButton />
80-
</DrawerContent>
81-
</Drawer>
82-
</>
61+
</Drawer.Content>
62+
</Drawer.Positioner>
63+
</Drawer.Root>
8364
);
8465
};

‎src/components/providers.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { LazyMotion, domAnimation } from "framer-motion";
21
import { ChakraProvider } from "@chakra-ui/react";
2+
import { ColorModeProvider } from "../utils/color-mode";
33
import React from "react";
4-
import { theme } from "../lib/theme";
4+
import { system } from "../lib/theme";
55
import { yearContext } from "../lib/year-context";
66

77
export function Providers({ children }: { children: React.ReactNode }) {
88
return (
99
<yearContext.Provider value={new Date().getFullYear()}>
10-
<LazyMotion features={domAnimation}>
11-
<ChakraProvider theme={theme}>{children}</ChakraProvider>
12-
</LazyMotion>
10+
<ChakraProvider value={system}>
11+
<ColorModeProvider children={children} />
12+
</ChakraProvider>
1313
</yearContext.Provider>
1414
);
1515
}

‎src/components/questions.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Container, Link, Text, VStack } from "@chakra-ui/react";
1+
import { Container, Text, VStack } from "@chakra-ui/react";
2+
import { ExternalLink } from "./link";
23
import React from "react";
34
import type { ReactNode } from "react";
45

@@ -31,9 +32,9 @@ const questionAnswers = [
3132
answer: (
3233
<>
3334
こちらへどうぞ &rarr;{" "}
34-
<Link href="https://twitter.com/search?q=%23限界開発鯖&src=typed_query" isExternal>
35+
<ExternalLink href="https://twitter.com/search?q=%23限界開発鯖&src=typed_query">
3536
#限界開発鯖
36-
</Link>
37+
</ExternalLink>
3738
</>
3839
),
3940
},

‎src/components/sns-link.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { ExternalLink } from "./link";
12
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
23
import type { IconDefinition } from "@fortawesome/free-brands-svg-icons";
3-
import { Link } from "@chakra-ui/react";
44
import React from "react";
55
import type { SNSLinkInfo } from "../lib/member-fetch";
66
import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
@@ -20,14 +20,13 @@ const icons: Record<SNSLinkInfo["type"], Icon> = {
2020
export const SNSLink = ({ type, name }: SNSLinkInfo): JSX.Element => {
2121
const { icon } = icons[type];
2222
return (
23-
<Link
23+
<ExternalLink
2424
w={["1rem", "1.2rem"]}
2525
h={["1rem", "1.2rem"]}
2626
color="highlighted"
2727
href={`https://${type}.com/${name}`}
28-
isExternal
2928
>
3029
<FontAwesomeIcon icon={icon} />
31-
</Link>
30+
</ExternalLink>
3231
);
3332
};

‎src/lib/theme.ts‎

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,40 @@
1-
import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
2-
import { extendTheme } from "@chakra-ui/react";
1+
import { createSystem, defaultConfig } from "@chakra-ui/react";
32

4-
export const boldUnderline = "linear(transparent 70%, shadowed 0%)";
5-
6-
export const theme = extendTheme({
7-
font: {
8-
body: `YakuHanJP,
9-
Roboto,
10-
-apple-system,
11-
BlinkMacSystemFont,
12-
"Segoe UI",
13-
Oxygen,
14-
Ubuntu,
15-
Cantarell,
16-
"Fira Sans",
17-
"Droid Sans",
18-
"Helvetica Neue",
19-
sans-serif`,
20-
},
21-
semanticTokens: {
22-
colors: {
23-
highlighted: {
24-
default: "green.700",
25-
_dark: "green.200",
3+
export const system = createSystem(defaultConfig, {
4+
theme: {
5+
tokens: {
6+
fonts: {
7+
body: `YakuHanJP,
8+
Roboto,
9+
-apple-system,
10+
BlinkMacSystemFont,
11+
"Segoe UI",
12+
Oxygen,
13+
Ubuntu,
14+
Cantarell,
15+
"Fira Sans",
16+
"Droid Sans",
17+
"Helvetica Neue",
18+
sans-serif`,
2619
},
27-
shadowed: {
28-
default: "green.200",
29-
_dark: "green.700",
20+
gradients: {
21+
boldUnderline: { value: "linear-gradient(transparent 70%, {colors.shadowed} 0%)" },
3022
},
3123
},
32-
},
33-
styles: {
34-
global: (props: StyleFunctionProps) => ({
35-
"::selection": {
36-
bg: mode("green.300", "green.600")(props),
24+
semanticTokens: {
25+
colors: {
26+
highlighted: {
27+
value: { base: "{colors.green.700}", _dark: "{colors.green.200}" },
28+
},
29+
shadowed: {
30+
value: { base: "{colors.green.200}", _dark: "{colors.green.700}" },
31+
},
3732
},
38-
}),
33+
},
3934
},
40-
components: {
41-
Link: {
42-
baseStyle: {
43-
fontStyle: "italic",
44-
textDecoration: "underline",
45-
},
35+
globalCss: {
36+
"::selection": {
37+
bg: { base: "green.300", _dark: "green.600" },
4638
},
4739
},
4840
config: {

0 commit comments

Comments
 (0)