mirror of https://github.com/TZGyn/shortener
added preview on add shortener dialog
parent
c17d978d26
commit
f758c6fd64
GPG Key ID:
122EAF77AE81FD4A
@ -0,0 +1,98 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog'
|
||||||
|
import { Button, buttonVariants } from '$lib/components/ui/button'
|
||||||
|
import { Input } from '$lib/components/ui/input'
|
||||||
|
import { Label } from '$lib/components/ui/label'
|
||||||
|
import { Loader2, PlusCircle } from 'lucide-svelte'
|
||||||
|
import { invalidateAll } from '$app/navigation'
|
||||||
|
import { toast } from 'svelte-sonner'
|
||||||
|
|
||||||
|
export let dialogOpen: boolean
|
||||||
|
let inputLink = ''
|
||||||
|
let isLoading = false
|
||||||
|
|
||||||
|
const addShortener = async () => {
|
||||||
|
isLoading = true
|
||||||
|
|
||||||
|
const response = await fetch('/api/shortener', {
|
||||||
|
method: 'post',
|
||||||
|
body: JSON.stringify({ link: inputLink }),
|
||||||
|
})
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
|
||||||
|
isLoading = false
|
||||||
|
|
||||||
|
if (responseData.success) {
|
||||||
|
toast.success('Successfully Created Shortener')
|
||||||
|
await invalidateAll()
|
||||||
|
dialogOpen = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let inputTimer: any
|
||||||
|
let data: any
|
||||||
|
|
||||||
|
const getMetadata = async () => {
|
||||||
|
clearTimeout(inputTimer)
|
||||||
|
inputTimer = setTimeout(async () => {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/url/metadata?url=${inputLink}`,
|
||||||
|
)
|
||||||
|
data = await response.json()
|
||||||
|
console.log(data)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Dialog.Root bind:open={dialogOpen}>
|
||||||
|
<Dialog.Trigger
|
||||||
|
class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
|
||||||
|
<PlusCircle />
|
||||||
|
Add Shortner
|
||||||
|
</Dialog.Trigger>
|
||||||
|
<Dialog.Content class="sm:max-w-[500px]">
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Add Shortener</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Create A New Shortner Here. Click Add To Save.
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
<div class="grid gap-8 py-4">
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label>Link</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
on:input={() => getMetadata()}
|
||||||
|
bind:value={inputLink}
|
||||||
|
placeholder="https://example.com"
|
||||||
|
class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<div class="font-bold">Preview</div>
|
||||||
|
<div class="col-span-4 flex flex-col justify-center border">
|
||||||
|
<div class="relative h-64 overflow-hidden">
|
||||||
|
{#if data}
|
||||||
|
<img
|
||||||
|
src={data.image}
|
||||||
|
alt=""
|
||||||
|
class="h-64 w-full object-cover" />
|
||||||
|
<div
|
||||||
|
class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
|
||||||
|
{data.title}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Dialog.Footer>
|
||||||
|
<Button on:click={addShortener} class="flex gap-2">
|
||||||
|
{#if isLoading}
|
||||||
|
<Loader2 class="animate-spin" />
|
||||||
|
{/if}
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
import type { RequestHandler } from './$types'
|
||||||
|
import { parse } from 'node-html-parser'
|
||||||
|
import he from 'he'
|
||||||
|
|
||||||
|
export const GET: RequestHandler = async (event) => {
|
||||||
|
const url = event.url.searchParams.get('url')
|
||||||
|
|
||||||
|
if (!url || !z.string().url().safeParse(url).success) {
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
title: url,
|
||||||
|
description: 'No description',
|
||||||
|
image: null,
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'shortener-bot',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
if (!response) {
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
title: url,
|
||||||
|
description: 'No description',
|
||||||
|
image: null,
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const html = await response.text()
|
||||||
|
const ast = parse(html)
|
||||||
|
const metaTags = ast
|
||||||
|
.querySelectorAll('meta')
|
||||||
|
.map(({ attributes }) => {
|
||||||
|
const property =
|
||||||
|
attributes.property || attributes.name || attributes.href
|
||||||
|
return {
|
||||||
|
property,
|
||||||
|
content: attributes.content,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const titleTag = ast.querySelector('title')?.innerText
|
||||||
|
const linkTags = ast
|
||||||
|
.querySelectorAll('link')
|
||||||
|
.map(({ attributes }) => {
|
||||||
|
const { rel, href } = attributes
|
||||||
|
return {
|
||||||
|
rel,
|
||||||
|
href,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let object: any = {}
|
||||||
|
|
||||||
|
for (let k in metaTags) {
|
||||||
|
let { property, content } = metaTags[k]
|
||||||
|
|
||||||
|
property && (object[property] = content && he.decode(content))
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let m in linkTags) {
|
||||||
|
let { rel, href } = linkTags[m]
|
||||||
|
|
||||||
|
rel && (object[rel] = href)
|
||||||
|
}
|
||||||
|
|
||||||
|
const title =
|
||||||
|
object['og:title'] || object['twitter:title'] || titleTag
|
||||||
|
|
||||||
|
const description =
|
||||||
|
object['description'] ||
|
||||||
|
object['og:description'] ||
|
||||||
|
object['twitter:description']
|
||||||
|
|
||||||
|
const image =
|
||||||
|
object['og:image'] ||
|
||||||
|
object['twitter:image'] ||
|
||||||
|
object['image_src'] ||
|
||||||
|
object['icon'] ||
|
||||||
|
object['shortcut icon']
|
||||||
|
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
title: title || url,
|
||||||
|
description: description || 'No description',
|
||||||
|
image: getRelativeUrl(url, image),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
return new Response(
|
||||||
|
JSON.stringify({
|
||||||
|
title: url,
|
||||||
|
description: 'No description',
|
||||||
|
image: null,
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRelativeUrl = (url: string, imageUrl: string) => {
|
||||||
|
if (!imageUrl) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if (z.string().url().safeParse(imageUrl).success) {
|
||||||
|
return imageUrl
|
||||||
|
}
|
||||||
|
const { protocol, host } = new URL(url)
|
||||||
|
const baseURL = `${protocol}//${host}`
|
||||||
|
return new URL(imageUrl, baseURL).toString()
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue