feat(search engine): support bing, duckduckgo, yandex, searx, baidu.

Closes #3

Author: EINDEX

build.mjs

@@ -7,6 +7,7 @@ import fs from 'fs-extra';
 import process from 'node:process';
 import tailwindcss from 'tailwindcss';
 import getManifest from './src/manifest.json.cjs';
+import remToPx from 'postcss-rem-to-pixel';
 
 dotenv.config();
 
@@ -44,7 +45,7 @@ async function runEsbuild() {
     plugins: [
       postcssPlugin({
         postcss: {
-          plugins: [tailwindcss, autoprefixer],
+          plugins: [tailwindcss, autoprefixer, remToPx],
         },
       }),
     ],

package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@tailwindcss/typography": "^0.5.9",
+    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "@types/marked": "^4.0.8",
     "axios": "^1.3.2",
     "conventional-changelog-conventionalcommits": "^5.0.0",
@@ -53,6 +54,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^11.1.0",
     "html-loader": "^4.2.0",
+    "postcss-rem-to-pixel": "^4.1.2",
     "prettier": "^2.8.3",
     "react-refresh": "^0.14.0",
     "react-refresh-typescript": "^2.0.7",

pnpm-lock.yaml

@@ -1,16 +1,14 @@
 import React from 'react';
 import { LogseqSearchResult } from '../../../types/logseq-block';
 import { LogseqResponseType } from '../../logseq/client';
-import { ListRender } from './List';
 import { LogseqBlock } from './LogseqBlock';
 import { LogseqPageContent } from './LogseqPageContent';
 
 type LogseqCopliotProps = {
   connect: chrome.runtime.Port;
-  hasAside: boolean;
 };
 
-export const LogseqCopliot = ({ connect, hasAside }: LogseqCopliotProps) => {
+export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {
   const [msg, setMsg] = React.useState('Loading...');
   const [logseqSearchResult, setLogseqSearchResult] =
     React.useState<LogseqSearchResult>();
@@ -108,15 +106,18 @@ export const LogseqCopliot = ({ connect, hasAside }: LogseqCopliotProps) => {
     ) {
       return (
         <>
-          <span>Nothing here, Do some research with Logseq!</span>
+          <span>
+            Nothing here, Do some research with Logseq!{' '}
+            <a href={`logseq://graph/${logseqSearchResult!.graph}`}>Go</a>
+          </span>
         </>
       );
     }
     return <></>;
   };
 
   return (
-    <div id={!hasAside ? 'rhs' : ''} className="copilot">
+    <div className="copilot">
       <div className={msg !== 'success' ? 'content' : 'content divide'}>
         {msg !== 'success' ? (
           <>{statusShower()}</>
@@ -130,7 +131,7 @@ export const LogseqCopliot = ({ connect, hasAside }: LogseqCopliotProps) => {
         )}
       </div>
 
-      <div className="footer">
+      <div className="copilot-footer">
         <span>
           <a href="https://github.com/EINDEX/logseq-copilot/issues/new">
             Feedback

src/pages/content/components/LogseqCopliot.tsx

@@ -1,12 +1,16 @@
 @tailwind base;
 
 .copilot {
-  @apply flex flex-col w-full max-w-full gap-2 pb-4;
+  @apply flex flex-col w-full max-w-sm gap-2 pb-4;
 
   .content {
-    @apply flex flex-col gap-2 rounded-lg border border-gray-300 border-solid px-4 py-4  prose-sm whitespace-pre-wrap;
+    @apply flex flex-col gap-2 rounded-lg border border-gray-300 border-solid px-4 py-4  prose-sm whitespace-pre-wrap text-sm;
      * {
-        @apply max-w-full break-all;
+        @apply break-all text-sm;
+      }
+
+      pre {
+        @apply overflow-x-auto;
       }
 
       .block-footer {
@@ -43,7 +47,7 @@
   .logseq-page-link::after {
     content: ']]';
   }
-  .footer {
+  .copilot-footer {
     @apply flex flex-row text-xs justify-between text-gray-500 px-2;
 
     a {

src/pages/content/index.scss

@@ -1,41 +1,44 @@
 import './index.scss';
 import { createRoot } from 'react-dom/client';
 import { LogseqCopliot } from './components/LogseqCopliot';
+import searchEngins from './searchingEngines/searchingEngines';
+import { Container } from '@chakra-ui/react';
 
 const connect = chrome.runtime.connect();
 
-const mount = async (query: string) => {
-  const container = document.createElement('div');
-  const asideElement = document.getElementById('rhs');
-
-  const hasAside = !!asideElement;
-
-  if (hasAside) {
-    asideElement.insertBefore(container, asideElement.firstChild);
-  } else {
-    const noAsideElement = document.getElementById('rcnt');
-    noAsideElement!.appendChild(container);
-  }
-
+const mount = async (container: Element, query: string) => {
   const root = createRoot(container);
 
   connect.postMessage({ type: 'query', query: query });
 
-  root.render(<LogseqCopliot connect={connect} hasAside={hasAside} />);
+  root.render(<LogseqCopliot connect={connect} />);
 };
 
-async function run() {
+async function run(searchEngine) {
   console.debug('Logseq copliot', window.location.hostname);
 
-  const searchURL = new URL(window.location.href);
-  const query = searchURL.searchParams.get('q');
-  if (!query) {
-    return;
+  if (searchEngine.isMatch()) {
+    const query = searchEngine.getQuery();
+    if (query) {
+      console.log(`match ${typeof searchEngine}, query ${query}`);
+      const container = await searchEngine.gotElement();
+      await mount(container, query);
+    }
   }
+}
 
-  if (window.location.hostname === 'www.google.com') {
-    await mount(query);
+function getEngine() {
+  for (const engine of searchEngins) {
+    if (engine.isMatch()) {
+      return engine;
+    }
   }
 }
 
-run();
+const searchEngine = getEngine();
+
+run(searchEngine);
+
+if (searchEngine.reload) {
+  searchEngine.reload(() => run(searchEngine));
+}