View transitions + stuff

deminearchiver · May 22, 2024 · 27d7b1f · 27d7b1f
1 parent 336a080
commit 27d7b1f
Show file tree

Hide file tree

Showing 19 changed files with 365 additions and 151 deletions.
diff --git a/app/package.json b/app/package.json
@@ -38,10 +38,11 @@
     "@solid-primitives/scroll": "^2.0.23",
     "@solid-primitives/storage": "^3.5.0",
     "@solid-primitives/utils": "^6.2.3",
-    "@vanilla-extract/css": "^1.15.1",
-    "@vanilla-extract/dynamic": "^2.1.0",
-    "@vanilla-extract/recipes": "^0.5.2",
-    "@vanilla-extract/sprinkles": "^1.6.1",
+    "@vanilla-extract/css": "^1.15.2",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "@vanilla-extract/private": "^1.0.5",
+    "@vanilla-extract/recipes": "^0.5.3",
+    "@vanilla-extract/sprinkles": "^1.6.2",
     "astro": "^4.8.7",
     "astro-expressive-code": "^0.35.3",
     "clsx": "^2.1.1",
@@ -54,7 +55,7 @@
   "devDependencies": {
     "@iconify-json/material-symbols": "^1.1.80",
     "@iconify-json/simple-icons": "^1.1.101",
-    "@vanilla-extract/vite-plugin": "^4.0.9",
+    "@vanilla-extract/vite-plugin": "^4.0.10",
     "astro-meta-tags": "^0.3.0",
     "unplugin-icons": "^0.19.0"
   }

