michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactoring the layout, adding font & spacer scaling

Browse source
This commit is contained in:
Tony Sullivan 2023-09-14 14:41:08 -05:00
parent 01bef5d14b
commit 8c5280937d
21 changed files with 455 additions and 358 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
examples/social-feed/src/components/Article.astro Normal file
View file

@ -0,0 +1,93 @@
---
import ArticleHeader from './ArticleHeader.astro';
import Icon from './Icon.astro';
import Prose from './Prose.astro';
import SplitLayout from './SplitLayout.astro';
import type { Article, Post } from '../content/config.js';
export interface Props {
article: Article;
}
const { article } = Astro.props;
const { Content, headings } = await article.render();
---
<article>
<ArticleHeader {article} class="header" />
<SplitLayout reverse>
<div class="p-content">
<Content />
</div>
{
headings.length > 0 && (
<aside>
<h3>Table of contents</h3>
<ul>
{headings.map(({ slug, text }) => (
<li>
<a href={`${Astro.url.pathname}#${slug}`}>{text}</a>
</li>
))}
</ul>
</aside>
)
}
</SplitLayout>
</article>
<style>
article {
display: flex;
flex-direction: column;
gap: var(--theme-space-lg);
padding-block: var(--theme-space-md);
}
.p-content > :global(* + *) {
margin-block-start: 1em;
}
.p-content > :global(p:first-child::first-letter) {
float: left;
font-size: 3.5rem;
padding-inline-end: 0.5rem;
padding-block-start: 0.35rem;
font-weight: bold;
}
.p-content :global(img, video, figure) {
margin-inline: auto;
}
aside {
display: none;
}
aside ul {
list-style: none;
padding: 0;
margin-top: var(--theme-space-sm);
}
aside ul > * + * {
margin-block-start: var(--theme-space-xs);
}
aside a {
font-weight: bold;
text-decoration: none;
}
@media (min-width: 50em) {
aside {
display: block;
}
.p-content > :global(* + *) {
margin-block-start: 1.5em;
}
}
</style>

69
examples/social-feed/src/components/ArticleHeader.astro
View file

@ -1,15 +1,15 @@
---
import type { HTMLAttributes } from 'astro/types';
import { Image } from 'astro:assets';
import { CollectionEntry } from 'astro:content';
import getReadingTime from 'reading-time';
import FormattedDate from './FormattedDate.astro';
import Icon from './Icon.astro';
import TagList from './TagList.astro';
import settings from '../settings.js';
import type { Article } from '../content/config.js';
interface Props extends HTMLAttributes<'header'> {
article: CollectionEntry<'posts'>;
article: Article;
}
const { article, ...attrs } = Astro.props;
@ -18,15 +18,10 @@ const { text: readingTime } = await getReadingTime(article.body);
---
<header {...attrs}>
<a href="/" class="back">
<Icon icon="arrow-left" color="var(--theme-accent-dark)" size="1.25rem" />
<span>Back to feed</span>
</a>
<div class="cover">
{
article.data.cover && (
<Image src={article.data.cover.src} alt={article.data.cover.alt} class="cover" />
<Image src={article.data.cover.src} alt={article.data.cover.alt} />
)
}
@ -55,55 +50,61 @@ const { text: readingTime } = await getReadingTime(article.body);
header {
display: flex;
flex-direction: column;
gap: 1rem;
}
.back {
text-decoration: none;
font-weight: bold;
}
.back {
display: flex;
align-items: center;
gap: 0.5rem;
margin-inline-start: -4px;
gap: var(--theme-space-sm);
}
.cover {
position: relative;
display: grid;
width: 100%;
min-height: 150px;
background: var(--theme-gradient-main);
border-radius: 1.25rem;
margin-bottom: 1.25rem;
border-radius: var(--theme-radius-xl);
margin-block-end: var(--theme-space-md);
}
.cover > img {
grid-column: 1;
grid-row: 1;
width: 100%;
min-height: inherit;
height: 100%;
aspect-ratio: 2.777;
object-fit: cover;
border-radius: inherit;
}
.author {
position: absolute;
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
gap: 0.5rem;
bottom: 0%;
right: 3.125rem;
translate: 0 50%;
gap: var(--theme-space-2xs);
width: fit-content;
height: fit-content;
align-self: end;
justify-self: center;
transform: translateY(50%);
box-shadow: var(--theme-shadow-md);
background-color: var(--theme-accent-light);
padding: 0.75rem 1.5rem;
border-radius: 1.25rem;
padding: var(--theme-space-3xs) var(--theme-space-md);
border-radius: var(--theme-radius-xl);
border: 3px solid var(--theme-accent-dark);
}
@media (min-width: 640px) {
.cover {
margin-block-end: var(--theme-space-sm);
}
.author {
justify-self: end;
margin-inline-end: var(--theme-space-xl);
}
}
.author img {
width: 2.5rem;
height: 2.5rem;
width: var(--theme-space-lg);
height: var(--theme-space-lg);
}
.author .u-name {
@ -126,6 +127,6 @@ const { text: readingTime } = await getReadingTime(article.body);
}
.meta svg {
margin-block-end: 0.25rem;
margin-block-end: var(--theme-space-3xs);
}
</style>

31
examples/social-feed/src/components/Card.astro
View file

