diff --git a/.eslintrc.js b/.eslintrc.js index 023bc1d4..17a5f984 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -50,7 +50,7 @@ module.exports = { { files: ['**/rollup.config.js', 'stories/**/*', '**/__tests__/**'], rules: { - 'import/no-extraneous-dependencies': 'off', + 'import/no-extraneous-dependencies': 0, }, }, { @@ -60,15 +60,27 @@ module.exports = { 'cypress/globals': true, }, rules: { - 'jest/expect-expect': 'off', - 'spaced-comment': 'off', - '@typescript-eslint/triple-slash-reference': 'off', + 'jest/expect-expect': 0, + 'spaced-comment': 0, + '@typescript-eslint/triple-slash-reference': 0, }, }, { - files: ['scripts/**/*', '*.config.js'], + files: [ + 'scripts/**/*', + '*.config.js', + 'packages/website/plugins/**/*', + 'packages/website/sidebars.js', + ], rules: { - 'import/no-commonjs': 'off', + 'import/no-commonjs': 0, + }, + }, + { + files: ['packages/website/**/*'], + rules: { + 'import/no-unresolved': 0, + 'import/no-extraneous-dependencies': 0, }, }, ], diff --git a/packages/website/.nvmrc b/packages/website/.nvmrc deleted file mode 100644 index 3f01c9b1..00000000 --- a/packages/website/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v14.6.0 diff --git a/packages/website/.prettierrc.js b/packages/website/.prettierrc.js deleted file mode 100644 index 92747c8c..00000000 --- a/packages/website/.prettierrc.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - proseWrap: 'always', - singleQuote: true, - trailingComma: 'es5', -}; diff --git a/packages/website/plugins/my-loaders/index.js b/packages/website/plugins/my-loaders/index.js index 621fd40c..f58537db 100644 --- a/packages/website/plugins/my-loaders/index.js +++ b/packages/website/plugins/my-loaders/index.js @@ -1,7 +1,7 @@ -module.exports = function(context, options) { +module.exports = function (_context, _options) { return { name: 'loaders', - configureWebpack(config, isServer) { + configureWebpack(_config, _isServer) { return { module: { rules: [ diff --git a/packages/website/plugins/tailwind-loader/index.js b/packages/website/plugins/tailwind-loader/index.js index 95093b0c..64099f5b 100644 --- a/packages/website/plugins/tailwind-loader/index.js +++ b/packages/website/plugins/tailwind-loader/index.js @@ -1,7 +1,7 @@ -module.exports = function (context, options) { +module.exports = function (_context, _options) { return { name: 'postcss-tailwindcss-loader', - configureWebpack(config, isServer, utils) { + configureWebpack(_config, _isServer, _utils) { return { module: { rules: [ @@ -28,7 +28,7 @@ module.exports = function (context, options) { }, ], }, - } + }; }, - } -} + }; +}; diff --git a/packages/website/src/components/ApplyForm.js b/packages/website/src/components/ApplyForm.js index 1467c4e4..2e0ed78e 100644 --- a/packages/website/src/components/ApplyForm.js +++ b/packages/website/src/components/ApplyForm.js @@ -1,4 +1,3 @@ -import React, { useState } from 'react'; import { Card, Input, @@ -7,11 +6,12 @@ import { Button, InlineLink, } from '@algolia/ui-library'; -import useBaseUrl from '@docusaurus/useBaseUrl'; - +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; import useThemeContext from '@theme/hooks/useThemeContext'; +import React, { useState } from 'react'; function ApplyForm() { + const { withBaseUrl } = useBaseUrlUtils(); const theme = useThemeContext.isDarkTheme ? 'dark' : 'light'; const [hasSent, setHasSent] = useState(false); const [url, setUrl] = useState(''); @@ -25,7 +25,7 @@ function ApplyForm() { const url = applyForm.getAttribute('action'); const formData = new FormData(applyForm); const data = {}; - formData.forEach(function(value, key) { + formData.forEach(function (value, key) { data[key] = value; }); const body = JSON.stringify(data); @@ -34,7 +34,7 @@ function ApplyForm() { method, headers: { 'Content-Type': 'application/json' }, body, - }).then(response => { + }).then((response) => { if (response.ok) { setHasSent(true); } @@ -59,7 +59,7 @@ function ApplyForm() { Please be patient, in the meantime, you can implement{' '} - + our recommendations for building a great DocSearch experience. @@ -83,7 +83,7 @@ function ApplyForm() { name="url" aria-label="URL of the documentation website" value={url} - onChange={event => setUrl(event.target.value)} + onChange={(event) => setUrl(event.target.value)} placeholder="https://project.org/docs" required /> @@ -101,7 +101,7 @@ function ApplyForm() { name="email" aria-label="Email address of the owner of this website" value={email} - onChange={event => setEmail(event.target.value)} + onChange={(event) => setEmail(event.target.value)} placeholder="you@project.org" required /> @@ -123,7 +123,7 @@ function ApplyForm() { required /> I'm the owner of the website and I have{' '} - + read the checklist diff --git a/packages/website/src/components/DocSearch/index.js b/packages/website/src/components/DocSearch/index.js index 2203d874..bf588d92 100644 --- a/packages/website/src/components/DocSearch/index.js +++ b/packages/website/src/components/DocSearch/index.js @@ -1,5 +1,5 @@ -import React, { useRef, useEffect } from 'react'; import Head from '@docusaurus/Head'; +import React, { useRef, useEffect } from 'react'; export default function DocSearch({ appId, indexName, apiKey }) { const docsearchRef = useRef(null); @@ -19,7 +19,7 @@ export default function DocSearch({ appId, indexName, apiKey }) { }, }); }); - }, [docsearchRef, indexName, apiKey]); + }, [docsearchRef, indexName, apiKey, appId]); return ( <> diff --git a/packages/website/src/components/DocSearchLogo.js b/packages/website/src/components/DocSearchLogo.js index a91be8d9..df4c07f7 100644 --- a/packages/website/src/components/DocSearchLogo.js +++ b/packages/website/src/components/DocSearchLogo.js @@ -2,7 +2,7 @@ import React from 'react'; export function DocSearchLogo(props) { return ( - + { + function resetCredentials() { + setProjectName(DEFAULT_INDEX_NAME); + setIndexName(DEFAULT_INDEX_NAME); + setApiKey(DEFAULT_API_KEY); + } + const index = searchClient.current.initIndex('live-demo'); + if (!selection && !projectName) { index .search(indexName, { filters: 'status.stage: "Outbound"', hitsPerPage: 1, }) - .then(result => { + .then((result) => { if (result.nbHits === 0) { resetCredentials(); } else { @@ -70,7 +71,6 @@ function Demo() { setDocsearchIssueUrl( activeDocSearchIndex.outbound.docsearchIssueUrl ); - console.log(activeDocSearchIndex.outbound); } }) .catch(() => { @@ -78,7 +78,7 @@ function Demo() { }); setSelection(true); } - }, [indexName]); + }, [indexName, projectName, selection, DEFAULT_API_KEY, DEFAULT_INDEX_NAME]); const code = ` @@ -136,7 +136,7 @@ function Demo() { {projectName !== null && {projectName}} @@ -163,7 +163,7 @@ function Demo() { Thumb up the request to feature DocSearch on the repo đź‘Ť{' '} GitHub @@ -176,7 +176,7 @@ function Demo() { code={``} language="html" noInline={true} - transformCode={_code => + transformCode={(_code) => `class Null extends React.Component {render(){return null}}` } theme={theme === 'dark' ? vsDark : github} @@ -192,7 +192,7 @@ function Demo() { code={code} language="html" noInline={true} - transformCode={_code => + transformCode={(_code) => `class Null extends React.Component {render(){return null}}` } theme={theme === 'dark' ? vsDark : github} @@ -223,7 +223,7 @@ function Demo() { diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index f3dcaf47..7ca26aa6 100755 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -1,157 +1,140 @@ -import React from 'react'; -import { - LightCta, - Section, - SectionTitle, - Button, - Text, - TextBlock, - Hero, - SectionHeader, - LabelText, - TextBlocksGrid, - Card, - CardsGrid, -} from '@algolia/ui-library'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; import Layout from '@theme/Layout'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import React from 'react'; -import showcaseProjects from './showcase-projects.json'; import ApplyForm from '../components/ApplyForm.js'; import { DocSearchLogo } from '../components/DocSearchLogo'; -// app.js -import "tailwindcss/tailwind.css" +import showcaseProjects from './showcase-projects.json'; + +import 'tailwindcss/tailwind.css'; function Home() { - const { siteConfig } = useDocusaurusContext(); + const { withBaseUrl } = useBaseUrlUtils(); - if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - document.querySelector('html').classList.add('dark') + if ( + localStorage.theme === 'dark' || + (!('theme' in localStorage) && + window.matchMedia('(prefers-color-scheme: dark)').matches) + ) { + document.querySelector('html').classList.add('dark'); } else { - document.querySelector('html').classList.remove('dark') + document.querySelector('html').classList.remove('dark'); } return ( <> -
-
-
-
- -
+
+
+
+
+ +
-

+

The best search experience for docs, integrated in minutes, for free

-
-
+ -
- +
+
-
-
-
-

+
+
+
+

Solve docs challenges with a search engine

-

+

Reducing users’ efforts to get started on your product or to resolve problems is the trick to smooth the learning curve. DocSearch brings relevancy to the fingers of your users.

-
-
-
+
+
+
-
+
-
-
+
+
Respect users efforts
-

+

First built to fulfill our own developers' needs, DocSearch quickly evolved as a successful community project. Over the years, the project kept on adressing the complex challenge of search for the open source community.

-

+

Our team is now collecting feeback and PR from major docs maintainers to provide the best relevancy and end-user interface.

-
-
+
+
-
-
+
+
Speak to all users
-

+

Documentation involves communicating complex information to every audience with clarity and accuracy. It’s a conversation which is a term for two-sided interactions.

-

+

DocSearch understands your data, the user input, the context and sends back instantly a fine selection of your content available with less interactions than any other @@ -159,31 +142,31 @@ function Home() {

-
-
+
+
-
-
+
+
Eliminate confusion
-

+

Overall consistency appearance and functional behavior is essential.

-

+

With a design very close to the native experience on mobile, we leverage users acquaintance with the interaction patterns of each OS. @@ -200,49 +183,49 @@ function Home() {

-
-
-
-
-
-

+
+
+
+
+
+

Already trusted by your favorite docs

-
-
-
-
-
-
-
+
+
+
+
+
+
+
Free
100%
-
-
+
+
Searches per month
-
+
75M
-
-
+
+
DocSearch Live
-
+
3500
@@ -251,7 +234,7 @@ function Home() {
-
+
{showcaseProjects.map(({ name, href, image }) => (
{`Discover -
+
{name}
@@ -279,35 +262,39 @@ function Home() {
-
-
-
-
-

+

+
+
+
+

Out of the box

-

+

How it works

-

+

We scrap your documentation, configure the Algolia index and send you the snippet you'll have to integrate.

-
-
-
+
+
+
-
- +
+
-
-
+
+
1. Scraping
-

+

We built a website crawler designed to index every section of your documentation. Just send us the URL of your documentation, and we’ll run the scraper every 24h so @@ -315,30 +302,36 @@ function Home() {

-
-
- +
+
+
-
+
2. Configuration
-

+

You don’t need to configure any settings or even have an Algolia account. We take care of this automatically to ensure the best documentation search experience.

-
-
- +
+
+
-
+
3. Implementation
-

+

We'll send you a script that integrates Algolia's autocomplete to power your search. You will receive the same speed, relevance, and best-in-class UX as our paying @@ -352,45 +345,45 @@ function Home() {

-
-
-
-
-

+
+
+
+
+

Anatomy of DocSearch

-

+

Search is a conversation so we used a modal dialog to ask for information that, when provided, significantly lessen users’ effort to navigate through the results. It gives space for the rendering so we could improve the content grouping.

-
    +
    • -
      -
      -
      +
      +
      +
      -
      -
      +
      +
      All featured search box
      -

      +

      The conversation start here: you want to have the state-of-the-art search box to represent your voice. DocSearch comes with our extensive experience in making @@ -399,34 +392,34 @@ function Home() {

      • -
    • -
      -
      -
      +
    • +
      +
      +
      -
      -
      - Hierarchical display +
      +
      + {'Hierarchical display'}
      -

      +

      When displaying the results it's important to get a sense of the documentation structure. DocSearch split your content in small chunks and the UI is returning - this information to the user  + this information to the user

      @@ -434,44 +427,44 @@ function Home() {
-
+
-
-
-
-
    +
    +
    +
    +
    • -
      -
      -
      +
      +
      +
      -
      -
      +
      +
      Search shortcut
      -

      +

      It looks almost similar to a search input but it’s a button. When you click/touch or use the keyboard shortcut, it opens a modal dropdown and focuses the @@ -480,30 +473,30 @@ function Home() {

      • -
    • -
      -
      -
      +
    • +
      +
      +
      -
      -
      +
      +
      Always sized and positionned correctly
      -

      +

      The modal experience leverages behavior of most populars Integrated Developement Environements or native experience on mobile. An opaque layer is making @@ -516,11 +509,11 @@ function Home() {

    -
    +
    @@ -529,133 +522,133 @@ function Home() {
    -
    -
    -
    -
    -

    +
    +
    +
    +
    +

    Powered by Algolia

    -

    +

    Algolia is a search API that gives engineering teams a complete toolkit for adding search to their products with minimal development time.

    -
      +
      • -
        -
        -
        +
        +
        +
        -
        -
        +
        +
        Fast & Relevant
        -

        +

        Most of our search queries take take less than 20ms to be processed.

        • -
      • -
        -
        -
        +
      • +
        +
        +
        -
        -
        +
        +
        Search as you type
        -

        +

        Instantly magnify relevant content to your users from the first keystroke, thanks to Algolia speed.

        • -
      • -
        -
        -
        +
      • +
        +
        +
        -
        -
        +
        +
        Typo Tolerant
        -

        +

        Deliver relevant results, regardless of user errors with robust, out-of-the-box typo tolerance.

        • -
      • -
        -
        -
        +
      • +
        +
        +
        -
        -
        +
        +
        Powerful analytics
        -

        +

        Undertstand how your search performs with specialized search metrics and ensure that your users are able to find what they’re searching for. @@ -666,14 +659,14 @@ function Home() {

    -
    +
    -

    +

    Our SaaS platform removes complexities of building and integrating search technology while focusing on great developer experience. We take care of the infrastructure and API clients, @@ -685,54 +678,54 @@ function Home() {

    -
    -
    -
    -

    +

    +
    +
    +

    Accelerators

    -

    +

    It’s All About Keyboards!

    -

    +

    Once users become familiar with a system they will become better and faster at doing what they need to. DocSearch offers accelerators to experts.

    -
    +
    -
    -
      +
      +
      • -
        -
        -
        +
        +
        +
        -
        -

        +
        +

        Keyboard Shortcut & Navigation

        -

        +

        A great search experience must be possible by using a keyboard only. DocSearch V3, one only needs a keyboard to discover the documentation. We aim at keeping the @@ -743,30 +736,30 @@ function Home() {

        • -
      • -
        -
        -
        +
      • +
        +
        +
        -
        -

        +
        +

        Accessibility

        -

        +

        We are releasing this version with our best efforts in regards to accessibility and we are willing to go deeper. We'd like to work closely with disabled users, expert of @@ -781,18 +774,18 @@ function Home() {

        -
        -
        -
        -

        +

        +
        +
        +

        Respect users efforts

        -

        +

        Full Featured User Experience

        -

        +

        Search is a path to some other purpose, rather than a target in itself. When developers are searching for knowledge, they do not want their flow of thinking disrupted by an intrusive interface. @@ -800,44 +793,45 @@ function Home() {

        -
        -
        -

        +
        +
        +

        Recent searches & Favorites

        -

        +

        You can now view recent searches and save them to your favorite searches.

        -
        -
        -

        +
        +
        +

        No Results

        -

        +

        Clearly states that there are no results, and offers suggestions for next steps.

        -
        -

        +
        +

        Offline Support

        -

        - DocSearch detects networks are on low conditions or just not available and display data according to your network state. +

        + DocSearch detects networks are on low conditions or just not + available and display data according to your network state.

        @@ -845,45 +839,45 @@ function Home() {

        -
        -
        -
        -

        -

        +
        +
        +
        +

        +

        For developers

        -

        +

        Selecting technologies means committing to solutions that will support an active and growing project over the long term.

        -
        -
          +
          +
          • -
            -
            -
            +
            +
            +
            -
            -

            +
            +

            Lightweight

            -

            +

            Although this new version provides more features, the bundle is lightweight and compatible with lazy loading. Only the code for the search button is loaded, until the @@ -893,30 +887,30 @@ function Home() {

            • -
          • -
            -
            -
            +
          • +
            +
            +
            -
            -

            +
            +

            React components

            -

            +

            DocSearch v3 has been rewritten in React, and now exposes React components. Vanilla JavaScript version is based on this React version with an alias to Preact. @@ -924,30 +918,30 @@ function Home() {

            • -
          • -
            -
            -
            +
          • +
            +
            +
            -
            -

            +
            +

            Open source

            -

            +

            DocSearch is relying on our search engine service: Algolia’s API and everything we’ve built around for DocSearch is open sourced. The front-end UI and the @@ -958,30 +952,30 @@ function Home() {

            • -
          • -
            -
            -
            +
          • +
            +
            +
            -
            -

            +
            +

            Modularity of Autocomplete.js

            -

            +

            Developers can introduce custom behavior between the core of DocSearch and the renderer. The latest version of Autocomplete.js is providing better accessibility, @@ -993,14 +987,14 @@ function Home() {

        - +
        ); diff --git a/packages/website/src/pages/inspector.js b/packages/website/src/pages/inspector.js index 89899e0d..80906875 100644 --- a/packages/website/src/pages/inspector.js +++ b/packages/website/src/pages/inspector.js @@ -1,16 +1,15 @@ -import React, { useState, useEffect, useRef } from 'react'; -import Layout from '@theme/Layout'; -import { useLocation } from 'react-router'; -import queryString from 'query-string'; import { Hero, Text, Pill, LabelText } from '@algolia/ui-library'; import Card from '@algolia/ui-library/public/components/Card'; import useBaseUrl from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; - import useThemeContext from '@theme/hooks/useThemeContext'; -import { DocSearchLogo } from '../components/DocSearchLogo'; - +import Layout from '@theme/Layout'; import algoliasearch from 'algoliasearch'; +import queryString from 'query-string'; +import React, { useState, useEffect } from 'react'; +import { useLocation } from 'react-router'; + +import { DocSearchLogo } from '../components/DocSearchLogo'; function Inspector() { const { siteConfig } = useDocusaurusContext(); @@ -18,10 +17,9 @@ function Inspector() { const DEFAULT_INDEX_NAME = siteConfig.themeConfig.algolia.indexName; - const { - indexName: indexNameFromUrl = DEFAULT_INDEX_NAME, - } = queryString.parse(useLocation().search); - const [indexName, setIndexName] = useState(indexNameFromUrl); + const { indexName = DEFAULT_INDEX_NAME } = queryString.parse( + useLocation().search + ); const [record, setIndexRecord] = useState(null); const [objectID, setObjectID] = useState(null); @@ -37,7 +35,7 @@ function Inspector() { setIndexRecord(results[0]); }); } - }, [objectID]); + }, [index, objectID]); return ( <> @@ -71,7 +69,7 @@ function Inspector() { setObjectID(e.target.value)} + onChange={(e) => setObjectID(e.target.value)} />
        {record ? : null} diff --git a/packages/website/src/pages/landing.js b/packages/website/src/pages/landing.js index 1a7e85e0..babd486c 100644 --- a/packages/website/src/pages/landing.js +++ b/packages/website/src/pages/landing.js @@ -1,7 +1,3 @@ -import React, { useState, useEffect } from 'react'; -import Layout from '@theme/Layout'; -import { useLocation } from 'react-router'; -import queryString from 'query-string'; import { Button, Hero, @@ -10,16 +6,20 @@ import { LabelText, InlineLink, } from '@algolia/ui-library'; -import DocSearch from '../components/DocSearch'; -import ErrorBoundary from '../components/ErrorBoundary'; -import algoliasearch from 'algoliasearch/lite'; import Card from '@algolia/ui-library/public/components/Card'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; +import useThemeContext from '@theme/hooks/useThemeContext'; +import Layout from '@theme/Layout'; +import algoliasearch from 'algoliasearch/lite'; import github from 'prism-react-renderer/themes/github'; import vsDark from 'prism-react-renderer/themes/vsDark'; +import queryString from 'query-string'; +import React, { useState, useEffect } from 'react'; +import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; +import { useLocation } from 'react-router'; -import useThemeContext from '@theme/hooks/useThemeContext'; +import DocSearch from '../components/DocSearch'; +import ErrorBoundary from '../components/ErrorBoundary'; function Landing() { const theme = useThemeContext.isDarkTheme ? 'dark' : 'light'; @@ -58,8 +58,8 @@ function Landing() { const index = searchClient.initIndex(indexName); index .search('') - .then(_ => setisValidDSCred(true)) - .catch(_ => { + .then((_) => setisValidDSCred(true)) + .catch((_) => { setWrongCredentials(true); fallbackToDocSearchDocCred(); }); @@ -106,7 +106,7 @@ function Landing() { code={``} language="html" noInline={true} - transformCode={code => + transformCode={(_code) => `class Null extends React.Component {render(){return null}}` } theme={theme === 'dark' ? vsDark : github} @@ -133,7 +133,7 @@ function Landing() { `} language="html" noInline={true} - transformCode={code => + transformCode={(_code) => `class Null extends React.Component {render(){return null}}` } theme={theme === 'dark' ? vsDark : github} diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js index f25f2624..ca66ce06 100644 --- a/packages/website/src/pages/playground.js +++ b/packages/website/src/pages/playground.js @@ -1,7 +1,3 @@ -import React, { useState, useEffect } from 'react'; -import Layout from '@theme/Layout'; -import { useLocation } from 'react-router'; -import queryString from 'query-string'; import { Button, Hero, @@ -10,13 +6,17 @@ import { LabelText, InlineLink, } from '@algolia/ui-library'; -import DocSearch from '../components/DocSearch'; -import ErrorBoundary from '../components/ErrorBoundary'; -import algoliasearch from 'algoliasearch/lite'; import Card from '@algolia/ui-library/public/components/Card'; import useBaseUrl from '@docusaurus/useBaseUrl'; - import useThemeContext from '@theme/hooks/useThemeContext'; +import Layout from '@theme/Layout'; +import algoliasearch from 'algoliasearch/lite'; +import queryString from 'query-string'; +import React, { useState, useEffect } from 'react'; +import { useLocation } from 'react-router'; + +import DocSearch from '../components/DocSearch'; +import ErrorBoundary from '../components/ErrorBoundary'; function Playground() { const theme = useThemeContext.isDarkTheme ? 'dark' : 'light'; @@ -55,8 +55,8 @@ function Playground() { const index = searchClient.initIndex(indexName); index .search('') - .then(_ => setisValidDSCred(true)) - .catch(_ => { + .then((_) => setisValidDSCred(true)) + .catch((_) => { setWrongCredentials(true); fallbackToDocSearchDocCred(); }); diff --git a/packages/website/src/pages/v3me.js b/packages/website/src/pages/v3me.js index fed642f9..0bdfb1df 100644 --- a/packages/website/src/pages/v3me.js +++ b/packages/website/src/pages/v3me.js @@ -1,7 +1,3 @@ -import React, { useState, useEffect } from 'react'; -import { useLocation } from 'react-router'; -import queryString from 'query-string'; -import Layout from '@theme/Layout'; import { Button, Hero, @@ -10,14 +6,20 @@ import { LabelText, InlineLink, } from '@algolia/ui-library'; -import algoliasearch from 'algoliasearch/lite'; import Card from '@algolia/ui-library/public/components/Card'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import { DocSearchModal } from '@docsearch/react'; -import ErrorBoundary from '../components/ErrorBoundary'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; import useThemeContext from '@theme/hooks/useThemeContext'; +import Layout from '@theme/Layout'; +import algoliasearch from 'algoliasearch/lite'; +import queryString from 'query-string'; +import React, { useState, useEffect } from 'react'; +import { useLocation } from 'react-router'; + +import ErrorBoundary from '../components/ErrorBoundary'; function V3Me() { + const { withBaseUrl } = useBaseUrlUtils(); const theme = useThemeContext.isDarkTheme ? 'dark' : 'light'; const getParams = queryString.parse(useLocation().search); @@ -27,22 +29,6 @@ function V3Me() { apiKey: apiKeyQS = '', } = getParams; - const searchParameters = { hitsPerPage: 10 }; - - for (const [name, value] of Object.entries(getParams)) { - if (name !== 'appId' && name !== 'indexName' && name !== 'apiKey') { - const parsedInt = parseInt(value, 10); - const parsedBool = - value === 'true' ? true : value === 'false' ? false : null; - searchParameters[name] = - parsedInt !== NaN - ? parsedInt - : parsedBool - ? parsedBool !== null - : value; - } - } - const [isValidDSCred, setisValidDSCred] = useState(false); const [wrongCredentials, setWrongCredentials] = useState(false); const [appId, setAppId] = useState(appIdQS); @@ -71,13 +57,29 @@ function V3Me() { const index = searchClient.initIndex(indexName); index .search('') - .then(_ => setisValidDSCred(true)) - .catch(_ => { + .then((_) => setisValidDSCred(true)) + .catch((_) => { setWrongCredentials(true); fallbackToDocSearchDocCred(); }); }, [appId, indexName, apiKey]); + const searchParameters = { hitsPerPage: 10 }; + for (const [name, value] of Object.entries(getParams)) { + if (name !== 'appId' && name !== 'indexName' && name !== 'apiKey') { + const parsedInt = parseInt(value, 10); + const parsedBool = + // eslint-disable-next-line no-nested-ternary + value === 'true' ? true : value === 'false' ? false : null; + // eslint-disable-next-line no-nested-ternary + searchParameters[name] = !isNaN(parsedInt) + ? parsedInt + : parsedBool + ? parsedBool !== null + : value; + } + } + return ( <> @@ -117,7 +119,7 @@ function V3Me() { &apiKey=')} + href={withBaseUrl('/v3me/?indexName=&apiKey=')} >{`https://docsearch.algolia.com/v3me/?indexName=&apiKey=&appId=`} @@ -145,7 +147,7 @@ function V3Me() { diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js index 5b4b0e7a..bc9a1305 100644 --- a/packages/website/tailwind.config.js +++ b/packages/website/tailwind.config.js @@ -8,4 +8,4 @@ module.exports = { extend: {}, }, plugins: [], -} +};