Add blog section with summary display on listing page #9

bits-and-atoms · 2025-01-29T20:01:35Z

Added a new section for blogs.

…ent/blog/_index.md to define the blog section. :: Added two sample blog post content/blog/second.md and content/blog/first.md with Lorem Ipsum text. :: Updated layouts/blog/list.html to display only the summary of each blog post in the listing. :: Added <more--> tag in second.md to define the summary cutoff point. :: Set summaryLength parameter in config.toml to control the length of automatically generated summaries.

jnsgruk · 2025-01-30T09:16:02Z

I'm not sure the purpose of this PR, it doesn't seem to add any content relevant to snapcrafters, and we haven't discussed publicizing a blog? I'm going to close this for now, but please feel free to come and chat with us on Matrix: https://matrix.to/#/#snapcrafters:matrix.org

soumyaDghosh

Hi, these initial HTML implementation looks good. But do the changes requested. Also, please fix the PR description, use backticks "`" when you need to write a code block. And rewrite the PR description properly in a List style.

content/blog/first.md

content/blog/second.md

hugo.toml

jnsgruk · 2025-01-31T11:28:59Z

Okay - now I understand. There is pretty minimal boilerplate in here, so I suggest we just add the structure when we publish the first post. A single PR with two commits:

One that makes the structure changes required (per this PR)
Another commit that adds the first (actual) blog post

jnsgruk · 2025-02-03T09:14:20Z

Okay - from a structure perspective I think this is good to merge, but let's wait to merge it until we've added the first blog post, too. That way we don't have a totally empty blog page 🙂

jnsgruk · 2025-02-03T09:19:11Z

Actually -- looks like there are some alignment issues. If you take a look at the snap-packages layout, you'll see that we include a <div class="row"> that wraps the content. We need to continue to use the tools provided by the Vanilla Framework to ensure the page continues to be responsive and accessible across different device types :)

bits-and-atoms · 2025-02-19T19:47:01Z

Till now I completed the structural part of the blog and now I will work on styling the pages, please review the changes that I made till now. @soumyaDghosh

bits-and-atoms · 2025-02-24T21:01:34Z

Completed the styling of the blog site, please review @soumyaDghosh

soumyaDghosh · 2025-02-28T20:42:19Z

@jnsgruk As much I tested. I think this PR is ready to merge. If you have any suggestions, please let us know.

soumyaDghosh · 2025-02-28T20:43:20Z

Some screenshots, looking great! 🎉

Thanks a lot @bits-and-atoms!

jnsgruk · 2025-03-01T07:38:27Z

I'll take a look at this over the next couple of days, thanks folks!

jnsgruk · 2025-03-03T16:46:40Z

content/blog/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Blogs"


Suggested change

title: "Blogs"

title: "Blog"

jnsgruk · 2025-03-03T16:49:32Z

layouts/partials/head.html

