feat: default hostname to current site

Author: vnphanquang

.changeset/moody-pandas-impress.md

@@ -0,0 +1,5 @@
+---
+'@vnphanquang/green-check': patch
+---
+
+default hostname to current site

README.md

@@ -58,6 +58,9 @@ loadGreenCheck();
 
 ## 3. Using the Custom Element
 
+Use `<green-check>` where applicable with the `hostname` attribute as the host name of your
+site. If not provided `hostname` will default to `window.location.hostname`, i.e current site.
+
 ```html
 <green-check hostname="www.yourdomain.xyz">
   <img
@@ -74,7 +77,7 @@ loadGreenCheck();
 Colors of the badge can be customized by providing the following CSS custom properties (default values are shown):
 
 ```html
-<green-check>
+<green-check hostname="www.yourdomain.xyz">
   <!-- [...truncated fallback image...] -->
 </green-check>
 

src/index.js

@@ -14,7 +14,7 @@ export class GreenCheck extends HTMLElement {
 	async connectedCallback() {
 		const shadow = this.attachShadow({ mode: 'closed' });
 
-		const hostname = this.getAttribute('hostname') ?? '';
+		const hostname = this.getAttribute('hostname') ?? location.hostname;
 		const encodedHostname = encodeURIComponent(hostname);
 
 		const href = GREENCHECK_BASE_URL + '?url=' + encodedHostname;
@@ -46,3 +46,4 @@ export class GreenCheck extends HTMLElement {
 		shadow.appendChild(style);
 	}
 }
+