「Docusaurus」タグの記事が11件件あります

シェアボタンを実装する​

このサイトの各記事に、SNSで共有するためのシェアボタンを設置しました。この記事では、その実装プロセスと、背景にある技術的な判断などについて記録します。

完成したコンポーネントの特長は、ページのタイトルとURLを自動で取得する点です。これにより、一度設置すれば、記事ごとに特別な設定を追加する必要がなく、メンテナンスの手間がかかりません。

この記事では、Docusaurusサイト内に、国内外のニュースサイトを一覧できる「ニュースページ」を実装した際の整理をします。

1. ページの目的と主要機能​

個人的な情報収集の起点として、信頼できるニュースソースへ素早くアクセスできるページの構築が目的。すべて静的ページとしてビルドし、高速な表示や利便性、メンテナンス性を重視しました。。

ブラウザメモ機能：URL共有とUI/UX改善の実装記録​

はじめに​

以前に実装した ブラウザメモ 機能 について

これまでの使用感や競合サービスの調査の結果、大幅な機能改善を実施。

本記事では、URLによるメモ共有機能の実装と、その過程で行ったUI/UX改善の技術的ポイントを整理します。

当サイト（Docusaurus）のドキュメント記事に、情報の鮮度を示す「最終更新日」を表示させる簡単な実装方法の整理します。 Docsフォルダには、Blogフォルダのように、作成日など日付の記載がデフォルトではされないようなので追加することを決定しました。 Gitの履歴に依存せず、CI/CDの設定変更も不要な、Front Matterを利用した方法の採用しました。

参考資料:

• https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#last_update

Docusaurusサイトの主要UI、ナビゲーションバーとフッターを国際化（i18n）編集した際の備忘録として整理します。

1. 目的​

Docusaurusのi18n機能は、サイトのテキストを多言語に対応させるための仕組み。今回は、ナビゲーションバーとフッター に新しい項目を追加し、それを日本語（デフォルト）から英語へ翻訳するまでの流れを解説します。

この記事では、Docusaurus で構築したサイトに多言語対応（i18n）機能を実装し、日本語（デフォルト）と英語のコンテンツを切り替えられるように設定した際の手順を整理します。

公式ドキュメントを参考にしつつ、Docker 環境でのコマンドや、デプロイ前の確実な動作確認方法など、実践で役立つポイントも交えて解説します。

前提環境:

• サイトジェネレーター: Docusaurus (プロジェクトセットアップ済み)
• 開発環境: Docker (ローカル環境のコマンドも併記)
• 目標: 日本語(ja)と英語(en)の2言語に対応させる

この記事では、Docusaurus v3 で構築したサイトに国際化（i18n）機能を追加した際、直面した2つの厄介な問題、「クライアントサイドのルーティング崩壊」と「Cloud Runでのコンテナ起動失敗」について、その原因特定から解決までの道のりを記録したものです。

前提環境:

• サイトジェネレーター: Docusaurus v3
• ホスティング: Google Cloud Run
• 開発・デプロイ: Docker, GitHub Actions
• パッケージマネージャー: pnpm

この記事では、DocusaurusサイトにReactとTypeScriptを利用して、クライアントサイドで動作するシンプルなブラウザメモ機能を実装した際の主要な仕様と技術的ポイントを整理。

1. 基本機能と目的​

ユーザーがブラウザ上で手軽にテキストメモを作成・保存し、次回訪問時にも内容を保持できる機能の提供。 サーバーサイドの処理を介さず、すべてクライアントサイド（ブラウザのlocalStorage）で完結させることによる手軽さと応答性を重視。

この記事では、Docusaurusサイトのナビゲーションバーにアイコンや特定の記号を表示させるための主要な編集パターンを3つ整理します。

1. テキスト・記号による表示​

ナビゲーションアイテムにアイコンや記号を表示する最も直接的かつ簡単な方法。Docusaurusの設定ファイル内でlabelプロパティに直接記述することで実現。

この記事では、Algolia DocSearch を使用して、サイト内検索機能を設定した際の手順と課題解決の経緯を整理します。

DocusaurusにAlgolia DocSearchを実装した際の記録​

参考：

• https://docusaurus.io/docs/search
• https://docsearch.algolia.com/docs/api/#indexname

採用サービス：

• Algolia DocSearch