Skip to content

Commit

Permalink
feat(front): reflow post layout to full-width (#1028)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgrebb
dgrebb committed Jan 17, 2024
1 parent dc6a080 commit a5f399c
Show file tree
Hide file tree
Showing 4 changed files with 213 additions and 191 deletions.
9 changes: 9 additions & 0 deletions front/src/lib/components/content/AnimatedImage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@
}
</script>

<svelte:head>
<link
rel="preload"
href={animation}
as="image"
type="image/gif"
fetchpriority="high"
/>
</svelte:head>
<div class="media-box">
<figure class="animated-image">
<div class="animation-player">
Expand Down
241 changes: 121 additions & 120 deletions front/src/lib/components/posts/Post.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,126 +102,127 @@
<PageNav {toc} {categories} {related} {pathname} mini {setActiveLink} />
{/if}
<h1 class="post-title">{title}</h1>
<article class="post-article" class:full={!showAside}>
<time
class="pubdate"
datetime={publishedAt}
title={updatedAt ? `Updated ${up}` : false}>{pub}</time
>
{#if summary}
<div class="summary">
{@html summary}
</div>
{/if}
{#if content}
{#each content as c, i}
{#if c.__component === 'posts.text'}
{@html c.text}
{/if}
{#if c.__component === 'posts.quote'}
<blockquote>
<p>{c.text}</p>
{#if c.citation}
<footer>
<cite>
{#if c.citationLink}
&mdash;<a
href={c.citationLink}
title={c.citationLinkTitle}
target="_blank"
rel="nofollow noopener noreferrer">{c.citation}</a
>
{:else}
&mdash;{c.citation}
{/if}
</cite>
</footer>
{/if}
</blockquote>
{/if}
{#if c.__component === 'posts.code'}
{@const lines =
c?.highlightedLines?.split(',').map((item) => Number(item - 1)) ||
false}
<Code
key={i}
pageTitle={title}
pageSlug={slug}
text={c.code}
lang={c.syntax}
title={c?.title}
lineNumbers={c.showLineNumbers === true || lines.length > 0}
startingLineNumber={c.startingLineNumber || 1}
copyButton={c?.showCopyButton === true}
highlightedLines={lines
? lines.sort((a, b) => {
return a - b;
})
: false}
/>
{/if}
{#if c.__component === 'posts.animated-image'}
{@const {
animation: {
data: {
attributes: {
url: animation,
width,
height,
alternativeText: aAlt,
<div class="post-layout">
<!-- <button on:click={asideToggle} class="aside-toggle"
>{asideLabel} Sidebar</button
> -->
<aside class="aside" class:show={showAside} role="navigation">
{#if (toc && toc.length) || (categories && categories.length) || (related && related.length)}
<PageNav {toc} {categories} {related} {pathname} {setActiveLink} />
{/if}
</aside>
<article class="post-article" class:full={!showAside}>
<time
class="pubdate"
datetime={publishedAt}
title={updatedAt ? `Updated ${up}` : false}>{pub}</time
>
{#if summary}
<div class="summary">
{@html summary}
</div>
{/if}
{#if content}
{#each content as c, i}
{#if c.__component === 'posts.text'}
{@html c.text}
{/if}
{#if c.__component === 'posts.quote'}
<blockquote>
<p>{c.text}</p>
{#if c.citation}
<footer>
<cite>
{#if c.citationLink}
&mdash;<a
href={c.citationLink}
title={c.citationLinkTitle}
target="_blank"
rel="nofollow noopener noreferrer">{c.citation}</a
>
{:else}
&mdash;{c.citation}
{/if}
</cite>
</footer>
{/if}
</blockquote>
{/if}
{#if c.__component === 'posts.code'}
{@const lines =
c?.highlightedLines?.split(',').map((item) => Number(item - 1)) ||
false}
<Code
key={i}
pageTitle={title}
pageSlug={slug}
text={c.code}
lang={c.syntax}
title={c?.title}
lineNumbers={c.showLineNumbers === true || lines.length > 0}
startingLineNumber={c.startingLineNumber || 1}
copyButton={c?.showCopyButton === true}
highlightedLines={lines
? lines.sort((a, b) => {
return a - b;
})
: false}
/>
{/if}
{#if c.__component === 'posts.animated-image'}
{@const {
animation: {
data: {
attributes: {
url: animation,
width,
height,
alternativeText: aAlt,
},
},
},
},
still: {
data: {
attributes: { url: still, alternativeText: sAlt },
still: {
data: {
attributes: { url: still, alternativeText: sAlt },
},
},
},
figcaption,
} = c}
<AnimatedImage
{animation}
{width}
{height}
{aAlt}
{still}
{sAlt}
{figcaption}
{slug}
/>
{/if}
{#if c.__component === 'posts.columns'}
{@const cols = c.columns}
{@const count = cols.length}
<h2>{count}</h2>
<section class="text-columns">
{#each cols as { heading, text }}
<div class="text-column" class:headless={!heading}>
{#if heading !== null}<header>{heading}</header>{/if}
{@html text}
</div>
{/each}
</section>
{/if}
{#if c.__component === 'posts.html'}
<div class="inline-html">
{@html c.html}
</div>
{/if}
{/each}
{/if}
{#if footnotes}
<footer class="footnotes-footer">
<Footnotes {footnotes} />
</footer>
{/if}
</article>

<!-- <button on:click={asideToggle} class="aside-toggle"
>{asideLabel} Sidebar</button
> -->
<aside class="aside" class:show={showAside} role="navigation">
{#if (toc && toc.length) || (categories && categories.length) || (related && related.length)}
<PageNav {toc} {categories} {related} {pathname} {setActiveLink} />
{/if}
</aside>
figcaption,
} = c}
<AnimatedImage
{animation}
{width}
{height}
{aAlt}
{still}
{sAlt}
{figcaption}
{slug}
/>
{/if}
{#if c.__component === 'posts.columns'}
{@const cols = c.columns}
{@const count = cols.length}
<h2>{count}</h2>
<section class="text-columns">
{#each cols as { heading, text }}
<div class="text-column" class:headless={!heading}>
{#if heading !== null}<header>{heading}</header>{/if}
{@html text}
</div>
{/each}
</section>
{/if}
{#if c.__component === 'posts.html'}
<div class="inline-html">
{@html c.html}
</div>
{/if}
{/each}
{/if}
{#if footnotes}
<footer class="footnotes-footer">
<Footnotes {footnotes} />
</footer>
{/if}
</article>
</div>
Loading

0 comments on commit a5f399c

Please sign in to comment.