多时区桌面时钟

Example config.json for the clock

The config.json file should be formatted as JSON (JSONC-supported), as shown below.

{ "clocks": [ { "name": "UTC", "timezone": "UTC" } ], "format": "MM-DD ddd HH:mm", "locale": "en", "color": "#fff", "font": "Courier, monospace", "size": 14, "margin": "1.65em", "forefront": false }

The sections below explain the fields you can set in config.json.

clocks

The clocks field is an array of objects, each containing name and timezone properties. Both should be String. By default, both are UTC.

• name is a label that will be displayed for the clock.
• For selecting time zones, please refer to this list of time zones.

Here is an example of a clocks array for three time zones.

{ "clocks": [ { "name": "Tokyo", "timezone": "Asia/Tokyo" }, { "name": "UTC", "timezone": "UTC" }, { "name": "SF", "timezone": "America/Los_Angeles" } ], "format": "MM-DD ddd HH:mm", ...snip... }

format

string: MM-DD ddd HH:mm

The format field is a date-time format string used to display the clock. To create a custom date-time format, please refer to this formatting guide.

format2

string: ""

The format2 field is same as format. These are switched each other by Ctrl + f key. The format2 is optional field.

locale

string: en

The locale field determines the language settings for displaying the date-time. You can find a list of supported locales here.

color

string: #fff

The color field defines the color of the date-time text. You can use named colors, RGB hex values, RGB values (e.g., RGB(255, 0, 0)), or any valid CSS color value.

font

string: Courier, monospace

The font is a font name to display date-time. It should be monospaced font. If you would set non-fixed-width font, then your mclocks may have an undesirable wobbling effect.

size

number | string: 14

The size is a size of charactor for date-time, in pixel. It can also be specified as a string that includes a unit (e.g., "125%", "1.5em").

margin

string: 1.65em

The margin field determines the space between clocks

forefront

bool: false

If the forefront field is set to true, the mclocks application will always be displayed on top of other application windows.

⚙️ config.json

The config.json file allows you to configure the clocks according to your preferences.

The config.json file should be located in the following directories:

• Windows: C:\Users\{USER}\AppData\Roaming\com.bayashi.mclocks\
• Mac: /Users/{USER}/Library/Application Support/com.bayashi.mclocks/

When you start mclocks, then press Ctrl + o to edit your config.json file.

You can also use the online config.json generator: https://bayashi.github.io/mclocks/mclocks-config-generator/

/dump endpoint

When dump: true is set in the web configuration, the web server provides a /dump endpoint that returns request details as JSON.

The endpoint responds with a JSON object containing: method: HTTP method (e.g., "GET", "POST") path: Request path after /dump/ (e.g., "/test" for /dump/test) query: Query parameters as an array of key-value objects (e.g., [{"key1": "value1"}, {"key2": "value2"}]) headers: Request headers as an array of key-value objects (e.g., [{"Content-Type": "application/json"}]) body: Request body as a string (if present) parsed_body: Parsed JSON object if Content-Type indicates JSON, or error message string if parsing fails

Access the dump endpoint at http://127.0.0.1:3030/dump or any path under /dump/ (e.g., /dump/test?key=value).

/slow endpoint

When slow: true is set in the web configuration, the web server provides a /slow endpoint that delays the response before returning 200 OK.

The endpoint is accessible via any HTTP method (GET, POST, etc.) and supports the following paths:

• /slow: Waits 30 seconds (default) and returns 200 OK
• /slow/120: Waits 120 seconds (or any specified number of seconds) and returns 200 OK

The maximum allowed value is 901 seconds (15 minutes + 1 second). Requests exceeding this limit return a 400 Bad Request error.

This endpoint is useful for testing timeout behavior, connection handling, or simulating slow network conditions.

If an invalid seconds parameter is provided (e.g., /slow/abc), the endpoint returns a 400 Bad Request error.

/status endpoint

When status: true is set in the web configuration, the web server provides a /status/{code} endpoint that returns arbitrary HTTP status codes defined in RFC standards (100-599).

The endpoint returns a plain text response with the status code and its corresponding phrase, along with appropriate headers as required by the HTTP specification.

Examples: http://127.0.0.1:3030/status/200 - returns 200 OK http://127.0.0.1:3030/status/404 - returns 404 Not Found http://127.0.0.1:3030/status/500 - returns 500 Internal Server Error http://127.0.0.1:3030/status/418 - returns 418 I'm a teapot (with special message) * http://127.0.0.1:3030/status/301 - returns 301 Moved Permanently (with Location header)

Status-specific headers:

The endpoint automatically adds appropriate headers for specific status codes:

• 3xx Redirection (301, 302, 303, 305, 307, 308): Adds Location header
• 401 Unauthorized: Adds WWW-Authenticate header
• 405 Method Not Allowed: Adds Allow header
• 407 Proxy Authentication Required: Adds Proxy-Authenticate header
• 416 Range Not Satisfiable: Adds Content-Range header
• 426 Upgrade Required: Adds Upgrade header
• 429 Too Many Requests: Adds Retry-After header (60 seconds)
• 503 Service Unavailable: Adds Retry-After header (60 seconds)
• 511 Network Authentication Required: Adds WWW-Authenticate header

Response body handling:

• 204 No Content and 304 Not Modified: Returns empty response body (as per HTTP specification)
• 418 I'm a teapot: Returns special message "I'm a teapot" instead of standard status phrase
• All other status codes: Returns plain text in format {code} {phrase} (e.g., "404 Not Found")

This endpoint is useful for testing how your applications handle different HTTP status codes, error handling, redirects, authentication requirements, and rate limiting scenarios.

/editor endpoint

When web.editor.reposDir is set in the configuration file, the web server provides a /editor endpoint that allows you to open local files in your editor directly from browser's GitHub URLs.

Configuration:

Add the following to your web configuration of editor:

{ "web": { "root": "/path/to/your/webroot", "editor": { "reposDir": "~/repos", "includeHost": false, "command": "code", "args": ["-g", "{file}:{line}"] } } }

• reposDir: Path to your local repositories directory. Supports ~ for home directory expansion (e.g., "~/repos" on macOS or "C:/Users/username/repos" on Windows). This directory must exist.
• includeHost: If true, local path resolution includes the original host as a directory (e.g. {reposDir}/{host}/{owner}/{repo}/...). If false, it resolves to {reposDir}/{owner}/{repo}/... (default: false).
• command: Command name or path to your editor executable (default: code)
• args: Arguments template array. Use {file} and {line} placeholders. If #L... is not present in URL, {line} uses 1.

How it works:

1. When you access a GitHub file URL through the /editor endpoint, it converts the GitHub path to a local file path
2. The local file path is constructed as: {reposDir}/{owner}/{repository_name}/{file_path}
3. If the file exists, it opens the file in your editor at the specified line number using the configured command and args (default: code -g {local_file_path}:{line_number})
4. If the file doesn't exist, an error page is displayed with a link to clone the repository

Bookmarklet:

Create a bookmarklet to quickly open GitHub files in your local editor. Replace 3030 with your configured port number:

javascript:(function(){var u=new URL(document.location.href);open('http://127.0.0.1:3030/editor/'+u.host+u.pathname+u.hash,'_blank');})()

Line number support:

You can specify a line number using the hash fragment in the URL: * https://github.com/username/repo/blob/main/file.rs#L123 → Opens at line 123

Error handling:

• If the file doesn't exist locally, the tab stays open and displays an error message with a link to clone the repository from GitHub
• If the file is successfully opened, the tab automatically closes
• If web.editor.reposDir is not configured or doesn't exist, the /editor endpoint is not enabled (and you will get 404)

Example:

1. You're viewing a file on GitHub: https://github.com/bayashi/mclocks/blob/main/src/app.js#L42
2. Click the bookmarklet or manually navigate to: http://127.0.0.1:3030/editor/bayashi/mclocks/blob/main/src/app.js#L42
3. If ~/repos/mclocks/src/app.js exists in your local, VS Code opens it at line 42
4. If the file doesn't exist, an error page shows with a link to https://github.com/bayashi/mclocks for cloning

mclocks-preview extension (Cursor / VS Code)

There is an extension for VS Code and Cursor that you can use from the file menu (the menu that appears when you right‑click a file). It is called mclocks-preview, and it is especially useful for previewing Markdown files. The installation procedure is described below.

1. Clone this repository if you do not have it yet, then change to the repository root:

    git clone https://github.com/bayashi/mclocks.git
    cd mclocks
    

1. Open the repository folder in Cursor or Visual Studio Code:

    cursor .
    

or

    code .
    

1. Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS).

1. Run Developer: Install Extension from Location....

1. Select the folder extensions/mclocks-preview inside this repository.

1. Reload the window when prompted, or run Developer: Reload Window from the Command Palette.

After installation, you can choose Open in mclocks preview from the menu that appears when you right‑click a file.

----------