ok

MAIF · Nov 16, 2023 · fbf349f · fbf349f
1 parent c85683d
commit fbf349f
Show file tree

Hide file tree

Showing 25 changed files with 862 additions and 28 deletions.
diff --git a/docs/documentation/app/globals.css b/docs/documentation/app/globals.css
@@ -10,4 +10,10 @@
 * {
     -ms-overflow-style: none;
     scrollbar-width: none;
-} */
+} */
+
+#search form div {
+    overflow: auto;
+    max-height: calc(500px - 71px);
+    margin-bottom: 24px;
+}
diff --git a/docs/documentation/app/layout.js b/docs/documentation/app/layout.js
@@ -1,13 +1,12 @@
 import './globals.css'
 
-// export const metadata = {
-//   title: 'Wasmo documentation',
-//   description: 'Wasmo documentation',
-// }
-
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
+      <head>
+        <link href="/dist/pagefind-ui.css" rel="stylesheet" />
+        <script src="/dist/pagefind-ui.js"></script>
+      </head>
       <body>{children}</body>
     </html>
   )

diff --git a/docs/documentation/app/page.js b/docs/documentation/app/page.js
@@ -3,7 +3,6 @@
 import Layout from '../components/Layout';
 import Page from './_page.mdx';
 
-
 export default function Home() {
 
   return <Layout
@@ -17,5 +16,4 @@ export default function Home() {
     }}>
     <Page />
   </Layout>
-
 }
diff --git a/docs/documentation/components/Layout.js b/docs/documentation/components/Layout.js
@@ -7,27 +7,24 @@ import { List } from './mdx/List';
 import { Misc } from './mdx/Misc';
 import { Pre } from './mdx/Pre';
 
