DOCSEARCHbyAlgolia
Submit Docs

Pretty Properties

repository·master·Indexed 43 days ago

https://github.com/anareaty/pretty-properties

An Obsidian plugin to enhance the visual appeal of note metadata. It adds support for covers, banners, icons, custom colors for properties and tags, and progress bars. It features experimental Handlebars formatting templates for transforming property values, relative date styling, and the ability to hide specific properties to declutter notes.

Tokens
7K
Snippets
26
Records
38
Agent score
53%

What's inside Pretty Properties

  1. Style dates using relative date colors

    master

    Every date property is assigned a data-relative-date attribute with one of three values: past, present, or future. This allows you to style dates based on their relation to the current time.

    Implementation:

    • Use the data-relative-date attribute in your CSS to apply custom styles.
    • You can also select specific colors for past, present, and future dates directly in the plugin settings.

    Note: Relative date attributes are not updated automatically. To see color changes as time passes (e.g., a 'present' date becoming 'past'), you must reopen the note.

  2. Use extra features: Image/Emoji insertion and Tag deletion

    master

    The plugin includes several utility features:

    1. Command Palette Insertion: Use commands in the command palette to insert local images or emojis via a visual selection menu (similar to the cover/icon selection UI).
    2. Quick Tag Deletion: When editing a note, right-clicking an inline tag in the editor menu provides an option to quickly delete that tag.

  3. Use formatting templates with Handlebars

    master

    Formatting templates (experimental) allow you to transform property values visually without changing the underlying data. For example, you can store a duration in seconds (829) but render it as 13m 49s.

    Setup: Templates are configured in the plugin settings using Handlebars syntax.

    Available Variables:

    • {{propertyValue}}: The actual content of the property.
    • {{propertyName}}: The name of the property.

    Supported Helper Packages:

    • just-handlebars-helpers: General utilities.
    • handlebars.moment: Time and duration manipulation.

    Custom Helpers:

    • {{durationAbbreviated time unit}}: Converts a duration into an abbreviated format (e.g., omitting leading zero units).
    • {{durationFormatted time unit format?}}: Turns a duration into a specific format (uses dayjs for the format argument).
    • {{durationHumanized time unit withSuffix?}}: Converts a duration into a natural-sounding string (e.g., "in 5m" or "10m ago").

  4. Add a cover image to a note

    master

    You can add a cover image near the metadata block to save space.

    To add a cover image:

    1. Open the command palette and run Select cover image.
    2. Select a local image from your vault or provide an external link.
    3. The plugin will create a cover property in your note's metadata. Do not delete this property, as it is required for rendering.

    Supported data types for the cover property:

    • Wikilinks: ![[My cover]] or [[My cover]]
    • Markdown links: ![My cover](My%20cover.png)
    • Raw URL links: https://...
    • Raw file links: file://...
    • Base64-encoded images: data:image/...base64...
    • YouTube video links (renders as video previews)
    • Custom text (rendered as Markdown)

    Customization:

    • Shapes: Right-click the cover to change its shape (Square, Circle, Vertical, Horizontal, or 3 custom widths).
    • Position: Right-click to move the cover to the left, right, top, or bottom of the metadata block.
    • Formatting: You can apply a formatting template to the cover property to transform the data before rendering.

  5. Add an icon to a note

    master

    Icons can be displayed alongside a banner or on their own.

    To add an icon:

    1. Run the command Select icon from the command palette.
    2. This adds an icon property to your note.

    Supported icon types:

    • Images: Use wikilinks, markdown links, URLs, file links, or base64.
    • SVG/Lucide Icons: Enter the name of a Lucide icon (e.g., star).
    • Emojis/Text: Any other text will be rendered as-is. Note that icon text does not wrap.

    Settings: You can choose to show the icon inside the inline title instead of at the top of the note.

  6. Add a banner to a note

    master

    Banners can be added to the top of your notes.

    To add a banner:

    1. Run the command Select banner image from the command palette.
    2. This adds a banner property to your note.

    Supported data types for the banner property:

    • Wikilinks: ![[My cover]] or [[My cover]]
    • Markdown links: ![My cover](My%20cover.png)
    • Raw URL links: https://...
    • Raw file links: file://...
    • Base64-encoded images: data:image/...base64...

    Note on Conflicts: If you use other banner plugins (like Pixel Banner or Simple Banner), they may conflict. You can disable the Pretty Properties banner feature in settings or use a different property name to allow both plugins to coexist in different notes.

  7. Hide properties in the metadata block

    master

    You can hide specific properties to declutter your notes.

    How to hide/reveal:

    • Hide: Click the property icon and select Hide property from the menu.
    • Reveal All: Run the command Toggle reveal / hide all hidden properties to see all properties and unhide them.
    • Banner/Cover/Icon: These can also be hidden/revealed via the right-click menu on the image itself.

    Advanced Hiding Options:

    • Empty Properties: You can configure properties to hide only when they are empty, or set all empty properties to be hidden by default in the settings.
    • Metadata Block: You can hide the entire metadata block if all its properties are hidden.
    • Keyboard Navigation: Hidden elements are temporarily revealed when focused via keyboard, allowing for editing without permanent unhiding.

  8. Color properties and tags

    master

    You can assign custom colors to property values (lists, text, and tags). Assigning colors to tags affects both frontmatter tags and inline tags.

    How to apply colors:

    • List/Tag properties: Right-click the property pill and open the color menu.
    • Text properties: Hover over the property value to reveal the color button.

    Color Options:

    • Select color: Changes both the text color and the background of the property pill. The text color is automatically adjusted for contrast.
    • Select text color: Changes only the text color independently.
    • Palette: Choose from rainbow colors, theme accent colors, or a custom color picker.
    • none: Makes the background transparent and uses regular text color.
    • default: Returns colors to your theme's definitions.

    Custom CSS Styling: You can target specific property values using data attributes in your CSS:

    [data-property-pill-value="my-list-property-value"] { /* styles */ }
