11 posts tagged with "Docusaurus"

Implementing the Share Buttons​

I've added share buttons to each article on this site for social media sharing. This post documents the implementation process and the technical decisions behind it.

A key feature of the final component is its ability to automatically fetch the page title and URL. This means that once it's set up, there's no need for special configurations on a per-article basis, which minimizes maintenance.

This article outlines the key considerations and technical details involved in implementing a "News Page" on a Docusaurus site, designed to list domestic and international news sources.

1. Page Purpose and Key Features​

The primary goal was to build a personal information hub for quick access to reliable news sources. The page is built as a static site, emphasizing fast performance, usability, and maintainability.

Browser Memo Feature: A Log of URL Sharing and UI/UX Improvements​

Introduction​

Regarding the previously implemented Browser Memo feature.

Based on user experience and analysis of competing services, I have implemented significant feature enhancements.

This article outlines the key technical points of implementing a URL-based memo sharing feature and the UI/UX improvements made in the process.

Related:

• Previous Post:A Record of Implementing an In-Site Browser Memo Feature in Docusaurus

This post outlines a simple implementation for displaying a "Last Updated" date on our Docusaurus documentation articles to indicate the freshness of the information. Unlike the Blog folder, the Docs folder does not display creation dates by default, so we decided to add this feature. We opted for a method using Front Matter, which doesn't rely on Git history and requires no changes to our CI/CD setup.

References:

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

This post is a memo organizing the process of internationalizing (i18n) the main UI components of a Docusaurus site: the navbar and footer.

1. Purpose​

The Docusaurus i18n feature is a mechanism for making site text multi-lingual. This time, I'll explain the process of adding new items to the navbar and footer and translating them from Japanese (the default) to English.

This article organizes the steps I took to implement multi-language support (i18n) on a Docusaurus site, enabling content switching between Japanese (default) and English.

Based on the official documentation, this guide also includes practical tips for real-world scenarios, such as commands for a Docker environment and reliable methods for verifying functionality before deployment.

Prerequisites:

• Site Generator: Docusaurus (project already set up)
• Development Environment: Docker (local environment commands are also provided)
• Goal: To support two languages: Japanese (ja) and English (en)

This article is a record of the journey from identifying to resolving two tricky problems I encountered when adding internationalization (i18n) to a site built with Docusaurus v3: "client-side routing collapse" and "container startup failure on Cloud Run."

Prerequisites:

• Site Generator: Docusaurus v3
• Hosting: Google Cloud Run
• Development & Deployment: Docker, GitHub Actions
• Package Manager: pnpm

This article organizes the main specifications and technical points from when I implemented a simple, client-side browser memo feature on a Docusaurus site using React and TypeScript.

1. Basic Features and Purpose​

To provide a feature that allows users to easily create and save text memos in their browser, with the content persisting on subsequent visits. The focus is on ease of use and responsiveness by having everything run entirely on the client-side (using the browser's localStorage) without any server-side processing.

This article outlines three main patterns for displaying icons or specific symbols in the navigation bar of a Docusaurus site.

1. Displaying with Text and Symbols​

This is the most direct and simple method for displaying icons or symbols in navigation items. It is achieved by writing directly into the label property within the Docusaurus configuration file.

This article organizes the steps and troubleshooting process I went through when setting up a site search feature using Algolia DocSearch.

A Record of Implementing Algolia DocSearch in Docusaurus​

References:

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

Service Used:

• Algolia DocSearch