Permalinks

Also delay making links clickable via `pointer-events` to avoid accidentals

Author: LeaVerou

index.html

@@ -34,7 +34,8 @@ <h1>
 				<wrap-if :is="feature.title ? 'span' : 'code'" class="title" v-else v-text="feature.title ?? feature.code ?? feature.id"></wrap-if>
 			</wrap-if>
 
-			<div class="meta" v-if="feature.link || feature.mdnLink">
+			<div class="meta" v-if="permalink || feature.link || feature.mdnLink">
+				<a v-if="permalink" :href="permalink" class="icon-before permalink" title="Permalink"></a>
 				<a v-if="feature.link && feature.spec" :href="feature.link" target="_blank" class="badge primary spec-link" :class="`${feature.spec.org.id}-link`">
 					{{ feature.spec.org.title }}
 					<span v-if="feature.link === feature.draftLink">Proposal</span>

src/vue/components/feature/feature.css

@@ -27,6 +27,11 @@
 		display: flex;
 		gap: .2em;
 		align-items: center;
+
+		:where(&) > a {
+			/* Default icon */
+			--icon: var(--icon-link);
+		}
 	}
 }
 
@@ -84,12 +89,17 @@
 	position: relative;
 	--progress-color: oklch(from var(--color) calc(l + 0.4) 0 0);
 
-	.badge {
-		transition: opacity 100ms 100ms;
+	.badge, .permalink {
+		transition: opacity 300ms 100ms, pointer-events 0ms 500ms;
+		transition-behavior: allow-discrete;
 	}
 
-	&:not(:hover, :focus-within, :target) .badge {
-		opacity: 0;
+	&:not(:hover, :focus-within, :target) {
+		.badge, .permalink {
+			pointer-events: none;
+			transition-duration: 100ms;
+			opacity: 0;
+		}
 	}
 
 	.progress {

src/vue/components/feature/feature.js

@@ -81,7 +81,21 @@ export default {
 
 		showFeatureCount () {
 			return this.feature.score.total > 1 && (!this.parent || this.parent.score.total !== this.feature.score.total);
-		}
+		},
+
+		permalink () {
+			if (this.species === 'Spec') {
+				let urlParams = new URLSearchParams(location.search);
+				urlParams.set('spec', this.feature.id);
+				return '?' + urlParams.toString();
+			}
+
+			if (this.species === 'Feature') {
+				return '#' + this.feature.htmlId;
+			}
+
+			return '';
+		},
 	},
 
 	methods: {

ui/css/icons.css

@@ -3,6 +3,8 @@
 	--icon-caret: url('../icons/caret.svg');
 	--icon-x: url('../icons/x.svg');
 	--icon-warning: url('../icons/warning.svg');
+	--icon-link: url('../icons/link.svg');
+	--icon-link-external: url('../icons/link-external.svg');
 	--icon-w3c: url('../icons/w3c.svg');
 	--icon-mdn: url('../icons/mdn.svg');
 	--icon-whatwg: url('../icons/whatwg.svg');

ui/css/style.css

@@ -102,17 +102,35 @@ h2 {
 	mask: var(--icon) no-repeat center / contain;
 }
 
-.icon-before::before,
-.spec-link::before {
-	margin-inline-end: .2em;
+.icon-before,
+.spec-link {
+	&:not(:empty)::before {
+		margin-inline-end: .2em;
+	}
 }
 
-.spec-links {
-	display: flex;
-	align-items: center;
-	gap: calc(0.15rem + 0.15em);
+a.icon-before,
+button.icon-before {
+	display: inline-flex;
+	cursor: pointer;
+	padding: .3rem .4rem;
+	border-radius: var(--radius-s);
+	line-height: 1;
+
+	&:hover {
+		background-color: oklab(from currentColor l a b / 20%)
+	}
 }
 
+.permalink {
+	transition: opacity 100ms 100ms;
+
+	&:not(:hover, :focus-within) {
+		opacity: .7;
+	}
+}
+
+
 .badge {
 	--icon-color: light-dark(var(--accent-color), color-mix(in oklab, var(--accent-color), currentColor 50%));
 	--accent-color-h: hsl(from var(--accent-color) h none none);
@@ -129,19 +147,17 @@ h2 {
 			var(--accent-color-l) 0%, var(--badge-foreground-color))));
 
 	display: inline-flex;
+	vertical-align: middle;
 	align-items: center;
 	gap: .1em;
 	padding: .3em .4em;
+	border-radius: var(--radius-s);
+	background-color: var(--tinted-background-color, var(--badge-background-color));
+	color: var(--tinted-foreground-color, var(--badge-foreground-color));
 	font-family: var(--font-sans);
 	font-size: var(--font-size-s);
 	line-height: 1;
 
-	background-color: var(--tinted-background-color, var(--badge-background-color));
-	color: var(--tinted-foreground-color, var(--badge-foreground-color));
-
-	border-radius: .25em;
-	vertical-align: middle;
-
 	@container not style(--icon) {
 		&::before {
 			content: none;

ui/css/tokens.css

@@ -98,4 +98,7 @@
 
 	--shadow-l: 0 .4em .7em -.3em var(--color-shade);
 	--shadow-l-90deg: -.4em 0 .7em -.3em var(--color-shade);
+
+	--radius-s: .2rem;
+	--radius-m: .3rem;
 }