Added basic search

ghost/sodo-search/public/main.css

@@ -566,46 +566,30 @@ video {
 }
 
 .-mx-7 {
-  margin-left: -2.8rem;
-  margin-right: -2.8rem;
+  margin-left: -1.75rem;
+  margin-right: -1.75rem;
 }
 
-.mt-1 {
-  margin-top: 0.4rem;
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
 .mt-0 {
   margin-top: 0px;
 }
 
-.mt-4 {
-  margin-top: 1.6rem;
-}
-
-.mb-4 {
-  margin-bottom: 1.6rem;
-}
-
-.mb-3 {
-  margin-bottom: 1.2rem;
-}
-
-.mr-3 {
-  margin-right: 1.2rem;
-}
-
-.ml-3 {
-  margin-left: 1.2rem;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
 
-.mb-2 {
-  margin-bottom: 0.8rem;
-}
-
 .flex {
   display: flex;
 }
@@ -623,7 +607,7 @@ video {
 }
 
 .max-w-lg {
-  max-width: 51.2rem;
+  max-width: 32rem;
 }
 
 .grow {
@@ -645,18 +629,13 @@ video {
 }
 
 .rounded-lg {
-  border-radius: 0.8rem;
+  border-radius: 0.5rem;
 }
 
 .border-t {
   border-top-width: 1px;
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -671,69 +650,41 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
 .fill-gray-400 {
   fill: #9ca3af;
 }
 
-.p-4 {
-  padding: 1.6rem;
-}
-
 .py-6 {
-  padding-top: 2.4rem;
-  padding-bottom: 2.4rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .px-7 {
-  padding-left: 2.8rem;
-  padding-right: 2.8rem;
-}
-
-.py-1 {
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
 }
 
 .py-2 {
-  padding-top: 0.8rem;
-  padding-bottom: 0.8rem;
-}
-
-.pt-8 {
-  padding-top: 3.2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .pt-20 {
-  padding-top: 8rem;
-}
-
-.pt-6 {
-  padding-top: 2.4rem;
-}
-
-.text-md {
-  font-size: 1.5rem;
-}
-
-.text-sm {
-  font-size: 1.4rem;
-}
-
-.text-xs {
-  font-size: 1.2rem;
+  padding-top: 5rem;
 }
 
 .text-\[1\.65rem\] {
   font-size: 1.65rem;
 }
 
-.text-lg {
-  font-size: 1.8rem;
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .font-semibold {
@@ -756,21 +707,6 @@ video {
   line-height: 1.5;
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -781,12 +717,6 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);

ghost/sodo-search/src/App.js

@@ -18,8 +18,11 @@ export default class App extends React.Component {
         };
     }
 
-    componentDidMount() {
-        this.state.searchIndex.init();
+    async componentDidMount() {
+        await this.state.searchIndex.init();
+        this.setState({
+            indexComplete: true
+        });
     }
 
     render() {
@@ -27,6 +30,8 @@ export default class App extends React.Component {
             <AppContext.Provider value={{
                 page: 'search',
                 showPopup: true,
+                searchIndex: this.state.searchIndex,
+                indexComplete: true,
                 onAction: () => {}
             }}>
                 <PopupModal />

ghost/sodo-search/src/components/PopupModal.js

@@ -2,6 +2,7 @@ import Frame from './Frame';
 import AppContext from '../AppContext';
 import {ReactComponent as SearchIcon} from '../icons/search.svg';
 import {ReactComponent as ClearIcon} from '../icons/delete.svg';
+import {useContext} from 'react';
 
 const React = require('react');
 
@@ -84,6 +85,19 @@ class PopupContent extends React.Component {
 }
 
 function Search() {
+    const {searchIndex, indexComplete} = useContext(AppContext);
+    let pageClass = 'search';
+    /* eslint-disable no-console */
+    console.log(searchIndex);
+    if (indexComplete) {
+        const searchValue = searchIndex.search('dada');
+        console.log(searchValue);
+    }
+
+    let className = 'gh-portal-popup-container';
+
+    const containerClassName = `${className} ${pageClass}`;
+
     return (
         <> 
             <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20'>

ghost/sodo-search/src/index.js

@@ -30,12 +30,12 @@ function setup({siteUrl}) {
 }
 
 function init() {
-    const {siteUrl: customSiteUrl} = getSiteData();
+    const {siteUrl: customSiteUrl, apiKey, apiUrl} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
     ReactDOM.render(
         <React.StrictMode>
-            <App />
+            <App apiKey={apiKey} apiUrl={apiUrl} />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );