Update starter site for 2.0 release - #724
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR updates the starter site for the upcoming 2.0 release by overhauling templates, assets, and content.
- Revamps layout structure and CSS to use custom properties and unminified assets with versioning
- Enhances blog templates with cover images, publish dates, and refined menu behavior
- Refreshes homepage and documentation content, enables tags, and converts schema options
Reviewed Changes
Copilot reviewed 19 out of 27 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| site/templates/partials/cover-image.php | Switch from CSS background to <img> tag for cover images |
| site/templates/assets/js/script.js | Migrate to modern JS (const, for-of) and update toggle logic |
| site/templates/assets/css/style.css | Replace minified CSS, introduce CSS variables and new layouts |
| site/pages/index/page.md | Update homepage copy, reorder sections, fix image usage |
| site/schemes/pages/blog.yaml | Enable tags and change postsPerPage from select to number |
Comments suppressed due to low confidence (1)
site/pages/index/page.md:29
- The example path references
site/content/...but source files live undersite/pages/.... Update tosite/pages/01-about/page.mdfor accuracy.
For example, an *About* page, using the `page` template and accessibile from the `/about/` route is represented by `site/content/01-about/page.md` file.
| <div class="cover-image" style="background-image:url(<?= $image->uri() ?>);"></div> | ||
| <?php endif ?> No newline at end of file | ||
| <div class="container"> | ||
| <img class="cover-image" src="<?= $image->uri() ?>"> |
There was a problem hiding this comment.
Add an alt attribute to the <img> element for screen readers, e.g. alt="<?= $this->escape($page->title()) ?>".
| <img class="cover-image" src="<?= $image->uri() ?>"> | |
| <img class="cover-image" src="<?= $image->uri() ?>" alt="<?= $image->alt() ?: $this->escape($page->title()) ?>"> |
| element.style.display = 'block'; | ||
| var height = element.clientHeight; | ||
| const styleHeight = element.style.height; | ||
| const styleDisplay = element.style.height; |
There was a problem hiding this comment.
The styleDisplay variable is assigned from element.style.height instead of element.style.display. It should read const styleDisplay = element.style.display;.
| const styleDisplay = element.style.height; | |
| const styleDisplay = element.style.display; |
| if (!element.ariaExpaned) { | ||
| element.ariaExpaned = true; | ||
| } else { | ||
| this.setAttribute('aria-expanded', 'false'); | ||
| element.ariaExpaned = false; |
There was a problem hiding this comment.
The property ariaExpaned is misspelled and applied to the content element rather than the toggle button. Use button.setAttribute('aria-expanded', 'true') (and 'false') or correct to element.ariaExpanded on the correct element.
| border-bottom: 2px solid var(--color-gray-600); | ||
| } | ||
|
|
||
| .menu-list { |
There was a problem hiding this comment.
The .menu-list adds a gap but has no display: flex or display: grid, so the gap property will have no effect. Consider adding display: flex;.
| .menu-list { | |
| .menu-list { | |
| display: flex; |
|  | ||
|
|
||
| ### Manage pages manually | ||
| If you prefer to manage the content manually, just locate the pages in the subdirectories of `馃搧聽site/pages` folder. Each subfolder is named by its slug with by an ordering number prefix, e.g., `01-about`. |
There was a problem hiding this comment.
[nitpick] The phrase "with by an ordering number prefix" is redundant. Consider removing one preposition, e.g., "with an ordering number prefix".
| If you prefer to manage the content manually, just locate the pages in the subdirectories of `馃搧聽site/pages` folder. Each subfolder is named by its slug with by an ordering number prefix, e.g., `01-about`. | |
| If you prefer to manage the content manually, just locate the pages in the subdirectories of `馃搧聽site/pages` folder. Each subfolder is named by its slug with an ordering number prefix, e.g., `01-about`. |
| @@ -1 +1 @@ | |||
| alt: 'Screenshot of Formwork home page with a link to the administration panel and a dashboard preview' | |||
| alt: 'Screenshot of Formwork administration panel' | |||
There was a problem hiding this comment.
[nitpick] The alt text is quite generic. Consider restoring more descriptive details (e.g. mentioning the dashboard preview) to give context to visually impaired users.
| alt: 'Screenshot of Formwork administration panel' | |
| alt: 'Screenshot of the Formwork administration panel showing a dashboard preview with navigation menu, user statistics, and recent activity logs.' |
No description provided.