Skip to content

Added Search page #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vasilyyaremchuk merged 2 commits into from
Jul 27, 2026
Merged

Added Search page #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea94d44
Added Search page
speedandfunction-alexost Jul 27, 2026
8d9cef6
rabbit fixes
speedandfunction-alexost Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions website/modules/@apostrophecms/page/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ module.exports = {
title: 'Case Studies',
},
},
{
slug: '/search',
parkedId: 'search',
title: 'Search',
type: '@apostrophecms/search',
},
],
},
};
68 changes: 68 additions & 0 deletions website/modules/@apostrophecms/search/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{% extends 'layout.html' %}

{% block title %}
{{ data.page.title }}
{% endblock %}
{% import '@apostrophecms/pager:macros.html' as pager with context %}

{% block extraHead %}
{{ super() }}
{% endblock %}

{% block main %}
<div class="sf-search-page">
<h1 class="sf-search-page__heading">{{ __('Search Results') }}</h1>

{% if data.query.q %}
<p class="sf-search-page__term">
{{ __('Showing Results for ') }}'<span>{{ data.query.q }}</span>'
</p>
{% endif %}

{% if data.docs|length > 0 %}
<div class="sf-search-page__results">
{% for doc in data.docs %}
{% if doc.type == 'case-studies' %}
{% set meta = __('Case Study') %}
{% set resultUrl = doc._url %}
{% elif doc.type == 'team-members' %}
{% set meta = __('Team Member') %}
{% set resultUrl = '/meet-the-team' %}
{% elif doc.type == 'testimonials' %}
{% set meta = __('Testimonial') %}
{% set resultUrl = '/cases' %}
{% elif doc.type == 'vacancies' %}
{% set meta = __('Job Opening') %}
{% set resultUrl = '/careers' %}
{% elif doc.type == 'business-partner' %}
{% set meta = __('Partner') %}
{% set resultUrl = '/about-us' %}
{% else %}
{% set meta = __('Page') %}
{% set resultUrl = doc._url %}
{% endif %}

<div class="sf-search-page__result">
<p class="sf-search-page__meta">{{ meta }}</p>
<a class="sf-search-page__link" href="{{ resultUrl }}">
<span>{{ doc.title }}</span>
<span class="sf-search-page__arrow" aria-hidden="true">→</span>
</a>
</div>
{% endfor %}
</div>
{% else %}
<p class="sf-search-page__empty">
{{ __('Sorry, there are no results that match your search.') }}
</p>
{% endif %}

{% if data.totalPages > 1 %}
<div>
{{
pager.render({ page: data.currentPage, total: data.totalPages, class: 'c-pagination', shown: 2 }, data.url)
}}
</div>
{% endif %}
</div>
{% endblock %}
1 change: 1 addition & 0 deletions website/modules/asset/ui/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@
@import './scss/_not-found.scss';
@import './scss/_table-widget';
@import './scss/_vacancies';
@import './scss/search';
@import './scss/_animation';
165 changes: 165 additions & 0 deletions website/modules/asset/ui/src/scss/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
.sf-search-page {
--sf-ink: #141414;
--sf-muted: #6B6B6B;
--sf-teal: #00897B;
--sf-rule: rgba(20, 20, 20, 0.1);
max-width: 768px;
margin: 0 auto;
padding: 24px 0 96px;
color: var(--sf-ink);
font-family: Poppins, sans-serif;
-webkit-font-smoothing: antialiased;
}

.sf-search-page__heading {
margin: 0;
font-size: 40px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -1.8px;
}

.sf-search-page__term {
margin: 20px 0 0;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}

.sf-search-page__term span {
border-bottom: 2px solid var(--sf-teal);
padding-bottom: 3px;
}

.sf-search-page__results {
margin-top: 76px;
}

.sf-search-page__result {
padding: 18px 0 20px;
border-bottom: 1px solid var(--sf-rule);
}

.sf-search-page__meta {
margin: 0 0 8px;
color: var(--sf-muted);
font-size: 8px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.sf-search-page__link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--sf-ink);
font-size: 19px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.55px;
text-decoration: none;
transition: color 0.2s ease;
}

.sf-search-page__arrow {
color: var(--sf-teal);
font-size: 16px;
font-weight: 600;
transition: transform 0.2s ease;
}

.sf-search-page__link:hover {
color: var(--sf-teal);
}

.sf-search-page__link:hover .sf-search-page__arrow {
transform: translateX(4px);
}

.sf-search-page__empty {
margin: 76px 0 0;
font-size: 19px;
font-weight: 600;
}

.sf-search-page .c-pagination {
display: flex;
justify-content: flex-start;
margin-top: 48px;
font-family: Poppins, sans-serif;
}