diff --git a/app/src/components/footer/Footer.astro b/app/src/components/footer/Footer.astro
@@ -93,6 +93,7 @@ const year = new Date().getFullYear();
 
   .link {
     -webkit-tap-highlight-color: transparent;
+    position: relative;
 
     font-family: var(--text-label-large-family);
     font-size: var(--text-label-large-size);
@@ -103,9 +104,6 @@ const year = new Date().getFullYear();
     color: var(--color-on-surface-variant);
     text-decoration: none;
 
-
-
-
     height: 40px;
     border-radius: 20px;
     padding-inline: 8px;
@@ -120,9 +118,19 @@ const year = new Date().getFullYear();
 
     font-variation-settings: "GRAD" 0;
 
-    transition-property: grid-template-columns, padding-inline, gap;
-    transition-duration: 600ms;
-    transition-timing-function: var(--easing-emphasized);
+    transition:
+      background-color 15ms linear,
+      color 15ms linear,
+      font-variation-settings 300ms var(--easing-standard),
+      grid-template-columns 600ms var(--easing-emphasized),
+      padding-inline 600ms var(--easing-emphasized),
+      gap 600ms var(--easing-emphasized);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -4px;
+    }
 
     &:hover {
       gap: 16px;
@@ -135,7 +143,7 @@ const year = new Date().getFullYear();
     }
     &:active {
       background-color: color-mix(in srgb, transparent, var(--color-primary) 10%);
-      font-variation-settings: "GRAD" 0;
+      font-variation-settings: "GRAD" 150;
     }
 
     & .icon {

diff --git a/app/src/components/header/Header.astro b/app/src/components/header/Header.astro
@@ -13,36 +13,40 @@ import RssFeedIcon from "~icons/material-symbols-rounded/rss-feed:outlined";
 
 import { Logo } from "../logo";
 import { NavigationDrawer } from "../navigation";
-import { Search, SearchAnchor } from "../search";
+import { SearchView, SearchAnchor } from "../search";
 import { NavigationTab } from "../navigation";
 import { NAVIGATION_DESTINATIONS } from "../navigation/destinations";
+import { fade } from "astro/virtual-modules/transitions.js";
+import type { TransitionAnimationPair } from "astro";
+import { THEME } from "../../styles/theme";
 
 interface Props {}
 
+const fadeOver: TransitionAnimationPair = {
+  old: {
+    name: "none",
+  },
+  new: {
+    name: "fade-over",
+    duration: THEME.duration.short2,
+    easing: THEME.easing.standard,
+    fillMode: "both",
+  },
+};
+const animate = {
+  forwards: fadeOver,
+  backwards: fadeOver,
+}
 
 ---
 
-<header id="header">
+<header id="header" transition:name="header" transition:animate={animate}>
   <div class="leading">
     <NavigationDrawer
       client:only="solid-js"
       class="drawer"
       url={Astro.url}
-      destinations={[
-          {
-    icon: FeedIcon,
-    label: "Blog",
-    href: "/blog",
-    test: url => url.pathname.startsWith("/blog")
-  },
-  {
-    icon: InfoIcon,
-    label: "About",
-    href: "/about",
-    test: url => url.pathname.startsWith("/about")
-
-  },
-      ]}>
+      destinations={[]}>
         <IconButton>
           <MenuIcon />
         </IconButton>
@@ -69,14 +73,10 @@ interface Props {}
       href="/rss.xml">
         <RssFeedIcon />
     </IconButton> -->
-    <Search client:only="solid-js" transition:persist>
+    <SearchView client:only="solid-js">
       <SearchAnchor client:load />
-      <!-- <IconButton variant="tonal">
-        <SearchIcon width={24} height={24} />
-      </IconButton> -->
-    </Search>
-    <!-- <ThemeSelect client:load /> -->
-    <ThemeSelect client:only="solid-js" transition:persist />
+    </SearchView>
+    <ThemeSelect client:only="solid-js" />
   </div>
 </header>
 
@@ -110,6 +110,11 @@ interface Props {}
 </script>
 
 <style>
+  @keyframes fade-over {
+    from { opacity: 0; }
+  }
+
+
   #header {
     position: sticky;
     top: 0;

diff --git a/app/src/components/search/index.ts b/app/src/components/search/index.ts
@@ -1,2 +1,2 @@
-export * from "./search";
+export * from "./search-view";
 export * from "./search-anchor";
diff --git a/app/src/components/search/search-anchor.css.ts b/app/src/components/search/search-anchor.css.ts
@@ -8,63 +8,52 @@ const EASING = THEME.easing.emphasized;
 
 export const searchAnchorStyle = style({
   WebkitTapHighlightColor: "transparent",
+
   appearance: "none",
   border: "none",
   outline: "none",
-
   position: "relative",
+
+  borderRadius: 9999,
+  cursor: "pointer",
+  backgroundColor: THEME.color.secondaryContainer,
+  minWidth: 40,
   height: 40,
+  vars: {
+    [splashTheme.hoverColor]: THEME.color.onSecondaryContainer,
+    [splashTheme.pressedColor]: THEME.color.onSecondaryContainer,
+  },
+});
+
+export const searchAnchorContentStyle = style({
 
   display: "grid",
   placeItems: "center",
   placeContent: "center",
 
 
-  backgroundColor: THEME.color.secondaryContainer,
-  borderRadius: 9999,
 
   color: THEME.color.onSecondaryContainer,
 
-  cursor: "pointer",
-  overflow: "hidden",
-
-
+  height: "inherit",
+  minWidth: "inherit",
+  borderRadius: "inherit",
 
   gridTemplateColumns: "24px 0fr",
-  paddingInline: 8,
   gap: 0,
+  overflow: "hidden",
 
-  minWidth: 40,
+  paddingInline: 8,
 
-  transitionProperty: "height, color, background-color, min-width, grid-template-columns, padding-inline, gap",
+  transitionProperty: "grid-template-columns, gap, padding-inline",
   transitionDuration: DURATION,
   transitionTimingFunction: EASING,
-
-  vars: {
-    [splashTheme.hoverColor]: THEME.color.onSecondaryContainer,
-    [splashTheme.pressedColor]: THEME.color.onSecondaryContainer,
-  },
   "@media": {
     "only screen and (min-width: 1200px)": {
-      paddingInline: "16px 24px",
       gap: 8,
       gridTemplateColumns: "18px 1fr",
-      minWidth: 100, // TODO: somehow make it auto or smth
+      paddingInline: "16px 24px",
     },
-    // "only screen and (min-width: 1200px)": {
-    //   gridTemplateColumns: "24px 1fr",
-    //   height: 56,
-    //   minWidth: 360,
-    //   maxWidth: 720,
-    //   paddingInline: 16,
-    //   backgroundColor: THEME.color.surfaceContainerHigh,
-    //   color: THEME.color.onSurfaceVariant,
-    //   gap: 16,
-    //   vars: {
-    //     [splashTheme.hoverColor]: THEME.color.onSurfaceVariant,
-    //     [splashTheme.pressedColor]: THEME.color.onSurfaceVariant,
-    //   },
-    // },
   },
 });
 
@@ -74,7 +63,7 @@ export const searchAnchorIconStyle = style({
   height: 24,
   gridColumn: 1,
 
-  transitionProperty: "color, width, height",
+  transitionProperty: "width, height",
   transitionDuration: DURATION,
   transitionTimingFunction: EASING,
 
@@ -84,11 +73,6 @@ export const searchAnchorIconStyle = style({
       width: 18,
       height: 18,
     },
-    // "only screen and (min-width: 1200px)": {
-    //   width: 24,
-    //   height: 24,
-    //   color: THEME.color.onSurface,
-    // },
   },
 });
 export const searchAnchorLabelStyle = style({
@@ -99,10 +83,7 @@ export const searchAnchorLabelStyle = style({
   display: "flex",
   alignItems: "center",
 
-  transitionProperty: `
-    width, opacity, translate,
-    font-family, font-size, font-weight, line-height, letter-spacing
-  `,
+  transitionProperty: "width, opacity, translate",
   transitionDuration: DURATION,
   transitionTimingFunction: EASING,
 
@@ -121,12 +102,5 @@ export const searchAnchorLabelStyle = style({
       translate: 0,
       opacity: 1,
     },
-    // "only screen and (min-width: 1200px)": {
-    //   fontFamily: THEME.text.body.large.family,
-    //   fontSize: THEME.text.body.large.size,
-    //   fontWeight: THEME.text.body.large.weight,
-    //   lineHeight: THEME.text.body.large.lineHeight,
-    //   letterSpacing: THEME.text.body.large.letterSpacing,
-    // },
   },
 });
diff --git a/app/src/components/search/search-anchor.tsx b/app/src/components/search/search-anchor.tsx
@@ -1,17 +1,23 @@
-import { Splash } from "@material/solid/components/splash";
 import type { Component } from "solid-js";
-import { searchAnchorIconStyle, searchAnchorLabelStyle, searchAnchorStyle } from "./search-anchor.css";
+import { Splash } from "@material/solid/components/splash";
+import { Focus } from "@material/solid/components/focus";
+import { searchAnchorContentStyle, searchAnchorIconStyle, searchAnchorLabelStyle, searchAnchorStyle } from "./search-anchor.css";
 
 import SearchIcon from "~icons/material-symbols-rounded/search:outlined";
 
-export const SearchAnchor: Component = (props) => {
-  let ref!: HTMLButtonElement;
+export const SearchAnchor: Component = () => {
+  let ref!: HTMLElement;
 
   return (
-    <button ref={ref} class={searchAnchorStyle}>
-      <Splash for={ref} />
-      <SearchIcon class={searchAnchorIconStyle} />
-      <span class={searchAnchorLabelStyle}>Search</span>
+    <button
+      ref={ref as HTMLButtonElement}
+      class={searchAnchorStyle}>
+        <Focus for={ref} />
+        <Splash for={ref} />
+        <div class={searchAnchorContentStyle}>
+          <SearchIcon class={searchAnchorIconStyle} />
+          <span class={searchAnchorLabelStyle}>Search</span>
+        </div>
     </button>
   );
 }
diff --git a/app/src/components/search/search.css.ts → app/src/components/search/search-view.css.ts b/app/src/components/search/search.css.ts → app/src/components/search/search-view.css.ts
diff --git a/app/src/components/search/search.tsx → app/src/components/search/search-view.tsx b/app/src/components/search/search.tsx → app/src/components/search/search-view.tsx
@@ -3,7 +3,7 @@ import { createEventListener } from "@solid-primitives/event-listener";
 import { createPresence } from "@solid-primitives/presence";
 import { resolveFirst } from "@solid-primitives/refs";
 import { type JSX, splitProps, type Component, createEffect, createSignal, createMemo, Show, createResource, For, Switch, Match } from "solid-js";
-import { searchDialogStyle, searchResultIndex, searchResultStyle, searchResultsMessageStyle, searchSubResultStyle, searchViewBarStyle, searchViewInputStyle, searchViewResultsStyle, searchViewStyle } from "./search.css";
+import { searchDialogStyle, searchResultIndex, searchResultStyle, searchResultsMessageStyle, searchSubResultStyle, searchViewBarStyle, searchViewInputStyle, searchViewResultsStyle, searchViewStyle } from "./search-view.css";
 import { debounce, leadingAndTrailing } from "@solid-primitives/scheduled";
 import { createInfiniteScroll } from "./pagination";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -21,11 +21,11 @@ import DescriptionIcon from "~icons/material-symbols-rounded/description:outline
 
 import { isServer } from "solid-js/web";
 
-export type SearchProps = {
+export type SearchViewProps = {
   children: JSX.Element;
 }
 
-export const Search: Component<SearchProps> = (props) => {
+export const SearchView: Component<SearchViewProps> = (props) => {
   const [localProps, otherProps] = splitProps(
     props,
     ["children"]