Skip to content

Commit 0dbd575

Browse files
griest024griest024
committed
feat(daffio): add search
1 parent 601c539 commit 0dbd575

38 files changed

Lines changed: 1066 additions & 23 deletions

‎apps/daffio/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,10 @@
6565
"@daffodil/design": "0.0.0-PLACEHOLDER",
6666
"@daffodil/design-examples": "0.0.0-PLACEHOLDER",
6767
"@daffodil/docs": "0.0.0-PLACEHOLDER",
68-
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
6968
"@daffodil/router": "0.0.0-PLACEHOLDER",
7069
"@daffodil/seo": "0.0.0-PLACEHOLDER",
70+
"@daffodil/search": "0.0.0-PLACEHOLDER",
71+
"@daffodil/search-docs": "0.0.0-PLACEHOLDER",
7172
"@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
7273
"@daffodil/storefront": "0.0.0-PLACEHOLDER",
7374
"@ngrx/component": "0.0.0-PLACEHOLDER"

‎apps/daffio/src/app/app.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,17 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
2727

2828
import { DAFF_THEME_INITIALIZER } from '@daffodil/design';
2929
import { provideDaffRouterDataServiceConfig } from '@daffodil/router';
30+
import { DaffSearchIncrementalStateModule } from '@daffodil/search/state';
31+
import { DaffSearchDocsStateModule } from '@daffodil/search-docs/state';
3032
import { provideDaffSeoRouterSchema } from '@daffodil/seo/router';
3133

3234
import { appRoutes } from './app.routes';
3335
import { environment } from '../environments/environment';
3436
import { daffioRouterDataServiceConfig } from './core/router/data-service-config';
3537
import { provideScrollOffset } from './core/scrolling/provide-scroll-offset';
3638
import { provideDaffioSidebarFeature } from './core/sidebar/provider';
39+
import { provideDaffioDocsSearchStoreResult } from './docs/search/state/provider';
40+
import { provideDaffioAlgolia } from './drivers/algolia.provider';
3741

3842
export const appConfig: ApplicationConfig = {
3943
providers: [
@@ -59,6 +63,8 @@ export const appConfig: ApplicationConfig = {
5963
connectInZone: true,
6064
}),
6165
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
66+
DaffSearchDocsStateModule,
67+
DaffSearchIncrementalStateModule.withConfig(),
6268
),
6369
provideRouter(
6470
appRoutes,
@@ -81,5 +87,7 @@ export const appConfig: ApplicationConfig = {
8187
provideDaffRouterDataServiceConfig(daffioRouterDataServiceConfig),
8288
provideDaffioSidebarFeature(),
8389
provideScrollOffset(),
90+
provideDaffioAlgolia(),
91+
provideDaffioDocsSearchStoreResult(),
8492
],
8593
};

‎apps/daffio/src/app/core/header/components/header/header.component.html‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@
77
<ng-content></ng-content>
88
</div>
99
</div>
10-
<div class="daffio-header__right">
11-
<div class="daffio-header__theme-toggle">
12-
<ng-content select="[theme-toggle]"></ng-content>
13-
</div>
14-
<div class="daffio-header__button">
15-
<ng-content select="[quickstart-button]"></ng-content>
16-
</div>
17-
<div class="daffio-header__bars">
18-
<ng-content select="[sidebar-button]"></ng-content>
19-
</div>
10+
<div class="daffio-header__desktop">
11+
<ng-content></ng-content>
12+
</div>
13+
<div class="daffio-header__mobile">
14+
<ng-content select="[search-mobile]"></ng-content>
15+
<ng-content select="[theme-toggle-mobile]"></ng-content>
16+
<ng-content select="[sidebar-button]"></ng-content>
2017
</div>
2118
</nav>

‎apps/daffio/src/app/core/header/components/header/header.component.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
color: currentColor;
2222
font-size: daff.$font-size-base;
2323
font-weight: 500;
24-
line-height: 64px;
24+
line-height: 4rem;
2525
padding: 0 1rem;
2626
position: relative;
2727
text-decoration: none;
@@ -36,31 +36,34 @@
3636
}
3737