+      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0 100%),
+      url({{absURL "launchpad.svg"}});
+    }
+
+    .breadcrumbs a {
+      font-size: 1rem;
+      text-decoration: none;
+      font-weight: 600;
+      color: #666;
+    }
+
+    .breadcrumbs a:hover,
+    .breadcrumbs a:focus {
+      color: #333;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:visited {
+      color: #666;
+    }
+
+    /* Container for the blog list */
+    .blog-list-container {
+      max-width: 800px;
+      margin: 0 auto;
+      text-align: left;
+    }
+
+    /* Header styling for blog pages */
+    .blog-header {
+      margin-bottom: 2rem;
+    }
+
+    /* Blog content sizing */
+    .blog-content {
+      font-size: 1.1rem;
+      /* Increased font size */
+      line-height: 1.8;
+      /* Increased line height for better readability */
+      max-width: 100%;
+      /* Ensure content uses full width */
+    }
+
+    /* Blog page title */
+    .blog-page-title {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 0.75rem;
+    }
+
+    /* Description text under the title */
+    .blog-page-description {
+      margin-top: 0.7rem;
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+
+    /* Card styling for each blog entry */
+    .blog-card {
+      background-color: #f5f5f5;
+      border-radius: 8px;
+      margin-bottom: 1.5rem;
+      padding: 1rem;
+    }
+
+    /* Card title area */
+    .blog-card-title {
+      margin: 0;
+      line-height: 1.2;
+      font-weight: 700;
+      font-size: 1.6rem;
+      color: #333;
+    }
+
+    /* Summary styling within the card */
+    .blog-card-summary {
+      margin-top: 0.5rem;
+    }
+
+    .blog-card-summary p {
+      font-size: 1.1rem;
+      font-weight: 500;
+      color: #555;
+    }
+
+    /* Hyperlink styling for the blog card */
+    .blog-card-link-wrapper {
+      display: block;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    .blog-card-link-wrapper:visited {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .blog-card-link-wrapper:hover,
+    .blog-card-link-wrapper:focus,
+    .blog-card-link-wrapper:visited:hover,
+    .blog-card-link-wrapper:visited:focus {
+      color: #0052cc;
+      text-decoration: none;
+    }
+
+    /* Draft status badge */
+    .draft-badge {
+      font-size: 0.85rem;
+      color: #999;
+    }
+
+    /* Footer metadata area within the blog card */
+    .blog-card-meta {
+      margin-top: 0.5rem;
+      font-size: 0.9rem;
+    }
+
+    .blog-single-container {
+      max-width: 800px;
+      margin: 0 auto;
+      text-align: left;
+      font-size: 1.2rem;
+    }
+
+    .tag-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      list-style: none;
+      padding: 0rem;
+    }
+
+    .tag-card {
+      background-color: #e0e0e0;
+      border-radius: 4px;
+      padding: 0.5rem 1rem;
+    }
+
+    .tag-card a {
+      text-decoration: none;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .tag-card a:hover,
+    .tag-card a:focus {
+      color: #0052cc;
+    }
+
+    .blog-meta {
+      font-size: 1rem;
+      color: #2f2d2d;
+      margin-top: 0.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .blog-meta span {
+      margin-right: 0.5rem;
+    }
+
+    .blog-canonical a {
+      color: #333;
+      /* Neutral color */
+      text-decoration: underline;
+      /* Always underline */
+    }
+
+    .blog-canonical a:visited {
+      color: #333;
+      /* Remove purple color once clicked */
+    }
+
+    .blog-canonical a:hover,
+    .blog-canonical a:focus {
+      color: #0052cc;
+      /* Blue on hover/focus */
+    }
+
+    .toc-card {
+      background-color: #f5f5f5;
+      border-radius: 8px;
+      padding: 0.5rem;
+      margin-bottom: 1.2rem;
+    }
+
+    .toc-title {
+      font-weight: 700;
+      font-size: 1.1rem;
+      color: #333;
+    }
+
+    .toc-content {
+      margin-top: 0.5rem;
+    }
+
+    .toc-list {
+      list-style: none;
+      padding: 0;
+    }
+
+    .toc-item a {
+      color: #333;
+      /* Always black */
+      text-decoration: none;
+      /* No underline */
+    }
+
+    .toc-item a:visited {
+      color: #333;
+      /* Remove purple color once clicked */
+    }
+
+    .toc-item a:hover,
+    .toc-item a:focus {
+      color: #0052cc;
+      /* Blue on hover/focus */
+      text-decoration: none;
+      /* No underline */
+    }
+
+    .footer-nav-card {
+      display: flex;
+      justify-content: space-between;
+      background-color: #f5f5f5;
+      border-radius: 8px;
+      padding: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    .footer-nav-link {
+      flex: 1;
+      text-align: center;
+      padding: 0.5rem;
+      color: #333;
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    .footer-nav-link:hover,
+    .footer-nav-link:focus {
+      background-color: #dcdcdc;
+      color: #333;
+      text-decoration: none;
+    }
+
+    .footer-nav-prev {
+      border-right: 1px solid #ccc;
+    }
+
+    .footer-nav-next {
+      border-left: 1px solid #ccc;
+    }
+
+    .footer-nav-text {
+      display: block;
+      font-size: 0.9rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .footer-nav-title {
+      display: block;
+      font-size: 1rem;
+      font-weight: 700;


Can we try to reduce this a little bit? I'd like to have as few overrides to Vanilla as possible, so that it's easy to keep up to date as the design system evolves?

This feels like an excessive amount of change? I could be wrong, but I'd like to use standard components as much as we can.

It leads to inconsistencies like the following:

Note the alignment difference highlighted in red?

Hello @jnsgruk, thanks a lot for the feedback. I'll take up this PR from here, and will migrate the CSS to the vanilla framework.

jnsgruk · 2025-03-03T16:52:34Z

(I accidentally clicked approve, not request changes! Sorry!)

jnsgruk closed this Jan 30, 2025

soumyaDghosh reopened this Jan 30, 2025

soumyaDghosh requested changes Jan 30, 2025

View reviewed changes

content/blog/first.md Outdated Show resolved Hide resolved

content/blog/second.md Outdated Show resolved Hide resolved

jnsgruk reviewed Jan 31, 2025

View reviewed changes

hugo.toml Outdated Show resolved Hide resolved

bits-and-atoms and others added 2 commits February 1, 2025 20:51

added new line to each files and removed test files

fbfb57d

Merge branch 'snapcrafters:main' into dev

d5ff76b

bits-and-atoms and others added 17 commits February 6, 2025 02:11

Basic structure creation for single blog page

d289510

added breadcrumb navigation for a single blog page

4f9474d

adding vanilla framework for breadcrumb navigation

fd17897

adding meta data of blog

3f814e3

adding author data

1b8aee5

table of content added styling is remaining

c1018d1

bottom navigation for blog added without styling

0693253

incorporating features to single blog page

e364624

adding new line at end of files

3d55743

Delete assets/css/breadcrumbs.css

b067f2a

adding emojify

2477f99

changing title

95d9fb5

adding list page with necessary objects

3e25052

meta data file for list page of blog

9926d5b

minor bug fixes

edf7141

adding tag taxonomy

11ed6d4

Merge branch 'snapcrafters:main' into dev

3a00367

styling of blog list,term and single page done

0d01daa

soumyaDghosh requested a review from jnsgruk February 28, 2025 20:40

soumyaDghosh approved these changes Feb 28, 2025

View reviewed changes

jnsgruk approved these changes Mar 3, 2025

View reviewed changes

jnsgruk self-requested a review March 3, 2025 16:52

Add blog section with summary display on listing page #9

Are you sure you want to change the base?

Add blog section with summary display on listing page #9

Uh oh!

Conversation

bits-and-atoms commented Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jnsgruk commented Jan 30, 2025

Uh oh!

soumyaDghosh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jnsgruk commented Jan 31, 2025

Uh oh!

jnsgruk commented Feb 3, 2025

Uh oh!

jnsgruk commented Feb 3, 2025

Uh oh!

bits-and-atoms commented Feb 19, 2025

Uh oh!

bits-and-atoms commented Feb 24, 2025

Uh oh!

soumyaDghosh commented Feb 28, 2025

Uh oh!

soumyaDghosh commented Feb 28, 2025

Uh oh!

jnsgruk commented Mar 1, 2025

Uh oh!

jnsgruk Mar 3, 2025

Choose a reason for hiding this comment

Uh oh!

jnsgruk Mar 3, 2025

Choose a reason for hiding this comment

Uh oh!

jnsgruk Mar 3, 2025

Choose a reason for hiding this comment

Uh oh!

soumyaDghosh Mar 5, 2025

Choose a reason for hiding this comment

Uh oh!

jnsgruk commented Mar 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bits-and-atoms commented Jan 29, 2025 •

edited

Loading