Feat/search/algolia

angular.json

@@ -2301,6 +2301,43 @@
           }
         }
       }
+    },
+		"search-docs": {
+      "projectType": "library",
+      "root": "libs/search-docs",
+      "sourceRoot": "libs/search-docs",
+      "prefix": "@daffodil",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "libs/search-docs/tsconfig.lib.json",
+            "project": "libs/search-docs/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/search-docs/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/search-docs/test.ts",
+            "tsConfig": "libs/search-docs/tsconfig.spec.json",
+            "karmaConfig": "libs/search-docs/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/search-docs/**/*.ts",
+              "libs/search-docs/**/*.html"
+            ]
+          }
+        }
+      }
     }
   },
   "schematics": {

apps/daffio/package.json

@@ -65,9 +65,10 @@
     "@daffodil/design": "0.0.0-PLACEHOLDER",
     "@daffodil/design-examples": "0.0.0-PLACEHOLDER",
     "@daffodil/docs": "0.0.0-PLACEHOLDER",
-    "@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
     "@daffodil/router": "0.0.0-PLACEHOLDER",
     "@daffodil/seo": "0.0.0-PLACEHOLDER",
+    "@daffodil/search": "0.0.0-PLACEHOLDER",
+    "@daffodil/search-docs": "0.0.0-PLACEHOLDER",
     "@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
     "@daffodil/storefront": "0.0.0-PLACEHOLDER",
     "@ngrx/component": "0.0.0-PLACEHOLDER"

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

@@ -27,13 +27,17 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { DAFF_THEME_INITIALIZER } from '@daffodil/design';
 import { provideDaffRouterDataServiceConfig } from '@daffodil/router';
+import { DaffSearchIncrementalStateModule } from '@daffodil/search/state';
+import { DaffSearchDocsStateModule } from '@daffodil/search-docs/state';
 import { provideDaffSeoRouterSchema } from '@daffodil/seo/router';
 
 import { appRoutes } from './app.routes';
 import { environment } from '../environments/environment';
 import { daffioRouterDataServiceConfig } from './core/router/data-service-config';
 import { provideScrollOffset } from './core/scrolling/provide-scroll-offset';
 import { provideDaffioSidebarFeature } from './core/sidebar/provider';
+import { provideDaffioDocsSearchStoreResult } from './docs/search/state/provider';
+import { provideDaffioAlgolia } from './drivers/algolia.provider';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -59,6 +63,8 @@ export const appConfig: ApplicationConfig = {
         connectInZone: true,
       }),
       ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+      DaffSearchDocsStateModule,
+      DaffSearchIncrementalStateModule.withConfig(),
     ),
     provideRouter(
       appRoutes,
@@ -81,5 +87,7 @@ export const appConfig: ApplicationConfig = {
     provideDaffRouterDataServiceConfig(daffioRouterDataServiceConfig),
     provideDaffioSidebarFeature(),
     provideScrollOffset(),
+    provideDaffioAlgolia(),
+    provideDaffioDocsSearchStoreResult(),
   ],
 };

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

@@ -7,15 +7,14 @@
       <ng-content></ng-content>
     </div>
   </div>
-  <div class="daffio-header__right">
-    <div class="daffio-header__theme-toggle">
-      <ng-content select="[theme-toggle]"></ng-content>
-    </div>
-    <div class="daffio-header__button">
-      <ng-content select="[quickstart-button]"></ng-content>
-    </div>
-    <div class="daffio-header__bars">
-      <ng-content select="[sidebar-button]"></ng-content>
-    </div>
+  <div class="daffio-header__desktop-right">
+    <ng-content select="[search-desktop]"></ng-content>
+    <ng-content select="[theme-toggle-desktop]"></ng-content>
+    <ng-content select="[quickstart-button]"></ng-content>
+  </div>
+  <div class="daffio-header__mobile-right">
+    <ng-content select="[search-mobile]"></ng-content>
+    <ng-content select="[theme-toggle-mobile]"></ng-content>
+    <ng-content select="[sidebar-button]"></ng-content>
   </div>
 </nav>

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

@@ -21,7 +21,7 @@
 				color: currentColor;
 				font-size: daff.$font-size-base;
 				font-weight: 500;
