fix: reorder universe card content and update truncation logic
- Move embeds to display before text content in UniversePostCard - Show full content for non-essay posts (no truncation) - Increase essay truncation limit from 150 to 300 characters - Add styles to hide duplicate embeds in rendered content 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
2bbc306762
commit
ae15e7978c
1 changed files with 51 additions and 8 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import UniverseCard from './UniverseCard.svelte'
|
import UniverseCard from './UniverseCard.svelte'
|
||||||
import { getContentExcerpt } from '$lib/utils/content'
|
import { getContentExcerpt, renderEdraContent } from '$lib/utils/content'
|
||||||
import { extractEmbeds } from '$lib/utils/extractEmbeds'
|
import { extractEmbeds } from '$lib/utils/extractEmbeds'
|
||||||
import type { UniverseItem } from '../../routes/api/universe/+server'
|
import type { UniverseItem } from '../../routes/api/universe/+server'
|
||||||
|
|
||||||
|
|
@ -38,12 +38,6 @@
|
||||||
</h2>
|
</h2>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if post.content}
|
|
||||||
<div class="post-excerpt">
|
|
||||||
<p>{getContentExcerpt(post.content, 150)}</p>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if firstEmbed}
|
{#if firstEmbed}
|
||||||
<div class="embed-preview">
|
<div class="embed-preview">
|
||||||
{#if firstEmbed.type === 'youtube' && firstEmbed.videoId}
|
{#if firstEmbed.type === 'youtube' && firstEmbed.videoId}
|
||||||
|
|
@ -84,7 +78,17 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if post.postType === 'essay' && isContentTruncated}
|
{#if post.content}
|
||||||
|
<div class="post-excerpt">
|
||||||
|
{#if post.postType === 'essay'}
|
||||||
|
<p>{getContentExcerpt(post.content, 300)}</p>
|
||||||
|
{:else}
|
||||||
|
{@html renderEdraContent(post.content)}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if post.postType === 'essay' && isContentTruncated()}
|
||||||
<p>
|
<p>
|
||||||
<a href="/universe/{post.slug}" class="read-more" tabindex="-1">Continue reading</a>
|
<a href="/universe/{post.slug}" class="read-more" tabindex="-1">Continue reading</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -146,11 +150,50 @@
|
||||||
color: $grey-10;
|
color: $grey-10;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only apply truncation for essay excerpts
|
||||||
|
p:only-child {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Styles for full content (non-essays)
|
||||||
|
:global(p) {
|
||||||
|
margin: 0 0 $unit-2x;
|
||||||
|
color: $grey-10;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(a) {
|
||||||
|
color: $red-60;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(strong) {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(em) {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide embeds in the rendered content since we show them separately
|
||||||
|
:global(.url-embed-rendered) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments {
|
.attachments {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue