feat(daffio): add search feature

Author: xelaint

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

@@ -8,12 +8,13 @@
     </div>
   </div>
   <div class="daffio-header__right">
-    <div class="daffio-header__theme-toggle">
+    <ng-content></ng-content>
+    <!-- <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> -->
     <div class="daffio-header__bars">
       <ng-content select="[sidebar-button]"></ng-content>
     </div>

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

@@ -14,7 +14,7 @@
 				color: currentColor;
 				font-size: daff.$normal-font-size;
 				font-weight: 500;
-				line-height: 64px;
+				line-height: 4rem;
 				padding: 0 1rem;
 				position: relative;
 				text-decoration: none;
@@ -26,7 +26,7 @@
 .daffio-header {
 	&__navbar {
 		justify-content: space-between;
-		padding: 0 24px;
+		padding: 0 1.5rem;
 	}
 
 	&__left,
@@ -36,15 +36,11 @@
 	}
 
 	&__left {
-		gap: 32px;
+		gap: 2rem;
 	}
 
-	&__theme-toggle {
-		margin-right: 0.25rem;
-
-		@include daff.breakpoint(big-tablet) {
-			margin-right: 0;
-		}
+	&__right {
+		gap: 1rem;
 	}
 
 	&__menu {
@@ -54,7 +50,7 @@
 		@include daff.breakpoint(big-tablet) {
 			display: flex;
 			align-items: center;
-			gap: 16px;
+			gap: 1rem;
 		}
 	}
 
@@ -68,10 +64,10 @@
 	}
 
 	&__logo {
-		width: 128px;
+		width: 8rem;
 
 		@include daff.breakpoint(mobile) {
-			width: 160px;
+			width: 10rem;
 		}
 	}
 

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

@@ -2,7 +2,6 @@
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
-  <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
   @for (link of links$ | async; track $index) {
     <ng-container daffioHeaderItem>
       @if (link.external) {
@@ -12,6 +11,8 @@
       }
     </ng-container>
   }
+  <daffio-docs-search-button></daffio-docs-search-button>
+  <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
   <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
     sidebar-button
     (click)="openSidebar()">

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

@@ -20,6 +20,7 @@ import { DaffIconButtonComponent } from '@daffodil/design/button';
 import { DaffRouterDataService } from '@daffodil/router';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
+import { DaffioDocsSearchButtonComponent } from '../../../docs//search/components/search-button/search-button.component';
 import { DaffioHeaderComponentModule } from '../../header/components/header.module';
 import { DaffioRoute } from '../../router/route.type';
 import { DaffioSidebarService } from '../../sidebar/services/sidebar.service';
@@ -39,6 +40,7 @@ import { DaffioNavLink } from '../link/type';
     DaffIconButtonComponent,
     FaIconComponent,
     AsyncPipe,
+    DaffioDocsSearchButtonComponent,
   ],
 })
 export class DaffioDocsNavContainer implements OnInit {

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

@@ -12,7 +12,8 @@
       }
     </ng-container>
   }
-  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
+  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-header__get-started-button">Get Started</a>
+  
   <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
     sidebar-button
     (click)="openSidebar()">

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

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

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,4 @@
+<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;
+	}
+}