-				line-height: 64px;
+				line-height: 4rem;
 				padding: 0 1rem;
 				position: relative;
 				text-decoration: none;
@@ -36,31 +36,34 @@
 	}
 
 	&__left,
-	&__right {
+	&__desktop-right {
 		display: flex;
 		align-items: center;
 	}
 
 	&__left {
-		gap: 32px;
+		gap: 2rem;
+		width: 100%;
 	}
 
-	&__theme-toggle {
-		margin-right: 0.25rem;
+	&__desktop-right {
+		display: none;
 
 		@include daff.breakpoint(big-tablet) {
-			margin-right: 0;
+			display: flex;
+			gap: 0.5rem;
 		}
 	}
 
 	&__menu {
+		display: none;
 		margin: 0;
 		padding: 0;
 
 		@include daff.breakpoint(big-tablet) {
 			display: flex;
 			align-items: center;
-			gap: 16px;
+			gap: 1rem;
 		}
 	}
 
@@ -74,14 +77,14 @@
 	}
 
 	&__logo {
-		width: 128px;
+		width: 8rem;
 
 		@include daff.breakpoint(mobile) {
-			width: 160px;
+			width: 10rem;
 		}
 	}
 
-	&__bars {
+	&__mobile-right {
 		display: flex;
 		margin-right: -0.8125rem;
 

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

@@ -1,8 +1,8 @@
+@let isBigTablet = isBigTablet$ | async;
 <daffio-header [bordered]="true">
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
-  <daff-sf-theme-toggle theme-toggle></daff-sf-theme-toggle>
   @for (link of links$ | async; track $index) {
     @if (isComponent(link)) {
       <ng-container [ngComponentOutlet]="link"></ng-container>
@@ -12,7 +12,17 @@
       <a daffioHeaderItem [routerLink]="link.url" [active]="rla.isActive" routerLinkActive #rla="routerLinkActive">{{link.title}}</a>
     }
   }
-  <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
+	@if (isBigTablet) {
+		<daffio-docs-search-button search-desktop></daffio-docs-search-button>
+	} @else {
+		<daffio-docs-search-button search-mobile [icon]="true"></daffio-docs-search-button>
+	}
+	@if (isBigTablet) {
+		<daff-sf-theme-toggle theme-toggle-desktop></daff-sf-theme-toggle>
+	} @else {
+		<daff-sf-theme-toggle theme-toggle-mobile></daff-sf-theme-toggle>
+	}
+  <button daff-icon-button color="theme-contrast" aria-label="Open nav sidebar"
     sidebar-button
     (click)="openSidebar()">
     <fa-icon [icon]="faBars"></fa-icon>

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

@@ -1,3 +1,4 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import {
   AsyncPipe,
   NgComponentOutlet,
@@ -17,13 +18,16 @@ import { faBars } from '@fortawesome/free-solid-svg-icons';
 import {
   Observable,
   map,
+  startWith,
 } from 'rxjs';
 
 import { DaffLogoModule } from '@daffodil/branding';
+import { DaffBreakpoints } from '@daffodil/design';
 import { DaffIconButtonComponent } from '@daffodil/design/button';
 import { DaffRouterDataService } from '@daffodil/router';
 import { DaffSfThemeToggleComponent } from '@daffodil/storefront/theme-toggle';
 
+import { DaffioDocsSearchButtonComponent } from '../../../docs//search/components/search-button/search-button.component';
 import { DaffioHeaderComponent } from '../../header/components/header/header.component';
 import { DaffioHeaderItemDirective } from '../../header/components/header-item/header-item.directive';
 import { DaffioRoute } from '../../router/route.type';
@@ -32,6 +36,7 @@ import { isComponent } from '../../utils/is-component';
 import { DAFFIO_NAV_SIDEBAR_ID } from '../header/sidebar-id';
 import { DaffioNavLink } from '../link/type';
 
+
 @Component({
   selector: 'daffio-docs-nav-container',
   templateUrl: './docs.component.html',
@@ -47,23 +52,30 @@ import { DaffioNavLink } from '../link/type';
     NgComponentOutlet,
     RouterLinkActive,
     DaffSfThemeToggleComponent,
+    DaffioDocsSearchButtonComponent,
   ],
 })
 export class DaffioDocsNavContainer implements OnInit {
   readonly isComponent = isComponent;
   faBars = faBars;
 
   links$: Observable<Array<DaffioNavLink | Type<unknown>>>;
+  isBigTablet$: Observable<boolean>;
 
   constructor(
     private routerData: DaffRouterDataService<DaffioRoute['data']>,
     private sidebarService: DaffioSidebarService,
+    private breakpointObserver: BreakpointObserver,
   ) {}
 
   ngOnInit(): void {
     this.links$ = this.routerData.data$.pipe(
       map((data) => data.daffioNavLinks),
     );
+    this.isBigTablet$ = this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe(
+      startWith({ matches: true }),
+      map((result) => result?.matches),
+    );
   }
 
   openSidebar() {

apps/daffio/src/app/core/nav/marketing/marketing.component.html

@@ -2,7 +2,6 @@
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
-  <daff-sf-theme-toggle theme-toggle></daff-sf-theme-toggle>
   @for (link of links$ | async; track $index) {
     @if (isComponent(link)) {
       <ng-container [ngComponentOutlet]="link"></ng-container>
@@ -12,6 +11,7 @@
       <a daffioHeaderItem [routerLink]="link.url" [active]="rla.isActive" routerLinkActive #rla="routerLinkActive">{{link.title}}</a>
     }
   }
+  <daff-sf-theme-toggle theme-toggle-desktop></daff-sf-theme-toggle>
   <a daff-button color="theme-contrast" size="sm" [routerLink]="docsLink" quickstart-button>Get Started</a>
   <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
     sidebar-button

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

@@ -0,0 +1,11 @@
+@use 'utilities' as daff;
+
+.daffio-header {
+	&__get-started-button {
+		display: none;
+
+		@include daff.breakpoint(big-tablet) {
+			display: flex;
+		}
+	}
+}

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

@@ -39,6 +39,7 @@ import { DaffioNavLink } from '../link/type';
 @Component({
   selector: 'daffio-nav-marketing-container',
   templateUrl: './marketing.component.html',
+  styleUrl: './marketing.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DaffioHeaderComponent,

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

@@ -29,7 +29,7 @@ const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptio
 };
 
 const visit = (guide: DaffDocsNavList): DaffTreeData<unknown> => ({
-  id: guide.id,
+  id: guide.path,
   title: guide.title,
   url: guide.path || '',
   items: [],

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

@@ -0,0 +1,28 @@
+@use 'theme' as *;
+
+@mixin daffio-docs-search-button-theme($theme) {
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
+
+	.daffio-docs-search-button {
+		@include light($mode) {
+			background: rgba(daff-color($neutral, 20), 0.4);
+			color: daff-color($neutral, 70);
+
+			&__kbd {
+				border: 1px solid daff-color($neutral, 70);
+			}
+		}
+
+		@include dark($mode) {
+			background: daff-color($neutral, 90);
+			color: daff-color($neutral, 40);
+
+			&__kbd {
+				border: 1px solid daff-color($neutral, 40);
+			}
+		}
+	}
+}

apps/daffio/src/app/docs/search/components/search-button/search-button.component.html

@@ -0,0 +1,10 @@
+@if (icon) {
+	<button daff-icon-button color="theme-contrast" type="button" (click)="showModal()">
+		<fa-icon [icon]="faSearch" [fixedWidth]="true"></fa-icon>
+	</button>
+} @else {
+	<button type="button" class="daffio-docs-search-button" (click)="showModal()">
+		<fa-icon [icon]="faSearch" [fixedWidth]="true"></fa-icon>
+		<span>Type <kbd class="daffio-docs-search-button__kbd">/</kbd> to search</span>
+	</button>
+}

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

@@ -0,0 +1,26 @@
+@use 'utilities' as daff;
+
+.daffio-docs-search-button {
+	@include daff.clickable();
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	appearance: none;
+	border: none;
+	border-radius: 0.25rem;
+	font-size: daff.$font-size-sm;
+	padding: 0.75rem;
+	width: 16rem;
+
+	&__kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.25rem;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		height: 1rem;
+		width: 1rem;
+		box-sizing: border-box;
+	}
+}