Merge pull request #462 from jsconfjp/refactor/fixes

Refactor/fixes
jsconfjp · Oct 19, 2024 · bfa5d1a · bfa5d1a
2 parents 4553f8c + 33d6fe0
commit bfa5d1a
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 148 deletions.
diff --git a/2024/gatsby-config.js b/2024/gatsby-config.js
@@ -20,7 +20,6 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-typescript`,
-    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-zopfli`,
     `gatsby-plugin-brotli`,

diff --git a/2024/package-lock.json b/2024/package-lock.json
diff --git a/2024/package.json b/2024/package.json
@@ -28,7 +28,6 @@
     "gatsby": "^5.13.4",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
-    "gatsby-plugin-react-helmet": "^6.13.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-source-filesystem": "^5.13.1",
     "gatsby-transformer-sharp": "^5.13.1",

diff --git a/2024/src/components/Layout.tsx b/2024/src/components/Layout.tsx
@@ -1,5 +1,9 @@
 import React, { useCallback } from "react"
-import styled, { ThemeProvider } from "styled-components"
+import styled, {
+  StyleSheetManager,
+  ThemeProvider,
+  WebTarget,
+} from "styled-components"
 import { useStaticQuery, graphql } from "gatsby"
 import { useTranslation } from "react-i18next"
 
@@ -69,6 +73,11 @@ const BackToTopButton = styled.button`
   background-color: ${({ theme }) => theme.colors.primary};
 `
 
