DOCSEARCHbyAlgolia
Submit Docs

Home Assistant Frontend

repository·dev·Indexed 26 days ago

https://github.com/home-assistant/frontend

The official user interface for Home Assistant. This repository includes the build pipeline for converting TypeScript, CSS, and JSON into browser-compatible JavaScript using Webpack, as well as development environments for Home Assistant Cast, the OS landing page, and the Home Assistant Gallery.

Tokens
16K
Snippets
31
Records
114
Agent score
90%

What's inside home-assistant-frontend

  1. Overview of the Home Assistant Frontend build pipeline

    dev

    The Home Assistant build pipeline prepares the frontend for deployment through several stages:

    • Generating icon and translation files.
    • Converting TypeScript, CSS, and JSON files into browser-compatible JavaScript.
    • Bundling and minifying files.
    • Generating HTML entrypoint files and service workers.
    • Compressing the final assets.

  2. Use Home Assistant logo layout variations

    dev

    Select the appropriate logo layout based on context and available space:

    • Horizontal Wordmark (Default): Use for most standard applications to provide clearest brand context.
    • Logomark (Icon only): Use when the context is already clear (e.g., inside the Home Assistant app).
    • Vertical Wordmark: Use when the available space has an aspect ratio less than 4:3 (e.g., square spaces like t-shirts).
    • Vertical Wordmark with small logomark: Use when displaying Home Assistant alongside other related Home Assistant projects (e.g., in a technical flowchart).

    Note: The wordmark should never exist without the icon.

  6. Guidelines for using AI in contributions

    dev

    When contributing to Open Home Foundation projects, you may use AI (LLMs) as a tool, but you are solely responsible for the accuracy and quality of your submissions. All contributions must have a 'human in the loop' who understands the work produced.

    Key requirements:

    • Review everything: You must personally review and understand all AI-generated code, documentation, and text before submission. You must be able to explain every change in a pull request in your own words.
    • No autonomous agents: The use of autonomous agents to create pull requests or issues is strictly prohibited. Contributions that bypass issue or pull request templates or appear to be created autonomously will be closed.
    • Communication: Do not use AI to generate answers to questions from maintainers. While using AI to improve grammar or clarity is permitted, the substance of your responses must be your own.
    • Disclosing AI context: If you include context from an AI interaction in a comment, you must:
      1. Use a quote block (e.g., >).
      2. Disclose that it is AI-generated.
      3. Provide your own commentary explaining the relevance and implications.
      4. Avoid sharing long snippets.

  7. Understand file conversion responsibilities in development and production

    dev

    The project uses Webpack to convert TypeScript, CSS, and JSON files into JavaScript. The behavior differs based on the environment:

    Development

    Bundling is optional. The converter focuses on making files browser-ready by:

    • Converting TypeScript to JavaScript.
    • Converting CSS and JSON to JavaScript modules where the content is the default export.
    • Resolving imports (adding missing extensions, resolving absolute package imports, and handling dynamic imports/web worker references).
    • Filtering specific imports/packages.
    • Replacing constants with values.

    Production

    In addition to development responsibilities, the production pipeline performs:

    • HTML minification.
    • Bundling multiple imports to reduce the number of browser requests.
    • Generating an ES5-compatible version of the assets.

  9. Apply Home Assistant logo color and background rules

    dev

    Follow these rules for color and placement to ensure legibility and brand integrity:

    • Light Backgrounds: Use the colored version with dark text.
    • Dark Backgrounds (e.g., Dark Theme): Use the colored version with light text.
    • Dark or Photographic Backgrounds: Use the light monochrome color variation.
    • Light or Photographic Backgrounds: Use the colored version. Do not use monochrome variations on light backgrounds.
    • Printed Materials (No Color): Use monochrome color variations.
    • Prohibitions:
      • Do not enclose the logomark in a square or color-confined background (except for specific marketplace requirements like iOS app icons).
      • Do not add drop shadows to the logomark or wordmark. If legibility is an issue, change the background or use a heavily blurred drop shadow as a last resort.
      • Use only with black, white, or non-duotone photography.

  10. Contribute to Home Assistant Design

    dev

    Designers can contribute to the Home Assistant frontend through several channels:

  12. Use the `<ha-marquee-text>` component

    dev

    The <ha-marquee-text> component displays scrolling text horizontally if the content overflows its container. It includes built-in support for pausing the animation on hover and allows for customization of scroll speed and pause delays.

    <ha-marquee-text style="width: 200px;">
  This is a long text that will scroll horizontally if it overflows the
  container.
</ha-marquee-text>