root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Fix blog format

Browse Source
This commit is contained in:
root
2026-01-02 21:02:19 +01:00
parent d46b1451fe
commit 422642b407
1 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/BlogDetail.vue
View File

@@ -140,13 +140,82 @@
Back to overview Back to overview
</RouterLink> </RouterLink>
<h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1> <div class="mb-10 sm:mb-12 max-w-3xl">
<p class="text-gray-600 dark:text-gray-400 text-sm mb-8">{{ post.date }}</p> <div class="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 mb-6 font-medium">
<time :datetime="post.date">
{{ new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}
</time>
<span class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
<span v-if="post.author">
{{ post.author }}
</span>
</div>
<h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-gray-900 dark:text-white leading-tight">
{{ post.title }}
</h1>
</div>
<!-- Image is intentionally omitted here as per requirements --> <!-- Image is intentionally omitted here as per requirements -->
<div class="prose max-w-none" v-html="renderedContent"></div>
<div
class="markdown-content prose prose-lg dark:prose-invert max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 dark:prose-headings:text-gray-100 prose-p:leading-relaxed prose-a:text-primary-600 prose-a:no-underline prose-a:border-b prose-a:border-primary-300 hover:prose-a:border-primary-600 prose-a:transition-colors prose-blockquote:not-italic prose-blockquote:font-normal prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-300 prose-blockquote:border-l-4 prose-blockquote:border-primary-500 prose-blockquote:bg-gray-50 dark:prose-blockquote:bg-gray-800/30 prose-blockquote:rounded-r prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-code:bg-primary-50 dark:prose-code:bg-primary-900/30 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-code:font-mono prose-code:text-sm prose-pre:bg-gray-900 prose-pre:text-gray-200 prose-pre:shadow-lg prose-pre:rounded-xl prose-img:rounded-xl prose-img:shadow-lg prose-img:border prose-img:border-gray-200 dark:prose-img:border-gray-700 prose-hr:border-gray-200 dark:prose-hr:border-gray-800 prose-li:marker:text-primary-500"
v-html="renderedContent"
></div>
</div> </div>
<div v-else class="text-center py-12"> <div v-else class="text-center py-12">
<p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p> <p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
/* Force spacing for markdown content since prose modifiers can be overridden */
.markdown-content :deep(p) {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.markdown-content :deep(h2),
.markdown-content :deep(h3),
.markdown-content :deep(h4) {
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3;
}
.markdown-content :deep(img) {
margin-top: 2.5em;
margin-bottom: 2.5em;
}
.markdown-content :deep(ul),
.markdown-content :deep(ol) {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.markdown-content :deep(li) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.markdown-content :deep(blockquote) {
margin-top: 2em;
margin-bottom: 2em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1.5em;
}
.markdown-content :deep(pre) {
margin-top: 2em;
margin-bottom: 2em;
padding: 1.5rem;
}
.markdown-content :deep(hr) {
margin-top: 3em;
margin-bottom: 3em;
}
</style>