github.com/kubeshop/testkube@v1.17.23/docs/src/theme/NotFound/index.js (about)

     1  import React, { useEffect, useState } from "react";
     2  import posthog from "posthog-js";
     3  import algoliasearch from "algoliasearch";
     4  import Layout from "@theme/Layout";
     5  import { useLocation } from "@docusaurus/router";
     6  import { PageMetadata } from "@docusaurus/theme-common";
     7  import Translate, { translate } from "@docusaurus/Translate";
     8  import styles from "./styles.module.css";
     9  
    10  export default function NotFound() {
    11    const [searchResults, setSearchResults] = useState([]);
    12    const [loading, setLoading] = useState(true);
    13  
    14    const client = algoliasearch(
    15      "QRREOKFLDE",
    16      "97a76158bf582346aa0c2605cbc593f6"
    17    );
    18    const index = client.initIndex("testkube");
    19    const location = useLocation();
    20  
    21    useEffect(() => {
    22      posthog.init("phc_iir7nEWDoXebZj2fxKs8ukJlgroN7bnKBTcT8deIuJb", {
    23        api_host: "https://app.posthog.com",
    24        autocapture: false,
    25        capture_pageview: false,
    26      });
    27  
    28      posthog.capture("page-not-found");
    29    }, []);
    30  
    31    useEffect(() => {
    32      const getSearchResults = async () => {
    33        const query = location.pathname;
    34        // Remove the no-no words from the query
    35        const removeList = ["testkube"];
    36        const parsedQuery = query
    37          .split("/")
    38          .filter((word) => !removeList.includes(word))
    39          .join(" ");
    40  
    41        const searchResults = await index.search(parsedQuery, {
    42          hitsPerPage: 5,
    43        });
    44        const hits = searchResults.hits;
    45  
    46        setSearchResults(hits);
    47        setLoading(false);
    48      };
    49  
    50      getSearchResults();
    51    }, []);
    52  
    53    return (
    54      <>
    55        <PageMetadata
    56          title={translate({
    57            id: "theme.NotFound.title",
    58            message: "Page Not Found",
    59          })}
    60        />
    61        <Layout>
    62          <main className="container margin-vert--xl">
    63            <div className="row">
    64              <div className="col col--6 col--offset-3">
    65                <h1>
    66                  <Translate
    67                    id="theme.NotFound.title"
    68                    description="The title of the 404 page"
    69                  >
    70                    You have found a broken link or the URL entered doesn't exist
    71                    in our docs.
    72                  </Translate>
    73                </h1>
    74                <p>
    75                  <Translate
    76                    id="theme.NotFound.p2"
    77                    description="The 2nd paragraph of the 404 page"
    78                  >
    79                    {!loading && searchResults.length > 0
    80                      ? `Is there a chance one of these links will help?`
    81                      : ``}
    82                  </Translate>
    83                </p>
    84                <ul className={styles["results"]}>
    85                  {searchResults &&
    86                    searchResults.map((result) => (
    87                      <li key={result.objectID}>
    88                        <div>
    89                          <a href={result.url}>{result.hierarchy.lvl1}</a>
    90                        </div>
    91                      </li>
    92                    ))}
    93                </ul>
    94              </div>
    95            </div>
    96          </main>
    97        </Layout>
    98      </>
    99    );
   100  }