Search!!!

deminearchiver · May 19, 2024 · 083378f · 083378f
1 parent 799d551
commit 083378f
Show file tree

Hide file tree

Showing 33 changed files with 1,803 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,9 @@ Here are some low-priority goals:
 - [ ] Add changelog
   - [ ] On the web ([**/changelog**](https://deminearchiver.pages.dev/changelog) or in the form of blog posts)
   - [ ] To the repo ([**CHANGELOG.md**](CHANGELOG.md))
+- [ ] Add issue templates
+  - [x] Default templates
+  - [ ] Replace with custom issue forms
 - [ ] Dependabot
   - [ ] Alerts
   - [ ] Version updates

diff --git a/app/src/components/aside/Aside.astro b/app/src/components/aside/Aside.astro
@@ -17,8 +17,8 @@ const ICONS: Record<AsideVariant, Component<ComponentProps<"svg">>> = {
   caution: ReportIcon,
 }
 
-const variants = ["note", "tip", "important", "warning", "caution"] as const;
-type AsideVariant = typeof variants[number];
+const VARIANTS = ["note", "tip", "important", "warning", "caution"] as const;
+type AsideVariant = typeof VARIANTS[number];
 
 interface Props {
 	variant: AsideVariant;
@@ -36,11 +36,11 @@ const {
   title = getTitle(variant),
 } = Astro.props;
 
-if (!variants.includes(variant)) {
+if (!VARIANTS.includes(variant)) {
 	throw new AstroError(
-		'Invalid `variant` prop passed to the `<Aside>` component.\n',
+		"Invalid `variant` prop passed to the `<Aside>` component.\n",
 		`Received: ${JSON.stringify(variant)}\n`
-    + `Expected one of ${variants.map((variant) => JSON.stringify(variant)).join(', ')}`,
+    + `Expected one of ${VARIANTS.map((variant) => JSON.stringify(variant)).join(', ')}`,
 	);
 }
 

diff --git a/app/src/components/button/Button.astro b/app/src/components/button/Button.astro
@@ -2,13 +2,24 @@
 import type { JSX } from "astro/jsx-runtime";
 import clsx from "clsx/lite";
 
+import { AstroError } from "astro/errors";
 
-type BaseProps = {
-  variant: "elevated" | "filled" | "tonal" | "outlined" | "text";
-  acrylic?: boolean;
-};
+const VARIANTS = [
+  "elevated",
+  "filled",
+  "tonal",
+  "outlined",
+  "text",
+  "error",
+  "success",
+] as const;
+
+export type ButtonVariant = typeof VARIANTS[number];
 
-type Props = BaseProps & (JSX.ButtonHTMLAttributes | JSX.AnchorHTMLAttributes);
+type Props = {
+  variant: ButtonVariant;
+  acrylic?: boolean;
+} & (JSX.ButtonHTMLAttributes | JSX.AnchorHTMLAttributes);
 
 const {
   variant,
@@ -17,10 +28,20 @@ const {
   ...props
 } = Astro.props;
 
+if (!VARIANTS.includes(variant)) {
+	throw new AstroError(
+		"Invalid `variant` prop passed to the `<Button>` component.\n",
+		`Received: ${JSON.stringify(variant)}\n`
+    + `Expected one of ${VARIANTS.map((variant) => JSON.stringify(variant)).join(', ')}`,
+	);
+}
+
+
 const hasLeading = Astro.slots.has("leading");
 const hasTrailing = Astro.slots.has("trailing");
 
 const className = clsx(
+  "not-content",
   "button", variant, acrylic && "acrylic",
   hasLeading && "with-leading",
   hasTrailing && "with-trailing",
@@ -237,4 +258,31 @@ const className = clsx(
       background-color: color-mix(in srgb, var(--color-surface) 24%, var(--color-primary) 10%);
     }
   }
+
+  .error {
+    background-color: var(--color-error);
+    color: var(--color-on-error);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--color-error), var(--color-on-error) 8%);
+      }
+    }
+    &:active {
+      background-color: color-mix(in srgb, var(--color-error), var(--color-on-error) 10%);
+    }
+  }
+  .success {
+    background-color: var(--color-success);
+    color: var(--color-on-success);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--color-success), var(--color-on-success) 8%);
+      }
+    }
+    &:active {
+      background-color: color-mix(in srgb, var(--color-success), var(--color-on-success) 10%);
+    }
+  }
 </style>
diff --git a/app/src/components/drawer/navigation-drawer.tsx b/app/src/components/drawer/navigation-drawer.tsx
@@ -6,6 +6,7 @@ import { createPresence } from "@solid-primitives/presence";
 import { drawerContentStyle, drawerDestinationContentStyle, drawerDestinationStyle, drawerDialogStyle, drawerListStyle, passthroughStyle } from "./navigation-drawer.css";
 import { Splash } from "@material/solid/components/splash";
 
