fix: broken images due to base URL changes

blog/2022-06-04-rebranding.md

@@ -12,8 +12,10 @@ image: https://feature-sliced.github.io/documentation/img/blog/rebranding-stable
 hide_table_of_contents: false
 ---
 
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
 <div class="container text--center margin-vert--md">
-    <img src="/img/blog/rebranding-stable.png" alt="logo-primary" width="100%" />
+    <img src={useBaseUrl("/img/blog/rebranding-stable.png")} alt="logo-primary" width="100%" />
 </div>
 
 TLDR:

blog/2022-07-25-international-community.md

@@ -12,8 +12,10 @@ image: https://feature-sliced.github.io/documentation/img/blog/international-com
 hide_table_of_contents: false
 ---
 
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
 <div class="container text--center margin-vert--md">
-    <img src="/img/blog/international-community.png" alt="post-cover" width="100%" />
+    <img src={useBaseUrl("/img/blog/international-community.png")} alt="post-cover" width="100%" />
 </div>
 
 TLDR:

i18n/en/docusaurus-plugin-content-docs/current/branding.md

@@ -1,3 +1,5 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Branding Guidelines
 
 FSD's visual identity is based on its core-concepts: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`.
@@ -41,30 +43,30 @@ FSD has few variations of logo for different context, but it recommended to pref
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "linear-gradient(135deg, rgba(41,190,220,1) 0%, rgba(81,122,237,1) 100%)" }}>primary <br/> (#29BEDC, #517AED)</td>
-        <td><a href="/img/brand/logo-primary.png" download><img src="/img/brand/logo-primary.png" height="130" alt="logo-primary" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-primary.png")} download><img src={useBaseUrl("/img/brand/logo-primary.png")} height="130" alt="logo-primary" /></a></td>
         <td>Preferred in most cases</td>
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "#3193FF" }}>flat <br/> (#3193FF)</td>
-        <td><a href="/img/brand/logo-flat.png" download><img src="/img/brand/logo-flat.png" height="130" alt="logo-flat" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-flat.png")} download><img src={useBaseUrl("/img/brand/logo-flat.png")} height="130" alt="logo-flat" /></a></td>
         <td>For one-color context</td>
     </tr>
     <tr>
         <td style={{ color: "#000", background: "#FFF" }}>monochrome <br /> (#FFF)</td>
-        <td style={{ color: "#000", background: "#242526" }}><a href="/img/brand/logo-monochrome.png" download><img src="/img/brand/logo-monochrome.png" height="130" alt="logo-monocrhome" /></a></td>
+        <td style={{ color: "#000", background: "#242526" }}><a href={useBaseUrl("/img/brand/logo-monochrome.png")} download><img src={useBaseUrl("/img/brand/logo-monochrome.png")} height="130" alt="logo-monocrhome" /></a></td>
         <td>For grayscale context</td>
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "#3193FF" }}>square <br/> (#3193FF)</td>
-        <td><a href="/img/brand/logo-square.png" download><img src="/img/brand/logo-square.png" height="130" alt="logo-square" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-square.png")} download><img src={useBaseUrl("/img/brand/logo-square.png")} height="130" alt="logo-square" /></a></td>
         <td>For square boundaries</td>
     </tr>
 </table>
 
 ## Banners & Schemes
 
-<a href="/img/brand/banner-primary.jpg" download><img src="/img/brand/banner-primary.jpg" height="256" alt="banner-primary" /></a>
-<a href="/img/brand/banner-monochrome.jpg" download><img src="/img/brand/banner-monochrome.jpg" height="256" alt="banner-monochrome" /></a>
+<a href={useBaseUrl("/img/brand/banner-primary.jpg")} download><img src={useBaseUrl("/img/brand/banner-primary.jpg")} height="256" alt="banner-primary" /></a>
+<a href={useBaseUrl("/img/brand/banner-monochrome.jpg")} download><img src={useBaseUrl("/img/brand/banner-monochrome.jpg")} height="256" alt="banner-monochrome" /></a>
 
 ## Social Preview
 

i18n/en/docusaurus-plugin-content-docs/current/reference/layers.mdx

@@ -3,14 +3,16 @@ sidebar_position: 1
 pagination_next: reference/slices-segments
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Layers
 
 Layers are the first level of organisational hierarchy in Feature-Sliced Design. Their purpose is to separate code based on how much responsibility it needs and how many other modules in the app it depends on. Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to your code.
 
 There are **7 layers** in total, arranged from most responsibility and dependency to least:
 
-<img src="/img/layers/folders-graphic-light.svg#light-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
-<img src="/img/layers/folders-graphic-dark.svg#dark-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
+<img src={useBaseUrl("/img/layers/folders-graphic-light.svg#light-mode-only")} width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
+<img src={useBaseUrl("/img/layers/folders-graphic-dark.svg#dark-mode-only")} width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
 
 1. App
 2. Processes (deprecated)
@@ -32,7 +34,7 @@ Layers are made up of _slices_ — highly cohesive groups of modules. Dependenci
 
 For example, the folder `📁 ~/features/aaa` is a slice with the name "aaa". A file inside of it, `~/features/aaa/api/request.ts`, cannot import code from any file in `📁 ~/features/bbb`, but can import code from `📁 ~/entities` and `📁 ~/shared`, as well as any sibling code from `📁 ~/features/aaa`, for example, `~/features/aaa/lib/cache.ts`.
 
-Layers App and Shared are **exceptions** to this rule — they are both a layer and a slice at the same time. Slices partition code by business domain, and these two layers are exceptions because Shared does not have business domains, and App combines all business domains. 
+Layers App and Shared are **exceptions** to this rule — they are both a layer and a slice at the same time. Slices partition code by business domain, and these two layers are exceptions because Shared does not have business domains, and App combines all business domains.
 
 In practice, this means that layers App and Shared are made up of segments, and segments can import each other freely.
 
@@ -67,7 +69,7 @@ An entity slice might contain the data storage (`📁 model`), data validation s
 
 #### Entity relationships
 
-Entities in FSD are slices, and by default, slices cannot know about each other. In real life, however, entities often interact with each other, and sometimes one entity owns or contains other entities. Because of that, the business logic of these interactions is preferably kept in higher layers, like Features or Pages. 
+Entities in FSD are slices, and by default, slices cannot know about each other. In real life, however, entities often interact with each other, and sometimes one entity owns or contains other entities. Because of that, the business logic of these interactions is preferably kept in higher layers, like Features or Pages.
 
 When one entity's data object contains other data objects, usually it's a good idea to make the connection between the entities explicit and side-step the slice isolation by making a cross-reference API with the `@x` notation. The reason is that connected entities need to be refactored together, so it's best to make the connection impossible to miss.
 
@@ -92,7 +94,7 @@ Learn more about the `@x` notation in the [Public API for cross-imports][public-
 
 This layer is for the main interactions in your app, things that your users care to do. These interactions often involve business entities, because that's what the app is about.
 
-A crucial principle for using the Features layer effectively is: **not everything needs to be a feature**. A good indicator that something needs to be a feature is the fact that it is reused on several pages. 
+A crucial principle for using the Features layer effectively is: **not everything needs to be a feature**. A good indicator that something needs to be a feature is the fact that it is reused on several pages.
 
 For example, if the app has several editors, and all of them have comments, then comments are a reused feature. Remember that slices are a mechanism for finding code quickly, and if there are too many features, the important ones are drowned out.
 
@@ -102,13 +104,13 @@ A feature slice might contain the UI to perform the interaction like a form (`
 
 ### Widgets
 
-The Widgets layer is intended for large self-sufficient blocks of UI. Widgets are most useful when they are reused across multiple pages, or when the page that they belong to has multiple large independent blocks, and this is one of them. 
+The Widgets layer is intended for large self-sufficient blocks of UI. Widgets are most useful when they are reused across multiple pages, or when the page that they belong to has multiple large independent blocks, and this is one of them.
 
 If a block of UI makes up most of the interesting content on a page, and is never reused, it **should not be a widget**, and instead it should be placed directly inside that page.
 
 :::tip
 
-If you're using a nested routing system (like the router of [Remix][ext-remix]), it may be helpful to use the Widgets layer in the same way as a flat routing system would use the Pages layer — to create full router blocks, complete with related data fetching, loading states, and error boundaries. 
+If you're using a nested routing system (like the router of [Remix][ext-remix]), it may be helpful to use the Widgets layer in the same way as a flat routing system would use the Pages layer — to create full router blocks, complete with related data fetching, loading states, and error boundaries.
 
 In the same way, you can store page layouts on this layer.
 

i18n/en/docusaurus-plugin-content-docs/current/reference/public-api.md

@@ -2,6 +2,8 @@
 sidebar_position: 3
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Public API
 
 A public API is a _contract_ between a group of modules, like a slice, and the code that uses it. It also acts as a gate, only allowing access to certain objects, and only through that public API.
@@ -68,8 +70,8 @@ Circular import is when two or more files import each other in a circle.
 <!-- TODO: add backgrounds to the images below, check on mobile -->
 
 <figure>
-    <img src="/img/circular-import-light.svg#light-mode-only" width="60%" alt="Three files importing each other in a circle" />
-    <img src="/img/circular-import-dark.svg#dark-mode-only" width="60%" alt="Three files importing each other in a circle" />
+    <img src={useBaseUrl("/img/circular-import-light.svg#light-mode-only")} width="60%" alt="Three files importing each other in a circle" />
+    <img src={useBaseUrl("/img/circular-import-dark.svg#dark-mode-only")} width="60%" alt="Three files importing each other in a circle" />
     <figcaption>
         Pictured above: three files, `fileA.js`, `fileB.js`, and `fileC.js`, importing each other in a circle.
     </figcaption>

i18n/en/docusaurus-plugin-content-docs/current/reference/slices-segments.mdx

@@ -4,6 +4,8 @@ sidebar_position: 2
 pagination_next: reference/public-api
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Slices and segments
 
 ## Slices
@@ -19,8 +21,8 @@ The layers Shared and App don't contain slices. That is because Shared should co
 Slices are meant to be independent and highly cohesive groups of code files. The graphic below might help to visualize the tricky concepts of _cohesion_ and _coupling_:
 
 <figure>
-    <img src="/img/coupling-cohesion-light.svg#light-mode-only" alt="" />
-    <img src="/img/coupling-cohesion-dark.svg#dark-mode-only" alt="" />
+    <img src={useBaseUrl("/img/coupling-cohesion-light.svg#light-mode-only")} alt="" />
+    <img src={useBaseUrl("/img/coupling-cohesion-dark.svg#dark-mode-only")} alt="" />
     <figcaption>
         Image inspired by https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/
     </figcaption>

i18n/ja/docusaurus-plugin-content-docs/current/branding.md

@@ -1,3 +1,5 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
 # ブランドガイドライン
 
 FSDのビジュアルアイデンティティは、そのコアコンセプトである `Layered`、`Sliced self-contained parts`、`Parts & Compose`、`Segmented` に基づいています。しかし、私たちはFSDの哲学を反映し、簡単に認識できる美しいアイデンティティを目指しています。
@@ -40,30 +42,30 @@ FSDには異なるコンテキスト用のいくつかのロゴバリエーシ
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "linear-gradient(135deg, rgba(41,190,220,1) 0%, rgba(81,122,237,1) 100%)" }}>primary <br/> (#29BEDC, #517AED)</td>
-        <td><a href="/img/brand/logo-primary.png" download><img src="/img/brand/logo-primary.png" height="130" alt="logo-primary" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-primary.png")} download><img src={useBaseUrl("/img/brand/logo-primary.png")} height="130" alt="logo-primary" /></a></td>
         <td>ほとんどの場合に推奨されます</td>
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "#3193FF" }}>flat <br/> (#3193FF)</td>
-        <td><a href="/img/brand/logo-flat.png" download><img src="/img/brand/logo-flat.png" height="130" alt="logo-flat" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-flat.png")} download><img src={useBaseUrl("/img/brand/logo-flat.png")} height="130" alt="logo-flat" /></a></td>
         <td>単色コンテキスト用</td>
     </tr>
     <tr>
         <td style={{ color: "#000", background: "#FFF" }}>monochrome <br /> (#FFF)</td>
-        <td style={{ color: "#000", background: "#242526" }}><a href="/img/brand/logo-monochrome.png" download><img src="/img/brand/logo-monochrome.png" height="130" alt="logo-monocrhome" /></a></td>
+        <td style={{ color: "#000", background: "#242526" }}><a href={useBaseUrl("/img/brand/logo-monochrome.png")} download><img src={useBaseUrl("/img/brand/logo-monochrome.png")} height="130" alt="logo-monochrome" /></a></td>
         <td>白黒コンテキスト用</td>
     </tr>
     <tr>
         <td style={{ color: "#FFF", background: "#3193FF" }}>square <br/> (#3193FF)</td>
-        <td><a href="/img/brand/logo-square.png" download><img src="/img/brand/logo-square.png" height="130" alt="logo-square" /></a></td>
+        <td><a href={useBaseUrl("/img/brand/logo-square.png")} download><img src={useBaseUrl("/img/brand/logo-square.png")} height="130" alt="logo-square" /></a></td>
         <td>正方形サイズ用</td>
     </tr>
 </table>
 
 ## バナーとスキーム {#banners--schemes}
 
-<a href="/img/brand/banner-primary.jpg" download><img src="/img/brand/banner-primary.jpg" height="256" alt="banner-primary" /></a>
-<a href="/img/brand/banner-monochrome.jpg" download><img src="/img/brand/banner-monochrome.jpg" height="256" alt="banner-monochrome" /></a>
+<a href={useBaseUrl("/img/brand/banner-primary.jpg")} download><img src={useBaseUrl("/img/brand/banner-primary.jpg")} height="256" alt="banner-primary" /></a>
+<a href={useBaseUrl("/img/brand/banner-monochrome.jpg")} download><img src={useBaseUrl("/img/brand/banner-monochrome.jpg")} height="256" alt="banner-monochrome" /></a>
 
 ## ソーシャルプレビュー
 

i18n/ja/docusaurus-plugin-content-docs/current/reference/layers.mdx

@@ -3,14 +3,16 @@ sidebar_position: 1
 pagination_next: reference/slices-segments
 ---
 
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
 # レイヤー
 
 レイヤーは、Feature-Sliced Designにおける組織階層の最初のレベルです。その目的は、コードを責任の程度やアプリ内の他のモジュールへの依存度に基づいて分離することです。各レイヤーは、コードにどれだけの責任を割り当てるべきかを判断するための特別な意味を持っています。
 
 合計で**7つのレイヤー**があり、責任と依存度が最も高いものから最も低いものへと配置されています。
 
-<img src="/img/layers/folders-graphic-light.svg#light-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
-<img src="/img/layers/folders-graphic-dark.svg#dark-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
+<img src={useBaseUrl("/img/layers/folders-graphic-light.svg#light-mode-only")} width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
+<img src={useBaseUrl("/img/layers/folders-graphic-dark.svg#dark-mode-only")} width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
 
 
 1. App (アップ)
@@ -50,9 +52,9 @@ AppとSharedのレイヤーは、このルールの**例外**です。これら
 このレイヤーで通常見られるセグメントは次のとおりです。
 
 - `📁 api` — APIクライアントおよび特定のバックエンドエンドポイントへのリクエストを行う関数
-- `📁 ui` — アプリケーションのUIキット
+- `📁 ui` — アプリケーションのUIキット  
   このレイヤーのコンポーネントはビジネスロジックを含むべきではありませんが、ビジネスに関連することは許可されています。例えば、会社のロゴやページレイアウトをここに置くことができます。UIロジックを持つコンポーネントも許可されています（例えば、オートコンプリートや検索バー）
-- `📁 lib` — 内部ライブラリのコレクション
+- `📁 lib` — 内部ライブラリのコレクション  
   このフォルダーはヘルパーやユーティリティとして扱うべきではありません（[なぜこれらのフォルダーがしばしばダンプに変わるか][ext-sova-utility-dump]）。このフォルダー内の各ライブラリは、日付、色、テキスト操作など、1つの焦点を持つべきです。その焦点はREADMEファイルに文書化されるべきです。チームの開発者は、これらのライブラリに何を追加でき、何を追加できないかを知っているべきです
 - `📁 config` — 環境変数、グローバルフィーチャーフラグ、アプリの他のグローバル設定
 - `📁 routes` — ルート定数、またはルートをマッチさせるためのパターン