I did it

deminearchiver · Jun 2, 2024 · 67fb6fc · 67fb6fc
1 parent d983900
commit 67fb6fc
Show file tree

Hide file tree

Showing 52 changed files with 976 additions and 138 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "packages/material/material-color-utilities"]
-	path = packages/material/material-color-utilities
-	url = [email protected]:deminearchiver/material-color-utilities

diff --git a/app/astro.config.ts b/app/astro.config.ts
@@ -19,12 +19,14 @@ import { vanillaExtractPlugin as vanillaExtract } from "@vanilla-extract/vite-pl
 import unpluginIcons from "unplugin-icons/vite";
 import { FileSystemIconLoader } from "unplugin-icons/loaders";
 import materialSymbols from "@material-symbols/unplugin-icons";
-import materialSymbolsVite from "@material/symbols/vite";
+import materialSymbolsIntegration from "@material/symbols/astro";
 
 import { FontaineTransform as fontaine } from "fontaine";
 
 import { imageService as unpicImageService } from "@unpic/astro/service";
 
+import turboConsole from "unplugin-turbo-console/astro";
+
 export default defineConfig({
   site: "https://deminearchiver.pages.dev",
   // image: {
@@ -35,6 +37,8 @@ export default defineConfig({
   //   }),
   // },
   integrations: [
+    turboConsole({}),
+    materialSymbolsIntegration(),
     expressiveCode({
       plugins: [
         expressiveCodeLineNumbers(),

diff --git a/app/package.json b/app/package.json
@@ -46,7 +46,7 @@
     "@vanilla-extract/private": "^1.0.5",
     "@vanilla-extract/recipes": "^0.5.3",
     "@vanilla-extract/sprinkles": "^1.6.2",
-    "astro": "^4.9.1",
+    "astro": "^4.9.2",
     "astro-expressive-code": "^0.35.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
@@ -62,10 +62,11 @@
   "devDependencies": {
     "@iconify-json/material-symbols": "^1.1.80",
     "@iconify-json/simple-icons": "^1.1.101",
-    "@types/markdown-it": "^14",
-    "@types/sanitize-html": "^2",
+    "@types/markdown-it": "^14.1.1",
+    "@types/sanitize-html": "^2.11.0",
     "@vanilla-extract/vite-plugin": "^4.0.10",
     "astro-meta-tags": "^0.3.0",
-    "unplugin-icons": "^0.19.0"
+    "unplugin-icons": "^0.19.0",
+    "unplugin-turbo-console": "^1.8.6"
   }
 }
diff --git a/app/src/components/navigation/navigation-drawer.tsx b/app/src/components/navigation/navigation-drawer.tsx
@@ -1,6 +1,6 @@
 import { createEventListener } from "@solid-primitives/event-listener";
 import { mergeRefs, resolveFirst } from "@solid-primitives/refs";
-import { For, createEffect, createMemo, createSignal, splitProps, untrack, type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
+import { For, createEffect, createMemo, createSignal, on, splitProps, untrack, type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
 
 import { createPresence } from "@solid-primitives/presence";
 import { drawerContentStyle, drawerItemContentStyle, drawerItemStyle, drawerDialogStyle, drawerListStyle, passthroughStyle, drawerHeaderStyle, drawerFooterStyle } from "./navigation-drawer.css";
@@ -76,17 +76,17 @@ export const NavigationDrawer: Component<NavigationDrawerProps> = (props) => {
     exitDuration: 300,
   });
 
-  createEffect<boolean>((mounted) => {
-    document.body.toggleAttribute("data-dialog-open", open());
-    if(isMounted() === mounted) return isMounted();
-    if(isMounted()) {
-      dialogRef.showModal();
-    }
-    else {
-      dialogRef.close();
-    }
-    return isMounted();
-  }, isMounted());
+  createEffect(
+    on(isMounted, (mounted) => {
+      document.body.toggleAttribute("data-dialog-open", open());
+      if(mounted) {
+        dialogRef.showModal();
+      }
+      else {
+        dialogRef.close();
+      }
+    })
+  );
 
   const state = createMemo(() => isEntering() ? "enter" : isExiting() ? "exit" : undefined);
 

diff --git a/app/src/components/search/search-anchor.tsx b/app/src/components/search/search-anchor.tsx
@@ -1,11 +1,13 @@
 import { splitProps, type Component, type JSX } from "solid-js";
 import { Splash } from "@material/solid/components/splash";
 import { Focus } from "@material/solid/components/focus";
+import { Tooltip } from "@material/solid/components/tooltip";
 import { searchAnchorContentStyle, searchAnchorIconStyle, searchAnchorLabelStyle, searchAnchorStyle } from "./search-anchor.css";
 
 import SearchIcon from "~icons/material-symbols-rounded/search:outlined";
 import { mergeRefs } from "@solid-primitives/refs";
 import clsx from "clsx";
+import { createEventListener } from "@solid-primitives/event-listener";
 
 export type SearchAnchorProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
 export const SearchAnchor: Component<SearchAnchorProps> = (props) => {

diff --git a/app/src/components/search/search.tsx b/app/src/components/search/search.tsx
@@ -1,13 +1,17 @@
 import type { Component } from "solid-js";
 import { SearchView } from "./search-view";
 import { SearchAnchor } from "./search-anchor";
+import { Tooltip } from "@material/solid/components/tooltip";
 
 export const Search: Component = () => {
   let ref!: HTMLButtonElement;
   return (
     <>
       <SearchAnchor ref={ref} />
       <SearchView for={ref} />
+      <Tooltip.Plain for={ref}>
+        Press to open search
+      </Tooltip.Plain>
     </>
   );
 }
diff --git a/app/src/content/blog/astro-pagefind-solidjs.mdx b/app/src/content/blog/astro-pagefind-solidjs.mdx
@@ -1,11 +1,7 @@
 ---
 title: Astro + Pagefind + Solid = 🤯
 description: Build a search UI for your Astro site using Pagefind and SolidJS
-authors:
-  - id: deminearchiver
-    name: deminearchiver
-    avatar:
-      src: ../../assets/images/avatars/deminearchiver.png
+authors: [deminearchiver]
 createdAt: 2024-05-18 # Don't change! It's an actual creation date!
 ---
 

diff --git a/app/src/content/blog/material-to-solid.mdx b/app/src/content/blog/material-to-solid.mdx
@@ -3,12 +3,12 @@ title: Bringing Material You to SolidJS
 description: Recreating Material You components in SolidJS, styling with Vanilla Extract.
 cover:
   src: ../../assets/images/covers/material-to-solid.png
-authors:
-  - id: deminearchiver
-    name: deminearchiver
-    avatar:
-      src: ../../assets/images/avatars/deminearchiver.png
+authors: [deminearchiver]
 createdAt: 2024-05-25 # DO NOT CHANGE ANYMORE! Started work on the post 2024-05-25
+tags:
+  - materialDesign
+  - solidJs
+  - vanillaExtract
 ---
 
 import { Aside } from "../../components/content/aside";

diff --git a/app/src/content/blog/test.mdx b/app/src/content/blog/test.mdx
@@ -1,11 +1,7 @@
 ---
 hide: production
 title: Test Post
-authors:
-  - id: deminearchiver
-    name: deminearchiver
-    avatar:
-      src: ../../assets/images/avatars/deminearchiver.png
+authors: [deminearchiver]
 createdAt: 2024-02-01
 ---
 

diff --git a/app/src/content/blog/tooltip.mdx b/app/src/content/blog/tooltip.mdx
@@ -0,0 +1,141 @@
+---
+hide: production
+title: Tooltips using Popover API & Floating UI
+description: |
+  In this post I'll show how to create a simple tooltip component for SolidJS using the Popover API and the FloatingUI library
+authors: [deminearchiver]
+createdAt: 2024-06-02
+tags:
+  - solidJs
+---
+
+As you may know, Popover API has recently [**landed in Baseline**](https://web.dev/blog/popover-api), which means it will soon come to all major browsers.
+
+```bash
+yarn add @floating-ui/dom
+yarn add @solid-primitives/refs @solid-primitives/event-listener @solid-primitives/presence
+```
+
+```tsx title="tooltip.tsx"
+import { type Accessor, type JSX, type Component, createSignal, splitProps, createEffect, onCleanup, on } from "solid-js";
+import { createSignal, computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
+
+import { createEventListenerMap } from "@solid-primitives/event-listener";
+import { mergeRefs } from "@solid-primitives/refs";
+import { createPresence } from "@solid-primitives/presence";
+
+import styles from "./tooltip.module.css";
+
+export type TooltipProps = {
+  for: HTMLElement;
+} & JSX.HTMLAttributes<HTMLElement>;
+
+type FloatingState = {
+  x: number;
+  y: number;
+}
+
+export const Tooltip: Component<TooltipProps> = (props) => {
+  const [localProps, otherProps] = splitProps(
+    props,
+    ["ref", "class", "children"],
+  );
+
+  let ref!: HTMLElement;
+
+  const [visible, setVisible] = createSignal(false);
+  const [hovered, setHovered] = createSignal(false);
+
+  const { isMounted, isVisible } = createPresence(
+    visible, { transitionDuration: 100 },
+  );
+
+  const [floatingState, setFloatingState] = createSignal<FloatingState>(
+    { x: 0, y: 0 },
+  );
+
+  createEffect(() => {
+    const anchor = localProps.for;
+    const cleanup = autoUpdate(
+      anchor, ref,
+      () => {
+        computePosition(anchor, ref, {
+          middleware: [
+            flip(),
+            shift(),
+            offset(4),
+          ],
+        }).then(({ x, y }) => setFloatingState({ x, y }));
+      },
+    );
+    onCleanup(cleanup);
+  });
+
+  createEffect(
+    on(isMounted, mounted => {
+      if(mounted) ref.showPopover();
+      else ref.hidePopover();
+    })
+  );
+
+  createEventListenerMap(
+    localProps.for,
+    {
+      pointerenter: async () => {
+        setHovered(true);
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        if(hovered()) setVisible(true);
+      },
+      pointerleave: () => {
+        setHovered(false);
+        setVisible(false);
+      }
+    }
+  );
+
+  return (
+    <div
+      ref={ref as HTMLDivElement}
+      class={styles["tooltip"]}
+      style={{
+        left: `${floatingState().x}px`,
+        top: `${floatingState().y}px`,
+      }}>
+        {localProps.children}
+    </div>
+  );
+}
+```
+
+```css title="tooltip.module.css"
+.tooltip {
+  /* Required for Floating UI */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+
+  /* Design */
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 8px;
+  background-color: darkslateblue;
+  color: white;
+  border-radius: 4px;
+
+  pointer-events: none;
+
+  transition: opacity 100ms linear;
+
+  /* Remove annoying user agent styles */
+  margin: 0;
+  border: none;
+}
+```
+
+
+## Conclusion
+
+You can see the final result in [**Material You for SolidJS**](/showcase/material-solid).
diff --git a/app/src/content/blog/website-devlog-1.mdx b/app/src/content/blog/website-devlog-1.mdx
@@ -2,11 +2,7 @@
 hide: production
 title: "Website Devlog #1: the beginning"
 description: Introduction to my new "Website Devlog" series
-authors:
-  - id: deminearchiver
-    name: deminearchiver
-    avatar:
-      src: ../../assets/images/avatars/deminearchiver.png
+authors: [deminearchiver]
 createdAt: 2024-05-23
 ---
 

diff --git a/app/src/env.d.ts b/app/src/env.d.ts
@@ -2,10 +2,4 @@
 /// <reference types="astro/client" />
 /// <reference types="unplugin-icons/types/solid" />
 
-/// <reference types="@material/symbols/types" />
-declare module "@material/symbols/*" {
-  import type { Component, ComponentProps } from "solid-js";
-
-  const component: Component<ComponentProps<"svg">>;
-  export default component;
-}
+/// <reference types="@material/symbols/types/solid" />
diff --git a/app/src/layouts/404.astro b/app/src/layouts/404.astro
@@ -0,0 +1,3 @@
+---
+
+---