Skip to content

Commit 706cc9d

Browse files
one-aalamone-aalam
committed
feat(3.2): Use local Markdown data
1 parent e20452b commit 706cc9d

9 files changed

Lines changed: 181 additions & 2 deletions

File tree

‎src/components/PostPreview.astro‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
const { post } = Astro.props
3+
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', "Nov", 'Dec']
4+
---
5+
<div class="post-preview">
6+
<div class="w-32">
7+
<div class="post-preview__date">
8+
<span class="post-preview__date__day">{ new Date(post.date).getDate() }</span>
9+
<span class="post-preview__date__month-n-year">{ `${MONTHS[new Date(post.date).getMonth()]} ${new Date(post.date).getFullYear()}` }</span>
10+
</div>
11+
</div>
12+
<div class="flex-1">
13+
<h4 class="post-preview__title">
14+
<a href={post.url} title={post.title}>{post.title}</a>
15+
</h4>
16+
<p class="post-preview__desc">
17+
{post.description}
18+
</p>
19+
</div>
20+
</div>
21+
<style>
22+
.post-preview {
23+
@apply flex gap-6
24+
}
25+
.post-preview__date {
26+
@apply flex flex-col w-full text-center
27+
}
28+
.post-preview__date__day {
29+
@apply text-6xl font-semibold text-gray-500 dark:text-gray-300
30+
}
31+
.post-preview__date__month-n-year {
32+
@apply text-gray-400
33+
}
34+
.post-preview__title {
35+
@apply text-2xl font-semibold text-primary dark:text-primaryDark hover:underline mb-2
36+
}
37+
.post-preview__desc {
38+
@apply text-lg leading-6 dark:text-white line-clamp-2
39+
}
40+
</style>

‎src/components/PostPreviewList.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
import PostPreview from './PostPreview.astro'
3+
const { posts } = Astro.props
4+
---
5+
<section class="post-preview__list">
6+
{posts.map((post) => (
7+
<PostPreview post={post}/>
8+
))}
9+
</section>
10+
<style>
11+
.post-preview__list {
12+
@apply flex flex-col gap-12
13+
}
14+
</style>

‎src/data/.gitkeep‎

Whitespace-only changes.

‎src/layouts/post.astro‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
import { SITE } from '$/config'
3+
import MainLayout from '$/components/MainLayout.astro'
4+
import BaseHead from '$/components/BaseHead.astro'
5+
import Prose from '$/components/Prose.astro'
6+
7+
const { content } = Astro.props
8+
---
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
13+
</head>
14+
<MainLayout>
15+
<div class="post__header">
16+
<h1 class="post__title">{ content.title }</h1>
17+
<h5 class="post__desc">
18+
<a class="post__author" href={`https://twitter.com/${content.authorTwitter}`} title={`${content.author}'s twitter`} target="_blank" rel="external">{ content.author }</a> |
19+
<span class="post__date">{ new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}</span>
20+
</h5>
21+
</div>
22+
<!--<img src={content.image} alt={content.title} />-->
23+
<Prose>
24+
<slot />
25+
</Prose>
26+
</MainLayout>
27+
</html>
28+
<style>
29+
.post__header {
30+
@apply py-4 mb-1
31+
}
32+
.post__title {
33+
@apply text-5xl font-extrabold text-primary dark:text-primaryDark
34+
}
35+
.post__desc {
36+
@apply text-gray-500 dark:text-gray-100
37+
}
38+
.post__author {
39+
@apply no-underline dark:text-white
40+
}
41+
.post__date {
42+
@apply text-gray-400
43+
}
44+
</style>

‎src/pages/blog/introducing-astro.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
layout: $/layouts/post.astro
3+
title: Introducing Astro - Ship Less JavaScript
4+
date: 2021-06-08
5+
image: https://images.unsplash.com/photo-1589409514187-c21d14df0d04?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
6+
author: Fred K. Schott
7+
authorTwitter: FredKSchott
8+
category: design
9+
tags:
10+
- color
11+
- typography
12+
description: There's a simple secret to building a faster website — just ship less.
13+
---
14+
15+
Unfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
16+
17+
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
18+
19+
- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
20+
- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
21+
- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
22+
- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
23+
- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
24+
25+
## H1 is good
26+
27+
### H2 is good too
28+
29+
> links are better
30+
31+
[I know](they-are-better)
32+
33+
This post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
34+
35+
> To learn more about Astro and start building your first site, check out the project README.

‎src/pages/blog/islands-architecture-2.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: $/layouts/post.astro
3+
title: Islands Architecture for light-weight FEs
4+
date: 2021-06-06
5+
image: https://images.unsplash.com/photo-1502085671122-2d218cd434e6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1698&q=80
6+
author: Jason Miller
7+
authorTwitter: _developit
8+
category: development
9+
tags:
10+
- color
11+
- typography
12+
description: Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.
13+
---
14+
15+
https://jasonformat.com/islands-architecture/

‎src/pages/blog/islands-architecture.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: $/layouts/post.astro
3+
title: Islands Architecture
4+
date: 2021-05-08
5+
image: https://images.unsplash.com/photo-1502085671122-2d218cd434e6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1698&q=80
6+
author: Jason Miller
7+
authorTwitter: _developit
8+
category: development
9+
tags:
10+
- color
11+
- typography
12+
description: Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.
13+
---
14+
15+
https://jasonformat.com/islands-architecture/

‎src/pages/blog/spa-fatigue.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
layout: $/layouts/post.astro
3+
title: Second-guessing the modern web
4+
date: 2021-04-10
5+
image: https://images.unsplash.com/photo-1501772418-b33899635bca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
6+
author: Tom MacWright
7+
authorTwitter: tmcw
8+
category: design
9+
tags:
10+
- color
11+
- typography
12+
description: There is a sweet spot of React - in moderately interactive interfaces..
13+
---
14+
https://macwright.com/2020/05/10/spa-fatigue.html

‎src/pages/index.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
---
22
import DefaultPageLayout from '$/layouts/default.astro'
3-
import Intro from '$/components/Intro.astro'
3+
import PostPreviewList from '$/components/PostPreviewList.astro'
4+
45
56
const title = 'Home'
67
const description = 'Astro-Ink is a crisp, minimal, personal blog theme for Astro'
78
9+
const posts = Astro.fetchContent('./blog/*.md')
810
---
911
<DefaultPageLayout content={{ title, description }} showPageHeader={false}>
10-
<Intro/>
12+
<PostPreviewList posts={posts} />
1113
</DefaultPageLayout>

0 commit comments

Comments
 (0)