diff --git a/examples/social-feed/public/avatar.webp b/examples/social-feed/src/assets/avatar.webp similarity index 100% rename from examples/social-feed/public/avatar.webp rename to examples/social-feed/src/assets/avatar.webp diff --git a/examples/social-feed/src/components/ArticleHeader.astro b/examples/social-feed/src/components/ArticleHeader.astro new file mode 100644 index 000000000..ed3c838e8 --- /dev/null +++ b/examples/social-feed/src/components/ArticleHeader.astro @@ -0,0 +1,131 @@ +--- +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'; + +interface Props extends HTMLAttributes<'header'> { + article: CollectionEntry<'posts'>; +} + +const { article, ...attrs } = Astro.props; + +const { text: readingTime } = await getReadingTime(article.body); +--- + +
+ + + Back to feed + + +
+ { + article.data.cover && ( + {article.data.cover.alt} + ) + } + +
+ {settings.avatar.alt} +

{settings.name}

+

{settings.username}

+
+
+ +
+ + โ€ข +

+ + {readingTime} +

+
+ +

{article.data.title}

+ + {article.data.tags?.length > 0 && } +
+ + diff --git a/examples/social-feed/src/components/Header.astro b/examples/social-feed/src/components/Header.astro index c10e3b35e..fc489c571 100644 --- a/examples/social-feed/src/components/Header.astro +++ b/examples/social-feed/src/components/Header.astro @@ -4,28 +4,26 @@ import ThemeToggle from './ThemeToggle.astro'; ---
- {settings.username} - + {settings.username} +
diff --git a/examples/social-feed/src/components/Prose.astro b/examples/social-feed/src/components/Prose.astro new file mode 100644 index 000000000..82f61dc7f --- /dev/null +++ b/examples/social-feed/src/components/Prose.astro @@ -0,0 +1,33 @@ +--- +import type { HTMLAttributes } from 'astro/types'; + +export interface Props extends HTMLAttributes<'article'> {} +--- + +
+ +
+ + diff --git a/examples/social-feed/src/components/UserProfile.astro b/examples/social-feed/src/components/UserProfile.astro index d53c24f98..ead52724f 100644 --- a/examples/social-feed/src/components/UserProfile.astro +++ b/examples/social-feed/src/components/UserProfile.astro @@ -1,4 +1,5 @@ --- +import { Image } from 'astro:assets'; import settings from '../settings'; import Icon from './Icon.astro'; @@ -8,155 +9,146 @@ const socialLinks = Object.entries(settings.social) as SocialEntry[]; ---
-
-
- -
-

- {settings.name} - {settings.username} -

-
-
-
-

๐Ÿš€ Astro Mascot

-

๐Ÿ˜Š The cutest

-

๐ŸŽจ Whimsical Speedy Web

-
-
- { - settings.pronouns && ( -

- - Pronouns - {settings.pronouns} -

- ) - } - { - settings.location && ( -

- - Location - {settings.location} -

- ) - } - { - settings.homepage && ( -

- - Homepage - - {settings.homepage.replace(/^https?:\/\/(www\.)?/, '')} - -

- ) - } -

- - RSS Feed -

-
- -
+
+
+ +
+

+ {settings.name} + {settings.username} +

+
+
+
+

๐Ÿš€ Astro Mascot

+

๐Ÿ˜Š The cutest

+

๐ŸŽจ Whimsical Speedy Web

+
+
+ { + settings.pronouns && ( +

+ + Pronouns + {settings.pronouns} +

+ ) + } + { + settings.location && ( +

+ + Location + {settings.location} +

+ ) + } + { + settings.homepage && ( +

+ + Homepage + {settings.homepage.replace(/^https?:\/\/(www\.)?/, '')} +

+ ) + } +

+ + RSS Feed +

+
+ +
diff --git a/examples/social-feed/src/layouts/Article.astro b/examples/social-feed/src/layouts/Article.astro index 6cd295327..d04d49c58 100644 --- a/examples/social-feed/src/layouts/Article.astro +++ b/examples/social-feed/src/layouts/Article.astro @@ -1,11 +1,9 @@ --- -import { Image } from 'astro:assets'; import type { CollectionEntry } from 'astro:content'; -import getReadingTime from 'reading-time'; import Layout, { type Props as LayoutProps } from './Base.astro'; -import FormattedDate from '../components/FormattedDate.astro'; -import TagList from '../components/TagList.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'>; @@ -16,118 +14,56 @@ export interface Props extends LayoutProps { const { article, next, prev } = Astro.props; const { Content, headings } = await article.render(); - -const readingTime = getReadingTime(article.body).text; --- -
- - - Back to feed - - {article.data.cover && {article.data.cover.alt}} -
- - โ€ข -

- - {readingTime} -

-
-

{article.data.title}

- {article.data.tags?.length > 0 && ( - - )} -
-
+ + + -
- {headings.length > 0 && ( - - )} - {(next || prev) && ( - - )} + + + { + headings.length > 0 && ( + + ) + } + + { + (next || prev) && ( + + ) + } diff --git a/examples/social-feed/src/pages/[...page].astro b/examples/social-feed/src/pages/[...page].astro index b73b456c4..a5c5b6d0f 100644 --- a/examples/social-feed/src/pages/[...page].astro +++ b/examples/social-feed/src/pages/[...page].astro @@ -1,5 +1,6 @@ --- import type { GetStaticPathsOptions, Page } from 'astro'; +import { Image } from 'astro:assets'; import type { CollectionEntry } from 'astro:content'; import Pagination from '../components/Pagination.astro'; import TagList from '../components/TagList.astro'; @@ -28,11 +29,11 @@ const { page } = Astro.props;
- {settings.avatar.alt}

@@ -89,4 +90,10 @@ const { page } = Astro.props; header > * + * { margin-top: 0.625rem; } + .u-avatar { + width: 3.75rem; + height: 3.75rem; + border-radius: var(--theme-radius-full); + background-color: var(--theme-shade-subtle); + } diff --git a/examples/social-feed/src/settings.ts b/examples/social-feed/src/settings.ts index 130359db6..d8746748c 100644 --- a/examples/social-feed/src/settings.ts +++ b/examples/social-feed/src/settings.ts @@ -1,24 +1,26 @@ +import avatar from './assets/avatar.webp' + export default { - name: 'Houston Astro', - username: '@houston', - avatar: { - src: '/avatar.webp', - alt: 'Astro mascot Houston smiling', - }, - rss: { - title: 'Houston Astroโ€™s Feed', - description: 'Stay up-to-date with the latest posts from Houston Astro!', - }, - pronouns: 'They/Them', - 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', - }, + name: 'Houston Astro', + username: '@houston', + avatar: { + src: avatar, + alt: 'Astro mascot Houston smiling', + }, + rss: { + title: 'Houston Astroโ€™s Feed', + description: 'Stay up-to-date with the latest posts from Houston Astro!', + }, + pronouns: 'They/Them', + 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', + }, } as const;