.sf-search-page .c-pagination ul {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}

.sf-search-page .c-pagination li {
margin: 0;
}

.sf-search-page .c-pagination a,
.sf-search-page .c-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border: 1px solid var(--sf-rule);
color: var(--sf-ink);
font-size: 11px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sf-search-page .c-pagination a:hover {
border-color: var(--sf-teal);
color: var(--sf-teal);
}

.sf-search-page .c-pagination .current,
.sf-search-page .c-pagination [aria-current='page'] {
border-color: var(--sf-ink);
background: var(--sf-ink);
color: #fff;
}

.sf-search-page .c-pagination .disabled,
.sf-search-page .c-pagination [aria-disabled='true'] {
color: var(--sf-muted);
opacity: 0.5;
}

@media (max-width: 820px) {
.sf-search-page {
padding: 44px 24px 72px;
}
}

@media (max-width: 600px) {
.sf-search-page {
padding-top: 32px;
}

.sf-search-page__heading {
font-size: 32px;
letter-spacing: -1.2px;
}

.sf-search-page__results {
margin-top: 56px;
}

.sf-search-page__link {
font-size: 17px;
}
}
9 changes: 0 additions & 9 deletions website/modules/home-simplified/public/js/home-simplified.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions website/modules/home-simplified/views/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ <h1>Speed &amp; Function is an engineering and AI consultancy. For over a decade
<span class="cue-txt">Here's what matters most while<br>the new site takes shape.</span>
</div>

<form class="ca-search" id="search-form">
<form class="ca-search" id="search-form" method="GET" action="/search" data-search-form>
<label for="search-input" class="sr-only">Search</label>
<svg class="sicon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.2" y2="16.2"></line></svg>
<input type="text" id="search-input" placeholder="Find case studies, testimonials, and more">
<input type="text" id="search-input" name="q" placeholder="Find case studies, testimonials, and more">
Comment on lines +30 to +33

@coderabbitai coderabbitai Bot Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Provide an operable submit control.

The arrow is a <span>, so clicking it does not submit the form. Replace it with a submit button.

Proposed fix 
-        <span class="sgo">→</span>
+        <button type="submit" class="sgo" aria-label="{{ __('Submit search') }}">→</button>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/modules/home-simplified/views/page.html` around lines 30 - 33, Update
the search form identified by id="search-form" to replace the arrow span with a
button element whose type is submit, preserving the arrow’s existing appearance
and placement so it provides an operable submit control.

<span class="sgo">→</span>
</form>
</div>
Expand Down
1 change: 0 additions & 1 deletion website/modules/testimonials/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ module.exports = {
options: {
label: 'Testimonial',
pluralLabel: 'Testimonials',
searchable: false,
shortcut: false,
},
fields: {
Expand Down
17 changes: 8 additions & 9 deletions website/public/css/home-simplified/home-simplified.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ body {
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 999px;
border-radius: 0;
background: #141414;
color: #fff;
font-size: 12px;
Expand Down Expand Up @@ -247,17 +247,16 @@ svg.sicon {
}

.ca-search .sgo {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 22px;
color: #6B6B6B;
display: inline-block;
flex: 0 0 auto;
transition: color .2s ease;
transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s ease;
}

.ca-search:focus-within .sgo {
color: #00897B;
transform: translateX(10px) rotate(45deg);
Comment on lines +250 to +259

@coderabbitai coderabbitai Bot Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Make the search arrow a real submit control.

website/modules/home-simplified/views/page.html renders .sgo as a <span>. With the JavaScript redirect removed, clicking or tapping this visible arrow does not submit the GET form; the mobile change now exposes the same non-interactive affordance on small screens. Replace it with <button type="submit" class="sgo">→</button> and reset the button styles as needed.

Also applies to: 457-459

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/public/css/home-simplified/home-simplified.css` around lines 250 -
259, Update the `.sgo` search-arrow element in the home-simplified page markup
to a `<button type="submit" class="sgo">` so it submits the GET form without
JavaScript; preserve the arrow content and add CSS resets for button defaults
while retaining the existing `.sgo` layout, color, transition, and focus-within
behavior.

}

.ca-search:focus-within {
Expand All @@ -270,7 +269,7 @@ svg.sicon {

.ca-index {
border-top: none;
margin-top: 28px;
margin-top: 80px;
animation: fade-up .8s cubic-bezier(.16,1,.3,1) .3s both;
}

Expand Down Expand Up @@ -322,7 +321,7 @@ svg.sicon {
}

.ca-foot {
padding: 52px 0 60px;
padding: 120px 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -456,7 +455,7 @@ svg.sicon {
}

.ca-search .sgo {
display: none;
font-size: 16px;
}

.ca-index {
Expand Down
Loading