diff --git a/README.ja.md b/README.ja.md deleted file mode 100644 index c2ed5b7..0000000 --- a/README.ja.md +++ /dev/null @@ -1,87 +0,0 @@ -# Gatsby Plugin Fix FOUC - -Gatsby Plugin Fix FOUC は、ページ読み込み時にスタイルが変化してちらつく問題 (FOUC - flash of unstyled content) を解決するプラグインです。 - -Gatsby v3 - v5 をサポートしています。 - -
- -ビフォーアフターの画面収録 (注意: gifアニメを使用しています) - -| ビフォー | アフター | -| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| ![崩れたスタイルが一瞬表示されている画面](/docs/readme-images/without-plugin-movie.gif) | ![Gatsby のレンダリングが行われるまでページを隠すことで、崩れたスタイルが表示されていない画面](/docs/readme-images/with-plugin-movie.gif) | - -
- -## 仕組み - -`` 要素に data 属性を追加し、クライアント側で Gatsby のレンダリングが行われるまでページを非表示にすることで、ちらつきが表示されないようにします。 - -このアプローチは、[Google](https://developers.google.com/optimize/) でも採用されています。再レンダリングが不要で、パフォーマンスやアクセシビリティに影響を与えません。 - -## トレードオフ - -Lighthouse のスコア (First Contentful Paint, Largest Contentful Paint) が低下します。 結果として、SEO に影響を与える可能性があります。 (ただし、Cumulative Layout Shift のスコアは改善します)。 - -`minWidth` を設定することで、画面を隠さない幅を指定することができます。 - -## インストール - -```bash -yarn add gatsby-plugin-fix-fouc - -# or - -npm install gatsby-plugin-fix-fouc -``` - -## 使用方法 - -```js -// gatsby-config.js - -module.exports = { - plugins: [`gatsby-plugin-fix-fouc`], -}; -``` - -## 高度な使用方法 - -```ts -// gatsby-config.ts - -import { breakpoints } from "./src/themes"; - -import type { GatsbyConfig } from "gatsby"; -import type { GatsbyPluginFixFoucRefOptions } from "gatsby-plugin-fix-fouc"; - -const config: GatsbyConfig = { - plugins: [ - { - resolve: `gatsby-plugin-fix-fouc`, - options: { - attributeName: "is-loading", - minWidth: breakpoints.values.sm, - timeout: 3000, - } as GatsbyPluginFixFoucRefOptions, - }, - ], -}; - -export default config; -``` - -## 設定 - -| Property | Type | Default | Description | -| --------------- | ------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `attributeName` | string | `gatsby-plugin-fix-fouc-is-loading` | 追加する data-attribute 名 | -| `minWidth` | number | `0` | ページを非表示にする最小幅 (px)。設定しない場合は、幅に関係なく非表示になります | -| `timeout` | number | `4000` | Gatsby レンダリングが完了しなかった場合でも、フォールバックとして表示するまでの時間(ミリ秒)を指定します | - -## ライセンス - -MIT License - -[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fbicstone%2Fgatsby-plugin-fix-fouc.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fbicstone%2Fgatsby-plugin-fix-fouc?ref=badge_large) diff --git a/README.md b/README.md index d00aefe..1e4cd79 100644 --- a/README.md +++ b/README.md @@ -14,15 +14,13 @@ Gatsby Plugin Fix FOUC is a plugin that solves flash of unstyled content. Supports Gatsby v3 - v5 -[日本語による説明はこちら](./README.ja.md) -
Screen records when plugin is used (note, used gif animation images) -| Without Plugin | With Plugin | -| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| ![Screen records that flicker is occurring during react hydrate.](/docs/readme-images/without-plugin-movie.gif) | ![Screen records that no flickering occurs because the page is hidden.](/docs/readme-images/with-plugin-movie.gif) | +| Without Plugin | With Plugin | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| ![Screen records that flicker is occurring during react hydrate.](./docs/readme-images/without-plugin-movie.gif) | ![Screen records that no flickering occurs because the page is hidden.](./docs/readme-images/with-plugin-movie.gif) |
diff --git a/package.json b/package.json index 37e03a9..c8ef8b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-plugin-fix-fouc", - "version": "1.0.0", + "version": "1.0.1", "description": "Gatsby Plugin Fix FOUC is a plugin that solves flicker of unstyled content", "main": "index.js", "types": "index.d.ts",