catalog: add filter info to URL

fix #689

Author: HerringtonDarkholme

website/src/catalog/data.ts

@@ -1,5 +1,6 @@
 import { data as allRules } from '../../_data/catalog.data'
 export type { RuleMeta } from '../../_data/catalog.data'
+import { atou, utoa } from '../utils'
 
 export function intersect(a: string[], b: string[]) {
   return a.some(x => b.includes(x))
@@ -84,4 +85,25 @@ export const features = [
   'transform',
   'constraints',
   'utils'
-]
+]
+
+export function serialize(data: Filter): string {
+  const allEmpty = Object.values(data).every(x => !x.length)
+  if (allEmpty) {
+    return ''
+  }
+  return utoa(JSON.stringify(data))
+}
+
+export function deserialize(str: string): Filter {
+  try {
+    return JSON.parse(atou(str))
+  } catch {
+    return {
+      selectedLanguages: [],
+      selectedRules: [],
+      selectedFeatures: [],
+      selectedTypes: [],
+    }
+  }
+}

website/src/catalog/index.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import RuleFilter from './RuleFilter.vue'
 import RuleList from './RuleList.vue'
 import type { Filter } from './data';
+import { serialize, deserialize } from './data';
 
-const filter = ref<Filter>({
-  selectedLanguages: [],
-  selectedRules: [],
-  selectedFeatures: [],
-  selectedTypes: [],
+const filter = ref<Filter>(deserialize(
+  location.hash.slice(1) || ''
+))
+
+watch(filter, (value) => {
+  const hash = serialize(value)
+  history.replaceState({}, '', hash ? `#${hash}` : '/catalog')
+}, {
+  deep: true,
+  immediate: true,
 })
 
 function reset() {

website/src/components/astGrep/state.ts

@@ -1,6 +1,7 @@
 import type { SupportedLang } from "./lang"
 import { shallowReactive, toRefs, watch, provide } from 'vue'
 import type { InjectionKey, ToRefs, ShallowReactive } from 'vue'
+import { utoa, atou } from '../../utils'
 
 export enum Mode {
   Patch = 'Patch',
@@ -18,16 +19,6 @@ export type State = {
   lang: SupportedLang,
 }
 
-// prefer old unicode hacks for backward compatibility
-// https://base64.guru/developers/javascript/examples/unicode-strings
-function utoa(data: string): string {
-  return btoa(unescape(encodeURIComponent(data)))
-}
-
-function atou(base64: string): string {
-  return decodeURIComponent(escape(atob(base64)))
-}
-
 export function serialize(state: State): string {
   return utoa(JSON.stringify(state))
 }

website/src/utils.ts

@@ -0,0 +1,9 @@
+// prefer old unicode hacks for backward compatibility
+// https://base64.guru/developers/javascript/examples/unicode-strings
+export function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)))
+}
+
+export function atou(base64: string): string {
+  return decodeURIComponent(escape(atob(base64)))
+}