feat: use astro-resume

README.md

@@ -82,6 +82,7 @@ We are thankful for all the building blocks provided by the following projects:
 
 1. [Astro](https://www.npmjs.com/package/astro) for our server-side rendering framework
 1. [@ayco/astro-sw](https://ayco.io/n/@ayco/astro-sw) for taking app's service worker, and injecting needed dynamic assets & variables
+1. [@ayco/astro-resume](https://ayco.io/n/@ayco/astro-resume) for serializing server data to be used in the client
 1. [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) for the amazing scraping of articles
 1. [astro-iconify](https://www.npmjs.com/package/astro-iconify) for easily using icon-sets in [iconify](https://icon-sets.iconify.design/)
 1. [ultrahtml](https://www.npmjs.com/package/ultrahtml) for any cleanup and transformation we do on the received article content

package.json

@@ -27,6 +27,7 @@
     "@astrojs/node": "^9.1.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
+    "@ayco/astro-resume": "^0.4.4",
     "@ayco/astro-sw": "^0.8.14",
     "@eslint/compat": "^1.2.6",
     "@eslint/js": "^9.20.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.2.1
         version: 3.2.1
+      '@ayco/astro-resume':
+        specifier: ^0.4.4
+        version: 0.4.4(astro@5.3.0(@types/node@22.13.4)(rollup@4.34.7)(sass@1.85.0)(typescript@5.7.3)(yaml@2.7.0))
       '@ayco/astro-sw':
         specifier: ^0.8.14
         version: 0.8.14
@@ -153,6 +156,11 @@ packages:
   '@astrojs/yaml2ts@0.2.2':
     resolution: {integrity: sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ==}
 
+  '@ayco/astro-resume@0.4.4':
+    resolution: {integrity: sha512-BhMAni0Y0BkaU8fPfWT93Pk1Tr0HMThiWgx/CNma0pt/LphdzcHYQ0GCDAbpuJYPHGF9gdpdBrYa1Yr/fvS/IA==}
+    peerDependencies:
+      astro: ^5
+
   '@ayco/astro-sw@0.8.14':
     resolution: {integrity: sha512-Q/OGyQqzC7EwYrQPrCYMCI/tRncS/XvEJ0Tuh1TtSzvob4JHQdwMHqGDHFrH0z3rxOAQaLm4XzGRlhFN7KRI7g==}
     engines: {node: '>=18.0.0'}
@@ -3973,6 +3981,10 @@ snapshots:
     dependencies:
       yaml: 2.7.0
 
+  '@ayco/astro-resume@0.4.4(astro@5.3.0(@types/node@22.13.4)(rollup@4.34.7)(sass@1.85.0)(typescript@5.7.3)(yaml@2.7.0))':
+    dependencies:
+      astro: 5.3.0(@types/node@22.13.4)(rollup@4.34.7)(sass@1.85.0)(typescript@5.7.3)(yaml@2.7.0)
+
   '@ayco/astro-sw@0.8.14':
     dependencies:
       esbuild: 0.23.1

src/components/Library.astro

@@ -1,19 +1,24 @@
 ---
+import Serialize from '@ayco/astro-resume'
 export interface Props {
   skipSave?: boolean
+  isIndex: boolean
 }
 ---
 
-<div id="library" data-preferences={JSON.stringify(Astro.props)}>
+<div id="library">
   <span id="heading"></span>
   <ul id="post-list"></ul>
 </div>
 
+<Serialize id="preferences" data={Astro.props} />
+
 <script>
   import { getPostCard, renderPost } from '../utils/library'
   import { cozify } from '../utils/sanitizer'
+  import { deserialize } from '@ayco/astro-resume'
   const cache = await caches.open('cozy-reader')
-  const baseUrl = window.location.origin
+  const baseUrl = window.location.origin + '/a'
   let url = new URL(window.location.href)
   // only cached unencoded url param
   const urlParam = url.searchParams.get('url')
@@ -21,11 +26,7 @@ export interface Props {
     url = new URL(`${url.origin}/?url=${urlParam}`)
   }
 
-  const preferencesEl = document.querySelector(
+  const { skipSave } = deserialize('preferences') ?? ''
-    '[data-preferences]'
-  ) as HTMLElement
-  const preferencesStr = preferencesEl?.dataset.preferences ?? ''
-  const { skipSave } = JSON.parse(preferencesStr)
 
   const routerOutlet = 'router-outlet'
   const includesAppURL = urlParam?.includes(baseUrl) ?? false