+function shouldForwardProp(_propName: string, _target: WebTarget) {
+  // See: https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6
+  return true
+}
+
 export function Layout({ children, background }: Props) {
   const { t, i18n } = useTranslation()
   const onChangeLanguage = useCallback(
@@ -97,7 +106,7 @@ export function Layout({ children, background }: Props) {
 
   return (
     <ThemeProvider theme={theme}>
-      <>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <GlobalStyle />
         <OnlyMobile>
           <HeaderMobile
@@ -130,7 +139,7 @@ export function Layout({ children, background }: Props) {
           </BackToTopBox>
         </MainBox>
         <Footer />
-      </>
+      </StyleSheetManager>
     </ThemeProvider>
   )
 }
diff --git a/2024/src/components/LinkButton.tsx b/2024/src/components/LinkButton.tsx
@@ -69,15 +69,15 @@ const ExternalSecondaryBox = styled(ExternalBox)`
 
 export type Props = {
   color?: "primary" | "secondary"
-  size: "inline" | "normal" | "large"
+  size?: "inline" | "normal" | "large"
   to: string
-  disabled: boolean
   onClick?: MouseEventHandler
   children: React.ReactNode
 }
 
 export function LinkButton(props: Props) {
-  const { color, to, size, onClick, children } = props
+  const { color, to, onClick, children } = props
+  const size = props.size ?? "normal"
 
   if (!to?.startsWith("http")) {
     if (color === "primary") {
@@ -131,8 +131,3 @@ export function LinkButton(props: Props) {
     )
   }
 }
-
-LinkButton.defaultProps = {
-  disabled: false,
-  size: "normal",
-}
diff --git a/2024/src/components/Logo.tsx b/2024/src/components/Logo.tsx
@@ -2,15 +2,11 @@ import React from "react"
 import logo from "../images/logo.svg"
 
 type Props = {
-  size: number
+  size?: number
 }
 
-export function Logo(props: Props) {
-  const { size } = props
+export const Logo = (props: Props) => {
+  const size = props.size ?? 125
 
   return <img width={size} height={size} src={logo} alt="JSConf JP" />
 }
-
-Logo.defaultProps = {
-  size: 125,
-}
diff --git a/2024/src/components/Logo2023.tsx b/2024/src/components/Logo2023.tsx
@@ -2,15 +2,11 @@ import React from "react"
 import logo2023 from "../images/logo-2023.png"
 
 type Props = {
-  size: number
+  size?: number
 }
 
-export function Logo2023(props: Props) {
-  const { size } = props
+export const Logo2023 = (props: Props) => {
+  const size = props.size ?? 125
 
   return <img width={size} height={size} src={logo2023} alt="JSConf JP 2023" />
 }
-
-Logo2023.defaultProps = {
-  size: 125,
-}
diff --git a/2024/src/components/OptionalLink.tsx b/2024/src/components/OptionalLink.tsx
@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react"
+import { Link, GatsbyLinkProps } from "gatsby"
+
+export type OptionalLinkProps<TState> = Omit<
+  GatsbyLinkProps<TState>,
+  "to" | "align"
+> & {
+  to?: string | null
+}
+export const OptionalLink = forwardRef<
+  HTMLAnchorElement,
+  OptionalLinkProps<any>
+>((props, ref) => {
+  const { to, ...rest } = props
+  return to ? (
+    <Link ref={ref as any} to={to} {...rest} />
+  ) : (
+    <a ref={ref as any} {...rest} />
+  )
+})
diff --git a/2024/src/components/Seo.tsx b/2024/src/components/Seo.tsx
@@ -1,18 +1,21 @@
 import React from "react"
-import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
+import { useTranslation } from "react-i18next"
 
 type MetaProps = JSX.IntrinsicElements["meta"]
 
 type Props = {
   description?: string | null
-  lang: Languages
-  meta: MetaProps[]
+  lang?: Languages
+  meta?: MetaProps[]
   title?: string | null
   ogImage?: string
 }
 
-export function SEO({ description, ogImage, lang, meta, title }: Props) {
+export function SEO({ description, ogImage, meta, title }: Props) {
+  meta ??= []
+  description ??= ""
+
   const { site, logo } = useStaticQuery(graphql`
     query {
       site {
@@ -28,69 +31,36 @@ export function SEO({ description, ogImage, lang, meta, title }: Props) {
       }
     }
   `)
+  const {
+    i18n: { language },
+  } = useTranslation()
+  const lang = language ?? "en"
   const defaultOgImage = `${site.siteMetadata.siteUrl}${logo.publicURL}`
   const metaTitle = title || site.siteMetadata.title
   const metaDescription = description || site.siteMetadata.description
   return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      defaultTitle={site.siteMetadata.title}
-      title={title ?? undefined}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={(
-        [
-          {
-            name: `viewport`,
-            content: `width=device-width`,
-          },
-          {
-            name: `description`,
-            content: metaDescription,
-          },
-          {
-            property: `og:title`,
-            content: metaTitle,
-          },
-          {
-            property: `og:description`,
-            content: metaDescription,
-          },
-          {
-            property: `og:image`,
-            content: ogImage
-              ? `${site.siteMetadata.siteUrl}${ogImage}`
-              : defaultOgImage,
-          },
-          {
-            property: `og:type`,
-            content: `website`,
-          },
-          {
-            name: `twitter:card`,
-            content: `summary`,
-          },
-          {
-            name: `twitter:creator`,
-            content: site.siteMetadata.author,
-          },
-          {
-            name: `twitter:title`,
-            content: title,
-          },
-          {
-            name: `twitter:description`,
-            content: metaDescription,
-          },
-        ] as MetaProps[]
-      ).concat(meta)}
-    />
+    <>
+      <html lang={lang} />
+      <title>
+        {title
+          ? `${title} | ${site.siteMetadata.title}`
+          : site.siteMetadata.title}
+      </title>
+      <meta name="description" content={metaDescription} />
+      <meta name="og:description" content={metaDescription} />
+      <meta name="og:title" content={metaTitle} />
+      <meta name="og:type" content="website" />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:creator" content={site.siteMetadata.author} />
+      <meta name="twitter:title" content={title ?? site.siteMetadata.title} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="viewport" content="width=device-width" />
+      <meta
+        name="og:image"
+        content={
+          ogImage ? `${site.siteMetadata.siteUrl}${ogImage}` : defaultOgImage
+        }
+      />
+    </>
   )
 }
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
diff --git a/2024/src/pages/index.tsx b/2024/src/pages/index.tsx
@@ -97,6 +97,8 @@ const SponsorBox = styled.div`
   }
 `
 
+export const Head = () => <SEO />
+
 export default function IndexPage() {
   const { t, i18n } = useTranslation()
   const {
@@ -261,7 +263,7 @@ export default function IndexPage() {
       subTitle: t("callForSponsors"),
       available: site.siteMetadata.sponsorFormUrl,
       render: () =>
-        site.siteMetadata.sponsorFormUrl ? (
+        false ? (
           <LinkButton
             color="primary"
             size="large"
@@ -270,7 +272,7 @@ export default function IndexPage() {
             {t("becomeASponsor")}
           </LinkButton>
         ) : (
-          <LinkButton size="large" disabled to={""}>
+          <LinkButton size="large" to={""}>
             {t("comingSoon")}
           </LinkButton>
         ),
@@ -295,7 +297,6 @@ export default function IndexPage() {
   return (
     <Layout>
       <WavyBox>
-        <SEO lang={i18n.language as Languages} />
         <Container>
           <Centerize>
             <Hero