+
+ {/snippet}
+ No blog posts found.
{:else} -
+ ();
@@ -242,8 +261,9 @@
let markdown = editorInstance?.getMarkdown() ?? '';
// Upload all blob:// images and replace with CDN URLs
- const blobUrlRegex = /!\[([^\]]*)\]\((blob:[^)]+)\)/g;
+ const blobUrlRegex = /!\[([^\]]*)\]\((blob:[^\s)]+)(?:\s+"[^"]*")?\)/g;
const matches = [...markdown.matchAll(blobUrlRegex)];
+ const imageBlobs: unknown[] = [];
for (const match of matches) {
const blobUrl = match[2];
@@ -254,6 +274,7 @@
const compressed = await compressImage(file);
const blobRef = await uploadBlob({ blob: compressed.blob });
if (blobRef) {
+ imageBlobs.push(blobRef);
const cdnUrl = `https://cdn.bsky.app/img/feed_fullsize/plain/${user.did}/${blobRef.ref.$link}@jpeg`;
markdown = markdown.replaceAll(blobUrl, cdnUrl);
}
@@ -267,7 +288,11 @@
const record: Record = {
$type: 'site.standard.document',
title: title.trim(),
- content: { $type: 'app.blento.markdown', value: markdown },
+ content: {
+ $type: 'app.blento.markdown',
+ value: markdown,
+ images: imageBlobs.length > 0 ? imageBlobs : undefined
+ },
site: `at://${user.did}/site.standard.publication/blento.self`,
path: `/blog/${rkey}`,
publishedAt: new Date().toISOString()
@@ -311,6 +336,15 @@
scheduleSaveDraft();
}
+ function autoResize(el: HTMLTextAreaElement) {
+ const resize = () => {
+ el.style.height = 'auto';
+ el.style.height = el.scrollHeight + 'px';
+ };
+ resize();
+ return { update: resize };
+ }
+
function onTitleInput() {
scheduleSaveDraft();
}
@@ -354,22 +388,18 @@
{:else}
- {#if hasDraft}
-
{#each posts as post (post.rkey)}
{@const coverUrl = getCoverUrl(post.coverImage)}
+
+
diff --git a/src/routes/[[actor=actor]]/blog/new/+page.svelte b/src/routes/[[actor=actor]]/blog/new/+page.svelte
index 1e3b613..51d1f99 100644
--- a/src/routes/[[actor=actor]]/blog/new/+page.svelte
+++ b/src/routes/[[actor=actor]]/blog/new/+page.svelte
@@ -3,7 +3,7 @@
import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
import { uploadBlob, createTID } from '$lib/atproto/methods';
import { compressImage } from '$lib/atproto/image-helper';
- import { Button } from '@foxui/core';
+ import { Badge, Button } from '@foxui/core';
import { goto } from '$app/navigation';
import { onMount, onDestroy } from 'svelte';
import { SvelteMap } from 'svelte/reactivity';
@@ -25,6 +25,25 @@
let draftRestored = $state(false);
let fileInput: HTMLInputElement | undefined = $state();
+ let titleEl: HTMLTextAreaElement | undefined = $state();
+ let descriptionEl: HTMLTextAreaElement | undefined = $state();
+ let draggingOver = $state(false);
+
+ function handleDrop(e: DragEvent) {
+ e.preventDefault();
+ draggingOver = false;
+ const file = e.dataTransfer?.files?.[0];
+ if (!file || !file.type.startsWith('image/')) return;
+ coverFile = file;
+ if (coverPreview) URL.revokeObjectURL(coverPreview);
+ coverPreview = URL.createObjectURL(file);
+
+ const key = crypto.randomUUID();
+ blobToKeyMap.set(coverPreview, key);
+ keyToBlobMap.set(key, coverPreview);
+ putImage(key, file, file.name);
+ scheduleSaveDraft();
+ }
// blob URL <-> IndexedDB key mappings
const blobToKeyMap = new SvelteMap
diff --git a/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte
index bfc6ef7..ab92ee6 100644
--- a/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte
+++ b/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte
@@ -3,6 +3,30 @@
import { Avatar as FoxAvatar } from '@foxui/core';
import { marked } from 'marked';
import { sanitize } from '$lib/sanitize';
+ import { all, createLowlight } from 'lowlight';
+
+ const lowlight = createLowlight(all);
+
+ function hastToHtml(node: any): string {
+ if (node.type === 'text') return escapeHtml(node.value);
+ if (node.type === 'element') {
+ const cls = node.properties?.className?.join(' ');
+ const children = (node.children || []).map(hastToHtml).join('');
+ return cls ? `${children}` : `${children}`;
+ }
+ if (node.type === 'root' || node.children) {
+ return (node.children || []).map(hastToHtml).join('');
+ }
+ return '';
+ }
+
+ function escapeHtml(str: string): string {
+ return str
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"');
+ }
let { data } = $props();
@@ -54,6 +78,19 @@
const renderer = new marked.Renderer();
renderer.link = ({ href, title, text }) =>
`${text}`;
+ renderer.code = ({ text, lang }) => {
+ let highlighted: string;
+ try {
+ const tree =
+ lang && lowlight.registered(lang)
+ ? lowlight.highlight(lang, text)
+ : lowlight.highlightAuto(text);
+ highlighted = hastToHtml(tree);
+ } catch {
+ highlighted = escapeHtml(text);
+ }
+ return `
@@ -236,3 +273,137 @@
${highlighted}
-
- Draft
-
+
fileInput?.click()}
- class="border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600 text-base-400 dark:text-base-500 mb-8 flex aspect-video w-full flex-col items-center justify-center rounded-2xl border-2 border-dashed transition-colors"
+ ondragover={(e) => {
+ e.preventDefault();
+ draggingOver = true;
+ }}
+ ondragleave={() => (draggingOver = false)}
+ ondrop={handleDrop}
+ class="mb-8 flex h-20 w-full cursor-pointer items-center gap-3 rounded-xl border-2 border-dashed px-5 transition-colors {draggingOver
+ ? 'border-accent-400 bg-accent-50 dark:border-accent-500 dark:bg-accent-950'
+ : 'border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600'}"
>
- Add cover image
+
+ {draggingOver ? 'Drop image here' : 'Add cover image or drag & drop'}
+
{/if}
+ Local draft
+ {#if hasDraft}
-
- {/if}
+ {/if}
+