CodeLikeClock.widget

A stylish Übersicht widget that displays the current time and date in a code-like format, inspired by developer aesthetics. It uses a monospaced font and color-coded syntax using colors from the Catppuccin Frappe palette (see palette) to make your desktop look like a modern IDE.

Features

• Shows year, month, day, weekday, hour, minute, and second
• Displays day progress as a percentage
• Supports multiple languages (English, German, Dutch)
• 12h/24h clock format toggle
• Customizable appearance with Hack Nerd Font Mono

Changelog / What changed

This widget was refactored and improved. Key changes since the original CoffeeScript version:

• Rewritten from CoffeeScript to a React/JSX Übersicht widget (index.jsx).
  • Removed jQuery DOM updates/afterRender approach and replaced with Übersicht render + updateState return values.
• Consolidated settings:
  • settings is now an exported object (e.g. settings = { lang: "en", clock12h: false }).
  • clock12h is now settings.clock12h (toggle 12h/24h there).
• Locale object preserved and exported as locale with the same translations (en, de, nl).
• Styling migrated to JS css helper (fontFace and container styles exported).
  • Font face now exported as fontFace and still loads HackNerdFontMono-Regular.ttf.
  • Syntax highlight colors are implemented as JS/CSS constants (e.g. constClass, property, bracket).
• Live data:
  • updateState() returns an object with: hours, minutes, seconds, weekday, day, month, monthNum, year, ampm, dayProgress.
  • Day progress calculation uses the full 24h reference while still supporting 12h display.
• Exported Übersicht fields:
  • refreshFrequency set to 1000 ms (1s).
  • command default changed to echo 'Loading...' to provide an initial render.
• Render:
  • JSX render uses the returned state fields and conditionally shows the ampm field when settings.clock12h is true.
  • Formatting changed to use monospace font and inline syntax-highlight spans for a code-like look.
• Removed the old index.coffee behavior and DOM-manipulation approach in favor of a pure render/updateState flow.

---

Installation

Instructions

1. Download or clone this repository.
2. Place the CodeLikeClock.widget folder in your Übersicht widgets directory (usually ~/Library/Application Support/Übersicht/widgets/).
3. Make sure the font file HackNerdFontMono-Regular.ttf is present in the widget folder.
4. Enable the widget in Übersicht.

---

Customization

Change 24h to 12h Clock Format

By default, the widget uses a 24-hour clock. To switch to a 12-hour (AM/PM) format:

1. Open index.jsx in the widget folder.
2. Find the settings object and change:

settings = {
  lang: "en",
  clock12h: false
}

to:

settings = {
  lang: "en",
  clock12h: true
}

3. Save the file and refresh the widget in Übersicht.

Change or Add Language

The widget supports multiple languages for weekdays and months. To change the language:

1. Open index.jsx.
2. Set settings.lang to your desired language code (e.g., 'en', 'de', 'nl').
3. To add a new language, add a new entry to the exported locale object with weekdays and months.
4. Save the file and refresh the widget in Übersicht.

Widget Appearance

Desktop Appearance

CPU Usage

---

Notes

• The JSX version reduces complexity and aligns with Übersicht's modern widget patterns.
• If you prefer the original CoffeeScript version, the old file index.coffee.old is kept for reference.
• For any further refinements (layout, color palette tweaks, or additional locales), edit index.jsx and the locale export.

If you enjoy coding or just like the look of code editors, this widget is made for you! I created it to bring a bit of developer style to your desktop, and I hope you have as much fun using it as I did making it.