Skip to main content

Docusaurus

Testing on Phone​

To serve a Docusaurus site on all network interfaces, you can use the command npm run start -- --host 0.0.0.0. This allows the development server to be accessible externally.

Adding authentication​

Aligning last edit time to local time zone​

The Issue​

On August 18, I installed Docusaurus for the first time and created several pages in the evening, committing them at around 8:03 PM EDT. The next day, I noticed that all pages were showing a last modified date of August 19, which was incorrect.

The Diagnosis​

Docusaurus's "last updated" function in the docs plugin uses the Git history to determine the timestamp of the last commit for a file. I verified this by examining the gitUtils.ts function and manually replicating the process. For example, running:

git -c log.showSignature=false log -- docs-vees-net/docs/rob/contact.md

outputs:

commit 501927f34f05fb470d438a4237e4a4531f882783
Author: Rob Carlson <rob@vees.net>
Date:   Sun Aug 18 20:03:14 2024 -0400

    Site launch

The date Sun Aug 18 20:03:14 2024 -0400 should have been used for the Last Updated value during the site build. However, the actual rendered HTML showed:

Last updated on 
<time datetime="2024-08-19T00:03:14.000Z" itemprop="dateModified">
    Aug 19, 2024
</time>

The rendering engine was converting the correct Git value to UTC before displaying it. Attempts to adjust the time zone by setting TZ='America/New_York' before running the build or adding it to package.json didn’t work.

The Solution​

I asked about this issue in the Docusaurus Discord channel #help-and-questions. Mikey O'Toole confirmed that function has UTC hardcoded. He and suggested that in the long term it should be configurable but in the short term recommended swizzling @docusaurus/theme-classic's LastUpdated component and modifying the LastUpdatedAtDate function.

To do this, I ran:

npm run swizzle @docusaurus/theme-classic LastUpdated -- --eject

This created a copy of LastUpdated function at src/theme/LastUpdated/index.tsx, which included the following code block:

  const dateTimeFormat = useDateTimeFormat({
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    timeZone: 'UTC',
  });

I changed timeZone: 'UTC' to timeZone: 'America/New_York', re-ran npm run build, and successfully generated files with the correct Eastern Daylight Time updated date.

Last updated on by Rob Carlson