Skip to content

Commit a8a8ba6

Browse files
jt14denjt14den
committed
Enhancement: Redesign blog and add launch post
1 parent 1380823 commit a8a8ba6

File tree

3 files changed

+134
-25
lines changed

3 files changed

+134
-25
lines changed

‎astro-version/src/pages/blog/index.astro‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
import Layout from '../../layouts/Layout.astro';
3+
import { getCollection } from 'astro:content';
4+
import { slugify } from '../../utils/slugs';
5+
6+
const posts = await getCollection('blog');
7+
const sortedPosts = posts.sort((a, b) => {
8+
const dateA = a.data.date ? new Date(a.data.date).valueOf() : 0;
9+
const dateB = b.data.date ? new Date(b.data.date).valueOf() : 0;
10+
return dateB - dateA;
11+
});
12+
---
13+
14+
<Layout title="Blog" description="Updates and news from the Open Science for Librarians project.">
15+
<header class="masthead" style="background-image: url('/assets/img/background-image-blue.png'); background-size: cover; height: 40vh; min-height: 300px;">
16+
<div class="container h-100">
17+
<div class="row h-100 align-items-center justify-content-center text-center">
18+
<div class="col-lg-10 align-self-end">
19+
<h1 class="text-white font-weight-bold" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.6);">Project Updates</h1>
20+
<hr class="divider my-4" style="border-color: #ffd100; border-width: 3px; max-width: 50px;" />
21+
</div>
22+
<div class="col-lg-8 align-self-baseline">
23+
<p class="text-white-75 font-weight-light" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
24+
News, announcements, and progress reports.
25+
</p>
26+
</div>
27+
</div>
28+
</div>
29+
</header>
30+
31+
<section class="page-section bg-light" id="blog">
32+
<div class="container">
33+
<div class="row">
34+
{sortedPosts.map(post => (
35+
<div class="col-lg-4 col-md-6 mb-4">
36+
<div class="card h-100 border-0 shadow-sm blog-card">
37+
<div class="card-body">
38+
<small class="text-muted text-uppercase mb-2 d-block">
39+
{post.data.date ? new Date(post.data.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : ''}
40+
</small>
41+
<h4 class="card-title mb-3">
42+
<a href={`/blog/${post.slug}`} class="text-dark text-decoration-none stretched-link">
43+
{post.data.title}
44+
</a>
45+
</h4>
46+
<p class="card-text text-muted">
47+
{post.data.description || "Read more about this update..."}
48+
</p>
49+
</div>
50+
<div class="card-footer bg-transparent border-top-0 pt-0 pb-4">
51+
<div class="d-flex align-items-center">
52+
<div class="small">
53+
By <span class="font-weight-bold text-primary">{post.data.author}</span>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
))}
60+
</div>
61+
</div>
62+
</section>
63+
</Layout>
64+
65+
<style>
66+
.blog-card {
67+
transition: transform 0.2s;
68+
}
69+
.blog-card:hover {
70+
transform: translateY(-5px);
71+
}
72+
</style>

‎src/components/Blog.astro‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,52 @@ const sortedPosts = posts.sort((a, b) => {
1212
const dateA = a.data.date ? new Date(a.data.date).valueOf() : 0;
1313
const dateB = b.data.date ? new Date(b.data.date).valueOf() : 0;
1414
return dateB - dateA;
15-
});
15+
}).slice(0, 3); // Only show top 3
1616
---
1717
<section class="page-section" id={blog.section || "blog"}>
1818
<div class="container">
1919
<div class="row">
20-
<div class="col-lg-12 text-center">
21-
<h2 class="section-heading text-uppercase">{blog.title || "Our Blog"}</h2>
22-
<h3 class="section-subheading text-muted">{blog.text || ""}</h3>
20+
<div class="col-lg-12 text-center">
21+
<h2 class="section-heading text-uppercase">{blog.title || "Recent Updates"}</h2>
22+
<h3 class="section-subheading text-muted">Latest news from the project.</h3>
23+
</div>
2324
</div>
24-
</div>
25-
</div>
26-
<div class="container">
25+
2726
<div class="row">
28-
<div class="col-lg-12">
29-
<table class="table">
30-
<tbody>
31-
{sortedPosts.map(post => (
32-
<tr>
33-
<td>
34-
{post.data.date ? new Date(post.data.date).toLocaleDateString() : ''}
35-
</td>
36-
<td>
37-
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
38-
</td>
39-
<td>
40-
{post.data.author}
41-
</td>
42-
</tr>
43-
))}
44-
</tbody>
45-
</table>
27+
{sortedPosts.map(post => (
28+
<div class="col-lg-4 col-md-6 mb-4">
29+
<div class="card h-100 border-0 shadow-sm blog-card">
30+
<div class="card-body">
31+
<small class="text-muted text-uppercase mb-2 d-block">
32+
{post.data.date ? new Date(post.data.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : ''}
33+
</small>
34+
<h4 class="card-title mb-3">
35+
<a href={`/blog/${post.slug}`} class="text-dark text-decoration-none stretched-link">
36+
{post.data.title}
37+
</a>
38+
</h4>
39+
<p class="card-text text-muted small">
40+
{post.data.description ? post.data.description.substring(0, 100) + '...' : "Read more about this update..."}
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
))}
46+
</div>
47+
48+
<div class="row mt-4">
49+
<div class="col-lg-12 text-center">
50+
<a class="btn btn-primary btn-xl" href="/blog">View All Posts</a>
4651
</div>
4752
</div>
4853
</div>
4954
</section>
55+
56+
<style>
57+
.blog-card {
58+
transition: transform 0.2s;
59+
}
60+
.blog-card:hover {
61+
transform: translateY(-5px);
62+
}
63+
</style>

‎src/content/blog/2024-03-20-site-launch.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "New Site Launch: A Hub for Open Science Education"
3+
date: 2024-03-20
4+
author: "Tim Dennis"
5+
description: "We are thrilled to announce the launch of our redesigned website, now featuring a fully searchable curriculum, author profiles, and curated pathways for librarians."
6+
---
7+
8+
We are thrilled to announce the launch of our redesigned website!
9+
10+
This project has evolved from a grant announcement into a comprehensive **Open Science Education Hub** for librarians. Our new site reflects this shift with features designed to help you find, teach, and contribute to the curriculum.
11+
12+
### What's New?
13+
14+
* **Curated Pathways**: Not sure where to start? Our homepage now guides you based on your role (Liaison, Data Steward, Community Builder).
15+
* **Lesson Detail Pages**: Every lesson now has a dedicated page with learning objectives, instructor notes, and licensing info.
16+
* **Author Profiles**: Meet the incredible community of librarians who authored these materials.
17+
* **External Resources**: We've integrated key resources like the **ACRL Open Science Cookbook** and **NASA TOPS** directly into our directory.
18+
19+
### Getting Involved
20+
21+
The most exciting part of this launch is the new **Pilot Program**. If you are interested in teaching any of our Beta lessons at your institution, simply click the "Express Interest in Piloting" button on any lesson page.
22+
23+
Explore the curriculum today!

0 commit comments

Comments
 (0)