Enhance site branding - #16
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@copilot resolve the merge conflicts in this pull request |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR modernizes the Jekyll site build and content structure, adding build-time WebP generation + HTML post-processing, migrating/programmatizing site navigation/content blocks, and expanding “Our Work / News” content while removing Splide assets.
Changes:
- Add Node-based WebP generation (Sharp) + a Jekyll post-render hook to serve WebP when available; update Vercel build to run it.
- Introduce new layouts/includes/data-driven navigation and programme cards; refresh homepage hero to a custom carousel.
- Restructure/expand content pages (policies, programmes, news) and migrate asset paths to
/assets/images.
Reviewed changes
Copilot reviewed 54 out of 208 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vercel.json | Adds custom build command and a new redirect for /our-work/dlc → /our-work/census. |
| terms.md | Policy formatting tweaks, removes DLC-specific section, adds contact/support block. |
| scripts/splide/dist/js/utils/splide-utils.esm.js | Removes vendored Splide utils (no longer referenced). |
| scripts/splide/dist/js/utils/splide-utils.cjs.js | Removes vendored Splide utils (no longer referenced). |
| scripts/splide/dist/js/splide.min.js | Removes vendored Splide bundle (no longer referenced). |
| scripts/splide/dist/js/splide-renderer.min.js | Removes vendored Splide renderer (no longer referenced). |
| scripts/splide/dist/css/themes/splide-skyblue.min.css | Removes vendored Splide theme CSS. |
| scripts/splide/dist/css/themes/splide-sea-green.min.css | Removes vendored Splide theme CSS. |
| scripts/splide/dist/css/themes/splide-default.min.css | Removes vendored Splide theme CSS. |
| scripts/splide/dist/css/splide.min.css | Removes vendored Splide CSS. |
| scripts/splide/dist/css/splide-core.min.css | Removes vendored Splide core CSS. |
| scripts/splide-extension-auto-scroll.min.js | Removes vendored Splide auto-scroll extension. |
| scripts/generate-webp.js | Adds build-time JPG/PNG → WebP conversion using Sharp. |
| safeguarding.md | Policy formatting + content updates; adds support block. |
| privacy.md | Major content/structure refresh; updates last updated date; adds support block. |
| package.json | Adds Node tooling for build (Sharp) and WebP generation script. |
| our-work/voice.md | Adds new “Voice” programme page. |
| our-work/revise.md | Adds new “Revise” programme page. |
| our-work/raise.md | Adds new “RAISE” programme page. |
| our-work/index.md | Reworks “Our Work” page structure and adds donate section. |
| our-work/futures.md | Adds new “Futures” programme page. |
| our-work/dlc.md | Removes old DLC programme page (replaced by Census). |
| our-work/census.md | Adds new “Census” programme page with detailed content/visuals. |
| our-work/campfire.md | Migrates Campfire to programme layout; refactors project/partner sections; adds donate section. |
| news/osca-census-pilot.md | Adds new news post announcing first Census pilot. |
| news/index.md | Adds donate section to News index. |
| news/hackuk-campfire.md | Adds new news post spotlighting HackUK support. |
| news/cyber-heroez.md | Updates assets/metadata and image paths. |
| news/campfire-experience.md | Updates cover/image paths to /assets/images. |
| index.md | Rebuilds homepage content and hero slide data; adds donate section; tweaks partner grid. |
| img/sponsor/hc.svg | Removes old Hack Club logo asset from legacy /img path. |
| dlc-land/ormistonsandwell/students.md | Removes DLC landing page (students). |
| dlc-land/ormistonsandwell/staff.md | Removes DLC landing page (staff). |
| contact.md | Refactors contact page to data-driven cards + donate section. |
| conduct.md | Policy formatting + content updates; adds structured contact + support block. |
| assets/images/sponsor/hc.svg | Adds Hack Club logo under new /assets/images structure. |
| assets/images/logo/for-web/Voice.svg | Adds programme logo asset. |
| assets/images/logo/for-web/Revise.svg | Adds programme logo asset. |
| assets/images/logo/for-web/RAISE.svg | Adds programme logo asset. |
| assets/images/logo/for-web/Futures.svg | Adds programme logo asset. |
| assets/images/logo/for-web/Census.svg | Adds programme logo asset. |
| about.md | Rewrites About page; adds values/team sections driven by data; adds donate section. |
| _plugins/webp_hook.rb | Adds post-render HTML rewriting for WebP <picture> + inline url() swapping. |
| _layouts/programme.html | Adds generic programme layout with hero image support. |
| _layouts/post.html | Improves post layout (meta, cover image, back link) + adds donate section. |
| _layouts/page.html | Adds content_class hook and consistent spacing. |
| _layouts/index.html | Replaces video hero with custom hero carousel + JS controls. |
| _layouts/eventdlc.html | Removes no-longer-used DLC event layout. |
| _layouts/dlc.html | Removes no-longer-used DLC layout. |
| _layouts/campfire.html | Removes old Campfire-specific layout (moved to programme). |
| _includes/programmes.html | Adds programmes card grid include driven by data. |
| _includes/news.html | Refactors news include (limit support + “View more” button) and new background styling. |
| _includes/header.html | Converts nav to data-driven _data/nav.yml; updates logo path and breakpoints. |
| _includes/head.html | Switches to {% seo %}; updates favicon path; removes Splide assets; moves Tawk embed into head. |
| _includes/footer.html | Makes copyright year dynamic. |
| _includes/events.html | Removes old hardcoded “events” include. |
| _includes/events-past.html | Adds past events include for Campfire. |
| _includes/donate.html | Updates background styling and donation URL/content. |
| _data/values.yml | Adds values data backing About page. |
| _data/team.yml | Adds team data backing About page. |
| _data/programmes.yml | Adds programmes data backing programmes include. |
| _data/partners.yml | Updates partner list + asset paths. |
| _data/nav.yml | Adds navigation configuration data. |
| _data/contact.yml | Adds contact methods data for Contact page. |
| _data/campfire_projects.yml | Updates Campfire project screenshots to new asset paths. |
| _data/campfire_photos.yml | Updates Campfire photo paths to new asset paths. |
| _data/campfire_partners.yml | Updates sponsor assets + adds invert flags. |
| _config.yml | Adds site URL + sitemap/SEO/target-blank plugins. |
| Gemfile.lock | Adds plugin gems + nokogiri/racc dependencies. |
| Gemfile | Adds Jekyll plugin group for SEO/sitemap/target-blank. |
| .gitignore | Ignores generated .webp outputs. |
| .github/copilot-instructions.md | Updates asset path guidance from /img → /assets/images. |
Suppressed comments (6)
vercel.json:1
- This build command is likely to fail on Vercel for two concrete reasons: (1)
npm cirequires a committed lockfile (package-lock.json); without it,npm ciexits non-zero. (2) adding a custombuildCommandcan prevent automatic Ruby dependency installation—bundle exec jekyll buildwill fail unless gems have been installed (e.g., viabundle install). Consider either committing package-lock.json and adding an explicitbundle installstep (or configuringinstallCommandto run bothbundle installand npm install) so the build is deterministic.
package.json:1 - Sharp is required during the deployment build (to generate WebP) but is listed under
devDependencies. Many CI/build environments setNODE_ENV=production, which causes npm to omit devDependencies by default—leading toCannot find module 'sharp'duringnode scripts/generate-webp.js. To make builds reliable, movesharptodependenciesor ensure the install step explicitly includes dev dependencies (e.g., using npm flags/config appropriate for your environment).
scripts/generate-webp.js:1 fs.promises.readdir(..., { recursive: true, withFileTypes: true })and the use ofentry.parentPath/entry.pathis not portable across Node versions/environments (those properties are not part of the stable Dirent API). This can throw at runtime even when the directory exists. A more robust approach is to implement your own recursive walk usingfs.promises.opendir()+ recursion, or use a glob library to enumerate files, so path derivation is always well-defined.
scripts/generate-webp.js:1- Running a fully unbounded
Promise.all()over all images can create a large number of concurrent Sharp processes/file handles, which can significantly slow builds or hit resource limits on CI/Vercel. Consider limiting concurrency (e.g., a small worker pool) so conversion runs in batches; this generally makes builds more reliable and predictable under constrained resources.
terms.md:1 - The markdown
- >creates a list item containing a blockquote, which is likely unintended and can render awkwardly. If these are meant to be plain bullet points, remove the>markers; if they are meant to be a blockquote emphasis, remove the leading-and keep a consistent blockquote formatting.
news/osca-census-pilot.md:1 - This link contains spaces and a
../relative path, which can produce a broken URL in the generated site (spaces should be URL-encoded). Prefer a root-relative, encoded URL like/assets/OSCA%20Student%20Census%20Report%202526.pdfto ensure the link works regardless of the current page path.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| {% assign posts = site.pages | where: "layout", "post" | sort: "date" | reverse %} | ||
| {% assign limit = include.limit | default: 999 %} | ||
| {% assign total = posts | size %} | ||
| <div class="row row-cols-1 row-cols-md-2 g-3"> | ||
| {% assign posts = site.pages | where: "layout", "post" | sort: "date" | | ||
| reverse %} {% for post in posts %} | ||
| {% for post in posts limit: limit %} |
| </div> | ||
| {% endfor %} | ||
| </div> | ||
| {% if total > limit %} |
| <div class="hero-content"> | ||
| <h1>{{ page.hero_title }}</h1> | ||
| <h2>{{ page.hero_sub }}</h2> | ||
| <div class="hero hero-carousel"> |
| <button type="button" class="hero-arrow hero-arrow--prev" data-hero-prev aria-label="Previous slide"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg> | ||
| </button> | ||
| <button type="button" class="hero-arrow hero-arrow--next" data-hero-next aria-label="Next slide"> |
| <div class="hero-controls"> | ||
| {% if page.hero_slides %} | ||
| <span class="hero-dashes"> | ||
| {% for slide in page.hero_slides %} | ||
| <button type="button" class="hero-dash{% if forloop.first %} is-active{% endif %}" data-hero-go="{{ forloop.index0 }}" aria-label="Go to slide: {{ slide.title | strip_html }}" aria-current="{% if forloop.first %}true{% else %}false{% endif %}"></button> |
Co-authored-by: opott <120502505+opott@users.noreply.github.com>
Resolved the merge conflicts and merged latest |
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 12 changed files in this pull request and generated no new comments.
Suppressed comments (5)
assets/style.css:702
- The hover state also relies on
color-mix(). Add a fallbackbackgroundso hover/focus styles don’t disappear entirely whencolor-mix()is unsupported.
border-color: var(--partner-colour, var(--green));
background: color-mix(in srgb, var(--partner-colour, var(--green)) 12%, #fff);
box-shadow: 0 8px 20px rgba(0, 66, 37, 0.1);
_layouts/index.html:53
- The dot button
aria-labelusesslide.title | strip_html, but titles containing<br>end up concatenated (e.g. "Real skills.Real opportunity.") which is awkward for screen readers. Replace common<br>variants with spaces before stripping HTML.
{% for slide in page.hero_slides %}
<button type="button" class="hero-dash{% if forloop.first %} is-active{% endif %}" data-hero-go="{{ forloop.index0 }}" aria-label="Go to slide: {{ slide.title | strip_html }}" aria-current="{% if forloop.first %}true{% else %}false{% endif %}"></button>
{% endfor %}
assets/style.css:691
color-mix()isn’t supported in some browsers; if it’s unsupported, thesebackground/borderdeclarations become invalid and sponsor cards can lose their styling. Add simple fallback declarations immediately before thecolor-mix()versions.
This issue also appears on line 700 of the same file.
background: color-mix(in srgb, var(--partner-colour, var(--green)) 5%, #fff);
border: 1.5px solid color-mix(in srgb, var(--partner-colour, var(--green)) 65%, rgba(0, 66, 37, 0.14));
border-radius: 16px;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
_layouts/index.html:75
window.matchMediais called unguarded; in browsers/environments where it’s undefined this script will throw and break the home page hero entirely. Add a safe fallback object whenmatchMediais unavailable.
var current = 0;
var timer = null;
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
assets/style.css:226
rgb(from var(--accent) ...)is not supported in some browsers; when unsupported, the wholebackgrounddeclaration becomes invalid and the programme hero overlay can disappear. Add a plain-gradient fallbackbackgroundbefore thergb(from ...)version so older browsers still get a readable overlay.
rgba(0, 0, 0, 0.3) 100%),
linear-gradient(to bottom,
rgb(from var(--accent) r g b / 0.4) 0%,
rgb(from var(--accent) r g b / 0.24) 50%,
rgb(from var(--accent) r g b / 0.1) 100%);



No description provided.