@ -5,21 +5,20 @@ import FormattedDate from './FormattedDate.astro';
import Icon from './Icon.astro';
import TagList from './TagList.astro';
import settings from '../settings.js';
import { isArticle, type Post } from '../content/config.js';
export interface Props extends HTMLAttributes<'article'> {
post: CollectionEntry<'articles'> | CollectionEntry<'notes'>;
post: Post;
}
const { post } = Astro.props;
const { post, ...attrs } = Astro.props;
const { pubDate, categories = [], image, title, href } = post.data;
const { Content } = await post.render();
console.log(post.data)
const { pubDate, categories = [] } = post.data;
const cover = 'cover' in post.data && post.data.cover;
const title = 'title' in post.data && post.data.title;
---
<article>
<article {...attrs}>
<header>
<Image {...settings.avatar} width={120} class="u-image" />
<strong class="u-name">{settings.name}</strong>
@ -30,10 +29,10 @@ console.log(post.data)
</div>
{categories.length > 0 && <TagList tags={categories} class="tags" />}
</header>
{image && <Image {...image} width={1060} />}
{cover && <Image {...cover} width={1060} />}
{title && <h3>{title}</h3>}
{
post.data.type === 'article' ? (
isArticle(post) ? (
<p>{post.data.description}</p>
) : (
post.render().then(({ Content }) => <Content />)
@ -50,26 +49,26 @@ console.log(post.data)
<style>
article {
padding: 1.25rem 1.25rem 1.5rem;
padding: var(--theme-space-sm) var(--theme-space-sm) var(--theme-space-md);
background-color: var(--theme-bg-accent);
border-radius: var(--theme-radius-xl);
box-shadow: var(--theme-shadow-md);
}
article > :global(* + *) {
margin-block-start: 1.25rem;
margin-block-start: var(--theme-space-sm);
}
header {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas: 'avatar name nickname' 'avatar tags tags';
align-items: center;
row-gap: 0.5rem;
column-gap: 1rem;
row-gap: var(--theme-space-2xs);
column-gap: var(--theme-space-sm);
}
.u-image {
grid-area: avatar;
width: 3.75rem;
height: 3.75rem;
width: var(--theme-space-xl);
height: var(--theme-space-xl);
border-radius: var(--theme-radius-full);
background-color: var(--theme-shade-subtle);
}

62
examples/social-feed/src/components/Footer.astro
View file

@ -1,53 +1,63 @@
---
import settings from '../settings';
import Icon from './Icon.astro';
const socialLinks = Object.values(settings.social)
---
<footer>
<div class="row">
<p>
Copyright © {new Date().getFullYear()}
{settings.name}
<section>
<p>
{settings.name} © {new Date().getFullYear()}
</p>
<p>
Designed & Developed with<Icon icon="heart" size="1.75em" />
<span class="sr-only">love</span>
<b>•</b>
<p>
Designed & Developed with ♥
</p>
<p><a href="/rss.xml"><Icon icon="rss-alt" size="1.75em" />RSS</a></p>
</div>
<div class="row">
<a href={settings.social.twitter}>Twitter</a>
<a href={settings.social.twitch}>Twitch</a>
<a href={settings.social.github}>GitHub</a>
<a href={settings.social.devto}>DEV</a>
<a href={settings.social.codepen}>Codepen</a>
</div>
<b>•</b>
<p><a href="/rss.xml"><Icon icon="rss-alt" size="1.5em" />RSS</a></p>
</section>
<section>
{
socialLinks.map(({ url, title }) => (
<a href={url}>{title}</a>
))
}
</section>
</footer>
<style>
footer {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
align-items: center;
margin-top: auto;
border-top: 3px solid var(--theme-shade-subtle);
border-radius: var(--theme-radius-xl);
padding: 1.5rem;
gap: 1rem;
padding: var(--theme-space-md);
gap: var(--theme-space-sm);
color: var(--theme-gray-200);
font-size: var(--theme-text-sm);
}
.row {
display: flex;
flex-wrap: wrap;
gap: 0 1.5rem;
justify-content: center;
}
section {
display: flex;
gap: var(--theme-space-xs);
}
p {
display: flex;
align-items: center;
gap: var(--theme-space-sm);
}
a {
color: inherit;
text-decoration: none;
}
p :global(svg) {
margin-block-start: -.25em;
}
</style>

6
examples/social-feed/src/components/Header.astro
View file

@ -1,9 +1,12 @@
---
import type { HTMLAttributes } from 'astro/types';
import settings from '../settings';
import ThemeToggle from './ThemeToggle.astro';
export interface Props extends HTMLAttributes<'header'> {}
---
<header>
<header {...Astro.props}>
<a class="site-name" href="/">{settings.username}</a>
<ThemeToggle />
</header>
@ -13,6 +16,7 @@ import ThemeToggle from './ThemeToggle.astro';
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--theme-space-md);
}
.site-name {

29
examples/social-feed/src/components/IconPaths.ts
View file

@ -14,22 +14,23 @@ export const iconPaths = {
'rss-alt': `<path d="M71.8 153.01a28.65 28.65 0 1 0 40.49 40.5 28.65 28.65 0 0 0 0-40.5 29.41 29.41 0 0 0-40.49 0Zm27.02 27.03a9.55 9.55 0 0 1-13.56 0 9.55 9.55 0 0 1 0-13.56 9.55 9.55 0 0 1 13.56 0 9.54 9.54 0 0 1 0 13.56Zm-6.78-73.62a9.55 9.55 0 1 0 0 19.1 47.74 47.74 0 0 1 47.75 47.74 9.55 9.55 0 1 0 19.1 0 66.84 66.84 0 0 0-66.85-66.84Zm0-38.2a9.55 9.55 0 1 0 0 19.1 85.94 85.94 0 0 1 85.94 85.94 9.55 9.55 0 1 0 19.1 0A105.04 105.04 0 0 0 92.04 68.22Z"/>`,
'link-h': `<path d="M96.9 128.25a7.78 7.78 0 0 0 7.77 7.77h46.66a7.78 7.78 0 1 0 0-15.55h-46.66a7.77 7.77 0 0 0-7.78 7.78Zm15.55 23.32H89.12a23.33 23.33 0 0 1 0-46.65h23.33a7.78 7.78 0 1 0 0-15.55H89.12a38.88 38.88 0 0 0 0 77.76h23.33a7.78 7.78 0 1 0 0-15.56Zm54.43-62.2h-23.33a7.78 7.78 0 1 0 0 15.55h23.33a23.33 23.33 0 0 1 0 46.65h-23.33a7.77 7.77 0 1 0 0 15.56h23.33a38.88 38.88 0 1 0 0-77.76Z"/>`,
'location-point': `<path d="M193.8 110.2a66.1 66.1 0 1 0-112.5 53.1l41.3 41.3a7.8 7.8 0 0 0 11 0l41-41.3a65.8 65.8 0 0 0 19.2-53.1Zm-30 42.1L128 188.1l-35.8-35.8a50.5 50.5 0 0 1-7.5-61.9A51 51 0 0 1 128 65.8a50.3 50.3 0 0 1 50.3 45.8 50.5 50.5 0 0 1-14.5 40.7ZM128 82a35 35 0 1 0 0 70 35 35 0 0 0 0-70Zm0 54.4a19.4 19.4 0 1 1 0-38.9 19.4 19.4 0 0 1 0 38.9Z"/>`,
clock: `<path d="M158 118H138V78C138 75.3478 136.946 72.8043 135.071 70.929C133.196 69.0536 130.652 68 128 68C125.348 68 122.804 69.0536 120.929 70.929C119.054 72.8043 118 75.3478 118 78V128C118 130.652 119.054 133.196 120.929 135.071C122.804 136.946 125.348 138 128 138H158C160.653 138 163.195 136.946 165.07 135.071C166.947 133.196 168 130.652 168 128C168 125.348 166.947 122.804 165.07 120.929C163.195 119.054 160.653 118 158 118ZM128 28C108.222 28 88.8878 33.865 72.443 44.853C55.9981 55.8411 43.1808 71.459 35.612 89.7317C28.0434 108.004 26.063 128.111 29.9214 147.509C33.78 166.907 43.3042 184.725 57.2893 198.71C71.2746 212.696 89.093 222.221 108.491 226.078C127.889 229.938 147.996 227.957 166.269 220.387C184.541 212.819 200.158 200.002 211.147 183.557C222.134 167.112 228 147.778 228 128C228 114.868 225.413 101.864 220.387 89.7317C215.363 77.599 207.997 66.5752 198.71 57.2893C189.426 48.0035 178.402 40.6374 166.269 35.612C154.136 30.5866 141.132 28 128 28ZM128 208C112.177 208 96.7104 203.309 83.5544 194.517C70.3984 185.726 60.1446 173.232 54.0896 158.615C48.0347 143.997 46.4504 127.911 49.5371 112.393C52.624 96.8742 60.2432 82.6197 71.4315 71.4315C82.6197 60.2432 96.8742 52.624 112.393 49.5371C127.911 46.4504 143.997 48.0346 158.615 54.0896C173.232 60.1446 185.726 70.3984 194.517 83.5544C203.309 96.7102 208 112.177 208 128C208 149.217 199.571 169.566 184.568 184.568C169.566 199.571 149.217 208 128 208Z" fill="currentColor"/>`,
share: `<path d="M192 149.333C185.698 149.375 179.483 150.812 173.803 153.541C168.123 156.271 163.117 160.225 159.147 165.12L104.747 140.053C107.305 132.221 107.305 123.778 104.747 115.947L159.147 90.8799C165.564 98.6235 174.51 103.851 184.406 105.641C194.304 107.43 204.514 105.666 213.236 100.66C221.96 95.654 228.634 87.7276 232.08 78.2799C235.528 68.832 235.526 58.47 232.078 49.0229C228.629 39.5756 221.953 31.6505 213.23 26.6459C204.507 21.6415 194.296 19.8793 184.399 21.6706C174.504 23.4618 165.557 28.6913 159.141 36.4361C152.725 44.1809 149.252 53.9431 149.333 63.9999C149.365 66.541 149.615 69.0747 150.08 71.5732L93.76 97.4932C87.7556 91.622 80.1519 87.6534 71.9019 86.0844C63.6519 84.5155 55.1224 85.4161 47.3819 88.6732C39.6414 91.9305 33.0343 97.3995 28.3883 104.395C23.7423 111.391 21.264 119.602 21.264 128C21.264 136.398 23.7423 144.609 28.3883 151.604C33.0343 158.6 39.6414 164.069 47.3819 167.327C55.1224 170.583 63.6519 171.485 71.9019 169.916C80.1519 168.347 87.7556 164.378 93.76 158.507L150.08 184.427C149.615 186.925 149.365 189.459 149.333 192C149.333 200.438 151.836 208.688 156.524 215.704C161.212 222.721 167.876 228.19 175.673 231.419C183.469 234.648 192.047 235.493 200.324 233.846C208.601 232.2 216.203 228.136 222.17 222.17C228.137 216.203 232.201 208.6 233.846 200.324C235.493 192.047 234.649 183.469 231.419 175.672C228.19 167.876 222.721 161.212 215.705 156.524C208.688 151.836 200.438 149.333 192 149.333ZM192 42.6665C196.22 42.6665 200.344 43.9177 203.852 46.2618C207.36 48.606 210.095 51.9378 211.71 55.836C213.324 59.7341 213.746 64.0235 212.924 68.1618C212.1 72.3 210.068 76.1013 207.085 79.0849C204.101 82.0683 200.3 84.1001 196.162 84.9233C192.024 85.7464 187.734 85.324 183.836 83.7093C179.938 82.0947 176.606 79.3603 174.262 75.852C171.918 72.3437 170.667 68.2193 170.667 63.9999C170.667 58.3419 172.914 52.9157 176.915 48.9149C180.916 44.9142 186.342 42.6665 192 42.6665ZM64 149.333C59.7806 149.333 55.6561 148.082 52.1479 145.738C48.6396 143.394 45.9052 140.062 44.2906 136.164C42.6759 132.266 42.2535 127.976 43.0766 123.838C43.8998 119.699 45.9316 115.899 48.915 112.915C51.8986 109.932 55.6998 107.9 59.8381 107.076C63.9764 106.253 68.2657 106.676 72.1639 108.29C76.0621 109.905 79.3939 112.64 81.7381 116.148C84.0822 119.656 85.3334 123.78 85.3334 128C85.3334 133.658 83.0857 139.084 79.0849 143.085C75.0842 147.086 69.658 149.333 64 149.333ZM192 213.333C187.78 213.333 183.657 212.082 180.148 209.738C176.64 207.394 173.905 204.062 172.29 200.164C170.676 196.266 170.254 191.977 171.076 187.838C171.9 183.699 173.932 179.899 176.915 176.915C179.899 173.932 183.7 171.9 187.838 171.076C191.977 170.254 196.266 170.676 200.164 172.29C204.062 173.905 207.394 176.64 209.738 180.148C212.082 183.655 213.333 187.78 213.333 192C213.333 197.658 211.086 203.084 207.085 207.085C203.084 211.086 197.658 213.333 192 213.333Z" fill="currentColor"/>`,
user: `<path d="M156.9 133.5a46.7 46.7 0 1 0-57.7 0 77.8 77.8 0 0 0-48.4 63.6 7.8 7.8 0 0 0 15.5 1.7 62.2 62.2 0 0 1 123.7 0 7.8 7.8 0 0 0 7.8 7h.8a7.8 7.8 0 0 0 6.9-8.6 77.8 77.8 0 0 0-48.6-63.7ZM128 128a31.1 31.1 0 1 1 0-62.2 31.1 31.1 0 0 1 0 62.2Z"/>`,
heart: `<path d="M187.84 74.61A46.17 46.17 0 0 0 128 70.16a46.17 46.17 0 0 0-62.29 6.86 45.56 45.56 0 0 0 2.45 62.27l54.63 54.32a7.32 7.32 0 0 0 8.03 1.6c.9-.37 1.7-.92 2.39-1.6l54.63-54.32a45.68 45.68 0 0 0 13.48-32.34 45.48 45.48 0 0 0-13.48-32.34Zm-10.34 54.4L128 178.15l-49.5-49.14a31.15 31.15 0 0 1-6.8-33.89 31.24 31.24 0 0 1 11.47-14 31.51 31.51 0 0 1 17.33-5.34c8.26.02 16.17 3.3 22 9.11a7.34 7.34 0 0 0 10.41 0 31.42 31.42 0 0 1 42.74 1.6 31.05 31.05 0 0 1 1.26 42.52h.59Z"/>`,
'moon-stars': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" d="M216 112V64m24 24h-48m-24-64v32m16-16h-32m65 113A92 92 0 0 1 103 39h0a92 92 0 1 0 114 114Z"/>`,
sun: `<circle cx="128" cy="128" r="60" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" d="M128 36V16M63 63 49 49m-13 79H16m47 65-14 14m79 13v20m65-47 14 14m13-79h20m-47-65 14-14"/>`,
'twitter-logo': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M128 88c0-22 18.5-40.3 40.5-40a40 40 0 0 1 36.2 24H240l-32.3 32.3A127.9 127.9 0 0 1 80 224c-32 0-40-12-40-12s32-12 48-36c0 0-64-32-48-120 0 0 40 40 88 48Z"/>`,
'codepen-logo': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m232 101-104 59-104-59 100.1-56.8a8.3 8.3 0 0 1 7.8 0Z"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m232 165-100.1 56.8a8.3 8.3 0 0 1-7.8 0L24 165l104-59Zm0-64v64M24 101v64m104-5v62.8m0-179.6V106"/>`,
'github-logo': `<g stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke-width="14.7" d="M55.7 167.2c13.9 1 21.3 13.1 22.2 14.6 4.2 7.2 10.4 9.6 18.3 7.1l1.1-3.4a60.3 60.3 0 0 1-25.8-11.9c-12-10.1-18-25.6-18-46.3"/><path fill="none" stroke-width="16" d="M61.4 205.1a24.5 24.5 0 0 1-3-6.1c-3.2-7.9-7.1-10.6-7.8-11.1l-1-.6c-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.7 46.7 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4 0 42.6-25.8 54.7-43.6 58.7 1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3"/><path fill="none" stroke-width="16" d="M160.9 185.7c1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3A98.6 98.6 0 1 0 61.4 205c-1.4-2.1-11.3-17.5-11.8-17.8-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.4 46.4 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4.1 42.6-25.8 54.7-43.6 58.6z"/><path fill="none" stroke-width="18.7" d="m170.1 203.3 17.3-12 17.2-18.7 9.5-26.6v-27.9l-9.5-27.5" /><path fill="none" stroke-width="22.7" d="m92.1 57.3 23.3-4.6 18.7-1.4 29.3 5.4m-110 32.6-8 16-4 21.4.6 20.3 3.4 13" /><path fill="none" stroke-width="13.3" d="M28.8 133a100 100 0 0 0 66.9 94.4v-8.7c-22.4 1.8-33-11.5-35.6-19.8-3.4-8.6-7.8-11.4-8.5-11.8"/></g>`,
'twitch-logo': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M165 200h-42a8 8 0 0 0-5 2l-46 38v-40H48a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8v108a8 8 0 0 1-3 6l-43 36a8 8 0 0 1-5 2Zm3-112v48m-48-48v48"/>`,
'youtube-logo': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m160 128-48-32v64l48-32z"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M24 128c0 30 3 47 5 56a16 16 0 0 0 10 11c34 13 89 13 89 13s56 0 89-13a16 16 0 0 0 10-11c2-9 5-26 5-56s-3-47-5-56a16 16 0 0 0-10-11c-33-13-89-13-89-13s-55 0-89 13a16 16 0 0 0-10 11c-2 9-5 26-5 56Z"/>`,
'dribbble-logo': `<circle cx="128" cy="128" r="96" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M71 205a160 160 0 0 1 137-77l16 1m-36-76a160 160 0 0 1-124 59 165 165 0 0 1-30-3"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M86 42a161 161 0 0 1 74 177"/>`,
'discord-logo': `<circle stroke="none" cx="96" cy="144" r="12"/><circle stroke="none" cx="160" cy="144" r="12"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M74 80a175 175 0 0 1 54-8 175 175 0 0 1 54 8m0 96a175 175 0 0 1-54 8 175 175 0 0 1-54-8"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m155 182 12 24a8 8 0 0 0 9 4c25-6 46-16 61-30a8 8 0 0 0 3-8L206 59a8 8 0 0 0-5-5 176 176 0 0 0-30-9 8 8 0 0 0-9 5l-8 24m-53 108-12 24a8 8 0 0 1-9 4c-25-6-46-16-61-30a8 8 0 0 1-3-8L50 59a8 8 0 0 1 5-5 176 176 0 0 1 30-9 8 8 0 0 1 9 5l8 24"/>`,
'linkedin-logo': `<rect width="184" height="184" x="36" y="36" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" rx="8"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M120 112v64m-32-64v64m32-36a28 28 0 0 1 56 0v36"/><circle stroke="none" cx="88" cy="80" r="12"/>`,
'instagram-logo': `<circle cx="128" cy="128" r="40" fill="none" stroke-miterlimit="10" stroke-width="16"/><rect width="184" height="184" x="36" y="36" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" rx="48"/><circle cx="180" cy="76" r="12" stroke="none" />`,
'tiktok-logo': `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M168 106a96 96 0 0 0 56 18V84a56 56 0 0 1-56-56h-40v128a28 28 0 1 1-40-25V89a68 68 0 1 0 80 67Z"/>`,
'devto-logo': `<path fill-rule="evenodd" d="M37 33c-2.2.5-4 2-4.7 4.2l-.3.8v181.8l.3.8c.7 2 2 3.3 4 4l.8.3H219l.7-.3c2-.7 3.3-2 4-4l.3-.8V38l-.3-.8c-.7-2-2-3.3-4-4l-.8-.3H37Zm43.6 58.3A20.7 20.7 0 0 1 98 109.6c.3 1.9.3 36.7 0 38.6a20.5 20.5 0 0 1-16 17.9c-2.6.5-1.8.5-14.9.6h-12V91h12.2c11 0 12.4 0 13.2.2Zm63.6 6.5v6.8H120v17.6h14.8v13.4H120v17.5h24.2v13.6h-30l-.8-.3a9.3 9.3 0 0 1-6.7-6.7l-.2-.9v-60l.2-.8c1-3.4 3.6-6 7-6.7.8-.2 1.8-.2 15.7-.2h14.8v6.7Zm27 8.6a268210 268210 0 0 1 9.5 36.4 5274.6 5274.6 0 0 0 13.5-51.6H209l-8.8 33a527.2 527.2 0 0 1-9.3 34.2 15 15 0 0 1-6.5 7.5c-1.3.6-2 .7-3.7.7-1.2 0-1.6 0-2.2-.2-3.2-.8-5.8-3.3-8-7.7l-.7-1.5-8.7-32.9-8.7-33c0-.2.3-.2 7.4-.2h7.4l4 15.3ZM68.7 128.8v24.3h9.5l.8-.3a9 9 0 0 0 4.7-3.4 7 7 0 0 0 1-2.4v-35.7l-.1-.8c-.6-2.3-1.9-3.8-4.3-5-1.8-.9-1.9-.9-7-1h-4.6v24.3Z" clip-rule="evenodd"/>`,
'mastodon-logo': `<path d="M219.3 74.8a49.7 49.7 0 0 0-43-40.4c-3.7-.6-17.6-2.5-49.8-2.5h-.3c-32.2 0-39.1 2-42.8 2.5-21.1 3-40.5 17.8-45.2 39a132.2 132.2 0 0 0-2 32.4c.6 15.1.7 30.3 2 45.3 1 10 2.7 20 5 29.8 4.5 18 22.6 33.1 40.3 39.2a108.8 108.8 0 0 0 65.1 1.4c4.7-1.5 10.3-3.2 14.4-6a.5.5 0 0 0 .2-.4v-14.7a.4.4 0 0 0-.4-.4h-.2a158 158 0 0 1-38.1 4.4c-22.1 0-28-10.3-29.8-14.7a45.1 45.1 0 0 1-2.4-12 .4.4 0 0 1 .4 0c12.3 3 24.9 4.4 37.5 4.4h9.1c12.7-.4 26.1-1 38.6-3.5.3 0 .6 0 .9-.2 19.7-3.7 38.5-15.5 40.4-45.3l.3-13.5c0-4 1.3-29.3-.2-44.8Zm-30.4 74.3h-20.7V99c0-10.6-4.5-16-13.6-16-10 0-15 6.4-15 19v27.5h-20.5V102c0-12.6-5-19-15-19-9 0-13.5 5.4-13.5 16v50H69.9V97.4A37 37 0 0 1 78 72c5.6-6.2 13-9.4 22.1-9.4 10.7 0 18.7 4 24 12.1l5.2 8.6 5.2-8.6c5.3-8 13.3-12 24-12 9 0 16.5 3.1 22.1 9.3a36.9 36.9 0 0 1 8.2 25.3V149Z"/>`,
clock: `<path d="M158 118H138V78C138 75.3478 136.946 72.8043 135.071 70.929C133.196 69.0536 130.652 68 128 68C125.348 68 122.804 69.0536 120.929 70.929C119.054 72.8043 118 75.3478 118 78V128C118 130.652 119.054 133.196 120.929 135.071C122.804 136.946 125.348 138 128 138H158C160.653 138 163.195 136.946 165.07 135.071C166.947 133.196 168 130.652 168 128C168 125.348 166.947 122.804 165.07 120.929C163.195 119.054 160.653 118 158 118ZM128 28C108.222 28 88.8878 33.865 72.443 44.853C55.9981 55.8411 43.1808 71.459 35.612 89.7317C28.0434 108.004 26.063 128.111 29.9214 147.509C33.78 166.907 43.3042 184.725 57.2893 198.71C71.2746 212.696 89.093 222.221 108.491 226.078C127.889 229.938 147.996 227.957 166.269 220.387C184.541 212.819 200.158 200.002 211.147 183.557C222.134 167.112 228 147.778 228 128C228 114.868 225.413 101.864 220.387 89.7317C215.363 77.599 207.997 66.5752 198.71 57.2893C189.426 48.0035 178.402 40.6374 166.269 35.612C154.136 30.5866 141.132 28 128 28ZM128 208C112.177 208 96.7104 203.309 83.5544 194.517C70.3984 185.726 60.1446 173.232 54.0896 158.615C48.0347 143.997 46.4504 127.911 49.5371 112.393C52.624 96.8742 60.2432 82.6197 71.4315 71.4315C82.6197 60.2432 96.8742 52.624 112.393 49.5371C127.911 46.4504 143.997 48.0346 158.615 54.0896C173.232 60.1446 185.726 70.3984 194.517 83.5544C203.309 96.7102 208 112.177 208 128C208 149.217 199.571 169.566 184.568 184.568C169.566 199.571 149.217 208 128 208Z" fill="currentColor"/>`,
share: `<path d="M192 149.333C185.698 149.375 179.483 150.812 173.803 153.541C168.123 156.271 163.117 160.225 159.147 165.12L104.747 140.053C107.305 132.221 107.305 123.778 104.747 115.947L159.147 90.8799C165.564 98.6235 174.51 103.851 184.406 105.641C194.304 107.43 204.514 105.666 213.236 100.66C221.96 95.654 228.634 87.7276 232.08 78.2799C235.528 68.832 235.526 58.47 232.078 49.0229C228.629 39.5756 221.953 31.6505 213.23 26.6459C204.507 21.6415 194.296 19.8793 184.399 21.6706C174.504 23.4618 165.557 28.6913 159.141 36.4361C152.725 44.1809 149.252 53.9431 149.333 63.9999C149.365 66.541 149.615 69.0747 150.08 71.5732L93.76 97.4932C87.7556 91.622 80.1519 87.6534 71.9019 86.0844C63.6519 84.5155 55.1224 85.4161 47.3819 88.6732C39.6414 91.9305 33.0343 97.3995 28.3883 104.395C23.7423 111.391 21.264 119.602 21.264 128C21.264 136.398 23.7423 144.609 28.3883 151.604C33.0343 158.6 39.6414 164.069 47.3819 167.327C55.1224 170.583 63.6519 171.485 71.9019 169.916C80.1519 168.347 87.7556 164.378 93.76 158.507L150.08 184.427C149.615 186.925 149.365 189.459 149.333 192C149.333 200.438 151.836 208.688 156.524 215.704C161.212 222.721 167.876 228.19 175.673 231.419C183.469 234.648 192.047 235.493 200.324 233.846C208.601 232.2 216.203 228.136 222.17 222.17C228.137 216.203 232.201 208.6 233.846 200.324C235.493 192.047 234.649 183.469 231.419 175.672C228.19 167.876 222.721 161.212 215.705 156.524C208.688 151.836 200.438 149.333 192 149.333ZM192 42.6665C196.22 42.6665 200.344 43.9177 203.852 46.2618C207.36 48.606 210.095 51.9378 211.71 55.836C213.324 59.7341 213.746 64.0235 212.924 68.1618C212.1 72.3 210.068 76.1013 207.085 79.0849C204.101 82.0683 200.3 84.1001 196.162 84.9233C192.024 85.7464 187.734 85.324 183.836 83.7093C179.938 82.0947 176.606 79.3603 174.262 75.852C171.918 72.3437 170.667 68.2193 170.667 63.9999C170.667 58.3419 172.914 52.9157 176.915 48.9149C180.916 44.9142 186.342 42.6665 192 42.6665ZM64 149.333C59.7806 149.333 55.6561 148.082 52.1479 145.738C48.6396 143.394 45.9052 140.062 44.2906 136.164C42.6759 132.266 42.2535 127.976 43.0766 123.838C43.8998 119.699 45.9316 115.899 48.915 112.915C51.8986 109.932 55.6998 107.9 59.8381 107.076C63.9764 106.253 68.2657 106.676 72.1639 108.29C76.0621 109.905 79.3939 112.64 81.7381 116.148C84.0822 119.656 85.3334 123.78 85.3334 128C85.3334 133.658 83.0857 139.084 79.0849 143.085C75.0842 147.086 69.658 149.333 64 149.333ZM192 213.333C187.78 213.333 183.657 212.082 180.148 209.738C176.64 207.394 173.905 204.062 172.29 200.164C170.676 196.266 170.254 191.977 171.076 187.838C171.9 183.699 173.932 179.899 176.915 176.915C179.899 173.932 183.7 171.9 187.838 171.076C191.977 170.254 196.266 170.676 200.164 172.29C204.062 173.905 207.394 176.64 209.738 180.148C212.082 183.655 213.333 187.78 213.333 192C213.333 197.658 211.086 203.084 207.085 207.085C203.084 211.086 197.658 213.333 192 213.333Z" fill="currentColor"/>`
twitter: `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M128 88c0-22 18.5-40.3 40.5-40a40 40 0 0 1 36.2 24H240l-32.3 32.3A127.9 127.9 0 0 1 80 224c-32 0-40-12-40-12s32-12 48-36c0 0-64-32-48-120 0 0 40 40 88 48Z"/>`,
codepen: `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m232 101-104 59-104-59 100.1-56.8a8.3 8.3 0 0 1 7.8 0Z"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m232 165-100.1 56.8a8.3 8.3 0 0 1-7.8 0L24 165l104-59Zm0-64v64M24 101v64m104-5v62.8m0-179.6V106"/>`,
github: `<g stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke-width="14.7" d="M55.7 167.2c13.9 1 21.3 13.1 22.2 14.6 4.2 7.2 10.4 9.6 18.3 7.1l1.1-3.4a60.3 60.3 0 0 1-25.8-11.9c-12-10.1-18-25.6-18-46.3"/><path fill="none" stroke-width="16" d="M61.4 205.1a24.5 24.5 0 0 1-3-6.1c-3.2-7.9-7.1-10.6-7.8-11.1l-1-.6c-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.7 46.7 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4 0 42.6-25.8 54.7-43.6 58.7 1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3"/><path fill="none" stroke-width="16" d="M160.9 185.7c1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3A98.6 98.6 0 1 0 61.4 205c-1.4-2.1-11.3-17.5-11.8-17.8-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.4 46.4 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4.1 42.6-25.8 54.7-43.6 58.6z"/><path fill="none" stroke-width="18.7" d="m170.1 203.3 17.3-12 17.2-18.7 9.5-26.6v-27.9l-9.5-27.5" /><path fill="none" stroke-width="22.7" d="m92.1 57.3 23.3-4.6 18.7-1.4 29.3 5.4m-110 32.6-8 16-4 21.4.6 20.3 3.4 13" /><path fill="none" stroke-width="13.3" d="M28.8 133a100 100 0 0 0 66.9 94.4v-8.7c-22.4 1.8-33-11.5-35.6-19.8-3.4-8.6-7.8-11.4-8.5-11.8"/></g>`,
twitch: `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M165 200h-42a8 8 0 0 0-5 2l-46 38v-40H48a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8v108a8 8 0 0 1-3 6l-43 36a8 8 0 0 1-5 2Zm3-112v48m-48-48v48"/>`,
youtube: `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m160 128-48-32v64l48-32z"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M24 128c0 30 3 47 5 56a16 16 0 0 0 10 11c34 13 89 13 89 13s56 0 89-13a16 16 0 0 0 10-11c2-9 5-26 5-56s-3-47-5-56a16 16 0 0 0-10-11c-33-13-89-13-89-13s-55 0-89 13a16 16 0 0 0-10 11c-2 9-5 26-5 56Z"/>`,
dribbble: `<circle cx="128" cy="128" r="96" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M71 205a160 160 0 0 1 137-77l16 1m-36-76a160 160 0 0 1-124 59 165 165 0 0 1-30-3"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M86 42a161 161 0 0 1 74 177"/>`,
discord: `<circle stroke="none" cx="96" cy="144" r="12"/><circle stroke="none" cx="160" cy="144" r="12"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M74 80a175 175 0 0 1 54-8 175 175 0 0 1 54 8m0 96a175 175 0 0 1-54 8 175 175 0 0 1-54-8"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m155 182 12 24a8 8 0 0 0 9 4c25-6 46-16 61-30a8 8 0 0 0 3-8L206 59a8 8 0 0 0-5-5 176 176 0 0 0-30-9 8 8 0 0 0-9 5l-8 24m-53 108-12 24a8 8 0 0 1-9 4c-25-6-46-16-61-30a8 8 0 0 1-3-8L50 59a8 8 0 0 1 5-5 176 176 0 0 1 30-9 8 8 0 0 1 9 5l8 24"/>`,
linkedin: `<rect width="184" height="184" x="36" y="36" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" rx="8"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M120 112v64m-32-64v64m32-36a28 28 0 0 1 56 0v36"/><circle stroke="none" cx="88" cy="80" r="12"/>`,
instagram: `<circle cx="128" cy="128" r="40" fill="none" stroke-miterlimit="10" stroke-width="16"/><rect width="184" height="184" x="36" y="36" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" rx="48"/><circle cx="180" cy="76" r="12" stroke="none" />`,
tiktok: `<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M168 106a96 96 0 0 0 56 18V84a56 56 0 0 1-56-56h-40v128a28 28 0 1 1-40-25V89a68 68 0 1 0 80 67Z"/>`,
devto: `<path fill-rule="evenodd" d="M37 33c-2.2.5-4 2-4.7 4.2l-.3.8v181.8l.3.8c.7 2 2 3.3 4 4l.8.3H219l.7-.3c2-.7 3.3-2 4-4l.3-.8V38l-.3-.8c-.7-2-2-3.3-4-4l-.8-.3H37Zm43.6 58.3A20.7 20.7 0 0 1 98 109.6c.3 1.9.3 36.7 0 38.6a20.5 20.5 0 0 1-16 17.9c-2.6.5-1.8.5-14.9.6h-12V91h12.2c11 0 12.4 0 13.2.2Zm63.6 6.5v6.8H120v17.6h14.8v13.4H120v17.5h24.2v13.6h-30l-.8-.3a9.3 9.3 0 0 1-6.7-6.7l-.2-.9v-60l.2-.8c1-3.4 3.6-6 7-6.7.8-.2 1.8-.2 15.7-.2h14.8v6.7Zm27 8.6a268210 268210 0 0 1 9.5 36.4 5274.6 5274.6 0 0 0 13.5-51.6H209l-8.8 33a527.2 527.2 0 0 1-9.3 34.2 15 15 0 0 1-6.5 7.5c-1.3.6-2 .7-3.7.7-1.2 0-1.6 0-2.2-.2-3.2-.8-5.8-3.3-8-7.7l-.7-1.5-8.7-32.9-8.7-33c0-.2.3-.2 7.4-.2h7.4l4 15.3ZM68.7 128.8v24.3h9.5l.8-.3a9 9 0 0 0 4.7-3.4 7 7 0 0 0 1-2.4v-35.7l-.1-.8c-.6-2.3-1.9-3.8-4.3-5-1.8-.9-1.9-.9-7-1h-4.6v24.3Z" clip-rule="evenodd"/>`,
mastodon: `<path d="M219.3 74.8a49.7 49.7 0 0 0-43-40.4c-3.7-.6-17.6-2.5-49.8-2.5h-.3c-32.2 0-39.1 2-42.8 2.5-21.1 3-40.5 17.8-45.2 39a132.2 132.2 0 0 0-2 32.4c.6 15.1.7 30.3 2 45.3 1 10 2.7 20 5 29.8 4.5 18 22.6 33.1 40.3 39.2a108.8 108.8 0 0 0 65.1 1.4c4.7-1.5 10.3-3.2 14.4-6a.5.5 0 0 0 .2-.4v-14.7a.4.4 0 0 0-.4-.4h-.2a158 158 0 0 1-38.1 4.4c-22.1 0-28-10.3-29.8-14.7a45.1 45.1 0 0 1-2.4-12 .4.4 0 0 1 .4 0c12.3 3 24.9 4.4 37.5 4.4h9.1c12.7-.4 26.1-1 38.6-3.5.3 0 .6 0 .9-.2 19.7-3.7 38.5-15.5 40.4-45.3l.3-13.5c0-4 1.3-29.3-.2-44.8Zm-30.4 74.3h-20.7V99c0-10.6-4.5-16-13.6-16-10 0-15 6.4-15 19v27.5h-20.5V102c0-12.6-5-19-15-19-9 0-13.5 5.4-13.5 16v50H69.9V97.4A37 37 0 0 1 78 72c5.6-6.2 13-9.4 22.1-9.4 10.7 0 18.7 4 24 12.1l5.2 8.6 5.2-8.6c5.3-8 13.3-12 24-12 9 0 16.5 3.1 22.1 9.3a36.9 36.9 0 0 1 8.2 25.3V149Z"/>`,
};

4
examples/social-feed/src/components/Pagination.astro
View file

@ -94,7 +94,7 @@ if (max < lastPage) items.push(makeItem(lastPage));
display: flex;
justify-content: center;
list-style: none;
gap: 0.5rem;
gap: var(--theme-space-2xs);
padding: 0;
}
a {
@ -117,7 +117,7 @@ if (max < lastPage) items.push(makeItem(lastPage));
.pagination-arrow > * {
color: var(--theme-accent-dark);
opacity: 0.35;
font-size: 1.75rem;
font-size: var(--theme-text-xl);
display: flex;
}

33
examples/social-feed/src/components/Prose.astro
View file

@ -1,33 +0,0 @@
---
import type { HTMLAttributes } from 'astro/types';
export interface Props extends HTMLAttributes<'article'> {}
---
<article {...Astro.props}>
<slot />
</article>
<style>
article > :global(* + *) {
margin-block-start: 1em;
}
article > :global(p:first-child::first-letter) {
float: left;
font-size: 3.5rem;
padding-inline-end: 0.5rem;
padding-block-start: 0.35rem;
font-weight: bold;
}
article :global(img, video, figure) {
margin-inline: auto;
}
@media (min-width: 50em) {
article > :global(* + *) {
margin-block-start: 1.5em;
}
}
</style>

35
examples/social-feed/src/components/SplitLayout.astro Normal file
View file

@ -0,0 +1,35 @@
---
import type { HTMLAttributes } from 'astro/types';
export interface Props extends HTMLAttributes<'div'> {
reverse?: boolean;
}
const { reverse = false, class: className, ...attrs } = Astro.props;
---
<div class:list={[className, { reverse }]} {...attrs}>
<slot />
</div>
<style>
div {
display: flex;
flex-direction: column;
gap: var(--theme-space-lg);
margin: 0 auto;
width: 100%;
max-width: var(--theme-content-width);
}
@media (min-width: 50em) {
div {
display: grid;
grid-template-columns: 12rem 1fr;
}
div.reverse {
grid-template-columns: 1fr 12rem;
}
}
</style>

4
examples/social-feed/src/components/TagList.astro
View file

@ -17,10 +17,10 @@ const { tags, ...attrs } = Astro.props;
list-style: none;
padding: 0;
display: flex;
gap: 0.3125rem;
gap: var(--theme-space-3xs);
}
li {
padding: 0.25rem 0.5625rem;
padding: var(--theme-space-3xs) var(--theme-space-2xs);
border-radius: var(--theme-radius-full);
background-color: var(--theme-accent-dark);
color: var(--theme-text-invert);

18
examples/social-feed/src/components/UserProfile.astro
View file

@ -3,9 +3,7 @@ import { Image } from 'astro:assets';
import settings from '../settings';
import Icon from './Icon.astro';
type SocialEntry = [keyof (typeof settings)['social'], string];
const socialLinks = Object.entries(settings.social) as SocialEntry[];
const socialLinks = Object.entries(settings.social);
---
<div class="profile">
@ -59,10 +57,10 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
</div>
<ul class="social">
{
socialLinks.map(([key, url]) => (
socialLinks.map(([key, { url }]) => (
<li>
<a href={url}>
<Icon icon={`${key}-logo`} size="1.75rem" />
<Icon icon={`${key}`} size="1.75rem" />
</a>
</li>
))
@ -75,7 +73,7 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
.profile {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: var(--theme-space-md);
}
.avatar {
@ -88,7 +86,7 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
position: absolute;
content: '';
inset: 0;
border: 0.1875rem solid var(--theme-text);
border: 3px solid var(--theme-text);
}
.avatar img {
@ -112,7 +110,7 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
gap: 1rem 1.75rem;
gap: var(--theme-space-sm) var(--theme-space-md);
}
.bio-sections > :nth-child(2) {
@ -125,7 +123,7 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
}
.bio > * + * {
margin-top: 0.75rem;
margin-top: var(--theme-space-xs);
}
.bio :global(svg) {
@ -136,7 +134,7 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[];
.social {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
gap: var(--theme-space-3xs);
list-style: none;
padding: 0;
}

19
examples/social-feed/src/content/config.ts
View file

@ -1,5 +1,5 @@
import { rssSchema } from '@astrojs/rss';
import { defineCollection, z } from 'astro:content';
import { defineCollection, z, type CollectionEntry } from 'astro:content';
const articles = defineCollection({
schema: ({ image }) => rssSchema
@ -13,7 +13,6 @@ const articles = defineCollection({
alt: z.string(),
})
.optional(),
type: z.literal('article').default('article')
})
.required({
// requiring the description for articles, this will be shown as the short preview text on cards
@ -24,9 +23,6 @@ const articles = defineCollection({
const notes = defineCollection({
schema: rssSchema
.extend({
type: z.literal('note').default('note')
})
.omit({
// notes are short, self-contained content without unique titles or descriptions
description: true,
@ -36,3 +32,16 @@ const notes = defineCollection({
})
export const collections = { articles, notes };
export type Article = CollectionEntry<'articles'>;
export type Note = CollectionEntry<'notes'>;
// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
export type Post = Article | Note;
export function isArticle(post: Post): post is Article {
return post.collection === 'articles'
}
export function isNote(post: Post): post is Note {
return post.collection === 'notes'
}

105
examples/social-feed/src/layouts/Article.astro
View file

@ -1,105 +0,0 @@
---
import type { CollectionEntry } from 'astro:content';
import Layout, { type Props as LayoutProps } from './Base.astro';
import ArticleHeader from '../components/ArticleHeader.astro';
import Icon from '../components/Icon.astro';
import Prose from '../components/Prose.astro';
export interface Props extends LayoutProps {
article: CollectionEntry<'posts'>;
next?: CollectionEntry<'posts'>;
prev?: CollectionEntry<'posts'>;
}
const { article, next, prev } = Astro.props;
const { Content, headings } = await article.render();
---
<Layout ...Astro.props} wrapperReverse>
<ArticleHeader {article} class="header" />
<Prose class="content">
<Content />
</Prose>
{
headings.length > 0 && (
<aside>
<h3>Table of contents</h3>
<ul>
{headings.map(({ slug, text }) => (
<li>
<a href={`${Astro.url.pathname}#${slug}`}>{text}</a>
</li>
))}
</ul>
</aside>
)
}
{
(next || prev) && (
<footer>
{prev && (
<a href={`/post/${prev.slug}`} class="prev">
<Icon icon="arrow-left" size="1.25rem" color="var(--theme-accent-dark)" />
<span>Previous: {prev.data.title}</span>
</a>
)}
{next && (
<a href={`/post/${next.slug}`} class="next">
<span>Next: {next.data.title}</span>
<Icon icon="arrow-right" size="1.25rem" color="var(--theme-accent-dark)" />
</a>
)}
</footer>
)
}
</Layout>
<style>
.header,
footer {
grid-column: 1 / -1;
}
footer {
display: flex;
justify-content: space-between;
}
footer a {
font-weight: 700;
text-decoration: none;
}
.next:first-child {
margin-inline-start: auto;
}
aside {
display: none;
}
aside ul {
list-style: none;
padding: 0;
margin-top: 1.25em;
}
aside ul > * + * {
margin-block-start: 0.75em;
}
aside a {
font-weight: bold;
text-decoration: none;
}
@media (min-width: 50em) {
aside {
display: block;
}
}
</style>

44
examples/social-feed/src/layouts/Base.astro
View file

@ -8,12 +8,11 @@ import Footer from '../components/Footer.astro';
export interface Props {
title?: string;
wrapperReverse?: boolean;
}
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title = settings.name, wrapperReverse = false } = Astro.props;
const { title = settings.name } = Astro.props;
---
<html lang="en">
@ -58,48 +57,29 @@ const { title = settings.name, wrapperReverse = false } = Astro.props;
}
</script>
</head>
<body class="flex-col">
<div class="flex-col pad">
<Header />
<div class="flex-col wrapper" class:list={['flex-col wrapper', { reverse: wrapperReverse }]}>
<slot />
</div>
</div>
<body>
<Header class="header" />
<main>
<slot />
</main>
<Footer />
</body>
<style>
.flex-col {
body {
display: flex;
flex-direction: column;
gap: var(--theme-space-lg);
}
.pad {
gap: 2.5rem;
padding: 1.875rem 1.25rem;
.header, main {
padding-inline: var(--theme-space-sm-lg);
}
.flex-col {
display: flex;
flex-direction: column;
}
.wrapper {
gap: 2.5rem;
margin: 0 auto;
main {
width: 100%;
max-width: 55rem;
}
@media (min-width: 50em) {
.wrapper {
display: grid;
grid-template-columns: 12rem 1fr;
}
.wrapper.reverse {
grid-template-columns: 1fr 12rem;
}
margin-inline: auto;
}
</style>
</html>

15
examples/social-feed/src/layouts/Feed.astro
View file

@ -1,15 +1,18 @@
---
import Layout, { type Props as LayoutProps } from './Base.astro';
import UserProfile from '../components/UserProfile.astro';
import SplitLayout from '../components/SplitLayout.astro';
export interface Props extends LayoutProps {}
---
<Layout {...Astro.props}>
<UserProfile />
<main>
<slot />
</main>
<SplitLayout>
<UserProfile />
<div>
<slot />
</div>
</SplitLayout>
</Layout>
<style>
@ -19,10 +22,10 @@ export interface Props extends LayoutProps {}
}
.wrapper {
gap: 2.5rem;
gap: var(--theme-size-xl);
margin: 0 auto;
width: 100%;
max-width: 55rem;
max-width: var(--theme-content-width);
}
@media (min-width: 50em) {

25
examples/social-feed/src/layouts/Note.astro
View file

@ -1,25 +0,0 @@
---
import type { CollectionEntry } from 'astro:content';
import Layout, { type Props as LayoutProps } from './Base.astro';
import Card from '../components/Card.astro';
export interface Props extends LayoutProps {
note: CollectionEntry<'notes'>;
}
const { note, ...layout } = Astro.props;
---
<Layout {...layout}>
<div>
<Card post={note} />
</div>
</Layout>
<style>
div {
grid-column: 1 / -1;
max-width: 50ch;
margin-inline: auto;
}
</style>

31
examples/social-feed/src/pages/[...page].astro
View file

@ -1,38 +1,35 @@
---
import type { GetStaticPathsOptions, Page } from 'astro';
import { Image } from 'astro:assets';
import type { CollectionEntry } from 'astro:content';
import Card from '../components/Card.astro';
import Pagination from '../components/Pagination.astro';
import TagList from '../components/TagList.astro';
import { getSortedPosts } from '../helpers/getSortedPosts';
import Layout from '../layouts/Feed.astro';
import settings from '../settings';
import type { Post } from '../content/config.js';
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
return paginate(await getSortedPosts(), { pageSize: 3 });
}
interface Props {
page: Page<CollectionEntry<'articles'> | CollectionEntry<'notes'>>;
page: Page<Post>;
}
const { page } = Astro.props;
---
<Layout>
<div class="stack">
<ol>
{
page.data.map((post) => (
<li>
<Card {post} />
</li>
))
}
</ol>
<Pagination {...page} />
</div>
<div class="stack">
<ol>
{
page.data.map((post) => (
<li>
<Card {post} />
</li>
))
}
</ol>
<Pagination {...page} />
</div>
</Layout>
<style>

90
examples/social-feed/src/pages/post/[slug].astro
View file

@ -1,8 +1,10 @@
---
import type { CollectionEntry } from 'astro:content';
import Article from '../../components/Article.astro';
import Card from '../../components/Card.astro';
import Icon from '../../components/Icon.astro';
import { getSortedPosts } from '../../helpers/getSortedPosts';
import ArticleLayout from '../../layouts/Article.astro';
import NoteLayout from '../../layouts/Note.astro';
import Layout from '../../layouts/Base.astro';
import { isArticle, type Post } from '../../content/config';
export async function getStaticPaths() {
const posts = await getSortedPosts();
@ -13,18 +15,80 @@ export async function getStaticPaths() {
}
interface Props {
post: CollectionEntry<'posts'>;
prev?: CollectionEntry<'posts'>;
next?: CollectionEntry<'posts'>;
post: Post;
prev?: Post;
next?: Post;
}
const { post, prev, next } = Astro.props;
const { title } = isArticle(post) && post.data;
---
{
post.data.type === 'article' ? (
<ArticleLayout title={post.data.title} article={post} {next} {prev} />
) : (
<NoteLayout note={post} {next} {prev} />
)
}
<Layout {title}>
<a href="/" class="back">
<Icon icon="arrow-left" color="var(--theme-accent-dark)" size="var(--theme-space-md)" />
<span>Back to feed</span>
</a>
{isArticle(post) ? (<Article article={post} />) : (<div class="card"><Card {post} /></div>)}
{
(next || prev) && (
<footer>
{prev && (
<a href={`/post/${prev.slug}`} class="prev">
<Icon icon="arrow-left" size="var(--theme-space-md)" color="var(--theme-accent-dark)" />
<span>Previous post</span>
</a>
)}
{next && (
<a href={`/post/${next.slug}`} class="next">
<span>Next post</span>
<Icon icon="arrow-right" size="var(--theme-space-md)" color="var(--theme-accent-dark)" />
</a>
)}
</footer>
)
}
</Layout>
<style>
.back {
text-decoration: none;
font-weight: bold;
}
.back {
display: flex;
align-items: center;
gap: var(--theme-space-2xs);
margin-inline-start: -4px;
}
.card {
width: 100%;
max-width: 60ch;
margin-inline: auto;
}
.prev, .next {
display: flex;
align-items: center;
gap: 0.5rem;
}
footer {
display: flex;
justify-content: space-between;
margin-inline: -4px;
}
footer a {
font-weight: 700;
text-decoration: none;
}
.next:first-child {
margin-inline-start: auto;
}
</style>

58
examples/social-feed/src/settings.ts
View file

@ -1,6 +1,31 @@
import { iconPaths } from './components/IconPaths.js'
import avatar from './assets/avatar.webp'
export default {
export interface Image {
src: ImageMetadata
alt: string
}
export interface Settings {
name: string
username: string
avatar: Image
rss: {
title: string,
description: string
},
pronouns?: string | undefined
location?: string | undefined
homepage?: string | undefined
social: Partial<{
[icon in keyof typeof iconPaths]: {
url: string,
title: string,
}
}>
}
const settings: Settings = {
name: 'Houston Astro',
username: '@houston',
avatar: {
@ -15,12 +40,27 @@ export default {
location: 'Space',
homepage: 'https://astro.build',
social: {
twitter: 'https://twitter.com/astrodotbuild',
twitch: 'https://www.twitch.tv/bholmesdev',
github: 'https://github.com/withastro',
devto: 'https://dev.to/search?q=astro',
codepen: 'https://codepen.io/delucis',
mastodon: 'https://m.webtoo.ls/@astro',
youtube: 'https://www.youtube.com/@astrodotbuild',
twitter: {
url: 'https://twitter.com/astrodotbuild',
title: 'Twitter'
},
github: {
url: 'https://github.com/withastro',
title: 'GitHub',
},
mastodon: {
url: 'https://m.webtoo.ls/@astro',
title: 'Mastodon'
},
youtube: {
url: 'https://www.youtube.com/@astrodotbuild',
title: 'YouTube',
},
discord: {
url: 'https://astro.build/chat',
title: 'Discord'
}
},
} as const;
};
export default settings;

1
examples/social-feed/src/style/global.css
View file

@ -13,6 +13,7 @@ body {
body {
background-color: var(--theme-bg);
color: var(--theme-text);
font-size: var(--theme-text-base);
font-family: var(--theme-font-body);
-webkit-font-smoothing: antialiased;
line-height: 1.5;

41
examples/social-feed/src/style/theme.css
View file

@ -27,14 +27,14 @@
--theme-shadow-lg: 2px 2px 20px rgba(0, 0, 0, 0.2);
/* Type Scale */
--__type-scale-ratio: 1.2;
--theme-text-base: 1rem;
--theme-text-sm: calc(var(--theme-text-base) / var(--__type-scale-ratio)); /*13.3px*/
--theme-text-lg: calc(var(--theme-text-base) * var(--__type-scale-ratio)); /*19.2px*/
--theme-text-xl: calc(var(--theme-text-lg) * var(--__type-scale-ratio)); /*23px*/
--theme-text-2xl: calc(var(--theme-text-xl) * var(--__type-scale-ratio)); /*13.3px*/
--theme-text-3xl: calc(var(--theme-text-2xl) * var(--__type-scale-ratio)); /*27.6px*/
--theme-text-4xl: calc(var(--theme-text-3xl) * var(--__type-scale-ratio)); /*33.2px*/
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--theme-text-sm: clamp(0.83rem, calc(0.76rem + 0.36vw), 1.04rem);
--theme-text-base: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
--theme-text-lg: clamp(1.20rem, calc(1.10rem + 0.52vw), 1.50rem);
--theme-text-xl: clamp(1.44rem, calc(1.31rem + 0.63vw), 1.80rem);
--theme-text-2xl: clamp(1.73rem, calc(1.58rem + 0.75vw), 2.16rem);
--theme-text-3xl: clamp(2.07rem, calc(1.89rem + 0.90vw), 2.59rem);
--theme-text-4xl: clamp(2.49rem, calc(2.27rem + 1.08vw), 3.11rem);
/* Fonts */
--__font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@ -50,6 +50,31 @@
/* Transitions */
--theme-transition: 0.2s ease-in-out;
/* Spacing */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--theme-space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
--theme-space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem);
--theme-space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
--theme-space-sm: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
--theme-space-md: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
--theme-space-lg: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
--theme-space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
--theme-space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem);
--theme-space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem);
/* One-up pairs */
--theme-space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
--theme-space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem);
--theme-space-xs-sm: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem);
--theme-space-sm-md: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem);
--theme-space-md-lg: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem);
--theme-space-lg-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem);
--theme-space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem);
--theme-space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem);
/* Custom pairs */
--theme-space-sm-lg: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem);
}
:root.theme-dark {