From 42881ad4e2f02dd074df66fe02c25ed081f79090 Mon Sep 17 00:00:00 2001 From: Yu Watanabe Date: Thu, 15 Dec 2022 09:48:40 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=8F=E3=83=B3=E3=83=90=E3=83=BC?= =?UTF-8?q?=E3=82=AC=E3=83=BC=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=82=92?= =?UTF-8?q?=E9=96=8B=E3=81=8F=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AEaria-cont?= =?UTF-8?q?rols=E3=81=AE=E5=87=BA=E5=8A=9B=E3=82=92=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gatsby-plugin-algolia-config.ts | 2 +- src/components/shared/Header/Header.tsx | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/gatsby-plugin-algolia-config.ts b/gatsby-plugin-algolia-config.ts index c38c65749..aae08fff1 100644 --- a/gatsby-plugin-algolia-config.ts +++ b/gatsby-plugin-algolia-config.ts @@ -115,5 +115,5 @@ export const algoliaConfig = { indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME, queries: [...mdxQueries, ...airtableQueries], dryRun: process.env.BRANCH !== 'main', - continueOnFailure: false, + continueOnFailure: true, } diff --git a/src/components/shared/Header/Header.tsx b/src/components/shared/Header/Header.tsx index 013ae425c..45147c688 100644 --- a/src/components/shared/Header/Header.tsx +++ b/src/components/shared/Header/Header.tsx @@ -2,7 +2,7 @@ import { CSS_COLOR, CSS_SIZE } from '@Constants/style' import { LoginContext } from '@Context/LoginContext' import { useLocation } from '@reach/router' import { Link as LinkComponent } from 'gatsby' -import React, { FC, useContext, useState } from 'react' +import React, { FC, useContext, useEffect, useState } from 'react' import { AnchorButton, Cluster, FaBarsIcon, FaSearchIcon, defaultColor, Dialog as shrDialog } from 'smarthr-ui' import styled, { createGlobalStyle, css } from 'styled-components' @@ -23,9 +23,14 @@ type Props = { export const Header: FC = ({ isIndex = false }) => { const location = useLocation() const [isOpen, setIsOpen] = useState(false) + const [isClient, setIsClient] = useState(false) const { loginStatus, loginLabel } = useContext(LoginContext) + useEffect(() => { + setIsClient(typeof window !== 'undefined') + }, []) + const isCurrent = (url: string) => { const regexp = new RegExp(`${url}`) const pathname = location.pathname @@ -68,17 +73,19 @@ export const Header: FC = ({ isIndex = false }) => { { setIsOpen(true) }} title="メニューを開く" aria-haspopup="true" - aria-controls="panel-menu" > - {typeof window !== 'undefined' ? ( + {/* サーバー時は`document`が存在せずエラーになるため、Dialogコンポーネントをレンダリングしない */} + {isClient ? ( Date: Thu, 15 Dec 2022 15:40:32 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Algolia=E3=81=AE=E3=82=AA=E3=83=97=E3=82=B7?= =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=92=E5=85=83=E3=81=AB=E6=88=BB=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gatsby-plugin-algolia-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby-plugin-algolia-config.ts b/gatsby-plugin-algolia-config.ts index aae08fff1..c38c65749 100644 --- a/gatsby-plugin-algolia-config.ts +++ b/gatsby-plugin-algolia-config.ts @@ -115,5 +115,5 @@ export const algoliaConfig = { indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME, queries: [...mdxQueries, ...airtableQueries], dryRun: process.env.BRANCH !== 'main', - continueOnFailure: true, + continueOnFailure: false, } From 50cfe2b7649a250937243d9c07051c598862be82 Mon Sep 17 00:00:00 2001 From: Yu Watanabe Date: Thu, 15 Dec 2022 17:05:15 +0900 Subject: [PATCH 3/3] =?UTF-8?q?useEffect=E3=82=92=E4=BD=BF=E3=82=8F?= =?UTF-8?q?=E3=81=9A=E3=80=81=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=BC=E3=82=B9=E3=83=9B=E3=83=AB=E3=83=80?= =?UTF-8?q?=E3=83=BC=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99=E3=82=8B=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/Header/Header.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/shared/Header/Header.tsx b/src/components/shared/Header/Header.tsx index 45147c688..33025380c 100644 --- a/src/components/shared/Header/Header.tsx +++ b/src/components/shared/Header/Header.tsx @@ -2,7 +2,7 @@ import { CSS_COLOR, CSS_SIZE } from '@Constants/style' import { LoginContext } from '@Context/LoginContext' import { useLocation } from '@reach/router' import { Link as LinkComponent } from 'gatsby' -import React, { FC, useContext, useEffect, useState } from 'react' +import React, { FC, useContext, useState } from 'react' import { AnchorButton, Cluster, FaBarsIcon, FaSearchIcon, defaultColor, Dialog as shrDialog } from 'smarthr-ui' import styled, { createGlobalStyle, css } from 'styled-components' @@ -23,14 +23,9 @@ type Props = { export const Header: FC = ({ isIndex = false }) => { const location = useLocation() const [isOpen, setIsOpen] = useState(false) - const [isClient, setIsClient] = useState(false) const { loginStatus, loginLabel } = useContext(LoginContext) - useEffect(() => { - setIsClient(typeof window !== 'undefined') - }, []) - const isCurrent = (url: string) => { const regexp = new RegExp(`${url}`) const pathname = location.pathname @@ -73,19 +68,18 @@ export const Header: FC = ({ isIndex = false }) => { { setIsOpen(true) }} title="メニューを開く" aria-haspopup="true" + aria-controls="panel-menu" > {/* サーバー時は`document`が存在せずエラーになるため、Dialogコンポーネントをレンダリングしない */} - {isClient ? ( + {typeof window !== 'undefined' ? ( = ({ isIndex = false }) => { - ) : null} + ) : ( + // id="panel-menu"の要素が存在しないと、ボタンの`aria-controls="panel-menu"`が不正になるため、SSR時のプレースホルダーを出力する + + )}