6 posts tagged with "TypeScript"

In a previous article, I explained how to integrate Decap CMS into a Docusaurus site. While the integration established a foundation for content updates, I felt there was room for improvement in daily use, especially regarding mobile usability and the efficiency of routine data entry.

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

This article introduces the practical customizations I applied to static/admin/config.yml and static/admin/index.html to address these challenges.

• Optimizing config.yml: Settings to reduce manual input and prevent errors.
• Modifying index.html: Adding CSS and JavaScript to improve mobile usability.

These tunings have created an environment where I can comfortably update articles not only from a PC but also from a smartphone. I hope this serves as a useful example of leveraging the high customizability of a Git-based CMS.

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 is a record from when it was written. For the continuously maintained procedure, see the technical documentation version.

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.

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

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.

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

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