Fix and promote URL tag search

output/index.css

@@ -133,6 +133,16 @@ html.js .noscript, .hidden {
 	/* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/
 }
 
+.highlight {
+	animation: highlight 1s ease-in-out 0.1s 1 forwards;
+}
+
+@keyframes highlight {
+	0% { }
+	50% { scale: 2; filter: brightness(125%); }
+	100% {	 }
+}
+
 .room-label, .sample-search {
 	color: black;
 }
@@ -218,6 +228,10 @@ header {
 	margin-inline: 1rem;
 }
 
+#search > div {
+	width: 50%;
+}
+
 #search-bar {
 	height: 1.25rem;
 	color: var(--primary-color);
@@ -231,12 +245,15 @@ header {
 	color: red;
 }
 
-#search-bar:placeholder-shown + #btn-clear-search {
+#search-actions > * {
+	display: inline-block;
+}
+
+#search-bar:placeholder-shown + #search-actions > :is(#btn-clear-search, #btn-share-search) {
 	visibility: hidden;
 }
 
 .btn-clear-search {
-	margin-right: 1rem;
 	font-size: 1.5rem;
 	padding: 0.25rem 1rem;
 }

output/js/util.js

@@ -144,6 +144,7 @@ export const dom = {
 	/** @return {HTMLInputElement | null} */
 	search_bar: () => document.querySelector('#search-bar'),
 	btn_clear_search: () => document.querySelector("#btn-clear-search"),
+	btn_share_search: () => document.querySelector("#btn-share-search"),
 	search_container: () => document.querySelector("#search-container"),
 	sample_searches: () => document.querySelectorAll(".sample-search")
 }

output/main.js

@@ -89,7 +89,7 @@ function reactToURLParameters() {
 	const rawHash = location.hash;
 	if (rawHash == "") return;
 
-	const hash = rawHash.slice(1);
+	const hash = decodeURIComponent(rawHash.slice(1));
 
 	if (hash.startsWith("q=")) {
 		useSearchTerm(decodeURIComponent(hash.slice(2)), true);
@@ -97,8 +97,8 @@ function reactToURLParameters() {
 		return;
 	}
 
-	if (!hash.includes("+")) {
-		useSearchTerm(`#${decodeURIComponent(hash)}`, true);
+	if (!hash.includes("+") && !document.querySelector(`#${hash}`)) {
+		useSearchTerm(`#${hash}`, true);
 		toggleSearchBarVisibility();
 		return;
 	}
@@ -491,9 +491,19 @@ function addServerIconInteractions() {
 	}
 }
 
-function toggleSearchBarVisibility() {
+/**
+ * @param {?boolean} setShown
+ */
+function toggleSearchBarVisibility(setShown = null) {
 	const container = dom.search_container();
-	container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED);
+	const hadClass = container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED);
+	if (setShown == null) {
+		container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED);
+	} else if (setShown == true) {
+		container?.classList.remove(CLASSES.COMPONENTS.COLLAPSED);
+	} else if (setShown == false) {
+		container?.classList.add(CLASSES.COMPONENTS.COLLAPSED);
+	}
 	if (!container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED)) {
 		const searchBar = dom.search_bar();
 		searchBar?.focus();
@@ -502,6 +512,9 @@ function toggleSearchBarVisibility() {
 	} else {
 		useSearchTerm("");
 	}
+	if (setShown == hadClass) {
+		return true;
+	}
 }
 
 function addSearchInteractions() {
@@ -526,6 +539,22 @@ function addSearchInteractions() {
 		dom.search_bar()?.focus();
 	})
 
+	dom.btn_share_search()?.addEventListener('click', function() {
+		const searchTerm = dom.search_bar()?.value;
+		if (!searchTerm) return;
+		const searchTermIsTag = searchTerm.startsWith('#') && !searchTerm.includes("+");
+		const hash = searchTermIsTag ? searchTerm : `#q=${searchTerm}`;
+		const newLocation = new URL(location.href);
+		newLocation.hash = hash;
+		if (navigator.share) {
+			navigator.share({
+				url: newLocation.href
+			});
+		} else {
+			copyToClipboard(newLocation.href, "Share link copied to clipboard.")
+		}
+	});
+
 	Array.from(dom.sample_searches()).forEach(button => button.addEventListener('click', function() {
 		const targetSearch = button.getAttribute(ATTRIBUTES.SEARCH.TARGET_SEARCH);
 		if (targetSearch === null) {
@@ -752,3 +781,13 @@ function sortTable(column) {
 document.documentElement.classList.add("js");
 
 document.addEventListener('DOMContentLoaded', () => onLoad());
+
+document.addEventListener('DOMContentLoaded', () => {
+	document.querySelector("#banner-sample-search")?.addEventListener('click', function() {
+		useSearchTerm(this.getAttribute('search-target'), true);
+		const changed = toggleSearchBarVisibility(true);
+		if (!changed) return;
+		dom.btn_share_search()?.classList.add('highlight');
+		setTimeout(() => dom.btn_share_search()?.classList.remove('highlight'), 2000);
+	})
+});

sites/+components/communities-search.php

@@ -27,9 +27,12 @@
 <?php
 	// Phantom element for alignnment
 ?>
-		<span class="btn-clear-search" style="visibility: hidden;" tabindex="-1">×</span>
+		<div></div>
 		<input id="search-bar" autocomplete="off" type="text" placeholder="Search for Communities">
-		<span id="btn-clear-search" class="btn-clear-search anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
+		<div id="search-actions">
+			<span id="btn-clear-search" class="btn-clear-search anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
+			<span id="btn-share-search" class="anchorstyle clickable enter-clicks" tabindex="0">Share</span>
+		</div>
 	</div>
 	<div id="sample-searches">
 <?php foreach ($sample_searches as $search): ?>

sites/+components/issue-banner.php

@@ -12,7 +12,7 @@
 }
 
 .banner-subtitle {
-	font-size: 1.5rem;
+	font-size: 1.25rem;
 }
 
 .banner-note {
@@ -24,13 +24,15 @@
 </style>
 <div class="banner">
 	<span class="banner-note">
-		opinion banner
+		news banner
 	</span>
-	<p class="banner-title">Ad-blocking on Chrome?</p>
+	<p class="banner-title">Sharing Communities just got easier!</p>
 
 	<p
+		class="banner-subtitle js-only"
+	>Show someone the way by clicking 'Share' from <a id="banner-sample-search" href="#" search-target="#privacy">your favorite search</a>!</p>
+
+	<noscript><p
 		class="banner-subtitle"
-	><a
-		href="https://arstechnica.com/google/2023/12/chromes-next-weapon-in-the-war-on-ad-blockers-slower-extension-updates/"
-	>Not for long.</a> 🛑</p>
+	>Show someone the way by adding <code>#privacy</code> or <code>#q=lang:zh</code> to the URL!</p></noscript>
 </div>