From 0a347e112f84d324066c71aa68ef010e3d4e6449 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Tue, 5 Jul 2022 14:04:34 +0200 Subject: [PATCH] Added basic search --- ghost/sodo-search/public/main.css | 128 ++++-------------- ghost/sodo-search/src/App.js | 9 +- .../sodo-search/src/components/PopupModal.js | 14 ++ ghost/sodo-search/src/index.js | 4 +- 4 files changed, 52 insertions(+), 103 deletions(-) diff --git a/ghost/sodo-search/public/main.css b/ghost/sodo-search/public/main.css index e36d47af57..cf74ef0e80 100644 --- a/ghost/sodo-search/public/main.css +++ b/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); diff --git a/ghost/sodo-search/src/App.js b/ghost/sodo-search/src/App.js index 41e946df22..11b9b041dd 100644 --- a/ghost/sodo-search/src/App.js +++ b/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 { {} }}> diff --git a/ghost/sodo-search/src/components/PopupModal.js b/ghost/sodo-search/src/components/PopupModal.js index 4994c4ae26..7ea1913449 100644 --- a/ghost/sodo-search/src/components/PopupModal.js +++ b/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 ( <>
diff --git a/ghost/sodo-search/src/index.js b/ghost/sodo-search/src/index.js index 23384c0fd4..4e42d131fd 100644 --- a/ghost/sodo-search/src/index.js +++ b/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( - + , document.getElementById(ROOT_DIV_ID) );