diff --git a/package.json b/package.json index 68033e1..155e238 100644 --- a/package.json +++ b/package.json @@ -34,17 +34,26 @@ "@visual-framework/vf-box": "^2.4.0", "@visual-framework/vf-button": "3.0.2", "@visual-framework/vf-content": "1.6.16", + "@visual-framework/vf-core": "2.2.47", + "@visual-framework/vf-extensions-react": "^0.0.8", + "@visual-framework/vf-font-plex-mono": "^1.1.3", + "@visual-framework/vf-font-plex-sans": "^1.1.3", + "@visual-framework/vf-footer": "^1.2.1", + "@visual-framework/vf-global-header": "^3.1.6", "@visual-framework/vf-grid": "^1.4.1", "@visual-framework/vf-hero": "^4.0.3", "@visual-framework/vf-link": "^2.0.2", "@visual-framework/vf-mega-menu": "^1.0.2", "@visual-framework/vf-profile": "^1.4.0", + "@visual-framework/vf-sass-config": "2.6.1", "@visual-framework/vf-sass-starter": "^0.1.30", "@visual-framework/vf-search": "^1.0.0", + "@visual-framework/vf-search-client-side": "^2.0.2", "@visual-framework/vf-stack": "^3.0.0", "@visual-framework/vf-tabs": "^2.1.5", "@visual-framework/vf-text": "^1.1.1", "@visual-framework/vf-u-fullbleed": "^1.2.2", + "@visual-framework/vf-utility-classes": "2.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 01bebbc..7dded3f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,9 +8,11 @@ import { VfHeroComponent } from './components/vf-hero/vf-hero.component'; import { VfTabsComponent } from './components/vf-tabs/vf-tabs.component'; import { VfBackToTopComponent } from './components/vf-back-to-top/vf-back-to-top.component'; import { HomeComponent } from './components/home/home.component'; +import { SearchComponent } from './components/search/search.component'; const routes: Routes = [ { path: '', component: HomeComponent }, + { path: 'search', component: SearchComponent }, { path: 'components/vf-back-to-top', component: VfBackToTopComponent }, { path: 'components/vf-badge', component: VfBadgeComponent }, { path: 'components/vf-banner', component: VfBannerComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6832230..8f539e9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module'; import { AppHeaderModule } from './components/header/header.module'; import { AppFooterModule } from './components/footer/footer.module'; import { VfComponentsModule } from './components/vf-components.module'; +import { SearchModule } from './components/search/search.module'; @NgModule({ declarations: [ AppComponent @@ -20,6 +21,7 @@ import { VfComponentsModule } from './components/vf-components.module'; AppHeaderModule, AppFooterModule, VfComponentsModule, + SearchModule, ], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 9164d02..8f97e9a 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -71,9 +71,6 @@

  • GitHub
    • -
  • - Slack -
    • diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 1e3688c..f4a4470 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -22,9 +22,6 @@
  • GitHub
    • -
  • - Slack -
  • Search diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 5648f42..3c4ee64 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -22,7 +22,7 @@

    Search

    -
    +
    diff --git a/src/app/components/search/search-index.ts b/src/app/components/search/search-index.ts new file mode 100644 index 0000000..eac056d --- /dev/null +++ b/src/app/components/search/search-index.ts @@ -0,0 +1,51 @@ +export interface SearchPage { + id: string; + title: string; + text: string; + url: string; +} + +export const COMPONENT_SEARCH_INDEX: SearchPage[] = [ + { + id: '0', + title: 'vf-banner', + text: 'vf-banner', + url: '/components/vf-banner' + }, + { + id: '1', + title: 'vf-hero', + text: 'vf-hero', + url: '/components/vf-hero' + }, + { + id: '2', + title: 'vf-back-to-top', + text: 'vf-back-to-top', + url: '/components/vf-back-to-top' + }, + { + id: '3', + title: 'vf-tabs', + text: 'vf-tabs', + url: '/components/vf-tabs' + }, + { + id: '4', + title: 'vf-badge', + text: 'vf-badge', + url: '/components/vf-badge' + }, + { + id: '5', + title: 'vf-blockquote', + text: 'vf-blockquote', + url: '/components/vf-blockquote' + }, + { + id: '6', + title: 'vf-button', + text: 'vf-button', + url: '/components/vf-button' + } +]; \ No newline at end of file diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html new file mode 100644 index 0000000..aafd781 --- /dev/null +++ b/src/app/components/search/search.component.html @@ -0,0 +1,54 @@ +
    +
    +
    +

    Search

    +

    Search documentation and guidance.

    + +

    +
    +
    +
    +
    +
    + +
    +
    + + +
    + + +
    + + +
    +

    Enter a search query.

    +

    No results found

    + +     +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/src/app/components/search/search.component.scss b/src/app/components/search/search.component.scss new file mode 100644 index 0000000..4ebaa33 --- /dev/null +++ b/src/app/components/search/search.component.scss @@ -0,0 +1,11 @@ +.snippet { + margin: 0; +} + +[data-vf-search-client-side-results] { + width: min(100%, 70rem); +} + +[data-vf-search-client-side-results] article { + margin-top: 1rem; +} diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts new file mode 100644 index 0000000..8b46d05 --- /dev/null +++ b/src/app/components/search/search.component.ts @@ -0,0 +1,99 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Subscription } from 'rxjs'; +import { COMPONENT_SEARCH_INDEX, SearchPage } from './search-index'; + +@Component({ + selector: 'app-search', + templateUrl: './search.component.html', + styleUrls: ['./search.component.scss'] +}) +export class SearchComponent implements OnInit, OnDestroy { + searchTerm = ''; + results: SearchPage[] = []; + + private querySubscription?: Subscription; + private searchInputTimeout?: ReturnType; + + constructor(private route: ActivatedRoute) {} + + ngOnInit(): void { + this.querySubscription = this.route.queryParamMap.subscribe((params) => { + this.searchTerm = this.sanitizeQuery(params.get('search_query') || ''); + this.renderResults(); + }); + } + + ngOnDestroy(): void { + this.querySubscription?.unsubscribe(); + + if (this.searchInputTimeout) { + clearTimeout(this.searchInputTimeout); + } + } + + onSearchInput(searchTerm: string): void { + if (this.searchInputTimeout) { + clearTimeout(this.searchInputTimeout); + } + + this.searchInputTimeout = setTimeout(() => { + const sanitizedSearchTerm = this.sanitizeQuery(searchTerm); + this.searchTerm = sanitizedSearchTerm; + this.renderResults(); + }, 600); + } + + private renderResults(): void { + const normalizedTerm = this.normalizeSearchTerm(this.searchTerm); + + if (!normalizedTerm) { + this.results = []; + return; + } + + this.results = [...COMPONENT_SEARCH_INDEX] + .map((page) => ({ + page, + score: this.getScore(page, normalizedTerm) + })) + .filter((item) => item.score > 0) + .sort((a, b) => b.score - a.score) + .map((item) => item.page); + } + + private getScore(page: SearchPage, normalizedTerm: string): number { + const searchableText = this.normalizeSearchTerm( + `${page.title} ${page.text} ${page.url}` + ); + + if (!searchableText.includes(normalizedTerm)) { + return 0; + } + + let score = 10; + + if (this.normalizeSearchTerm(page.title).startsWith(normalizedTerm)) { + score += 100; + } + + if (this.normalizeSearchTerm(page.url).includes(normalizedTerm)) { + score += 20; + } + + return score; + } + + private normalizeSearchTerm(value: string): string { + return value + .toLowerCase() + .replace(/vf-/g, '') + .replace(/-/g, ' ') + .replace(/\s+/g, ' ') + .trim(); + } + + private sanitizeQuery(value: string): string { + return value.replace(/(<([^>]+)>)/gi, '').trim(); + } +} diff --git a/src/app/components/search/search.module.ts b/src/app/components/search/search.module.ts new file mode 100644 index 0000000..bacdd40 --- /dev/null +++ b/src/app/components/search/search.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { SearchComponent } from './search.component'; + +@NgModule({ + declarations: [SearchComponent], + imports: [ + CommonModule, + RouterModule + ], + exports: [SearchComponent] +}) +export class SearchModule { } diff --git a/src/index.html b/src/index.html index e164b35..93549e6 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ - +