Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: homepage blog posts #428

Open
wants to merge 3 commits into
base: astro-docs
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: homepage blog posts
  • Loading branch information
MekalaNagarajan-Centrica committed Feb 26, 2024
commit 40ccc3c7655bbf4dddeed4a21d45f06ec2bf63c1
38 changes: 38 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@
"htmlfy": "^0.1.0",
"lit": "^3.1.0",
"rehype-autolink-headings": "^7.1.0",
"rss-parser": "^3.13.0",
"sharp": "^0.32.5"
},
"devDependencies": {
30 changes: 30 additions & 0 deletions src/components/NucleusBlogPostCard.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
const { blogPost } = Astro.props;

const imagePrefix = '<ns-image src="';
const imageStartIndex = blogPost.content.indexOf(imagePrefix);
const imageEndIndex = blogPost.content.indexOf('"', imageStartIndex + imagePrefix.length);
const imageName = blogPost.content.substring(imageStartIndex + imagePrefix.length, imageEndIndex);
const imageURL = `${blogPost.link}/${imageName}`;
---

<div class="blog-post-card">
<div class="blog-post-asset">
<img src={imageURL} />
</div>
<div class="blog-post-heading">
<a href={blogPost.link}>
<h3>{blogPost.title}</h3>
</a>
</div>
<div class="blog-post-subheading">
<p>{blogPost.contentSnippet.substring(0,150)}...</p>
</div>
</div>

<style>
.blog-post-asset img{
width: inherit;
}

</style>
20 changes: 20 additions & 0 deletions src/components/NucleusBlogsLayout.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
import { blogPosts } from '@scripts/blog';
import NucleusBlogPostCard from './NucleusBlogPostCard.astro';

const posts = await blogPosts();
---
<div class="blog-posts not-content">
<NucleusBlogPostCard blogPost={posts[1]}/>
<NucleusBlogPostCard blogPost={posts[3]}/>
<NucleusBlogPostCard blogPost={posts[5]}/>
<NucleusBlogPostCard blogPost={posts[7]}/>
</div>

<style>
.blog-posts {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 1rem;
}
</style>
3 changes: 3 additions & 0 deletions src/content/docs/index.mdx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ hero:

import SignPost from '@components/SignPost.astro';
import HeroAction from '@components/HeroAction.astro';
import NucleusBlogsLayout from '@components/NucleusBlogsLayout.astro';
import { CardGrid } from '@astrojs/starlight/components';

<CardGrid>
@@ -44,4 +45,6 @@ import { CardGrid } from '@astrojs/starlight/components';

<HeroAction actions={frontmatter.hero.actions}/>

<NucleusBlogsLayout />


9 changes: 9 additions & 0 deletions src/scripts/blog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Parser from 'rss-parser';

const blogPosts = async () => {
const parser = new Parser();
let blogData = (await parser.parseURL('https://blog.nucleus.design/feed.xml')).items;
return blogData;
}

export { blogPosts };