Add bookmarklet

routes/api/bookmarks.js

@@ -60,6 +60,8 @@ export default async function bookmarkRoutes (fastify, opts) {
           GROUP BY bt.bookmark_id
         ) t using (id)
         WHERE owner_id = ${id}
+        ORDER BY
+          created_at DESC;
       `
 
       const results = await fastify.pg.query(query)

web/bookmarks/add/client.js

@@ -1,13 +1,22 @@
 /* eslint-env browser */
-import { html, render, useEffect, useState } from 'uland-isomorphic'
+import { html, render, useEffect, useState, useRef } from 'uland-isomorphic'
 import { useUser } from '../../hooks/useUser.js'
 import { fetch } from 'fetch-undici'
 import { useLSP } from '../../hooks/useLSP.js'
+import { useQuery } from '../../hooks/useQuery.js'
 
 export function addBookmarkPage () {
   const state = useLSP()
   const { user, loading } = useUser()
   const [saving, setSaving] = useState(false)
+  const query = useQuery()
+  const formRef = useRef()
+
+  useEffect(() => {
+    formRef.current.url.value = query.get('url')
+    formRef.current.title.value = query.get('title')
+    formRef.current.note.value = query.get('description')
+  }, [])
 
   useEffect(() => {
     if (!user && !loading) window.location.replace('/login')
@@ -47,7 +56,7 @@ export function addBookmarkPage () {
 
   return html`
     <div>
-      <form class="add-bookmark-form" id="add-bookmark-form" onsubmit=${addBookmark}>
+      <form ref=${formRef} class="add-bookmark-form" id="add-bookmark-form" onsubmit=${addBookmark}>
         <fieldset ?disabled=${saving}>
           <legend>New bookmark:</legend>
           <div>

web/hooks/useQuery.js

@@ -0,0 +1,9 @@
+import { useState } from 'uland-isomorphic'
+import { useWindow } from './useWindow.js'
+
+export function useQuery () {
+  const window = useWindow()
+  const [query] = useState(new URLSearchParams(window?.document?.location?.search))
+
+  return query
+}

web/lib/state.js

@@ -4,6 +4,7 @@ export const state = lsp('breadcrum', {
   defaults: {
     user: null,
     apiUrl: '/api',
+    host: 'breadcrum.net',
     disableRegistration: true
   },
   lspReset: 1

web/resources/client.js

@@ -0,0 +1,28 @@
+/* eslint-env browser */
+import { html, render, useEffect } from 'uland-isomorphic'
+import { useUser } from '../hooks/useUser.js'
+
+export function addBookmarkPage () {
+  const { user, loading } = useUser()
+
+  useEffect(() => {
+    if (!user && !loading) window.location.replace('/login')
+  }, [user, loading])
+
+  return html`
+    <li>
+      <a class="bookmarklet" href="javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://breadcrum.net/bookmarks/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'🥖 Bredcrum','toolbar=no,scrollbars=yes,width=750,height=700'));">
+        add bookmark popup
+      </a> is a slightly larger bookmarklet that shows a clickable tag cloud.
+    </li>
+    <li>
+      <a class="bookmarklet" href="javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('http://localhost:3000/bookmarks/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'🥖 Bredcrum','toolbar=no,scrollbars=yes,width=750,height=700'));">
+        locahost add bookmark popup
+      </a> is a slightly larger bookmarklet that shows a clickable tag cloud.
+    </li>
+`
+}
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-main'), addBookmarkPage)
+}

web/resources/page.js

@@ -0,0 +1,8 @@
+import { html } from 'uland-isomorphic'
+import { addBookmarkPage } from './client.js'
+
+export default async function () {
+  return html`
+  ${addBookmarkPage()}
+  `
+}