3838
&__left,
39-
&__right {
39+
&__desktop {
4040
display: flex;
4141
align-items: center;
4242
}
4343

4444
&__left {
45-
gap: 32px;
45+
gap: 2rem;
46+
width: 100%;
4647
}
4748

48-
&__theme-toggle {
49-
margin-right: 0.25rem;
49+
&__desktop {
50+
display: none;
5051

5152
@include daff.breakpoint(big-tablet) {
52-
margin-right: 0;
53+
display: flex;
54+
gap: 1rem;
5355
}
5456
}
5557

5658
&__menu {
59+
display: none;
5760
margin: 0;
5861
padding: 0;
5962

6063
@include daff.breakpoint(big-tablet) {
6164
display: flex;
6265
align-items: center;
63-
gap: 16px;
66+
gap: 1rem;
6467
}
6568
}
6669

@@ -74,14 +77,14 @@
7477
}
7578

7679
&__logo {
77-
width: 128px;
80+
width: 8rem;
7881

7982
@include daff.breakpoint(mobile) {
80-
width: 160px;
83+
width: 10rem;
8184
}
8285
}
8386

84-
&__bars {
87+
&__mobile {
8588
display: flex;
8689
margin-right: -0.8125rem;
8790

‎apps/daffio/src/app/core/nav/docs/docs.component.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@let isBigTablet = isBigTablet$ | async;
12
<daffio-header [bordered]="true">
23
<a routerLink="/" daffio-logo>
34
<daff-branding-logo type="full"></daff-branding-logo>
@@ -12,7 +13,17 @@
1213
<a daffioHeaderItem [routerLink]="link.url" [active]="rla.isActive" routerLinkActive #rla="routerLinkActive">{{link.title}}</a>
1314
}
1415
}
15-
<button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
16+
@if (isBigTablet) {
17+
<daffio-docs-search-button></daffio-docs-search-button>
18+
} @else {
19+
<daffio-docs-search-button search-mobile [icon]="true"></daffio-docs-search-button>
20+
}
21+
@if (isBigTablet) {
22+
<daff-theme-switch-button></daff-theme-switch-button>
23+
} @else {
24+
<daff-theme-switch-button theme-toggle-mobile></daff-theme-switch-button>
25+
}
26+
<button daff-icon-button color="theme-contrast" aria-label="Open nav sidebar"
1627
sidebar-button
1728
(click)="openSidebar()">
1829
<fa-icon [icon]="faBars"></fa-icon>

‎apps/daffio/src/app/core/nav/docs/docs.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { BreakpointObserver } from '@angular/cdk/layout';
12
import {
23
AsyncPipe,
34
NgComponentOutlet,
@@ -17,13 +18,16 @@ import { faBars } from '@fortawesome/free-solid-svg-icons';
1718
import {
1819
Observable,
1920
map,
21+
startWith,
2022
} from 'rxjs';
2123

2224
import { DaffLogoModule } from '@daffodil/branding';
25+
import { DaffBreakpoints } from '@daffodil/design';
2326
import { DaffIconButtonComponent } from '@daffodil/design/button';
2427
import { DaffRouterDataService } from '@daffodil/router';
2528
import { DaffSfThemeToggleComponent } from '@daffodil/storefront/theme-toggle';
2629

30+
import { DaffioDocsSearchButtonComponent } from '../../../docs//search/components/search-button/search-button.component';
2731
import { DaffioHeaderComponent } from '../../header/components/header/header.component';
2832
import { DaffioHeaderItemDirective } from '../../header/components/header-item/header-item.directive';
2933
import { DaffioRoute } from '../../router/route.type';
@@ -32,6 +36,7 @@ import { isComponent } from '../../utils/is-component';
3236
import { DAFFIO_NAV_SIDEBAR_ID } from '../header/sidebar-id';
3337
import { DaffioNavLink } from '../link/type';
3438

39+
3540
@Component({
3641
selector: 'daffio-docs-nav-container',
3742
templateUrl: './docs.component.html',
@@ -47,23 +52,30 @@ import { DaffioNavLink } from '../link/type';
4752
NgComponentOutlet,
4853
RouterLinkActive,
4954
DaffSfThemeToggleComponent,
55+
DaffioDocsSearchButtonComponent,
5056
],
5157
})
5258
export class DaffioDocsNavContainer implements OnInit {
5359
readonly isComponent = isComponent;
5460
faBars = faBars;
5561

5662
links$: Observable<Array<DaffioNavLink | Type<unknown>>>;
63+
isBigTablet$: Observable<boolean>;
5764

5865
constructor(
5966
private routerData: DaffRouterDataService<DaffioRoute['data']>,
6067
private sidebarService: DaffioSidebarService,
68+
private breakpointObserver: BreakpointObserver,
6169
) {}
6270

6371
ngOnInit(): void {
6472
this.links$ = this.routerData.data$.pipe(
6573
map((data) => data.daffioNavLinks),
6674
);
75+
this.isBigTablet$ = this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe(
76+
startWith({ matches: true }),
77+
map((result) => result?.matches),
78+
);
6779
}
6880

6981
openSidebar() {

‎apps/daffio/src/app/core/nav/marketing/marketing.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use 'utilities' as daff;
2+
3+
.daffio-header {
4+
&__get-started-button {
5+
display: none;
6+
7+
@include daff.breakpoint(big-tablet) {
8+
display: flex;
9+
}
10+
}
11+
}

‎apps/daffio/src/app/core/nav/marketing/marketing.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { DaffioNavLink } from '../link/type';
3939
@Component({
4040
selector: 'daffio-nav-marketing-container',
4141
templateUrl: './marketing.component.html',
42+
styleUrl: './marketing.component.scss',
4243
changeDetection: ChangeDetectionStrategy.OnPush,
4344
imports: [
4445
DaffioHeaderComponent,

‎apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptio
2929
};
3030

3131
const visit = (guide: DaffDocsNavList): DaffTreeData<unknown> => ({
32-
id: guide.id,
32+
id: guide.path,
3333
title: guide.title,
3434
url: guide.path || '',
3535
items: [],

‎apps/daffio/src/app/docs/search/components/search-button/search-button-theme.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@use 'theme' as *;
2+
3+
@mixin daffio-docs-search-button-theme($theme) {
4+
$neutral: daff-get-palette($theme, neutral);
5+
$base: daff-get-base-color($theme, base);
6+
$base-contrast: daff-get-base-color($theme, base-contrast);
7+
$mode: daff-get-theme-mode($theme);
8+
9+
.daffio-docs-search-button {
10+
@include light($mode) {
11+
background: rgba(daff-color($neutral, 20), 0.4);
12+
color: daff-color($neutral, 70);
13+
14+
&__kbd {
15+
border: 1px solid daff-color($neutral, 70);
16+
}
17+
}
18+
19+
@include dark($mode) {
20+
background: daff-color($neutral, 90);
21+
color: daff-color($neutral, 40);
22+
23+
&__kbd {
24+
border: 1px solid daff-color($neutral, 40);
25+
}
26+
}
27+
}
28+
}

0 commit comments

Comments
 (0)