+import Searchbar from './Searchbar';
+import { useState } from 'react';
+
 function Layout({ children, next, metadata }) {
+  const [open, handleOpen] = useState(false)
+
   return <>
-    <header className="sticky top-0 z-50 flex items-center justify-between px-3 py-2">
+    <header className="sticky top-2 z-50 flex items-center justify-between px-3 py-2 bg-white" onClick={() => handleOpen(false)}>
       <div className="flex items-center flex-grow">
         <a href="" className="text-3xl font-bold tracking-tight text-slate-1200">
           Wasmo Docs
         </a>
       </div>
 
-      <form action="https://duckduckgo.com/" className="md:w-80 lg:w-96 ms-auto">
-        <span className="relative flex items-center group">
-          <svg aria-hidden="true" viewBox="0 0 20 20" className="absolute w-4 h-4 ml-3 fill-slate-400 group-hover:fill-slate-500 group-focus:fill-slate-500"><path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"></path></svg>
-          <input type="text" name="q" placeholder="Search docs…" className="w-full py-2 pl-10 pr-2 border rounded bg-slate-100 placeholder-slate-400 text-slate-800 border-slate-100 outline outline-offset-2 outline-2 outline-transparent hover:border-slate-200 focus:border-slate-200 focus:outline-slate-600" />
-        </span>
-        {/* <input type="hidden" name="sites" value="spinalcms.com" /> */}
-        <input type="submit" value="Search" className="sr-only" />
-      </form>
-
+      <Searchbar open={open} handleOpen={handleOpen} />
     </header>
 
-    <main className="relative flex justify-center mx-auto max-w-8xl" style={{
+    <main className="relative flex justify-center mx-auto max-w-8xl" onClick={() => handleOpen(false)} style={{
       height: 'calc(100vh - 58px)',
       overflow: 'hidden'
     }}>

diff --git a/docs/documentation/components/Searchbar.js b/docs/documentation/components/Searchbar.js
@@ -0,0 +1,75 @@
+"use client";
+
+import Script from 'next/script';
+
+export default function Searchbar({ handleOpen, open }) {
+  return <div className="w-6/12 ms-auto">
+    <Script
+      src="/searchbar.js"
+      strategy="lazyOnload"
+    />
+
+    {open && <div style={{
+      background: '#ddd',
+      opacity: '.9',
+      position: 'absolute',
+      top: -10,
+      right: 0,
+      height: '100vh',
+      left: 0,
+      bottom: 0,
+      zIndex: 100,
+      overflow: 'hidden'
+    }} onClick={e => {
+      if (open) {
+        e.stopPropagation()
+        handleOpen(false)
+      }
+    }} />}
+
+    <div style={{
+      position: 'absolute',
+      top: open ? 0 : -20,
+      right: 0,
+      left: open ? 0 : 'initial',
+      zIndex: 100
+    }} onClick={e => {
+      if (!open) {
+        e.stopPropagation()
+        handleOpen(true)
+      }
+    }} className='flex'>
+
+      <div className={`flex flex-col ${open ? 'border-purple-900' : ''}`} style={
+        open ? {
+          borderWidth: 1,
+          margin: 'auto',
+          marginTop: 100,
+          background: '#fff',
+          width: '60%',
+          maxWidth: '800px',
+          borderRadius: 12,
+          minHeight: 280,
+          maxHeight: 500,
+          overflow: 'hidden',
+          padding: 20,
+          position: 'relative'
+        } : {
+          padding: 20
+        }} onClick={e => {
+          if (open)
+            e.stopPropagation()
+        }}>
+        <div style={{
+          paddingRight: 12,
+          minHeight: open ? 280 : 0,
+          maxHeight: open ? 'initial' : 50,
+          overflow: open ? 'initial' : 'hidden',
+          paddingTop: open ? 20 : 0
+        }}>
+          <div id="search"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+}
diff --git a/docs/documentation/public/dist/fragment/en_1f196a2.pf_fragment b/docs/documentation/public/dist/fragment/en_1f196a2.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_50a0e76.pf_fragment b/docs/documentation/public/dist/fragment/en_50a0e76.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_56a0485.pf_fragment b/docs/documentation/public/dist/fragment/en_56a0485.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_62cf6d9.pf_fragment b/docs/documentation/public/dist/fragment/en_62cf6d9.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_816b1f1.pf_fragment b/docs/documentation/public/dist/fragment/en_816b1f1.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_8fd7dae.pf_fragment b/docs/documentation/public/dist/fragment/en_8fd7dae.pf_fragment
diff --git a/docs/documentation/public/dist/fragment/en_aa593ba.pf_fragment b/docs/documentation/public/dist/fragment/en_aa593ba.pf_fragment
diff --git a/docs/documentation/public/dist/index/en_adf4269.pf_index b/docs/documentation/public/dist/index/en_adf4269.pf_index
diff --git a/docs/documentation/public/dist/pagefind-entry.json b/docs/documentation/public/dist/pagefind-entry.json
@@ -0,0 +1 @@
+{"version":"1.0.3","languages":{"en":{"hash":"en_589ab66424","wasm":"en","page_count":7}}}
diff --git a/docs/documentation/public/dist/pagefind-modular-ui.css b/docs/documentation/public/dist/pagefind-modular-ui.css
@@ -0,0 +1,214 @@
+:root {
+    --pagefind-ui-scale: 0.8;
+    --pagefind-ui-primary: #034AD8;
+    --pagefind-ui-fade: #707070;
+    --pagefind-ui-text: #393939;
+    --pagefind-ui-background: #ffffff;
+    --pagefind-ui-border: #eeeeee;
+    --pagefind-ui-tag: #eeeeee;
+    --pagefind-ui-border-width: 2px;
+    --pagefind-ui-border-radius: 8px;
+    --pagefind-ui-image-border-radius: 8px;
+    --pagefind-ui-image-box-ratio: 3 / 2;
+    --pagefind-ui-font: system, -apple-system, ".SFNSText-Regular",
+        "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue",
+        "Lucida Grande", sans-serif;
+}
+
+[data-pfmod-hidden] {
+    display: none !important;
+}
+
+[data-pfmod-suppressed] {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+[data-pfmod-sr-hidden] {
+    -webkit-clip: rect(0 0 0 0) !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(100%) !important;
+    clip-path: inset(100%) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    overflow: clip !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    width: 1px !important;
+}
+
+[data-pfmod-loading] {
+    color: var(--pagefind-ui-text);
+    background-color: var(--pagefind-ui-text);
+    border-radius: var(--pagefind-ui-border-radius);
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+/* Input */
+
+.pagefind-modular-input-wrapper {
+    position: relative;
+}
+
+.pagefind-modular-input-wrapper::before {
+    background-color: var(--pagefind-ui-text);
+    width: calc(18px * var(--pagefind-ui-scale));
+    height: calc(18px * var(--pagefind-ui-scale));
+    top: calc(23px * var(--pagefind-ui-scale));
+    left: calc(20px * var(--pagefind-ui-scale));
+    content: "";
+    position: absolute;
+    display: block;
+    opacity: 0.7;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+    -webkit-mask-size: 100%;
+    mask-size: 100%;
+    z-index: 9;
+    pointer-events: none;
+}
+
+.pagefind-modular-input {
+    height: calc(64px * var(--pagefind-ui-scale));
+    padding: 0 calc(70px * var(--pagefind-ui-scale)) 0 calc(54px * var(--pagefind-ui-scale));
+    background-color: var(--pagefind-ui-background);
+    border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+    border-radius: var(--pagefind-ui-border-radius);
+    font-size: calc(21px * var(--pagefind-ui-scale));
+    position: relative;
+    appearance: none;
+    -webkit-appearance: none;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: 700;
+}
+
+.pagefind-modular-input::placeholder {
+    opacity: 0.2;
+}
+
+.pagefind-modular-input-clear {
+    position: absolute;
+    top: calc(2px * var(--pagefind-ui-scale));
+    right: calc(2px * var(--pagefind-ui-scale));
+    height: calc(60px * var(--pagefind-ui-scale));
+    border-radius: var(--pagefind-ui-border-radius);
+    padding: 0 calc(15px * var(--pagefind-ui-scale)) 0 calc(2px * var(--pagefind-ui-scale));
+    color: var(--pagefind-ui-text);
+    font-size: calc(14px * var(--pagefind-ui-scale));
+    cursor: pointer;
+    background-color: var(--pagefind-ui-background);
+    border: none;
+    appearance: none;
+}
+
+/* ResultList */
+
+.pagefind-modular-list-result {
+    list-style-type: none;
+    display: flex;
+    align-items: flex-start;
+    gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
+    padding: calc(30px * var(--pagefind-ui-scale)) 0 calc(40px * var(--pagefind-ui-scale));
+    border-top: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
+}
+
+.pagefind-modular-list-result:last-of-type {
+    border-bottom: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
+}
+
+.pagefind-modular-list-thumb {
+    width: min(30%,
+            calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));
+    max-width: calc(120px * var(--pagefind-ui-scale));
+    margin-top: calc(10px * var(--pagefind-ui-scale));
+    aspect-ratio: var(--pagefind-ui-image-box-ratio);
+    position: relative;
+}
+
+.pagefind-modular-list-image {
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--pagefind-ui-image-border-radius);
+}
+
+.pagefind-modular-list-inner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: calc(10px * var(--pagefind-ui-scale));
+}
+
+.pagefind-modular-list-title {
+    display: inline-block;
+    font-weight: 700;
+    font-size: calc(21px * var(--pagefind-ui-scale));
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.pagefind-modular-list-link {
+    color: var(--pagefind-ui-text);
+    text-decoration: none;
+}
+
+.pagefind-modular-list-link:hover {
+    text-decoration: underline;
+}
+
+.pagefind-modular-list-excerpt {
+    display: inline-block;
+    font-weight: 400;
+    font-size: calc(16px * var(--pagefind-ui-scale));
+    margin-top: calc(4px * var(--pagefind-ui-scale));
+    margin-bottom: 0;
+    min-width: calc(250px * var(--pagefind-ui-scale));
+}
+
+/* FilterPills */
+
+.pagefind-modular-filter-pills-wrapper {
+    overflow-x: scroll;
+    padding: 15px 0;
+}
+
+.pagefind-modular-filter-pills {
+    display: flex;
+    gap: 6px;
+}
+
+.pagefind-modular-filter-pill {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    appearance: none;
+    padding: 0 calc(24px * var(--pagefind-ui-scale));
+    background-color: var(--pagefind-ui-background);
+    color: var(--pagefind-ui-fade);
+    border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+    border-radius: calc(25px * var(--pagefind-ui-scale));
+    font-size: calc(18px * var(--pagefind-ui-scale));
+    height: calc(50px * var(--pagefind-ui-scale));
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.pagefind-modular-filter-pill:hover {
+    border-color: var(--pagefind-ui-primary);
+}
+
+.pagefind-modular-filter-pill[aria-pressed="true"] {
+    border-color: var(--pagefind-ui-primary);
+    color: var(--pagefind-ui-primary);
+}