New html css for posts list, post single #63
Conversation
|
Warning
|
| Files | Change Summary |
|---|---|
themes/beaver/layouts/_default/baseof.html |
Transitioned to a complete HTML document structure with enhanced SEO and social media integration. |
themes/beaver/layouts/blog/list.html |
Replaced complex HTML structure with partials for header, footer, and post images; streamlined content display. |
themes/beaver/layouts/blog/single.html |
Simplified structure using <article> tags; updated header/footer partials; improved semantic clarity. |
themes/beaver/layouts/partials/blog/footer.html |
Introduced a structured footer with company info, services, and social media links. |
themes/beaver/layouts/partials/blog/header.html |
Created a new header layout with dynamic content and responsive navigation. |
themes/beaver/layouts/partials/blog/img-cropped.html |
Added a template for rendering images with cropping and WebP support. |
themes/beaver/static/css/newblog.css |
New CSS file for blog styling, incorporating responsive design and dark mode adjustments. |
themes/beaver/layouts/partials/blog/share.html |
Introduced a new partial for social sharing functionality with links to major platforms. |
themes/beaver/layouts/partials/blog/related-posts.html |
Added an <aside> element for related posts, improving semantic structure. |
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| Headline for Mobile is too big (#52) | ✅ | |
| Optionally can design blog with new simpler template (#52) | ✅ | The new modular structure simplifies the template. |
| Adds info when article was created/last updated or both (#60) | ✅ | The updated structure includes publication and modification times. |
| Reduce dependency of redundant js and css for blog (#59) | ❌ | There is no indication that redundant JS and CSS dependencies were addressed. |
Poem
In the meadow, I hop with glee,
A blog so bright, as fine as can be!
With headers and footers, all neat and spry,
Images cropped, oh my, oh my!
A simpler layout, a joyful sight,
Hooray for the changes, everything feels right! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai generate interesting stats about this repository and render them as a table.@coderabbitai show all the console.log statements in this repository.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
|
Виглядає на десктопі
В основному ок, є деякі малі фішки які можна покращити у v2 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (2)
themes/beaver/layouts/partials/blog/img-cropped.html (2)
7-11: LGTM with a minor suggestion!The code segment is using the
<picture>element correctly to provide multiple image sources for better performance and compatibility. The fallback<img>element ensures that the image is displayed in all browsers.Consider using a more descriptive
alttext instead of the page title. Thealttext should convey the purpose or content of the image itself.
13-15: LGTM with a minor suggestion!Using a placeholder image is a good fallback mechanism when no image is specified.
Consider making the placeholder image path configurable using a site parameter or a partial-specific parameter. This will make it easier to update the placeholder image in the future without modifying the code.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
themes/beaver/static/img/icons/github.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/jetthoughts.svgis excluded by!**/*.svg
Files selected for processing (6)
- themes/beaver/layouts/blog/list.html (1 hunks)
- themes/beaver/layouts/blog/single.html (1 hunks)
- themes/beaver/layouts/partials/blog/footer.html (1 hunks)
- themes/beaver/layouts/partials/blog/header.html (1 hunks)
- themes/beaver/layouts/partials/blog/img-cropped.html (1 hunks)
- themes/beaver/static/css/newblog.css (1 hunks)
Additional context used
Biome
themes/beaver/static/css/newblog.css
[error] 181-181: Expected a declaration, or an at rule but instead found ';'.
Expected a declaration, or an at rule here.
(parse)
Additional comments not posted (21)
themes/beaver/layouts/partials/blog/img-cropped.html (1)
1-4: LGTM!The code segment is well-structured and follows Hugo's best practices for image processing. Using WebP format is a good optimization technique for faster image loading.
themes/beaver/layouts/blog/list.html (5)
1-1: LGTM!Using a partial for the blog header is a good practice as it separates concerns and improves maintainability.
3-3: LGTM!Sorting the blog posts by the
created_atparameter in descending order ensures that the latest posts are displayed first. Pagination is important for improving the performance and user experience of the blog.
5-24: LGTM!
- Using a partial for the post image is a good practice as it centralizes the image rendering logic.
- The class names and structure of the blog post links have been modified to enhance semantic clarity and potentially improve styling.
28-28: LGTM!Using a partial for the pagination is a good practice as it separates concerns and improves maintainability.
30-30: LGTM!Using a partial for the blog footer is a good practice as it separates concerns and improves maintainability.
themes/beaver/layouts/blog/single.html (5)
1-1: LGTM!The change from
page/header.htmltoblog/header.htmlaligns with the objective of redesigning the blog with a new template.
3-11: LGTM!The changes to the main content structure enhance the semantic clarity and improve readability. The use of the
<article>tag and the streamlined structure are good improvements.
13-25: LGTM!The social sharing section is well-integrated within the new layout. The use of partials for the SVG icons is a good practice for maintainability.
27-29: LGTM!The related posts section is appropriately placed within an
<aside>tag. The use of a partial for the related posts is a good practice for modularity and maintainability.
31-31: LGTM!The change from
page/footer.htmltoblog/footer.htmlaligns with the objective of redesigning the blog with a new template.themes/beaver/layouts/partials/blog/footer.html (1)
1-61: LGTM!The footer code is well-structured, follows best practices, and enhances the user experience. The changes are approved.
themes/beaver/layouts/partials/blog/header.html (4)
1-15: LGTM!The HTML structure and meta tags follow best practices and provide important information for browsers and search engines. The use of canonical links helps avoid duplicate content issues.
16-38: LGTM!The Open Graph and Twitter meta tags provide rich metadata for social media sharing and help improve the visibility of the blog posts. The article-specific meta tags are important for SEO and help search engines understand the content better. The
robotsmeta tag is used correctly to avoid indexing of duplicate content.
39-56: LGTM!Adding image meta tags for blog posts and tag pages enhances the visual appeal when sharing on social media platforms. Using the blog index page's image for tag pages ensures a consistent visual representation across all tag pages.
65-91: LGTM!The navbar structure is semantically correct and follows best practices. The inclusion of a menu toggle enhances the user experience on mobile devices. The navigation links cover important sections of the website and provide easy access to relevant content. The "Contact Us" button stands out and encourages user engagement.
themes/beaver/static/css/newblog.css (5)
1-5: LGTM!The code changes are approved.
7-16: LGTM!The code changes are approved.
18-56: LGTM!The code changes are approved.
58-96: LGTM!The code changes are approved.
116-464: LGTM!The rest of the code changes are approved.
Tools
Biome
[error] 181-181: Expected a declaration, or an at rule but instead found ';'.
Expected a declaration, or an at rule here.
(parse)
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review due to trivial changes (1)
- themes/beaver/static/css/newblog.css
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- themes/beaver/layouts/_default/list.html (1 hunks)
- themes/beaver/layouts/partials/blog/footer.html (1 hunks)
Files skipped from review due to trivial changes (1)
- themes/beaver/layouts/partials/blog/footer.html
Additional comments not posted (5)
themes/beaver/layouts/_default/list.html (5)
1-1: LGTM!Using a partial template for the blog header improves modularity and maintainability.
3-3: LGTM!Sorting the blog posts in descending order based on the creation date is a common and expected behavior for a blog.
5-24: LGTM!The changes in this code segment are well-structured and improve the overall code quality:
- The simplified HTML structure enhances readability and maintainability.
- Using partial templates for image cropping and post metadata promotes modularity.
- The blog post title, tags, and creation date are correctly rendered.
28-28: LGTM!Using a partial template for pagination improves modularity and maintainability.
30-30: LGTM!Using a partial template for the blog footer improves modularity and maintainability.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- themes/beaver/static/css/newblog.css
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
2 times, most recently
from
f27c6ee to
fcaae33
Compare
|
|
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
2 times, most recently
from
70742ea to
487ce0f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- themes/beaver/layouts/partials/blog/header.html (1 hunks)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review due to trivial changes (1)
- themes/beaver/static/css/newblog.css
Files skipped from review as they are similar to previous changes (1)
- themes/beaver/layouts/partials/blog/header.html
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
from
487ce0f to
47696f1
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (4)
themes/beaver/static/img/icons/mini/facebook.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/github.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/linkedin.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/x.svgis excluded by!**/*.svg
Files selected for processing (3)
- themes/beaver/layouts/partials/blog/footer.html (1 hunks)
- themes/beaver/layouts/partials/blog/header.html (1 hunks)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review due to trivial changes (2)
- themes/beaver/layouts/partials/blog/footer.html
- themes/beaver/static/css/newblog.css
Files skipped from review as they are similar to previous changes (1)
- themes/beaver/layouts/partials/blog/header.html
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- themes/beaver/layouts/partials/blog/footer.html (1 hunks)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review due to trivial changes (1)
- themes/beaver/layouts/partials/blog/footer.html
Files skipped from review as they are similar to previous changes (1)
- themes/beaver/static/css/newblog.css
|
@AucT please remove |
|
@AucT good news, need to rebase again ;) |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (6)
themes/beaver/static/img/icons/github.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/jetthoughts.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/facebook.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/github.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/linkedin.svgis excluded by!**/*.svgthemes/beaver/static/img/icons/mini/x.svgis excluded by!**/*.svg
Files selected for processing (11)
- themes/beaver/layouts/_default/baseof.html (1 hunks)
- themes/beaver/layouts/_default/list.html (1 hunks)
- themes/beaver/layouts/blog/list.html (1 hunks)
- themes/beaver/layouts/blog/single.html (1 hunks)
- themes/beaver/layouts/partials/blog/footer.html (1 hunks)
- themes/beaver/layouts/partials/blog/header.html (1 hunks)
- themes/beaver/layouts/partials/blog/img-cropped.html (1 hunks)
- themes/beaver/layouts/partials/blog/related-posts.html (1 hunks)
- themes/beaver/layouts/partials/blog/share.html (1 hunks)
- themes/beaver/layouts/shortcodes/svg.html (1 hunks)
- themes/beaver/static/css/newblog.css (1 hunks)
Files skipped from review due to trivial changes (5)
- themes/beaver/layouts/partials/blog/img-cropped.html
- themes/beaver/layouts/partials/blog/related-posts.html
- themes/beaver/layouts/partials/blog/share.html
- themes/beaver/layouts/shortcodes/svg.html
- themes/beaver/static/css/newblog.css
Files skipped from review as they are similar to previous changes (5)
- themes/beaver/layouts/_default/list.html
- themes/beaver/layouts/blog/list.html
- themes/beaver/layouts/blog/single.html
- themes/beaver/layouts/partials/blog/footer.html
- themes/beaver/layouts/partials/blog/header.html
Additional comments not posted (3)
themes/beaver/layouts/_default/baseof.html (3)
1-2: LGTM!The code changes are approved.
3-64: LGTM!The code changes are approved.
66-74: LGTM!The code changes are approved.
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
from
7ca4009 to
862e428
Compare
|
@AucT please deploy this branch to surge, that I can check it and compare |
| <link rel="icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-32x32.png" sizes="32x32" /> | ||
| <link rel="icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-192x192.png" sizes="192x192" /> | ||
| <link rel="apple-touch-icon" href="/wp-content/uploads/2022/09/cropped-jet-thoughts-logo-180x180.png" /> |
There was a problem hiding this comment.
@AucT please schedule an issue to make it as assets
| {{ end }} | ||
|
|
||
| <link rel="stylesheet" href="/css/newblog.css"> |
There was a problem hiding this comment.
instead of /css/newblog.css can we use page bundle or assets versions in order to use minimized and compressed CSS?
|
@dgorodnichy please help with verification of this PR |
|
Different header on Blog and Site. |
|
Service and Use Cases submenus don't work. |
|
@dgorodnichy intended behaviour. In new layout navigation is simple without dropdowns |
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
2 times, most recently
from
faf6fa1 to
9509127
Compare
|
temporarily made navbar links 18px size to be in sync with other (old) layout.
|
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
4 times, most recently
from
75d4009 to
9623bf4
Compare
Main menu for mobile devices looks terrible. |
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
from
9623bf4 to
4136371
Compare
update mobile nav border color remove blog/list and use only default/list close metatags update pagination partial update pagination css (used bootstrap large) don't minify css for development improve pagination add rss for blog make nav links 18px to be in sync with navbar from other pages minify css remove dark mode improve css for pre without language improve css for inline code remove redundant baseof fix format fix head add indentation, new line add new lines to html improve style for blockquote h1 improve css for code add new lines extract html header and footer for posts list and single post to partial add svg shortcode for later use format share improve link color on dark mode format css code add new line for css increase line-height from 1.5 to 1.6 ue baseOf for blog list, blog single instead of header and footer add 60ch max-width for article content move related posts to partial move share to partial add new line add line-height hugo menu contact us improvement add title for github improve footer link colors improve social icons improve font-size add favicon small css improvements add red color for code as in previous theme use params for menu update also posts list by tag remove not needed semicolumn New html css for posts list, post single
AucT
force-pushed
the
new-html-css-for-posts-list-single
branch
from
4136371 to
b7a9808
Compare
| </picture> | ||
|
|
||
| {{ else }} | ||
| <img src="/assets/img/no-image.png" alt="Placeholder Image" width="{{ .width }}" height="{{ .height }}"> |
There was a problem hiding this comment.
we need to pre-process this image too
Closes #52, Closes #56, Closes #59, Closes #60, Closes #72
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Chores