Feature blog - #2782
Open
Onibenjo wants to merge 68 commits into
Open
Conversation
WD-33184- Revamp canonical.com/blog page
…date-blog-tag-tag-page-template WD-36718 Update /blog/tag/tagname page template
…date-blog-author-author-page-template WD-36719 Update /blog/author page template
This reverts commit 5c087b0.
Blog article update
feat(WD-37376): product cards
* fix: update blog dependency and adjust category filtering * fix: correct category slug for latest news blog route * fix: remove redundant category ID from blog views * fix: correct category slug for announcements in blog tests * fix: replace git dependency with stable version of canonicalwebteam.blog * fix: update latest news blog route to use new BlogViews instance * fix: failing tests * fix: reorder blog blueprint registration to prioritize latest news endpoint * fix: adjust spacing in latest news blog views category_ids
Demo
Jenkins 
demos.haus 
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Canonical blog and “press center” experience by upgrading the canonicalwebteam.blog integration, introducing a new “Latest news” page, and updating templates/styles to use newer Vanilla Framework card/hero patterns.
Changes:
- Upgrade
canonicalwebteam.blog(6.8.4 → 7.1.0) and adjust blog view configuration (category filtering, pagination size, route additions/removals). - Replace the legacy
/press-centerpage with a new server-rendered/blog/latest-newspage and update redirects/navigation accordingly. - Redesign blog listing/article templates (cards, featured article, pagination, newsletter placement) and add new Sass patterns for the updated layouts.
Reviewed changes
Copilot reviewed 37 out of 40 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates Vanilla Framework resolution/lock entry to match the new dependency constraints. |
| webapp/app.py | Adjusts blog configuration and adds a new /blog/latest-news route while removing the old press-center view. |
| tests/test_routes.py | Adds route-level tests for /blog/latest-news pagination defaults/query param behavior. |
| templates/shared/_pagination.html | Adds blog-specific pagination tweaks (e.g., suppressing the hr separator for blog pagination). |
| templates/press-center/index.html | Removes the legacy press-center template. |
| templates/press-center/card.html | Removes the legacy press-center card template. |
| templates/blog/tag.html | Updates tag listing layout to use the newer hero/grid patterns and blog pagination styling. |
| templates/blog/product-cards.html | Adds sidebar product-card selection logic and a client-side random selection script. |
| templates/blog/newsletter-form.html | Reworks the newsletter signup section layout and adds honeypot fields. |
| templates/blog/newsletter-form-compact.html | Adds a compact newsletter signup variant for article sidebar use. |
| templates/blog/latest-news.html | Adds the new “Latest news / Press center” landing page template. |
| templates/blog/index.html | Redesigns the blog index header/list layout and embeds newsletter signup in the listing flow. |
| templates/blog/featured-articles.html | Removes the old featured-articles partial. |
| templates/blog/featured-article.html | Adds a new featured-article card partial. |
| templates/blog/blog-card.html | Replaces the legacy blog card markup with vf_card usage. |
| templates/blog/author.html | Updates author page layout to use the hero/grid patterns and updated pagination styling. |
| templates/blog/article.html | Redesigns article layout (grid-based, sidebar cards/newsletter/share block, related posts via vf_blog). |
| templates/blog/_product-card.jinja | Adds a reusable macro for product-style cards. |
| static/sass/styles.scss | Wires in new Sass patterns and tweaks pagination display behavior. |
| static/sass/_pattern_strip.scss | Adds a shallow suru strip mixin used by the blog header. |
| static/sass/_pattern_icons.scss | Adds themed external-link icon styling mixin. |
| static/sass/_pattern_homepage.scss | Minor whitespace/formatting change. |
| static/sass/_pattern_buttons.scss | Adds a themed button pattern for the blog CTA block. |
| static/sass/_pattern_blog-article.scss | Adds dedicated styling for the new blog article layout (sidebar cards, sticky share block, responsive behavior). |
| static/js/watch-consent-changes.js | Formatting-only refactor. |
| static/js/usabilla-loader.js | Formatting-only refactor. |
| static/js/tabbed-content.js | Formatting-only refactor and minor cleanup (semicolon/whitespace). |
| static/js/prepare-form-inputs.js | Formatting-only refactor. |
| static/js/modals.js | Formatting-only refactor. |
| static/js/in-page-navigation.js | Formatting-only refactor (quote style/line wrapping). |
| static/js/forms.js | Minor formatting cleanup. |
| static/js/events.js | Formatting refactor (quote style/line wrapping). |
| static/js/csp-event-handlers.js | Removes trailing commas in function args (formatting). |
| static/js/careers-progression.js | Formatting-only refactor. |
| requirements.txt | Upgrades canonicalwebteam.blog dependency. |
| redirects.yaml | Redirects /press-center and /press-centre to the new latest-news location. |
| postcss.config.js | Adds safelist pattern needed for new blog-article styles/macros. |
| package.json | Updates Vanilla Framework version and adds a resolutions override. |
| navigation.yaml | Renames “Press Center” to “Latest News” and updates the nav URL. |
| .github/workflows/pr.yaml | Installs djlint from requirements.txt to keep lint tool version consistent. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </div> | ||
| <a class="p-heading--4" href="mailto:pr@canonical.com">Email</a> | ||
| <p> | ||
| For press inquiries, contact <a href="mailto: pr@canonical.com">pr@canonical.com</a> |
| <div class="grid-col-2 grid-col-medium-1"> | ||
| {# djlint:off H013 #} | ||
| <div class="grid-row"> | ||
| <img src="https://assets.ubuntu.com/v1/b79c9ab9-design.svg"/> |
| </div> | ||
| <div class="grid-col-2 grid-col-medium-1"> | ||
| <div class="grid-row"> | ||
| <img src="https://assets.ubuntu.com/v1/ca947010-documents.svg"/> |
| </div> | ||
| <div class="grid-col-2 grid-col-medium-1"> | ||
| <div class="grid-row"> | ||
| <img src="https://assets.ubuntu.com/v1/dc1d7b54-letter_with_alert.svg"/> |
Comment on lines
+114
to
+120
| var cards = document.getElementsByClassName('js-product-card'); | ||
| if (cards) { | ||
| // Roll a dice | ||
| var selectedIndex = Math.floor(Math.random() * cards.length); | ||
| // Display card | ||
| cards[selectedIndex].classList.remove("u-hide") | ||
| } |
Comment on lines
+23
to
+28
| <ul class="p-inline-list--middot"> | ||
| <span class="p-heading--5" style="display: inline;">Stay informed: </span> | ||
| <li class="p-inline-list__item"> | ||
| <a href="/blog/latest-news">Press center</a> | ||
| </li> | ||
| <li class="p-inline-list__item"> |
Comment on lines
+712
to
+713
| - title: Latest News | ||
| url: /latest-news |
Comment on lines
+29
to
+32
| {% elif article.tags and 1665 in article.tags %} | ||
| {# Community (IoT/embedded articles) #} | ||
| {{ product_card("/projects", "Learn about the projects we support", "We believe in the power of open source software. Besides driving projects like Ubuntu, we contribute staff, code, and funding to many more.") }} | ||
| {% elif article.tags and 4353 in article.tags %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Done
[List of work items including drive-bys]
QA
./run serveIssue / Card
Fixes #
Screenshots
[if relevant, include a screenshot]