-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
better post formatting, handle quotes (#9)
* extract single post into component * improve post formatting, handle quotes * fix workflow event type * fix incorrect quote * tweak talbroda json & snapshot timings * fix local image paths
- Loading branch information
1 parent
83c31c3
commit 5586167
Showing
10 changed files
with
384 additions
and
199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,270 @@ | ||
| --- | ||
| import PostTypeIcon from "../components/PostTypeIcon.astro"; | ||
| import type { getEnhancedPosts } from "../lib/server/posts"; | ||
| interface Props { | ||
| enablerImageUrl?: string; | ||
| post: ReturnType<typeof getEnhancedPosts>[0]; | ||
| postDelayLookup: Record<number, number>; | ||
| } | ||
| const { post, postDelayLookup, enablerImageUrl } = Astro.props; | ||
| --- | ||
|
|
||
| <div class="post-wrapper"> | ||
| <div | ||
| class="post" | ||
| data-dateval={post.dateValue} | ||
| style={`animation-delay: ${postDelayLookup[post.dateValue] / 1_000}s`} | ||
| > | ||
| <div class="post-card"> | ||
| <div class="post-load-bar"> | ||
| <div | ||
| class="post-load-bar-fill" | ||
| style={`animation-delay: ${postDelayLookup[post.dateValue] / 1_000}s; animation-duration: ${post.readTime.time / 1_000}s`} | ||
| > | ||
| </div> | ||
| </div> | ||
| { | ||
| post.structuredText.length && ( | ||
| <div class="post-body"> | ||
| {post.structuredText.map((part) => | ||
| part.type === "url" ? ( | ||
| <a href={part.href} title={part.href} target="_blank"> | ||
| {part.text} | ||
| </a> | ||
| ) : part.type === "space" ? ( | ||
| <span> </span> | ||
| ) : part.type === "break" ? ( | ||
| <div class="post-linebreak" /> | ||
| ) : ( | ||
| part.text | ||
| ) | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
| { | ||
| !!post.image && ( | ||
| <div class="post-image"> | ||
| <img src={post.image} /> | ||
| </div> | ||
| ) | ||
| } | ||
| {!!post.text && !!post.quote && <div class="post-quoted-spacer" />} | ||
| { | ||
| post.quote && ( | ||
| <div class="post-quoted"> | ||
| <div class="post-quoted-meta">Post by {post.quote.author}</div> | ||
| <div class="post-quoted-body"> | ||
| {post.structuredQuoteText.length && ( | ||
| <div class="post-body"> | ||
| {post.structuredQuoteText.map((part) => | ||
| part.type === "url" ? ( | ||
| <a href={part.href} title={part.href} target="_blank"> | ||
| {part.text} | ||
| </a> | ||
| ) : part.type === "space" ? ( | ||
| <span> </span> | ||
| ) : part.type === "break" ? ( | ||
| <div class="post-linebreak" /> | ||
| ) : ( | ||
| part.text | ||
| ) | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| {post.quote.image && ( | ||
| <div class="post-quoted-image"> | ||
| <img src={post.quote.image} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
| <div class="post-meta"> | ||
| <div>{post.formattedDate}</div> | ||
| <div class="post-meta-type"> | ||
| <a href={post.href} target="_blank"> | ||
| <PostTypeIcon icon={post.type} /> | ||
| </a> | ||
| </div> | ||
| { | ||
| enablerImageUrl && ( | ||
| <div class="post-avatar"> | ||
| <img src={enablerImageUrl} /> | ||
| </div> | ||
| ) | ||
| } | ||
| </div> | ||
| </div> | ||
| {post.commentary && <div class="post-commentary">{post.commentary}</div>} | ||
| </div> | ||
| </div> | ||
| <style> | ||
| .post { | ||
| opacity: 0; | ||
| position: relative; | ||
| left: -500px; | ||
| width: 400px; | ||
| max-width: 50%; | ||
|
|
||
| animation-duration: 1s; | ||
| animation-name: fadein; | ||
| animation-fill-mode: forwards; | ||
| } | ||
|
|
||
| .post-wrapper { | ||
| pointer-events: auto; | ||
| padding-bottom: 20px; | ||
| } | ||
|
|
||
| .post-card { | ||
| box-shadow: 0px 10px 10px rgba(10, 10, 10, 0.5); | ||
| position: relative; | ||
| background-color: #eee; | ||
| border-radius: 3px; | ||
|
|
||
| padding: 10px; | ||
| } | ||
|
|
||
| .post-load-bar { | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| .post-load-bar-fill { | ||
| height: 4px; | ||
| width: 0%; | ||
| opacity: 1; | ||
| animation-name: post-load-fill; | ||
| animation-timing-function: ease-out; | ||
| background-color: rgba(168, 44, 44, 1); | ||
| } | ||
|
|
||
| @keyframes post-load-fill { | ||
| 0% { | ||
| width: 0%; | ||
| opacity: 1; | ||
| } | ||
| 80% { | ||
| width: 100%; | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| width: 100%; | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| .post-quoted-spacer { | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .post-quoted { | ||
| border: 1px solid #444; | ||
| border-radius: 4px; | ||
| font-size: 0.9em; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .post-quoted-meta { | ||
| color: #555; | ||
| font-weight: bold; | ||
| padding: 6px; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .post-quoted-body { | ||
| padding: 6px; | ||
| padding-top: 0px; | ||
| } | ||
|
|
||
| .post-image { | ||
| margin-top: 10px; | ||
| border-radius: 4px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .post-linebreak { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .post-image img, | ||
| .post-quoted-image img { | ||
| max-width: 100%; | ||
| margin-bottom: -4px; | ||
| } | ||
|
|
||
| .post-commentary { | ||
| border: 1px solid #eee; | ||
| border-radius: 3px; | ||
| padding: 10px; | ||
| color: white; | ||
| margin-top: 15px; | ||
| } | ||
|
|
||
| .post-avatar { | ||
| position: absolute; | ||
| left: -65px; | ||
| bottom: -1px; | ||
| width: 50px; | ||
| height: 50px; | ||
| overflow: hidden; | ||
| border-radius: 25px; | ||
| box-shadow: 0px 10px 10px rgba(10, 10, 10, 0.5); | ||
| } | ||
|
|
||
| .post-avatar > img { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .post-meta { | ||
| margin-top: 10px; | ||
| font-size: 0.8rem; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
|
|
||
| .post-meta > div { | ||
| align-self: center; | ||
| } | ||
|
|
||
| .post-meta-type { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .post-meta-type > a { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| @keyframes fadein { | ||
| from { | ||
| opacity: 0; | ||
| left: -500px; | ||
| } | ||
|
|
||
| to { | ||
| opacity: 0.8; | ||
| left: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (max-aspect-ratio: 800/900) { | ||
| .post { | ||
| max-width: none; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .post-avatar { | ||
| width: 35px; | ||
| height: 35px; | ||
| left: -48px; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.