+
 import clsx from "clsx/lite";
 import { Dynamic } from "solid-js/web";
 
@@ -144,7 +145,6 @@ const NavigationDrawerDestination: Component<NavigationDrawerDestinationProps> =
       href={localProps.destination.href}
       {...otherProps}>
         <Splash for={ref} />
-        <div></div>
         <div class={drawerDestinationContentStyle({
           animation: localProps.state,
         })}>

diff --git a/app/src/components/header/Header.astro b/app/src/components/header/Header.astro
@@ -13,6 +13,7 @@ import RssFeedIcon from "~icons/material-symbols-rounded/rss-feed:outlined";
 
 import { Logo } from "../logo";
 import { NavigationDrawer } from "../drawer";
+import { Search, SearchAnchor } from "../search";
 
 interface Props {}
 
@@ -48,8 +49,10 @@ interface Props {}
         <IconButton>
           <MenuIcon />
         </IconButton>
-      </NavigationDrawer>
-    <Logo class="logo" />
+    </NavigationDrawer>
+    <a href="/">
+      <Logo class="logo" />
+    </a>
   </div>
   <nav>
     <ul>
@@ -74,18 +77,15 @@ interface Props {}
     </ul>
   </nav>
   <div class="options">
-    <IconButton
-      class="option search"
-      variant="tonal"
-      href="/search">
-        <SearchIcon />
-    </IconButton>
-    <IconButton
+    <!-- <IconButton
       class="option rss"
       variant="tonal"
       href="/rss.xml">
         <RssFeedIcon />
-    </IconButton>
+    </IconButton> -->
+    <Search client:only="solid-js" transition:persist>
+      <SearchAnchor client:load />
+    </Search>
     <!-- <ThemeSelect client:load /> -->
     <ThemeSelect client:only="solid-js" transition:persist />
   </div>
@@ -126,7 +126,7 @@ interface Props {}
     top: 0;
     left: 0;
     right: 0;
-    height: 64px;
+    height: 72px;
 
 
     display: flex;
@@ -156,7 +156,7 @@ interface Props {}
   }
 
 
-  nav, li {
+  li {
     display: contents;
   }
 
@@ -184,13 +184,32 @@ interface Props {}
       display: none;
     }
   }
-  @media only screen and not (min-width: 840px) {
+
+  nav {
+    display: none;
+  }
+
+  @keyframes appear {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .rss {
+    display: none;
+  }
+
+  @media only screen and (min-width: 840px) {
     nav {
-      display: none;
+      display: contents;
     }
 
     .rss {
-      display: none;
+      display: inline-flex;
+      animation: appear 300ms linear;
     }
   }
 </style>
diff --git a/app/src/components/markdown/Markdown.astro b/app/src/components/markdown/Markdown.astro
@@ -7,10 +7,10 @@
 </div>
 
 <style is:global>
-  .markdown {
+  .markdown :not(:where(.not-content *)) {
     font-family: var(--text-body-large-family);
     font-size: var(--text-body-large-size);
-    font-weight: var(--text-body-large-weight);
+    /* font-weight: var(--text-body-large-weight); */
     line-height: var(--text-body-large-line-height);
     letter-spacing: var(--text-body-large-letter-spacing);
   }
@@ -21,7 +21,7 @@
     margin-top: 1rem;
   }
 
-  .markdown a[href]:not(:where(.not-content *)) {
+  .markdown a:not(:where(.not-content, .not-content *)) {
     color: var(--color-primary);
 
     &:hover {
@@ -90,7 +90,8 @@
   .markdown h2:not(:where(.not-content *)) {
     font-family: var(--text-headline-small-family);
     font-size: var(--text-headline-small-size);
-    font-weight: var(--text-headline-small-weight);
+    /* font-weight: var(--text-headline-small-weight); */
+    font-weight: 500;
     line-height: var(--text-headline-small-line-height);
     letter-spacing: var(--text-headline-small-letter-spacing);
   }
@@ -123,13 +124,6 @@
     letter-spacing: var(--text-label-medium-letter-spacing);
   }
 
-  .markdown a:not(:where(.not-content *)) {
-    color: var(--sl-color-text-accent);
-  }
-  .markdown a:hover:not(:where(.not-content *)) {
-    color: var(--sl-color-white);
-  }
-
   .markdown code:not(:where(.not-content *)) {
     background-color: var(--color-surface-container-high);
     color: var(--color-on-surface-variant);

diff --git a/app/src/components/search/index.ts b/app/src/components/search/index.ts
@@ -0,0 +1,2 @@
+export * from "./search";
+export * from "./search-anchor";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./search";
		export * from "./search-anchor";