[data-property-value="my-text-property-value"] { /* styles */ }
[data-property-value="my-tag-value"] { /* styles */ }
    [data-property-pill-value="my-list-property-value"] {    /* my styles */}
[data-property-value="my-text-property-value"] {    /* my styles */}
[data-property-value="my-tag-value"] {    /* my styles */}

  10. Add progress bars to number properties

    master

    You can add a visual progress bar to any number property by right-clicking on the property icon in the UI.

    • Default Behavior: The maximum value is set to 100, and the property value is treated as a percentage.
    • Custom Maximum: To use a different maximum value, add another number property to the note representing the limit. Then, right-click the primary property icon and select "Set max progress from another property".

  11. Configure custom date formats

    master

    You can override default date displays by setting custom formats in the plugin settings using moment.js syntax.

    Note for Bases: Custom date formats in bases are disabled by default to maintain performance. You can enable them in the settings or use a formula within the base itself, such as datetime_property.format("YYYY-MM-DD HH:mm:ss").

  12. Use formatting templates for durations

    master

    You can use specific helpers within formatting templates to transform duration values (originally in seconds) into human-readable, clock, or abbreviated formats using the {{...}} syntax.

    • Humanized: Converts seconds to a string like in 14 minutes.
    • Clock format: Converts seconds to a standard time format like 00:13:49.
    • Abbreviated: Uses multiple calls to create a custom abbreviated string (e.g., 00h 13m 49s).
    {{durationHumanized propertyValue "s" true}}

{{durationFormatted propertyValue "seconds" "HH:mm:ss"}}

{{durationFormatted propertyValue "seconds" "HH"}}h {{durationFormatted propertyValue "seconds" "mm"}}m {{durationFormatted propertyValue "seconds" "ss"}}s