Skip to content

feat: add global Pagefind search and page metadata #45

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

Draft
splincode wants to merge 3 commits into
base: main
Choose a base branch
from
+118 −8
Draft

feat: add global Pagefind search and page metadata #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
878871c
feat: add Pagefind build step
splincode Jul 22, 2026
625062a
feat: add global search and metadata
splincode Jul 22, 2026
5ae870f
style: align Pagefind with site theme
splincode Jul 22, 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
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "angular-ru-interview-questions",
"version": "1.0.0",
"private": true,
"description": "Вопросы подготовлены непосредственно для того, чтобы определить уровень разработчика, насколько глубоко, поверхностно или сносно он знает Angular. Вопросы для собеседования на знание JavaScript или Web-стека хорошо освещены в других местах, поэтому ниже будет добавлен список ресурсов по этой теме:",
"homepage": "https://github.com/Angular-RU/angular-ru-interview-questions#readme",
"description": "Справочник с вопросами, ответами и практическими заданиями для подготовки разработчиков к техническим собеседованиям",
"homepage": "https://angular-ru.github.io/interview/",
"bugs": {
"url": "https://github.com/Angular-RU/angular-ru-interview-questions/issues"
},
Expand All @@ -19,7 +19,8 @@
"predev": "npm run prebuild",
"dev": "astro dev",
"prebuild": "npm run build:public --workspaces --if-present",
"build": "astro build",
"build": "astro build && npm run build:search",
"build:search": "npx --yes pagefind@1.5.2 --site dist --exclude-selectors \".sidebar-navigation, .site-search\"",
"preview": "astro preview",
"astro": "astro",
"format": "prettier \"!package-lock.json\" . --ignore-path .gitignore --write",
Expand Down
98 changes: 93 additions & 5 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,39 @@ import {ClientRouter} from 'astro:transitions';
import SidebarNavigation from '../components/SidebarNavigation.astro';
import '../styles/global.css';

const {frontmatter} = Astro.props;
interface MarkdownHeading {
readonly depth: number;
readonly slug: string;
readonly text: string;
}

interface Frontmatter {
readonly title?: string;
readonly description?: string;
}

interface Props {
readonly title?: string;
readonly description?: string;
readonly frontmatter?: Frontmatter;
readonly headings?: readonly MarkdownHeading[];
}

const {title: titleFromProps, description: descriptionFromProps, frontmatter, headings = []} = Astro.props;

const title = titleFromProps ?? frontmatter?.title ?? 'Angular RU Interview Questions';
const description =
descriptionFromProps ?? frontmatter?.description ?? 'Вопросы и практические задания для подготовки разработчиков';

const title = frontmatter?.title ?? 'Angular RU Interview Questions';
const description = frontmatter?.description ?? 'Вопросы и практические задания для подготовки разработчиков';
const headings = Astro.props.headings ?? [];
const basePath = import.meta.env.BASE_URL.replace(/\/$/, '');
const currentPath = Astro.url.pathname.replace(/\/$/, '');
const homeHref = `${basePath}/`;
const showHomeLink = currentPath !== basePath;

const canonicalUrl = new URL(Astro.url.pathname, Astro.site ?? Astro.url.origin);
const pagefindPath = `${basePath}/pagefind`;
const searchBasePath = `${basePath}/`;
const searchEnabled = import.meta.env.PROD;
---

<!doctype html>
Expand All @@ -27,13 +51,77 @@ const showHomeLink = currentPath !== basePath;
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="theme-color"
content="#f6f8fb"
/>
<meta
property="og:title"
content={title}
/>
<meta
property="og:description"
content={description}
/>
<meta
property="og:type"
content="website"
/>
<meta
property="og:url"
content={canonicalUrl}
/>
<meta
property="og:locale"
content="ru_RU"
/>
<link
rel="canonical"
href={canonicalUrl}
/>
{
searchEnabled && (
<link
rel="stylesheet"
href={`${pagefindPath}/pagefind-component-ui.css`}
/>
)
}
<title>{title}</title>
<ClientRouter />
{
searchEnabled && (
<script
type="module"
src={`${pagefindPath}/pagefind-component-ui.js`}
/>
)
}
</head>

<body>
<main class="page">
<article class="content">
<article
class="content"
data-pagefind-body
>
{
searchEnabled && (
<div
class="site-search"
data-pagefind-ignore
>
<pagefind-config
bundle-path={`${pagefindPath}/`}
base-url={searchBasePath}
lang="ru"
/>
<pagefind-modal-trigger placeholder="Поиск" />
<pagefind-modal />
</div>
)
}

<SidebarNavigation
headings={headings}
homeHref={homeHref}
Expand Down
21 changes: 21 additions & 0 deletions src/styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,27 @@
box-shadow: var(--shadow-page);
}

.site-search {
--pf-text: var(--text);
--pf-text-secondary: var(--body);
--pf-text-muted: var(--muted);
--pf-background: var(--surface);
--pf-border: var(--border);
--pf-border-focus: var(--accent);
--pf-hover: var(--accent-soft);
--pf-mark: var(--accent-strong);
--pf-outline-focus: var(--accent);
--pf-font: inherit;

display: flex;
justify-content: flex-end;
margin-block-end: 24px;
}

.site-search pagefind-modal-trigger {
display: block;
}

@media (max-width: 700px) {
.page {
width: min(100% - 24px, 1120px);
Expand Down
Loading