Skip to content

Select from multiple instances #554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Select from multiple instances #554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"lint": "yarn run lint:types",
"test": "node test/badges.js && node test/redirects.js",
"precommit-redirect": "node build-scripts/sort-redirects.js && npx prettier -w redirect.json && git add redirect.json",
"precommit-badges": "node build-scripts/create-badges.js && git add public/badges"
"precommit-badges": "node build-scripts/create-badges.js && git add public/badges",
"start": "./script/develop"
},
"pre-commit": [
"precommit-redirect",
Expand Down
8 changes: 4 additions & 4 deletions src-11ty/change-url.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: base_card_with_hero
javascript_source: my-change-url.js
permalink: "redirect/_change/"
description: Change the URL of your Home Assistant instance.
description: Change the URLs of your Home Assistant instances.
---

<style>
Expand All @@ -24,10 +24,10 @@ <h1 class="card-header">My Home Assistant</h1>
<my-change-url>
<div class="card-content placeholder">
<p>
Configure My Home Assistant by entering the URL of your Home Assistant
instance.
Configure My Home Assistant by entering the URLs of your Home Assistant
instances.
</p>
<p>Loading...</p>
<p>Note: This URL is only stored in your browser.</p>
<p>Note: These URLs are only stored in your browser.</p>
</div>
</my-change-url>
11 changes: 5 additions & 6 deletions src-11ty/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,13 @@ <h1 class="card-header">Frequently Asked Questions</h1>
<div class="section-header">What does My Home Assistant solve?</div>
<div class="card-content">
<p>
To be more helpful, the documentation wants to link the user to a specific
page in their instance. However, each Home Assistant instance is hosted at a
different url.
To be more helpful, websites want to be able to link users to a specific
page within their instances. However each Home Assistant instance is hosted
at a different url.
</p>
<p>
My Home Assistant allows users to store the URL of their instance so that
the documentation can link the user directly to the right page in their
instance.
My Home Assistant allows users to store the URLs of their instances so that
websites can link users directly to the right page in their instance.
</p>
<p>
All the data is stored in your browser. At no point will any data leave your
Expand Down
43 changes: 4 additions & 39 deletions src-11ty/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,19 @@
---
layout: base_card_with_hero
javascript_source: my-index.js
description: Link to specific pages in your Home Assistant instance.
description: Link to a specific pages in your Home Assistant instances.
Copy link

@UplandJacob UplandJacob May 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small typo: “a specific pages”

---

<style>
.instance-info {
display: flex;
justify-content: space-between;
padding: 0 16px 16px;
align-items: center;
line-break: anywhere;
}
.instance-header {
font-weight: 600;
letter-spacing: 0.05em;
font-size: 12px;
line-height: 1em;
}
.error {
color: #db4437;
font-weight: bold;
}
button.empty {
display: inline-flex;
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
button.empty:active,
button.empty:focus {
outline: none;
}
</style>

<h1 class="card-header">My Home Assistant</h1>
<div class="card-content">
My Home Assistant allows the documentation to link you to specific pages in
your Home Assistant instance. See <a href="faq.html">the FAQ</a> for more
information.
My Home Assistant allows websites to link to specific pages in your Home
Assistant instances. See <a href="faq.html">the FAQ</a> for more information.
</div>

<my-index>
<div class="instance-info">
<div>
<div class="instance-header">HOME ASSISTANT INSTANCE</div>
<div class="instance-header">HOME ASSISTANT INSTANCES</div>
Loading...
</div>
</div>
Expand Down
57 changes: 45 additions & 12 deletions src/components/my-instance-info.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,64 @@
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
import { svgPencil } from "./svg-pencil";
import { Instance } from "../data/instance_info";

@customElement("my-instance-info")
class MyInstanceInfo extends LitElement {
@property({ attribute: false }) public instanceUrl!: string | null;
@property({ attribute: false }) public instances!: Instance[] | null;

createRenderRoot() {
return this;
}

protected render(): TemplateResult {
if (!this.instanceUrl) {
console.log("this.instances", this.instances);
if (!this.instances?.length) {
console.error("my-instance-info rendered with a empty instance list");
return html``;
}
return html`
<div class="instance-info">
<div>
<div class="instance-header">HOME ASSISTANT INSTANCE</div>
<a href=${this.instanceUrl} rel="noreferrer noopener" target="_blank">
${this.instanceUrl}
<div style="padding: 0 16px 16px">
<div
style="width: 100%; display: flex; flex-direction: column; align-items: start; line-break: anywhere; gap: 12px"
>
${this.instances.map(
(instance) =>
html`<my-url-input
.instance=${instance}
style="width: 100%"
/>` /*
<div
style="width: 100%; display: flex; flex-direction: column; align-items: start; line-break: anywhere; gap: 4px"
>
<div
style="font-weight: 600; letter-spacing: 0.05em; font-size: 12px; text-transform: capitalize"
>
${instance.name || "HOME ASSISTANT INSTANCE"}
</div>
<div
style="display: flex; align-items: center; width: 100%; justify-content: space-between;"
>
<a
href="${instance.url}"
rel="noreferrer noopener"
target="_blank"
>
${instance.url}
</a>
<button
@click=${this._handleEdit}
style="display: inline-flex; background: none; color: inherit; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer;"
>
${unsafeSVG(svgPencil)}
</button>
</div>
</div>
`,*/,
)}
<a href="#" rel="noreferrer noopener" target="_blank">
+ Add Instance
</a>
</div>
<button class="empty" @click=${this._handleEdit}>
${unsafeSVG(svgPencil)}
</button>
</div>
`;
}
Expand Down
Loading
Loading