add suggestions from the review

nf-core · Mar 28, 2024 · 4751b78 · 4751b78
1 parent 04c1b36
commit 4751b78
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/src/components/navbar/Navbar.astro b/src/components/navbar/Navbar.astro
@@ -123,18 +123,17 @@ newBlogPost = await getCollection('blog').then((posts) => {
                     </a>
                     <ul class="dropdown-menu bg-body-secondary text-body-secondary shadow-xl-sm">
                         <li><span class="dropdown-header">What's happening</span></li>
-                        <li class="d-flex align-items-center">
-                            <a class="dropdown-item" href="/blog/">Blog</a>
-                            {
-                                newBlogPost && (
-                                    <a
-                                        href={'/blog/' + newBlogPost.slug}
-                                        class="float-end btn btn-outline-primary rounded-pill btn-sm text-nowrap text-decoration-none me-2"
-                                    >
-                                        new post
-                                    </a>
-                                )
-                            }
+                        <li class="">
+                            <a class="dropdown-item d-flex align-items-center justify-content-between" href="/blog/"
+                                >Blog
+                                {
+                                    newBlogPost && (
+                                        <span class="float-end text-primary-emphasis  border border-primary badge rounded-pill fw-normal text btn-sm text-nowrap ">
+                                            new post
+                                        </span>
+                                    )
+                                }
+                            </a>
                         </li>
                         <li><hr class="dropdown-divider" /></li>
                         <li>

diff --git a/src/layouts/MarkdownTocLayout.astro b/src/layouts/MarkdownTocLayout.astro
@@ -104,9 +104,12 @@ const {
                 <div class="col-12 col-md-2 d-none d-md-block sidebar-left pt-1 sticky-top-under">
                     <div class="">
                         {sidebarTitle && (
-                            <div class="sidebar-title">
+                            <a
+                                href={sections[0].section_slug?.split('/').slice(0, 2).join('/').split('#')[0]}
+                                class="sidebar-title text-decoration-none"
+                            >
                                 <strong class="h6 p-2 text-body">{sidebarTitle}</strong>
-                            </div>
+                            </a>
                         )}
                         <SidebarNav items={sections} accordion={true} />
                     </div>

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -54,7 +54,12 @@ const sections = years.map((year) => {
 >
     <div class="row">
         <div class="col-12 col-md-2 sticky-top-under d-none d-md-inline sidebar-left pt-1">
-            <strong class="h6 p-2 text-body">Blog posts</strong>
+            <a
+                href={sections[0].section_slug?.split('/').slice(0, 2).join('/').split('#')[0]}
+                class="sidebar-title text-decoration-none"
+            >
+                <strong class="h6 p-2 text-body">Blog posts</strong>
+            </a>
             <SidebarNav items={sections} />
         </div>
 
@@ -66,7 +71,27 @@ const sections = years.map((year) => {
                         {blogPosts
                             .filter((post) => new Date(post.data.pubDate).getFullYear() === year)
                             .map((post) => (
-                                <div class="card m-xl-3 m-1">
+                                <div
+                                    class:list={[
+                                        'card m-xl-3 m-1',
+                                        new Date(Date.now()) > new Date(post.data.pubDate) &&
+                                        new Date(post.data.pubDate) > new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
+                                            ? 'border-primary'
+                                            : '',
+                                    ]}
+                                >
+                                    <a
+                                        href={'/blog/' + post.slug}
+                                        class:list={[
+                                            'new-post-badge text-decoration-none badge text-bg-primary fs-6 mb-0 rounded-top-0 w-25 m-auto position-absolute top-0 start-0 end-0',
+                                            new Date(Date.now()) > new Date(post.data.pubDate) &&
+                                            new Date(post.data.pubDate) > new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
+                                                ? 'd-block'
+                                                : 'd-none',
+                                        ]}
+                                    >
+                                        New post!
+                                    </a>
                                     {post.data.headerImage && (
                                         <Image
                                             src={
@@ -131,4 +156,7 @@ const sections = years.map((year) => {
     .authors {
         width: 100%;
     }
+    .new-post-badge {
+        z-index: 10;
+    }
 </style>