Add highlights

This commit is contained in:
2024-04-05 21:35:39 +11:00
parent d02b74621a
commit 38d5108979
22 changed files with 188 additions and 25 deletions

View File

@@ -24,12 +24,18 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
button hx-post="/admin/posts/#{post.id}/syndicate/day_one" Send to Day One
// TODO: Add preview, fix sending to DayOne
article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
a href="/post/#{post.slug}"
h1= post.name || "💬"
article x-data="$textHighlighter, {isOpen: false, anchorX: 0, anchorY: 0, text: ''}" class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
- if post.post_type != "bookmark"
a href="/post/#{post.slug}"
h1= post.name || "💬"
form action="/admin/post/#{post.id}/update" method="POST"
textarea name="body" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2 mb-4" x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }" x-init="resize()" @input="resize()"
== markdown_body
- if post.post_type != "bookmark"
textarea name="body" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2 mb-4" x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }" x-init="resize()" @input="resize()"
== markdown_body
- if post.post_type == "bookmark"
div x-ref="bookmarkText" @mouseup.capture="highlightText()"
== post.cached_content
fieldset class="mb-4 flex"
label for="commentable" class="mr-2" Commentable?
input class="mt-2" type="checkbox" value="true" id="commentable" name="commentable" switch="switch" checked=post.commentable
@@ -38,3 +44,21 @@ article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 d
input type="text" name="tags" id="tags" class="w-full px-1 border rounded" value="#{post.tags.map(&:label).join(", ")}"
button class="rounded bg-blue-100 hover:bg-blue-200 text-blue-600 px-2 hover:cursor-pointer" type="submit"
= "Update"
- if post.highlights.count > 0
table class="prose dark:prose-invert table-auto"
- post.highlights.each_with_index do |highlight, idx|
tr class="#{idx.even? ? 'bg-amber-50' : ''}"
td class="p-2"
= highlight.text
td class="p-2"
form method="POST" action="/admin/post/#{post.id}/highlight/#{highlight.id}"
input type="hidden" name="_method" value="delete"
button
= "Delete"
div @click.outside="isOpen = false" class="p-2 bg-indigo-900 hover:bg-indigo-800 rounded text-white shadow-md shadow-indigo-500" x-show="isOpen" x-anchor.no-style="$refs.bookmarkText" :style="{ position: 'absolute', hidden: isOpen, top: isOpen ? anchorY : '0px', left: isOpen ? anchorX : '0px' }"
form method="POST" class="p-0 m-0" action="/admin/post/#{post.id}/highlight"
input type="hidden" name="post_id" value="#{post.id}"
input class="text-gray-600" type="hidden" x-model="text" name="text"
button = "Save highlight"