Make dufflepud configurable

.env.local

@@ -0,0 +1 @@
+VITE_DUFFLEPUD_URL=http://localhost:8000

.env.production

@@ -0,0 +1 @@
+VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com

.gitignore

@@ -10,7 +10,6 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
-*.local
 
 # Editor directories and files
 .vscode/*

src/partials/Note.svelte

@@ -1,11 +1,11 @@
 <script>
   import cx from 'classnames'
-  import {find, uniqBy, prop, whereEq} from 'ramda'
+  import {find, last, uniqBy, prop, whereEq} from 'ramda'
   import {onMount} from 'svelte'
   import {fly, slide} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {LinkPreview} from 'svelte-link-preview'
-  import {ellipsize} from 'hurdak/src/core'
+  import {ellipsize, first} from 'hurdak/src/core'
   import {hasParent, toHtml, findLink} from 'src/util/html'
   import Anchor from 'src/partials/Anchor.svelte'
   import {dispatch} from "src/state/dispatch"
@@ -13,7 +13,6 @@
   import {accounts, settings, modal} from "src/state/app"
   import {user} from "src/state/user"
   import {formatTimestamp} from 'src/util/misc'
-  import {getLinkPreview} from 'src/util/html'
   import UserBadge from "src/partials/UserBadge.svelte"
 
   export let note
@@ -42,6 +41,28 @@
     }
   })
 
+  const getLinkPreview = async url => {
+    const res = await fetch(`${$settings.dufflepudUrl}/link/preview`, {
+      method: 'POST',
+      body: JSON.stringify({url}),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const json = await res.json()
+
+    if (!json.title) {
+      return null
+    }
+
+    return {
+      ...json,
+      hostname: first(last(url.split('//')).split('/')),
+      sitename: null,
+    }
+  }
+
   const onClick = e => {
     if (!['I'].includes(e.target.tagName) && !hasParent('a', e.target)) {
       modal.set({note})

src/partials/Toggle.svelte

@@ -1,8 +1,6 @@
 <script>
-  import cx from "classnames"
   import Switch from "svelte-switch"
 
-  export let wrapperClass = ""
   export let value
 
   const onChange = e => {
@@ -10,20 +8,18 @@
   }
 </script>
 
-<div class={wrapperClass}>
-  <Switch
-    checked={value}
-    on:change={onChange}
-    onColor="#ccc"
-    offColor="#ccc"
-    onHandleColor="#EB5E28"
-    handleDiameter={26}
-    unCheckedIcon={false}
-    boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
-    activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
-    height={20}
-    width={48}>
-    <span slot="checkedIcon" />
-    <span slot="unCheckedIcon" />
-  </Switch>
-</div>
+<Switch
+  checked={value}
+  on:change={onChange}
+  onColor="#ccc"
+  offColor="#ccc"
+  onHandleColor="#EB5E28"
+  handleDiameter={26}
+  unCheckedIcon={false}
+  boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+  activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
+  height={20}
+  width={48}>
+  <span slot="checkedIcon" />
+  <span slot="unCheckedIcon" />
+</Switch>

src/routes/Settings.svelte

@@ -3,6 +3,7 @@
   import {fly} from 'svelte/transition'
   import {navigate} from "svelte-routing"
   import Toggle from "src/partials/Toggle.svelte"
+  import Input from "src/partials/Input.svelte"
   import Button from "src/partials/Button.svelte"
   import {user} from "src/state/user"
   import {settings} from "src/state/app"
@@ -44,6 +45,16 @@
           in any note.
         </p>
       </div>
+      <div class="flex flex-col gap-1">
+        <strong>Dufflepud URL</strong>
+        <Input bind:value={values.dufflepudUrl}>
+          <i slot="before" class="fa-solid fa-server" />
+        </Input>
+        <p class="text-sm text-light">
+          Enter a custom url for Coracle's helper application. Dufflepud is used for
+          hosting images and loading link previews.
+        </p>
+      </div>
       <Button type="submit" class="text-center">Done</Button>
     </div>
   </div>

src/state/app.js

@@ -11,6 +11,7 @@ export const modal = writable(null)
 
 export const settings = writable({
   showLinkPreviews: true,
+  dufflepudUrl: import.meta.env.VITE_DUFFLEPUD_URL,
   ...getLocalJson("coracle/settings"),
 })
 

src/util/html.js

@@ -1,4 +1,3 @@
-import {last} from 'ramda'
 import {first} from 'hurdak/lib/hurdak'
 
 export const copyToClipboard = text => {
@@ -81,17 +80,3 @@ export const toHtml = content => {
       return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
     })
 }
-
-export const getLinkPreview = async url => {
-  const res = await fetch('http://localhost:8000/link/preview', {
-    method: 'POST',
-    body: JSON.stringify({url}),
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  })
-
-  const json = await res.json()
-
-  return {...json, hostname: first(last(url.split('//')).split('/')), sitename: null}
-}

src/util/misc.js

@@ -49,3 +49,4 @@ export const formatTimestamp = ts => {
 }
 
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+