New design, Typescript Rewrite, initial i18n support, Docusaurus alpha-73 support, improved yellow markings

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x, 15.x]
+        node-version: [12.x, 14.x, 15.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -21,6 +21,8 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: yarn install --frozen-lockfile
     - run: yarn lint
+    - run: yarn build:server
+    - run: yarn build:client
 
     - run: yarn --cwd example-docs install
     - run: yarn --cwd example-docs build

.gitignore

@@ -1,4 +1,5 @@
-/src/generated.js
+/src/client/theme/SearchBar/generated.js
+/lib
 /cypress/videos
 
 # Created by https://www.gitignore.io/api/node

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+14

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.6.0
+
+- BREAKING: Now requires Docusaurus v2.0.0-alpha73
+- BREAKING: Update autocomplete.js to v1-alpha, which features an all-new design and renamed class names (#32).
+- FEAT: Use i18n system for translation of the searchbar itself, translate to German and English (#29)
+  - BREAKING: To specfiy a non-default placeholder if no results are found, overwrite the newly introduced translation keys instead of `.d-s-l-a .aa-dropdown-menu .aa-suggestion-empty::after { content: "No results"; }`
+- FEAT: Yellow result higlighting no longer adds a parameter to the URL and vanishes on refresh (#28)
+
 # 0.5.0
 
 - FIX: Correctly handle "/" as docsRouteBasePath and blogRouteBasePath (#21)

README.md

@@ -1,14 +1,15 @@
-# Offline / Local Search for Docusaurus v2
+# Offline / Local Search for Docusaurus v2-alpha73+
 
 ![Version](https://img.shields.io/npm/v/@cmfcmf/docusaurus-search-local?style=flat-square)
 ![License](https://img.shields.io/npm/l/@cmfcmf/docusaurus-search-local?style=flat-square)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 ![GitHub issues](https://img.shields.io/github/issues/cmfcmf/docusaurus-search-local?style=flat-square)
 ![GitHub last commit](https://img.shields.io/github/last-commit/cmfcmf/docusaurus-search-local?style=flat-square)
 
-Offline / local search for Docusaurus **v2** that works behind your firewall.
+Offline / local search for Docusaurus **v2-alpha73+** that works behind your firewall.
 
 Feature Highlights:
+
 - Supports multiple documentation versions
 - Supports documentation written in languages other than English
 - Highlights search results
@@ -85,6 +86,11 @@ The following options are available (defaults are shown below):
   // language of your documentation, see next section
   language: "en",
 
+  // setting this to "none" will prevent the default CSS to be included. The default CSS
+  // comes from autocomplete-theme-classic, which you can read more about here:
+  // https://autocomplete.algolia.com/docs/autocomplete-theme-classic
+  style: undefined,
+
   // lunr.js-specific settings
   lunr: {
     // When indexing your documents, their content is split into "tokens".
@@ -118,6 +124,16 @@ The search bar defaults to the latest version (not `next`, but the latest versio
 If the user visits a documentation page, the version is extracted from the page and search will only search the documentation of that version.
 The searchbar placeholder text always reflects the currently detected documentation version.
 
+### Internationalization
+
+This plugin supports documentation using [Docusaurus i18n](https://docusaurus.io/docs/i18n/introduction) out of the box.
+
+However, the text used for the searchbox itself (e.g., the `Search...` placeholder) is currently only translated in German and English.
+Please contribute additional translations by creating a new translation file in the [codeTranslations](codeTranslations) subfolder and submitting a PR.
+
+You can also adjust translations by modifiying the translations in `<yourfolder>/i18n/<locale>/code.json` that start with `cmfcmf/d-s-l.`.
+Read more at: https://docusaurus.io/docs/i18n/tutorial#translate-json-files
+
 ### Debugging
 
 If building your documentation produces an error, you can build it in debug mode to figure out

babel.config.js

@@ -0,0 +1,8 @@
+// Only used for testing with jest!
+module.exports = {
+  // Jest
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+     '@babel/preset-typescript',
+  ],
+};

codeTranslations/de.json

@@ -0,0 +1,5 @@
+{
+  "cmfcmf/d-s-l.searchBar.placeholderWithoutVersion": "Suchen...",
+  "cmfcmf/d-s-l.searchBar.placeholderWithVersion": "Suchen... [{version}]",
+  "cmfcmf/d-s-l.searchBar.noResults": "Keine Suchergebnissse gefunden."
+}

codeTranslations/en.json

@@ -0,0 +1,5 @@
+{
+  "cmfcmf/d-s-l.searchBar.placeholderWithoutVersion": "Search...",
+  "cmfcmf/d-s-l.searchBar.placeholderWithVersion": "Search... [{version}]",
+  "cmfcmf/d-s-l.searchBar.noResults": "No results found."
+}

example-docs/README.md

@@ -1,33 +1,33 @@
 # Website
 
-This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
-### Installation
+## Installation
 
-```
-$ yarn
+```console
+yarn install
 ```
 
-### Local Development
+## Local Development
 
-```
-$ yarn start
+```console
+yarn start
 ```
 
-This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-### Build
+## Build
 
-```
-$ yarn build
+```console
+yarn build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Deployment
+## Deployment
 
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

example-docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

example-docs/docs/d-s-l-test.md

@@ -43,4 +43,8 @@ FIRST HEADER CONTENT
 
 ### FIRST SUB SUB HEADER
 
-:::note This is a note
+:::note
+
+This is a note
+
+:::

example-docs/docs/d-s-l-test3.md

@@ -4,6 +4,6 @@ title: DOC TITLE
 sidebar_label: SIDEBAR LABEL
 ---
 
-# FIRST HEADER
+## FIRST HEADER
 
-# SECOND HEADER
+## SECOND HEADER

example-docs/docusaurus.config.js

@@ -1,14 +1,29 @@
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'My Site',
-  tagline: 'The tagline of my site',
+  tagline: 'Dinosaurs are cool',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'de'],
+    localeConfigs: {
+      en: {
+        label: 'English',
+      },
+      de: {
+        label: 'Deutsch',
+      },
+    },
+  },
   themeConfig: {
     navbar: {
-      title: 'My Site',
+      title: 'My Site With a Much Longer Name',
       logo: {
         alt: 'My Site Logo',
         src: 'img/logo.svg',
@@ -18,6 +33,10 @@ module.exports = {
           type: 'docsVersionDropdown',
           position: 'left',
         },
+        {
+          type: 'localeDropdown',
+          position: 'left',
+        },
         {
           to: 'docs/d-s-l-test',
           activeBasePath: 'docs',
@@ -59,23 +78,23 @@ module.exports = {
               label: 'Discord',
               href: 'https://discordapp.com/invite/docusaurus',
             },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/docusaurus',
+            },
           ],
         },
         {
-          title: 'Social',
+          title: 'More',
           items: [
             {
               label: 'Blog',
-              to: 'blog',
+              to: '/blog',
             },
             {
               label: 'GitHub',
               href: 'https://github.com/facebook/docusaurus',
             },
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
-            },
           ],
         },
       ],
@@ -86,18 +105,17 @@ module.exports = {
     [
       '@docusaurus/preset-classic',
       {
-        blog: {
-          feedOptions: {
-            type: 'all',
-            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
-          },
-        },
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
+          // Please change this to your repo.
           editUrl:
             'https://github.com/facebook/docusaurus/edit/master/website/',
-          showLastUpdateAuthor: true,
-          showLastUpdateTime: true
+        },
+        blog: {
+          showReadingTime: true,
+          // Please change this to your repo.
+          editUrl:
+            'https://github.com/facebook/docusaurus/edit/master/website/blog/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

example-docs/package.json

@@ -1,24 +1,29 @@
 {
-  "name": "example-docs",
+  "name": "example-docs-2",
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
-    "serve": "docusaurus serve"
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.70",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.70",
+    "@docusaurus/core": "^2.0.0-alpha.75",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.75",
+    "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.5%",
       "not dead",
       "not op_mini all"
     ],

example-docs/sidebars.js

@@ -1,3 +1,14 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
 module.exports = {
   someSidebar: {
     Docusaurus: ['d-s-l-test', 'd-s-l-test2', 'd-s-l-test3'],