hiroaki

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.

This article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

Related:

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

Restore Comfortable Typing on Your Mac​

When you're writing or coding on your Mac, have you ever held down a key like a, expecting it to repeat like aaaaa..., only to be interrupted by a menu of accented characters (like à)?

This is a handy macOS feature called "Press and Hold," but it can hinder your workflow, especially when you need to type the same character repeatedly for coding or writing.

This article provides a clear, step-by-step guide on how to disable this accent menu and enable traditional key repeat, even for those unfamiliar with macOS.

More Mac articles: Fixing custom wallpaper issues · Reclaiming 109GB of disk space · Fixing public Wi-Fi captive portals

This guide has been tested on the following environment:

• Mac: M1, 2020
• macOS: Sonoma 15.1 (24B83)

When implementing Algolia DocSearch on a multi-language (i18n) site built with Docusaurus, I faced the challenge of search results containing mixed languages. It's common for situations to arise that harm the user experience, such as English pages appearing in search results when searching in Japanese.

This article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

This article organizes the specific setup steps as a technical memo to solve this problem and achieve an optimal search experience that syncs with the site's display language.

This post outlines the setup procedure for integrating Google Analytics 4 (GA4) into our Docusaurus site for traffic analysis, serving as a technical memo.

This article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

Features:

• Integrate Google Analytics 4 (GA4) with a Docusaurus site.
• Enable site-wide traffic analysis.

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

For the basic i18n setup, see Procedure for Implementing Multi-language (i18n) Support on a Docusaurus Site.

Note that this article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

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.

See also the record of solving the routing and deployment issues that arose afterward, and the procedure for internationalizing the navbar and footer.

Note that this article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

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."

The basic i18n setup steps are covered in Procedure for Implementing Multi-language (i18n) Support on a Docusaurus Site.

Note that this article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

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.

This feature was later significantly extended in URL Sharing and UX Improvements.

Note that this article is a record from the time of implementation; for the continuously maintained procedure, see the technical documentation version.

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.

This article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

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 procedures and troubleshooting records from when I implemented a GitHub Action to detect new articles and post them to X as Twitter Cards.

This article is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

Feature: Detect new posts with GitHub Actions and post them to X as Twitter Cards.