nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs(website): package website part2

Browse source
This commit is contained in:
Shipow 2020-11-26 15:01:25 +01:00
parent 47e73d0762
commit 1f28195487
155 changed files with 21298 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/website/.gitignore vendored Normal file
View file

@ -0,0 +1,30 @@
# dependencies
node_modules/
# production
build/
# generated files
.docusaurus
.cache-loader
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# legacy
coverage/
dist/
.idea/
.vscode/
dist-es5-module/
tmp
docs/.textlintcache
.netlify

1
packages/website/.nvmrc Normal file
View file

@ -0,0 +1 @@
v14.6.0

5
packages/website/.prettierrc.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
proseWrap: 'always',
singleQuote: true,
trailingComma: 'es5',
};

209
packages/website/.textlint.terms.json Normal file
View file

@ -0,0 +1,209 @@
[
"3D",
"API",
"Airbnb",
"Ajax",
"Algolia",
"Android",
"BrowserStack",
"Browsersync",
"CSS",
"CodePen",
"CodeSandbox",
"Codecov",
"DocSearch",
"ECMAScript",
"ESLint",
"EditorConfig",
"GIF",
"GitHub",
"GraphQL",
"HTML",
"HTTPS",
"ID",
"InstantSearch",
"IoT",
"I/O",
"JPEG",
"JavaScript",
"JetBrains",
"LinkedIn",
"Lodash",
"MIME",
"MacBook",
"Markdown",
"OK",
"OpenType",
"PDF",
"PNG",
"PaaS",
"SaaS",
"Sass",
"SemVer",
"TypeScript",
"URL",
"UglifyJS",
"WebStorm",
"WordPress",
"YouTube",
"advancedSyntax",
"allowCompressionOfIntegerArray",
"allowTyposOnNumericTokens",
"alternativesAsExact",
"analyticsTags",
"aroundLatLngViaIP",
"aroundLatLng",
"aroundPrecision",
"aroundRadius",
"aroundRadius",
"attributeForDistinct",
"attributesForFaceting",
"attributesToHighlight",
"attributesToRetrieve",
"attributesToSnippet",
"camelCaseAttributes",
"clickAnalytics",
"customRanking",
"decompoundedAttributes",
"disableExactOnAttributes",
"disablePrefixOnAttributes",
"disableTypoToleranceOnAttributes",
"disableTypoToleranceOnWords",
"enableRules",
"exactOnSingleWordQuery",
"e-commerce",
"facetFilters",
"facetingAfterDistinct",
"getRankingInfo",
"highlightPostTag",
"highlightPreTag",
"hitsPerPage",
"iOS",
"ignorePlurals",
"insideBoundingBox",
"insidePolygon",
"jQuery",
"maxFacetHits",
"maxValuesPerFacet",
"minProximity",
"minWordSizefor1Typo",
"minWordSizefor2Typos",
"minimumAroundRadius",
"npm",
"numericAttributesForFiltering",
"numericFilters",
"open source",
"optionalFilters",
"optionalWords",
"pagehitsPerPagepagination",
"paginationLimitedTo",
"percentileComputation",
"queryType",
"removeStopWords",
"removeWordsIfNoResults",
"replaceSynonymsInHighlight",
"responseFields",
"restrictHighlightAndSnippetArrays",
"restrictSearchableAttributes",
"ruleContexts",
"searchableAttributes",
"searchableAttributes",
"separatorsToIndex",
"snippetEllipsisText",
"sortFacetValuesBy",
"sumOrFiltersScores",
"tagFilters",
"typoTolerance",
"unretrievableAttributes",
["3-D", "3D"],
["Aloglia", "Algolia"],
["CLI tool(s?)", "command-line tool$1"],
["HTTP[ /]2(?:\\.0)?", "HTTP/2"],
["I-O", "I/O"],
["JSDocs?", "JSDoc"],
["Mac ?OS", "macOS"],
["Nodejs", "Node.js"],
["OS X", "macOS"],
["React[ .]js", "React"],
["SauceLabs", "Sauce Labs"],
["StackOverflow", "Stack Overflow"],
["an URL", "a URL"],
["auto[- ]complete", "autocomplete"],
["auto[- ]fixing", "autofixing"],
["auto[- ]fix", "autofix"],
["auto[- ]format", "autoformat"],
["a npm", "an npm"],
["backwards compatible", "backward compatible"],
["back[- ]end(\\w*)", "backend$1"],
["bug[- ]fix(es?)", "bugfix$1"],
["build system(s?)", "build tool$1"],
["built ?in", "built-in"],
["check[- ]box(es?)", "checkbox$1"],
["client ?side", "client-side"],
["code-?review(s?)", "code review$1"],
["code-?splitting", "code splitting"],
["code[- ]base(es?)", "codebase$1"],
["command ?line", "command-line"],
["co[- ]locate(d?)", "colocate$1"],
["css-?in-?js", "CSS in JS"],
["datas", "data"],
["ecommerce", "e-commerce"],
["end ?to ?end", "end-to-end"],
["end-?user(s?)", "end user$1"],
["end[- ]point(s?)", "endpoint$1"],
["environemnt(s?)", "environment$1"],
["error ?prone", "error-prone"],
["e commerce", "e-commerce"],
["e[- ]mail(s?)", "email$1"],
["falsey", "falsy"],
["feedbacks", "feedback"],
["file-?type(s?)", "file type$1"],
["file[- ]name(s?)", "filename$1"],
["front[- ]end(\\w*)", "frontend$1"],
["he or she", "they"],
["he/she", "they"],
["higher ?order", "higher-order"],
["host[- ]name(s?)", "hostname$1"],
["hot[- ]key(s?)", "hotkey$1"],
["id(s?)", "ID$1"],
["informations", "information"],
["key[/ ]?value", "key-value"],
["life[- ]cycle", "lifecycle"],
["life[- ]stream(s?)", "lifestream$1"],
["lock[- ]file(s?)", "lockfile$1"],
["mark-up", "markup"],
["meta[- ]data", "metadata"],
["name[- ]space(s?)", "namespace$1"],
["one URLs", "one URL"],
["opensource([\\.,]?)", "open source$1"],
["open-source([\\.,]?)", "open source$1"],
["pacakge(s?)", "package$1"],
["pre[- ]condition(s?)", "precondition$1"],
["pre[- ]defined", "predefined"],
["pre[- ]release(s?)", "prerelease$1"],
["regexp?(s?)", "regular expression$1"],
["repo\\b", "repository"],
["run[- ]time", "runtime"],
["screen[- ]shot(s?)", "screenshot$1"],
["screen[- ]?snap(s?)", "screenshot$1"],
["server ?side", "server-side"],
["slave(s?)", "replica$1"],
["smartphone(s?)", "mobile phone$1"],
["source-?map(s?)", "source map$1"],
["styled ?components", "styled-components"],
["style-?guide(s?)", "style guide$1"],
["style-?sheet(s?)", "style sheet$1"],
["sub[- ]class((?:es|ing)?)", "subclass$1"],
["sub[- ]tree(s?)", "subtree$1"],
["tilda", "tilde"],
["time[- ]stamp(s?)", "timestamp$1"],
["touch[- ]screen(s?)", "touchscreen$1"],
["tree-?shaking", "tree shaking"],
["user-?base", "user base"],
["user[- ]name(s?)", "username$1"],
["walk[- ]through", "walkthrough"],
["web-?page(s?)", "web page$1"],
["white[- ]space", "whitespace"],
["wild[- ]card(s?)", "wildcard$1"],
["wi[- ]?fi", "Wi-Fi"]
]

37
packages/website/.textlintrc.js Normal file
View file

@ -0,0 +1,37 @@
/* eslint-disable import/no-commonjs */
const textlintMode = process.env.TEXTLINT_MODE;
const allRules = {
alex: {
allow: ['color', 'hook', 'host-hostess', 'itch'],
},
'common-misspellings': true,
'en-capitalization': true,
'stop-words': {
exclude: [
'relative to', // We need to talk about links "relative to the root",
'pick out', // Needed word, not to clumsy
'encounter', // Needed word, not to clumsy
],
},
terminology: {
defaultTerms: false,
terms: `${__dirname}/.textlint.terms.json`,
},
'write-good': {
passive: true,
severity: 'warning',
},
};
// Not all rules are automatically fixable, so when running `yarn run
// lint:md:fix`, we only run the one that can be fixed.
const fixableRules = {
'common-misspellings': allRules['common-misspellings'],
'en-capitalization': allRules['en-capitalization'],
terminology: allRules['terminology'],
};
module.exports = {
rules: textlintMode === 'fix' ? fixableRules : allRules,
};

36
packages/website/CONTRIBUTING.md Normal file
View file

@ -0,0 +1,36 @@
# Documentation
This website is built using Docusaurus 2, a modern static website generator.
## Installation
```
$ yarn
```
## Local Development
```
$ 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.
## Build
```
$ yarn build
```
This command generates static content into the `build` directory and can be
served using any static contents hosting service.
## Deployment
```
$ GIT_USER=<Your GitHub username> USE_SSH=1 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.

21
packages/website/LICENSE Normal file
View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2015 Algolia
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

53
packages/website/README.md Executable file
View file

@ -0,0 +1,53 @@
[![DocSearch][1]][2]
The easiest way to add search to your documentation. For free.
[![Netlify Status][3]][4]
DocSearch will crawl your documentation website, push its content to an Algolia
index, and allow you to add a dropdown search menu for your users to find
relevant content in no time.
Check out our [website][2] for a complete explanation and documentation.
[![Bootstrap demo][5]][2]
## Related projects
DocSearch gathers 4 repositories:
- [algolia/docsearch][6] contains the `docsearch.js` code source.
- [algolia/docsearch-configs][7] contains the JSON files representing all the
configs for all the documentations DocSearch is powering
- [algolia/docsearch-scraper][8] contains the crawler we use to extract data
from your documentation. The code is open source and you can run it from a
Docker image
- [algolia/docsearch-website][9] contains the documentation website built
[thanks to docusaurus 2][10]
## Website
### Installation
1. `yarn install` in the root of this repository (one level above this
directory).
1. In this directory, do `yarn start`.
1. A browser window will open up, pointing to the docs.
### Deployment
Netlify handles the deployment of this website. If you are part of the DocSearch
core team. [Access the Netlify Dashboard][11].
[1]: ./static/img/docsearch-logo.svg
[2]: https://docsearch.algolia.com/
[3]:
https://api.netlify.com/api/v1/badges/30eacc09-d4b2-4a53-879b-04d40aaea454/deploy-status
[4]: https://app.netlify.com/sites/docsearch/deploys
[5]: ./static/img/demos/example-bootstrap.gif
[6]: https://github.com/algolia/docsearch
[7]: https://github.com/algolia/docsearch-configs
[8]: https://github.com/algolia/docsearch-scraper
[9]: https://github.com/algolia/docsearch-website
[10]: https://v2.docusaurus.io/
[11]: https://app.netlify.com/sites/docsearch/overview

12
packages/website/docs/apply.mdx Normal file
View file

@ -0,0 +1,12 @@
---
title: Apply for DocSearch
sidebar_label: Apply Now!
---
Please make sure you [read the checklist][1] **before** applying.
[1]: who-can-apply.md
import ApplyForm from "@site/src/components/ApplyForm.js";
<ApplyForm />

680
packages/website/docs/config-file.md Normal file
View file

@ -0,0 +1,680 @@
---
title: Config Files
---
For each DocSearch request we receive, we create a custom JSON configuration
file that defines how the crawler should behave. You can find all the configs in
[this repository][1].
A DocSearch looks like this:
```json
{
"index_name": "example",
"start_urls": ["https://www.example.com/docs"],
"selectors": {
"lvl0": "#content header h1",
"lvl1": "#content article h1",
"lvl2": "#content section h3",
"lvl3": "#content section h4",
"lvl4": "#content section h5",
"lvl5": "#content section h6",
"text": "#content header p,#content section p,#content section ol"
}
}
```
## `index_name`
This is the name of the Algolia index where your records will be pushed. The
`apiKey` we will share with you is restricted to work with this index and [is a
search-only key][2].
When using the free DocSearch crawler, the `indexName` will always be the name
of the configuration file. If you're running DocSearch yourself, you can use any
name you'd like.
```json
{
"index_name": "example"
}
```
When the DocSearch scraper runs, it builds a temporary index. Once scraping is
complete, it moves that index to the name specified by `index_name` (replacing
the existing index).
By default, the name of the temporary index is the value of `index_name` +
_\_tmp_.
To use a different name, set the `INDEX_NAME_TMP` environment variable to a
different value. This variable can be set in the .env file alongside
`APPLICATION_ID` and `API_KEY`.
## `start_urls`
This array contains the list of URLs that will be used to start crawling your
website. The crawler will recursively follow any links (`<a>` tags) from those
pages. It will not follow links that are on another domain and never follow
links matching `stop_urls`.
```json
{
"start_urls": ["https://www.example.com/docs"]
}
```
### `selectors_key`, tailor your selectors
You can define finer sets of selectors depending on the URL. You need to use the
parameter `selectors_key` from your `start_urls`.
```json
{
"start_urls": [
{
"url": "http://www.example.com/docs/faq/",
"selectors_key": "faq"
},
{
"url": "http://www.example.com/docs/"
}
],
[…],
"selectors": {
"default": {
"lvl0": ".docs h1",
"lvl1": ".docs h2",
"lvl2": ".docs h3",
"lvl3": ".docs h4",
"lvl4": ".docs h5",
"text": ".docs p, .docs li"
},
"faq": {
"lvl0": ".faq h1",
"lvl1": ".faq h2",
"lvl2": ".faq h3",
"lvl3": ".faq h4",
"lvl4": ".faq h5",
"text": ".faq p, .faq li"
}
}
}
```
To find the right subset to use based on the URL, the scraper iterates over
these `start_urls` items. Only the first one to match is applied.
Considering the URL `http://www.example.com/en/api/` with the configuration:
```json
{
"start_urls": [
{
"url": "http://www.example.com/doc/",
"selectors_key": "doc"
},
{
"url": "http://www.example.com/doc/faq/",
"selectors_key": "faq"
},
[…],
]
}
```
Only the set of selectors related to `doc` will be applied to the URL. The
correct configuration should be built the other way around (as primarily
described).
If one `start_urls` item has no `selectors_key` defined, the `default` set will
be used. Do not forget to set this fallback set of selectors.
### Using regular expressions
The `start_urls` and `stop_urls` options also enable you to use regular
expressions to express more complex patterns. This object must at least contain
a `url` key targeting a reachable page.
You can also define a `variables` key that will be injected into your specific
URL pattern. The following example makes this variable feature clearer:
```json
{
"start_urls": [
{
"url": "http://www.example.com/docs/(?P<lang>.*?)/(?P<version>.*?)/",
"variables": {
"lang": ["en", "fr"],
"version": ["latest", "3.3", "3.2"]
}
}
]
}
```
The beneficial side effect of using this syntax is that every record extracted
from pages matching `http://www.example.com/docs/en/latest` will have attributes
`lang: en` and `version: latest`. It enables you to filter on [these
`facetFilters`][3].
The following example shows how the UI filters results matching a specific
language and version.
```js
docsearch({
[…],
searchParameters: {
'facetFilters': ["lang:en", "version:latest"]
},
[…],
});
```
### Using custom tags
You can also apply custom tags to some pages without the need to use regular
expressions. In that case, add the list of tags to the `tags` key. Note that
those tags will be automatically added as facets in Algolia, allowing you to
filter based on their values as well.
```json
{
"start_urls": [
{
"url": "http://www.example.com/docs/concepts/",
"tags": ["concepts", "terminology"]
}
]
}
```
From the JS snippet:
```js
docsearch({
[…],
searchParameters: {
'facetFilters': ["tags:concepts"]
},
});
```
### Using Page Rank
To give more weight to some pages. This parameter helps to boost records built
from the page. Pages with highest `page_rank` will be returned before pages with
a lower `page_rank`. Note that you can pass any numeric value, including
negative values.
```json
{
"start_urls": [
{
"url": "http://www.example.com/docs/concepts/",
"page_rank": 5
},
{
"url": "http://www.example.com/docs/contributors/",
"page_rank": 1
}
]
}
```
In this example, records built from the _Concepts_ page will be ranked higher
than results extracted from the _Contributors_ page.
### Using custom selectors per page
If the markup of your website is so different from one page to another that you
can't have generic selectors, you can namespace your selectors and specify which
set of selectors should be applied to specific pages.
```json
{
"start_urls": [
"http://www.example.com/docs/",
{
"url": "http://www.example.com/docs/concepts/",
"selectors_key": "concepts"
},
{
"url": "http://www.example.com/docs/contributors/",
"selectors_key": "contributors"
}
],
"selectors": {
"default": {
"lvl0": ".main h1",
"lvl1": ".main h2",
"lvl2": ".main h3",
"lvl3": ".main h4",
"lvl4": ".main h5",
"text": ".main p"
},
"concepts": {
"lvl0": ".header h2",
"lvl1": ".main h1.title",
"lvl2": ".main h2.title",
"lvl3": ".main h3.title",
"lvl4": ".main h5.title",
"text": ".main p"
},
"contributors": {
"lvl0": ".main h1",
"lvl1": ".contributors .name",
"lvl2": ".contributors .title",
"text": ".contributors .description"
}
}
}
```
Here, all documentation pages will use the selectors defined in
`selectors.default` while the page under `./concepts` will use
`selectors.concepts` and those under `./contributors` will use
`selectors.contributors`.
## `selectors`
This object contains all the CSS selectors that will be used to create the
record hierarchy. It can contain up to 6 levels (`lvl0`, `lvl1`, `lvl2`, `lvl3`,
`lvl4`, `lvl5`) and `text`.
A default config would be to target the page `title` or `h1` as `lvl0`, the `h2`
as `lvl1`, `h3` as `lvl2`, and `p` as `text`, but this is highly dependent on
the markup.
The `text` key is mandatory, but we highly recommend setting also `lvl0`, `lvl1`
and `lvl2` to have a decent depth of relevance.
```json
{
"selectors": {
"lvl0": "#content header h1",
"lvl1": "#content article h1",
"lvl2": "#content section h3",
"lvl3": "#content section h4",
"lvl4": "#content section h5",
"lvl5": "#content section h6",
"text": "#content header p,#content section p,#content section ol"
}
}
```
Selectors can be passed as strings, or as objects containing a `selector` key.
Other special keys can be set, as documented below.
```json
{
"selectors": {
"lvl0": {
"selector": "#content header h1"
}
}
}
```
### Using global selectors
The default way of extracting content through selectors is to read the HTML
markup from top to bottom. This works well with semi-structured content, like a
hierarchy of headers. This breaks when the relevant information is not part of
the same flow. For example when the title is not part of a header or sidebar.
For that reason, you can set a selector as global, meaning that it will match on
the whole page and will be the same for all records extracted from this page.
```json
{
"selectors": {
"lvl0": {
"selector": "#content header h1",
"global": true
}
}
}
```
We do not recommend `text` selectors to be global.
### Setting a default value
If a selector doesn't match a valid element on the page, you can define a
`default_value` as a fallback.
```json
{
"selectors": {
"lvl0": {
"selector": "#content header h1",
"default_value": "Documentation"
}
}
}
```
### Removing unnecessary characters
Some documentation adds special characters to headings, like `#` or `›`. Those
characters have a stylistic value but no meaning and shouldn't be indexed in the
search results.
You can define a list of characters you want to exclude from the final indexed
value by setting the `strip_chars` key.
```json
{
"selectors": {
"lvl0": {
"selector": "#content header h1",
"strip_chars": "#›"
}
}
}
```
Note that you can also define `strip_chars` directly at the root of the
configuration and it will be applied to all selectors.
```json
{
"strip_chars": "#›"
}
```
### Targeting elements using XPath instead of CSS
CSS selectors are a clear and concise way to target elements of a page, but they
have a limitations. For example, you cannot go up the cascade with CSS.
If you need a more powerful selector mechanism, you can write your selectors
using XPath by setting `type: xpath`.
The following example will look for a `li.chapter.active.done` and then go up
two levels in the DOM until it finds a `a`. The content of this `a` will then be
used as the value of the `lvl0` selector.
```json
{
"selectors": {
"lvl0": {
"selector": "//li[@class=\"chapter active done\"]/../../a",
"type": "xpath",
"global": true
}
}
}
```
XPath selector can be hard to read. We highly encourage you to test them in your
browser first, making sure they match what you're expecting.
### `custom_settings` _Optional_
This key can be used to overwrite your Algolia index settings. We don't
recommend changing it as the default settings are meant to work for all
websites.
### `custom_settings.separatorsToIndex`_Optional_
One use case would be to configure the `separatorsToIndex` setting. By default
Algolia will consider all special characters as a word separator. In some
contexts, like for method names, you might want `_`, `/` or `#` to keep their
meaning.
```json
{
"custom_settings": {
"separatorsToIndex": "_/"
}
}
```
Check the [Algolia documentation][4] for more information about the Algolia
settings.
### `custom_settings.synonyms` _Optional_
`custom_settings` can include a `synonyms` key that is an array of synonyms.
Each element is an array of one-word synonym. These words are interchangeable.
For example:
```json
"custom_settings": {
"synonyms": [
[
"js",
"javascript"
],
[
"es6",
"ECMAScript6",
"ECMAScript2015"
]
]
},
```
_Note that you can use [advanced synonym with Algolia][5]. Our scraper only
supports regular one-word synonyms._
### `scrape_start_urls` _Optional_
By default, the crawler will extract content from the pages defined in
`start_urls`. If you do not have any valuable content on your `starts_urls` or
if it's a duplicate of another page, you should set this to `false`.
```json
{
"scrape_start_urls": false
}
```
### `selectors_exclude` _Optional_
This expects an array of CSS selectors. Any element matching one of those
selectors will be removed from the page before any data is extracted from it.
This can be used to remove a table of content, a sidebar, or a footer, to make
other selectors easier to write.
```json
{
"selectors_exclude": [".footer", "ul.deprecated"]
}
```
### `stop_urls` _Optional_
This is an array of strings or regular expressions. Whenever the crawler is
about to visit a link, it will first check if the link matches something in the
array. If it does, it will not follow the link. This should be used to restrict
pages the crawler should visit.
Note that this is often used to avoid duplicate content, by adding
`http://www.example.com/docs/index.html` if you already have
`http://www.example.com/docs/` as a `start_urls`.
```json
{
"stop_urls": ["https://www.example.com/docs/index.html", "license.html"]
}
```
### `min_indexed_level` _Optional_
The default value is `0`. By increasing it, you can choose not to index some
records if they don't have enough `lvlX` matching. For example, with a
`min_indexed_level: 2`, the scraper indexes temporary records having at least
`lvl0`, `lvl1` and `lvl2` set. You can [find out more details about this
strategy in this section][6].
This is useful when your documentation has pages that share the same `lvl0` and
`lvl1` for example. In that case, you don't want to index all the shared
records, but want to keep the content different across pages.
```json
{
"min_indexed_level": 2
}
```
### `only_content_level` _Optional_
When `only_content_level` is set to `true`, then the crawler won't create
records for the `lvlX` selectors.
If used, `min_indexed_level` is ignored.
```json
{
"only_content_level": true
}
```
### `nb_hits` _Special_
The number of records that were extracted and indexed by DocSearch. We check
this key internally to keep track of any unintended spike or drop that could
reveal a misconfiguration.
`nb_hits` is updated automatically each time you run DocSearch on your config.
If the term is a tty, DocSearch will prompt you before updating the field. To
avoid being prompted, set the `UPDATE_NB_HITS` environment variable to `true`
(to enable) or `false` (to disable). This variable can be set in the .env file
alongside `APPLICATION_ID` and `API_KEY`.
You don't have to edit this field. We're documenting it here in case you were
wondering what it's all about.
## Sitemaps
If your website has a `sitemap.xml` file, you can let DocSearch know and it will
use it to define which pages to crawl.
### `sitemap_urls` _Optional_
You can pass an array of URLs pointing to your sitemap(s) files. If this value
is set, DocSearch will try to read URLs from your sitemap(s) instead of
following every link of your `starts_urls`.
```json
{
"sitemap_urls": ["http://www.example.com/docs/sitemap.xml"]
}
```
You must explicitly defined this parameter, our scraper doesn't follow
`robots.txt`
### `sitemap_alternate_links` _Optional_
Sitemaps can contain _alternative links_ for URLs. Those are other versions of
the same page, in a different language, or with a different URL. By default
DocSearch will ignore those URLs.
Set this to `true` if you want those other versions to be crawled as well.
```json
{
"sitemap_urls": ["http://www.example.com/docs/sitemap.xml"],
"sitemap_alternate_links": true
}
```
With the above configuration and the `sitemap.xml` below, both
`http://www.example.com/docs/` and `http://www.example.com/docs/de/` will be
crawled.
```xml
<url>
<loc>http://www.example.com/docs/</loc>
<xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/de/"/>
</url>
```
## JavaScript rendering
By default DocSearch expects websites to have server-side rendering, meaning
that HTML source is returned directly by the server. If your content is
generated by the front-end, you have to tell DocSearch to emulate a browser
through Selenium.
_As client-side crawl is way slower than server-side crawl, we highly encourage
you to update your website to enable server-side rendering._
### `js_render` _Optional_
Set this value to true if your website requires client-side rendering. This will
make DocSearch spawn a Selenium proxy to fetch all your web pages.
```json
{
"js_render": true
}
```
### `js_wait` _Optional_
If your website is slow to load, you can use `js_wait` to tell DocSearch to wait
a specific amount of time (in seconds) for the page to load before extracting
its content.
Note that this option might have a large impact on the time required to crawl
your website and we would encourage you to enable server-side rendering on your
website instead.
This option has no impact if `js_render` is set to `false`.
```json
{
"js_render": true,
"js_wait": 2
}
```
### `use_anchors` _Optional_
Websites using client-side rendering often don't use full URLs, but instead take
advantage of the URL hash (the part after the `#`).
If your website is using such URLs, you should set `use_anchors` to `true` for
DocSearch to index all your content.
```json
{
"js_render": true,
"use_anchors": true
}
```
### `user_agent` _Optional_
You can override the user agent used to crawl your website. By default, this
value is:
Algolia DocSearch Crawler
However, if the crawl of your website requires a browser emulation (i.e.
`js_render=true`), our `user_agent` is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/71.0.3578.98 Safari/537.36
To override it, from the configuration:
```json
{
"user_agent": "Custom Bot"
}
```
[1]: https://github.com/algolia/docsearch-configs/tree/master/configs
[2]: https://www.algolia.com/doc/guides/security/api-keys/#search-only-api-key
[3]: https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/
[4]: https://www.algolia.com/doc/api-reference/settings-api-parameters/
[5]:
https://www.algolia.com/doc/guides/managing-results/optimize-search-results/adding-synonyms/#the-different-types-of-synonyms
[6]: https://www.algolia.com/doc/api-reference/settings-api-parameters/

188
packages/website/docs/faq.md Normal file
View file

@ -0,0 +1,188 @@
---
title: FAQ
---
If you're not finding the answer to your question on this website, this page
will help you. If you're still unsure, don't hesitate to send [your question to
us][1] directly.
## How often will you crawl my website?
Every day.
The exact time of day might vary each day, but we'll crawl your website at most
every 24 hours.
## What do I need to install on my side?
Nothing.
The DocSearch crawler is running on our own infra. It reads the HTML content
from your website and populates an Algolia index every day. All you need to do
is keep your website online, and we take care of the rest. To edit your
configuration, please [submit a pull request][14].
## How much does it cost?
Nothing.
We know that paying for search infrastructure is a cost not all open source
projects can afford. That's why we decided to keep DocSearch free for everyone.
All we ask in exchange is that you keep the "Search by [Algolia][2]" logo
displayed next to the search results.
If this is not possible for you, you're free to [open your own Algolia
account][3] and run DocSearch on your own without this limitation. In that case,
though, depending on the size of your documentation, you might need a paid
account (free accounts can hold as much as 10k records).
## What data are you collecting?
We save the data we extract from your website markup, which we put in a custom
JSON format instead of HTML. This is the data we put in the Algolia DocSearch
index. The selectors in your config define what data to scrape.
As the website owner, we also give you access to the [Algolia Analytics][15]
dashboard. This will let you have more data about the anonymized searches in
your website. You'll see the most searched terms, or those that lead to no
results.
With such analytics, you will better understand what your users are searching
for.
_If you don't have Analytics access, [send us an email][1] and we'll enable it._
## Where is my data hosted?
We host the DocSearch data on Algolia's servers, with replications around the
globe. You can find more details about the actual [server specs here][4], and
more complete information in our [privacy policy][5].
## Can I use DocSearch on non-doc pages?
The free DocSearch we provide will crawl documentation pages. To use it on other
parts of your website, you'll need to create your own Algolia account and
either:
- Run the [DocSearch crawler][6] on your own
- Use one of our other [framework integrations or API clients][7]
## Can you index code samples?
Yes, but we do not recommend it.
Code samples are a great way for humans to understand how people use a specific
method. It often requires boilerplate code though, repeated across examples,
which adds noise to the results.
What we recommend instead is to exclude the code blocks from the indexing (by
using the `selectors_exclude` option in your config), and instead structure your
content so the method names are present in the headers.
## Why do I have duplicate content in my results?
This can happen when you have more than one URL pointing to the same content,
for example with `./docs`, `./docs/` and `./docs/index.html`.
You set the `stop_urls` to all the patterns you want to exclude. The following
example will exclude all URLs ending with `/` or `index.html`
```json
{
"stop_urls": ["/$", "/index.html$"]
}
```
## Why are custom changes from the Algolia dashboard ineffective?
Changing your setting from the dashboard might be something you want to do for
some reasons .
Every successful crawl sets the DocSearch settings. These settings will be
overridden at the next crawl. We **do not recommend to edit anything from the
dashboard**. These changes come from the JSON configuration itself.
You can use the [custom_settings parameter][8] for such purpose.
## A documentation website I like does not use DocSearch. What can I do?
We'd love to help!
If one of your favorite tool documentation websites is missing DocSearch, we
encourage you to file an issue in their repository explaining how DocSearch
could help. Feel free to [send us an email][1] as well, and we'll provide all
the help we can.
## How many records does the DocSearch crawl create?
The [`nb_hits` property][8] in your configuration keeps track of the number of
records the crawl has extracted and indexed by the last DocSearch run. A crawl
updates this number automatically.
The DocSearch scraper follows [the recommended atomic-reindexing strategy][9].
It creates a brand new temporary index to populate the data scraped from your
website. When successful, the crawl overwrites the old index defined in your
configuration with the key `index_name`.
## Why aren't my pages indexed?
We are scraping your website according to your configuration. It might happen
that some pages are missing from the search. Some possible reasons for that are:
- Makes sure you are not filtering on the search by wrongly using
`facetFilters`. [See here for more details][10].
- Make sure that an other indexed page references the page missing with an
hyperlink tag `<a/>`.
- Make sure you are [providing a compliant sitemap from the configuration][11]
and that it references the page.
## Can I know when the next crawl will happen?
No you can't. You should be aware that we made every crawls in a day. The
position of your crawl in the queue is the lexicographic order of your
`index_name` amongs the whole list of featured website.
If none of the previous points help, you [can contact our support][1].
## How did we build this website?
We build this website with [Docusaurus v2][12]. We were helped by a great man
who inspired us a lot, Endi. We want [to pay a tribute to this exceptional human
being that will be always part of the DocSearch project][13]. Rest in peace
mate!
## What is the timeline on the v3?
We are pre-releasing the v3 on docusaurus 2. It will help us to iterate faster
on it and make sure we are ready to release a vanilla version. We will provide a
migration guide to help you move on this new version. If you want to have more
information on this version, you can [watch the search party we made about this
topic][16].
## Can I share the `apiKey` in my repo?
The `apiKey` the DocSearch team provides is [a search-only key][16] and can be
safely shared publicly. You can track it in your version control system (e.g.
git). If you are running the scraper on your own, please make sure to create a
search-only key and [do not share your Admin key][18].
[1]: mailto:docsearch@algolia.com
[2]: https://www.algolia.com/
[3]: https://www.algolia.com/pricing
[4]: https://www.algolia.com/doc/guides/infrastructure/servers/
[5]: https://www.algolia.com/policies/privacy
[6]: run-your-own.md
[7]: https://www.algolia.com/doc/api-reference/
[8]: config-file.md
[9]:
https://www.algolia.com/doc/guides/sending-and-managing-data/send-and-update-your-data/in-depth/asynchronicity-and-when-to-wait-for-tasks/#atomic-reindexing
[10]: https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/
[11]: tips.md
[12]: https://v2.docusaurus.io/
[13]: https://docusaurus.io/blog/2020/01/07/tribute-to-endi
[14]: https://github.com/algolia/docsearch-configs/pulls
[15]:
https://www.algolia.com/doc/guides/getting-insights-and-analytics/search-analytics/understand-reports/
[16]: https://youtu.be/OXRjnG7SHJM
[17]: https://www.algolia.com/doc/guides/security/api-keys/#search-only-api-key
[18]: https://www.algolia.com/doc/guides/security/api-keys/#admin-api-key

82
packages/website/docs/how-do-we-build-an-index.mdx Normal file
View file

@ -0,0 +1,82 @@
---
id: how-do-we-build-an-index
title: How do we build a DocSearch index?
---
import useBaseUrl from '@docusaurus/useBaseUrl';
In this section you will learn how we build a DocSearch index from your page.
## Everything starts from your page
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_1.png')}
alt="1st step"
/>
## We extract the payload with to your set of `selectors`
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_2.png')}
alt="2nd step"
/>
We will focus on the highlighted information depending on your selectors.
## We iterate through the HTML flow and build the payload
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_3.png')}
alt="3rd step"
/>
This payload will be the only data extracted from your page.
## We iterate through the payload and start pushing records
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_4.png')}
alt="4th step"
/>
We index the temporary record when we add an element to it (if
`min_indexed_level` equals `0`)
## We pile up the elements based on the current temporary record
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_5.png')}
alt="5th step"
/>
Base on the position within the flow, we nest elements as much as possible to
keep the context and incerease the relevancy.
## We iterate until we match a `text` element
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_6.png')}
alt="6th step"
/>
## We override the text element when we find a newer one
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_7.png')}
alt="7th step"
/>
## We remove the stashed, deeper elements when we add a higher level
<img
src={useBaseUrl('img/build_index/how_do_we_build_docsearch_index_8.png')}
alt="8th step"
/>
Contextual information and hierarchy must be updated once we encounter a new
level. We are doing that because it highlights a new sub-section not related to
the previous one.
If you need any further information, please [contact us][1].
[1]: mailto:docsearch@algolia.com

59
packages/website/docs/how-does-it-work.mdx Normal file
View file

@ -0,0 +1,59 @@
---
title: How does it work?
---
import useBaseUrl from '@docusaurus/useBaseUrl';
Getting up and ready with DocSearch is a straightforward process that requires
three steps: you apply, we configure the crawler for you, and you integrate our
Search-UI in your frontend. You only need to copy and paste a JavaScript
snippet.
<img
src={useBaseUrl('img/assets/docsearch-how-it-works.png')}
alt="How it works"
/>
## You apply
The first thing you'll need to do is to apply for DocSearch by [filling out the
form on this page][1] (double check first that [you qualify][2]). We are
receiving a lot of requests, so this form makes sure we won't be forgetting
anyone.
We guarantee that we will answer every request, but as we receive a lot of
applications, please give us a couple of days to get back to you :)
## We create a configuration
Once we receive [your application][1], we'll have a look at your website and
create a custom configuration file for it. This file defines which URLs we
should crawl or ignore, as well as the specific CSS selectors to use for
selecting headers, subheaders, etc. All configs are publicly available in our
[config repository][3].
This step still requires some manual work and human brain, but thanks to the +1
000 configs we already created, we're able to automate most of it. Once this
creation finishes, we'll run a first indexing of your website and have it run
automatically every 24 hours.
## You update your website
We'll then get back to you with the JavaScript snippet you'll need to add to
your website. This will bind your search `input` field to display results from
your Algolia index on each keystroke in a dropdown menu.
The default styling of the dropdown uses a grey theme to fit in most designs. We
have made the dropdown with HTML using custom CSS classes and we recommend that
[you overwrite those classes][4] to provide a theming more in line with the rest
of your website.
Now that DocSearch is set, you don't have anything else to do. We'll keep
crawling your website every day and update your search results automatically.
All we ask is that you keep the "Search by Algolia" logo next to your search
results.
[1]: apply.mdx
[2]: who-can-apply.md
[3]: https://github.com/algolia/docsearch-configs/tree/master/configs
[4]: styling.mdx

70
packages/website/docs/inside-the-engine.md Normal file
View file

@ -0,0 +1,70 @@
---
title: Inside the engine
---
This page explains in more detail how the crawler extracts content from your
page every 24 hours, and how it ranks the results.
## Crawling
Each crawl begins its journey at `start_urls` value specified in your config. It
will read those pages, recursively extract and follow every link in those pages
until it has browsed every compliant page.
If you have explicitly defined a `sitemap.xml`, our crawler will scrape every
provided and compliant page. We do recommend using [a sitemap][1] since it
explicitly exposes URLs to crawl and avoid missing pages that aren't linked from
another one.
## Extracting content
Building records using the scraper is pretty intuitive. Based to your settings,
we extract the payload of your web page and index it, preserving your data
structure. It achieves this in a simple way:
- We **read top down** your web page following your HTML flow and pick out your
matching elements according to their **levels** based on the `selectors_level`
defined.
- We create a record for each paragraph along with its hierarchical path. This
construction is based on their **time of appearance** along the flow.
- We **index** these records with the appropriate global settings (e.g.
metadata, tags, etc.)
_**Note:** The above process performs sanity tests as it scrapes to detect
errors. If there are any serious warnings, it aborts and hence does not
overwrite your current index. These checks ensure that your dedicated index
isn't flushed._
You can [find more explanations in this dedicated section.][2]
## Ranking records
Algolia always returns the most relevant results first, using a [tie-breaking
approach][3]. DocSearch will first search for exact matches in your keywords,
and then fallback to partial matches. It sorts those results, once again, on the
page hierarchy, as extracted from the `selectors`.
The default strategy is to promote records having matching words in the highest
level first. Thus if two results have the same matching words, the one having
them in the highest level (`lvl0`) will be ranked higher. We also use the
position of the matching words. The sooner they appear within the HTML flow, the
higher the record will be ranked.
We base relevancy on several factors and customize it according to the Algolia
tie-breaking method.
You can boost pages depending on their URLs. You should use the `start_urls` and
its `page_rank` attributes. Its value is a numeric value (defaults to 0). The
higher the value is, the higher results from the matching pages are ranked. For
example, all pages with a `page_rank` of 5 will be returned before pages with a
`page_rank` of 1.
You could even change the relevancy strategy by [overwriting the default
`customRanking`][4] used by the index by using the `custom_settings` option of
your config.
[1]: https://www.sitemaps.org/
[2]: how-do-we-build-an-index.mdx
[3]:
https://www.algolia.com/doc/guides/ranking/ranking-formula/#tie-breaking-approach
[4]: https://www.algolia.com/doc/guides/ranking/custom-ranking/

33
packages/website/docs/integrations.md Normal file
View file

@ -0,0 +1,33 @@
---
title: Supported Integrations
---
We worked with **documentation website generators** to have DocSearch directly
embedded as a first class citizen in the websites they produce.
## Our great integrations
So, if you're using one of the following tools, checkout their documentation to
see how to enable DocSearch on your website:
- [Docusaurus][1] - [How to enable search][2]
- [VuePress][3] - [Algolia Search][4]
- [pkgdown][5] - [DocSearch indexing][6]
- [LaRecipe][7] - [Algolia Search][8]
- [Orchid][9] - [Algolia Search][10]
If you're maintaining a similar tool and want us to add you to the list, [get in
touch with us][11]. We'd be happy to help.
[1]: https://docusaurus.io/
[2]: https://docusaurus.io/docs/en/search#docsNav
[3]: https://vuepress.vuejs.org/
[4]:
https://vuepress.vuejs.org/theme/default-theme-config.html#algolia-docsearch
[5]: https://pkgdown.r-lib.org/
[6]: https://pkgdown.r-lib.org/articles/search.html
[7]: https://larecipe.binarytorch.com.my/docs/2.2/overview
[8]: https://larecipe.binarytorch.com.my/docs/2.2/configurations#search
[9]: https://orchid.run
[10]: https://orchid.run/plugins/orchidsearch#algolia-docsearch
[11]: mailto:docsearch@algolia.com

78
packages/website/docs/migration-guide.mdx Normal file
View file

@ -0,0 +1,78 @@
---
title: Migration Guide
---
## Moving from v2 to v3
This article provides a set of guidelines to migrate from v2 to v3.
### 1. Update the imported JS & CSS libraries
```html
<!-- Before the closing </head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
<!-- Before the closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
docsearch({
// See next section for upgrading this JS snippet
});
</script>
```
### 2. Update the JS snippet to instantiate DocSearch
```html
<script>
docsearch({
container: '<YOUR_CSS_SELECTOR>',
apiKey: '<YOUR_API_KEY>',
indexName: '<YOUR_INDEX_NAME>',
});
</script>
```
#### Replace `inputSelector` with `container`
The `container` argument is a [CSS selector][1] matching the HTML element to
feature. This element used to be an `<input/>` with DocSearch v2. The JS snippet
call replaces the first matching element with the DocSearch button. This button
opens the search modal.
For example, the minimalist required structure and imports are:
```html
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
</head>
<body>
<div id="docsearch"></div>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
docsearch({
container: '#docsearch',
apiKey: '<YOUR_API_KEY>',
indexName: '<YOUR_INDEX_NAME>',
});
</script>
</body>
</html>
```
#### Replace `algoliaOptions` with `searchParameters`
With the v2, if you wanted to forward search parameters to the Algolia API, you
needed to set the `algoliaOptions` input. It has been replaced with
`searchParameters`. This argument is [commonly used to filter on specific
`facetFilters`][2] such as version or language. You [can find out the exhaustive
list of `searchParameters` availabe in the Algolia documentation][3].
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
[2]: https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/
[3]: https://www.algolia.com/doc/api-reference/search-api-parameters/

47
packages/website/docs/modal.md Normal file
View file

@ -0,0 +1,47 @@
---
title: Modal Search UI
---
Once your Algolia DocSearch index is ready, set up, and filled with the right
data, you will need to integrate our dedicated search UI. To add this modal
search, you need to include our DocSearch library into your website as per the
following example. You will receive your `apiKey` and `indexName` credentials as
soon as we've deployed your configuration.
```html
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
</head>
<body>
<div id="docsearch"></div>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
docsearch({
container: '#docsearch',
apiKey: '<YOUR_API_KEY>',
indexName: '<YOUR_INDEX_NAME>',
});
</script>
</body>
</html>
```
You need to integrate this snippet into every page that integrates the search
UI.
## Testing
If you're eager to test DocSearch but don't have any credentials of your own
yet, you can try out the ones we use on this website:
```javascript
docsearch({
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
});
```

172
packages/website/docs/required-configuration.md Normal file
View file

@ -0,0 +1,172 @@
---
title: Required configuration
---
This section, [empowered by the details about how we build a DocSearch
index][1], gives you the best practices to optimize our crawl. Adopting this
following specification is required to let our crawler build the best experience
from your website. You will need to update your website and follow these rules.
Note: If your website is generated thanks to one of our supported tool, you do
not need to change your website as it is already compliant with our
requirements.
## The generic configuration example
```json
{
"index_name": "example",
"start_urls": ["https://www.example.com/doc/"],
"sitemap_urls": ["https://www.example.com/sitemap.xml"],
"stop_urls": [],
"selectors": {
"lvl0": {
"selector": ".DocSearch-lvl0",
"global": true,
"default_value": "Documentation"
},
"lvl1": {
"selector": ".DocSearch-lvl1",
"global": true,
"default_value": "Chapter"
},
"lvl2": ".DocSearch-content .DocSearch-lvl2",
"lvl3": ".DocSearch-content .DocSearch-lvl3",
"lvl4": ".DocSearch-content .DocSearch-lvl4",
"lvl5": ".DocSearch-content .DocSearch-lvl5",
"lvl6": ".DocSearch-content .DocSearch-lvl6",
"text": ".DocSearch-content p, .DocSearch-content li"
},
"custom_settings": {
"attributesForFaceting": ["language", "version"]
},
"nb_hits": "OUTPUT OF THE CRAWL"
}
```
### Overview of a clear layout
A website implementing these good practises will look simple and crystal clear.
It can have this following aspect:
<img src="https://docsearch.algolia.com/img/assets/recommended-layout.png" alt="Recommended layout for your page"/>
The main blue element will be your `.DocSearch-content` container. More details
in the following guidelines.
### Use the right classes as [selectors][2]
You can add some specific static classes to help us find your content role.
These classes can not involve any style changes. These dedicated classes will
help us to create a great learn-as-you-type experience from your documentation.
- Add a static class `DocSearch-content` to the main container of your textual
content. Most of the time, this tag is a `<main>` or an `<article>` HTML
element.
- Every searchable `lvl` elements outside this main documentation container (for
instance in a sidebar) must be `global` selectors. They will be globally
picked up and injected to every record built from your page. Be careful, the
level value matters and every matching element must have an increasing level
along the HTML flow. A level `X` (for `lvlX`) should appear after a level `Y`
while `X > Y`.
- `lvlX` selectors should use the standard title tags like `h1`, `h2`, `h3`,
etc. You can also use static classes. Set a unique `id` or `name` attribute to
these elements as detailed below.
- Every DOM elements matching the `lvlX` selectors must have a unique `id` or
`name` attribute. This will help the redirection to directly scroll down to
the exact place of the matching elements. These attributes define the right
anchor to use.
- Every textual element (selector `text`) must be wrapped in a `<p>` or `<li>`
tag. This content must be atomic and splitted into small entities. Be careful
to never nest one matching element into another one as it will create
duplicates.
- Stay consistent and do not forget that we need to have some consistency along
the HTML flow [as presented here][1].
## Introduce global information as meta tags
Our crawler automatically extracts information from our DocSearch specific meta
tags:
```html
<meta name="docsearch:language" content="en" />
<meta name="docsearch:version" content="1.0.0" />
```
The crawl adds the `content` value of these `meta` tags to all records extracted
from the page. The meta tags `name` must follow the `docsearch:$NAME` pattern.
`$NAME` is the name of the attribute set to all records.
You can then [transform these attributes as `facetFilters`][3] to filter over
them from the UI. You will need to set the setting `attributesForFaceting` of
the Algolia index. You need to submit a PR on your associated configuration via
[the DocSearch `custom_settings` setting][4].
```json
"custom_settings": {
"attributesForFaceting": ["language", "version"]
}
```
It enables you to filter on the value of these meta tags. The following example
shows how to update the JS snippet to retrieve records from these pages.
```js
docsearch({
[…],
searchParameters: {
'facetFilters': ["language:en", "version:1.0.0"]
},
[…],
});
```
The `docsearch:version` meta tag can be a set [of comma-separated tokens][5],
each of which is a version relevant to the page. These tokens must be compliant
with [the SemVer specification][6] or only contain alphanumeric characters (e.g.
`latest`, `next`, etc.). As facet filters, these version tokens are
case-insensitive.
For example, all records extracted from a page with the following meta tag:
```html
<meta name="docsearch:version" content="2.0.0-alpha.62,latest" />
```
The `version` attribute of these records will be :
```json
version:["2.0.0-alpha.62" , "latest"]
```
## Nice to have
- Your website should have [an updated sitemap][7]. This is key to let our
crawler know what should be updated. Do not worry, we will still crawl your
website and discover embedded hyperlinks to find your great content.
- Every page needs to have their full context available. Using global elements
might help (see above).
- Make sure your documentation content is also available without JavaScript
rendering on the client-side. If you absolutely need JavaScript turned on, you
need to [set `js_render: true` in your configuration][8].
Any questions? [Send us an email][9].
[1]: how-do-we-build-an-index.mdx
[2]: config-file.md#selectors
[3]:
https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/
[4]: config-file.md#custom_settings-optional
[5]:
https://html.spec.whatwg.org/dev/common-microsyntaxes.html#comma-separated-tokens
[6]: https://semver.org/
[7]: https://www.sitemaps.org/
[8]: config-file.md#js_render-optional
[9]: mailto:DocSearch@algolia.com

174
packages/website/docs/run-your-own.md Normal file
View file

@ -0,0 +1,174 @@
---
title: Run your own
---
The version of DocSearch we offer for free is hosted on our own servers, running
every 24 hours. You do not need to think about the crawl. However, if you want
to update your results with more control, or if you are [not compliant with our
checklist][1], or if your website sits behind a firewall, you might want to run
the crawler yourself.
The whole code base of DocSearch is open source, and we package it as a Docker
image to make this even easier for you to use.
## Set up your environment
You'll need to set your Algolia application ID and admin API key as environment
variables. If you don't have an Algolia account, you need to [create one][2].
- `APPLICATION_ID` set to your Algolia Application ID
- `API_KEY` set to your API Key. Make sure to use an API key with **write**
access to your index. It needs [the ACL `addObject`, `editSettings` and
`deleteIndex`][3].
For convenience, you can create a `.env` file in the repository root.
```sh
APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY
```
## Run the crawl from the Docker image
You can run a crawl from the packaged Docker image to crawl your website. You
will need to [install jq, a lightweight command-line JSON processor][4]
Then you need to start the crawl according to your configuration. You should
check the [dedicated configuration documentation][5].
```sh
docker run -it --env-file=.env -e "CONFIG=$(cat /path/to/your/config.json | jq -r tostring)" algolia/docsearch-scraper
```
Once the scraping finishes, you can [jump to the Integration step][6].
## Running the crawler from the code base
### Installation
The scraper is a python tool [based on scrapy][7]. We do recommend to use
[pipenv][8] to install the python environment.
- [Clone the scraper repository][9].
- [Install pipenv][10]
- `pipenv install`
- `pipenv shell`
If you plan to use the browser emulation [(`js_render` set to true)][11], you
need to follow this extra step. If you don't, you can dismiss this step.
### Installing Chrome driver
Some websites rendering requires JavaScript. Our crawler relies on a headless
chrome emulation. You will need to set up a ChromeDriver.
- [Install the driver][12] suited to your OS and the version of your Chrome. We
do recommend to use the latest version.
- Set the environment variable `CHROMEDRIVER_PATH` in your `.env` file. This
path must target the downloaded extracted driver.
You are ready to go.
### Running the crawler
Running `pipenv shell` will enable your virtual environment. From there, you can
run one crawl with the following command:
```sh
$ ./docsearch run /path/to/your/config.json
```
Or from the Docker image:
```sh
$ ./docsearch docker:run /path/to/your/config.json
```
This will start the crawl. It extracts content from parsed pages and push the
built records to Algolia.
## Create a new configuration
To create a configuration, run `./docsearch bootstrap`. A prompt will ask you
for some information and will create a JSON configuration you can use as a base.
```sh
$ ./docsearch bootstrap
# Enter your documentation url
start url: http://www.example.com/docs/
# Pick another name, or press enter
index_name is example [enter to confirm]: <Enter>
=================
{
"index_name": "example",
"start_urls": [
"http://www.example.com/docs/"
],
"stop_urls": [],
"selectors": {
"lvl0": "FIXME h1",
"lvl1": "FIXME h2",
"lvl2": "FIXME h3",
"lvl3": "FIXME h4",
"lvl4": "FIXME h5",
"lvl5": "FIXME h6",
"text": "FIXME p, FIXME li"
}
}
=================
```
Create a file from this text into a filename `example.json`, we'll use it later
on to start the crawl. You can browse the [list of live configurations][13].
## Testing your results
You can test your results by running `./docsearch playground`. This will open a
web page with a search input. You can do live tests against the indexed results.
<img src="https://docsearch.algolia.com/img/assets/playground.png" alt="Playground"/>
_Note that if the command fails (it can happen on non-Mac machines), you can get
the same result by running a live server in the `./playground` subdirectory.\`_
## Integration
Once you're satisfied with your config, you can integrate the search in
your website by [following the instructions here][14].
The difference is that you'll also have to add the `appId` key to your
`docsearch()` instance. Also don't forget to use a **search** API key here (in
other words, not the **write** API key you used for the crawl).
```javascript
docsearch({
appId: '<APP_ID>', // Add your own Application ID
apiKey: '<API_KEY>', // Set it to your own *search* API key
[…] // Other parameters are the same
});
```
## Help
You can run `./docsearch` without any argument to see the list of all available
commands.
_Note that we use this command-line tool internally at Algolia to run the free
hosted version, so you might not need all the listed commands._
[1]: who-can-apply.md
[2]: https://www.algolia.com/pricing
[3]: https://www.algolia.com/doc/guides/security/api-keys/#acl
[4]: https://github.com/stedolan/jq/wiki/Installation
[5]: config-file.md
[6]: #integration
[7]: https://scrapy.org/
[8]: https://github.com/pypa/pipenv
[9]: https://github.com/algolia/docsearch-scraper
[10]: https://pipenv.readthedocs.io/en/latest/install/#installing-pipenv
[11]: config-file.md
[12]: http://chromedriver.chromium.org/getting-started
[13]: https://github.com/algolia/docsearch-configs/tree/master/configs
[14]: modal.md

34
packages/website/docs/scraper-overview.md Normal file
View file

@ -0,0 +1,34 @@
---
id: scraper
title: Scraper Overview
---
## How?
The DocSearch scraper is written in Python and heavily inspired by the
[Scrapy][1] framework. It goes through all pages of your website and extracts
content from the HTML structure to populate an Algolia index.
It automatically follows every internal link to make sure we are not missing any
content, and uses the semantics of your HTML structure to construct its records.
This means that `h1`,`h2`, etc., (`selectors`) titles are used as hierarchy, and
each `p` is used as a potential result.
Those CSS selectors can be overwritten, and each website has its own JSON
configuration file that describes in more detail how the scraper should behave.
You can find the complete list of options in [the related section][2].
## When?
We automatically run each config every 24 hours. This is done from our own
infrastructure, meaning that you don't need to install anything on your side. We
run this service entirely free of charge, but we ask that you keep the "Search
by Algolia" logo next to the search results.
That being said, if you'd like to [run DocSearch on your own][3], all the code
is open sourced and even packaged as a Docker image. Download it, and run it
with your own credentials.
[1]: https://scrapy.org/
[2]: config-file.md
[3]: run-your-own.md

91
packages/website/docs/styling.mdx Normal file
View file

@ -0,0 +1,91 @@
---
title: Styling DocSearch
---
import useBaseUrl from '@docusaurus/useBaseUrl';
DocSearch v3 comes with two default color themes: light mode and dark mode.
## Colorscheme
<img
src={useBaseUrl('img/assets/default-colorscheme-v3-light.png')}
alt="Default colorscheme light mode"
/>
<img
src={useBaseUrl('img/assets/default-colorscheme-v3-dark.png')}
alt="Default colorscheme light mode"
/>
These themes work well with most websites, but we encourage you to style it to
your own theme. You can achieved it by overriding the CSS classes used by the
default themes.
The following annotated example will help you style each part:
```css
/* Light mode */
:root {
/* main variables */
--docsearch-primary-color: rgb(84, 104, 255);
--docsearch-text-color: rgb(28, 30, 33);
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-container-background: rgba(101, 108, 133, 0.8);
/* modal */
--docsearch-modal-background: rgb(245, 246, 247);
/* searchbox */
--docsearch-searchbox-background: rgb(235, 237, 240);
--docsearch-searchbox-focus-background: #fff;
/* hit */
--docsearch-hit-color: rgb(68, 73, 80);
--docsearch-hit-active-color: #fff;
--docsearch-hit-background: #fff;
/* footer */
--docsearch-footer-height: 44px;
--docsearch-footer-background: #fff;
}
/* Dark mode
The selector might change depending on how you
implement the dark mode detection.
*/
html[data-theme='dark'] {
/* main variables */
--docsearch-text-color: rgb(245, 246, 247);
--docsearch-muted-color: rgb(127, 132, 151);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
/* modal */
--docsearch-modal-background: rgb(21, 23, 42);
/* searchbox */
--docsearch-searchbox-background: rgb(9, 10, 17);
--docsearch-searchbox-focus-background: #000;
/* hit */
--docsearch-hit-color: rgb(190, 195, 201);
--docsearch-hit-background: rgb(9, 10, 17);
/* footer */
--docsearch-footer-background: rgb(30, 33, 54);
}
```
## Attribution
We're happy to provide DocSearch free of charge for any documentation website,
and you're encouraged to style it to fit your own theming. All we ask is that
you keep the "Search by Algolia" logo visible.
The logo is in the footer of the modal. It's our way to let more people know
about what we do, and how they could benefit from a fast and relevant search on
their website.
If you're using your own [paid Algolia account][1] and [running the crawler by
yourself][2], you don't have to keep the logo.
[1]: https://www.algolia.com/pricing
[2]: scraper-overview.md

130
packages/website/docs/tips.md Normal file
View file

@ -0,0 +1,130 @@
---
title: Tips for a good search
---
DocSearch can work with almost any website, but we've found that some site
structures yield more relevant results or faster indexing time. In this page
we'll share some tips on how you can make the most out of DocSearch.
## Use a `sitemap.xml`
If you provide a sitemap in your configuration, DocSearch will use it to
directly browse the pages to index. Pages are still crawled which means we
extract every compliant link.
We highly recommend you add a `sitemap.xml` to your website if you don't have
one already. This will make the indexing faster, but will also give you more
control over which page you'd like to include or not in the indexing.
Sitemaps are also considered good practice for other aspects, including SEO
([more information on sitemaps][1]).
## Structure the hierarchy of information
DocSearch works better on structured documentation. Relevance of results is
based on the structural hierarchy of content. In simpler terms, it means that we
read the `<h1>`, ..., `<h6>` headings of your page to guess the hierarchy of
information. This hierarchy brings contextual information to your records.
Documentation starts by explaining generic concepts first and then goes deeper
into specifics. This is represented in your HTML markup by the hierarchy of
headings you're using. For example, concepts discussed under a `<h4>` are more
specific than concepts discussed under a `<h2>` in the same page. The sooner the
information comes up within the page, the higher is it ranked.
DocSearch uses this structure to fine-tune the relevance of results as well as
to provide potential filtering. Documentations that follow this pattern often
have better relevance in their search results.
Finding the right depth of your documentation tree and how to split up your
content are two of the most complex tasks. For large pages, we recommend having
4 levels (from `lvl0` to `lvl3`). We recommend at least three different levels.
_Note that you don't have to use `<hX>` tags and can use classes instead (e.g.,
`<span class="title-X">` ). You will need to update the `selectors`
configuration value._
## Set a unique class to the element holding the content
DocSearch extracts content based on the HTML structure. We recommend that you
add a custom `class` to the HTML element wrapping all your textual content. This
will help narrow selectors to the relevant content.
Having such a unique identifier will make your configuration more robust as it
will make sure indexed content is relevant content. We found that this is the
most reliable way to exclude content in headers, sidebars, and footers that are
not relevant to the search.
## Add anchors to headings
When using headings (as mentioned above), you should also try to add a custom
anchor to each of them. Anchors are specified by HTML attributes (`name` or
`id`) added to headers that allow browsers to directly scroll to the right
position in the page. They're accessible by clicking a link with `#` followed by
the anchor.
DocSearch will honor such anchors and automatically bring your users to the
anchor closest to the search result they selected.
## Marking the active page(s) in the navigation
If you're using a multi-level navigation, we recommend that you mark each active
level with a custom CSS class. This will make it easier for DocSearch to know
_where_ the current page fits in the website hierarchy.
For example, if your `troubleshooting.html` page is located under the
"Installation" menu in your sidebar, we recommend that you add a custom CSS
class to the "Installation" and "Troubleshooting" links in your sidebar.
The name of the CSS class does not matter, as long as it's something that can be
used as part of a CSS selector.
## Consistency of your content
Consistency is a pillar of meaningful documentation. It increases the
**intelligibility** of a document and shortens the time required for a user to
find the coveted information. The document **topic** should be **identifiable**
and its **outline** should be demarcated.
The hierarchy should always have the same size. Try to **avoid orphan records**
such as the introduction/conclusion, or asides. The selectors must be efficient
for **every document** and highlight the proper hierarchy. They need to match
the coveted elements depending on their level. Be careful to avoid the **edge
effect** by matching unexpected **superfluous elements**.
Selectors should match information from **real document web pages** and stay
ineffective for others ones (e.g., landing page, table of content, etc.). We
urge the maintainer to define a **dedicated class** for the **main DOM
container** that includes the actual document content such as
`.DocSearch-content`
Since documentation should be **interactive**, it is a key point to **verbalize
concepts with standardized words**. This **redundancy**, empowered with the
**search experience** (dropdown), will even enable the **learn-as-you-type
experience**. The **way to find the information** plays a key role in
**leading** the user to the **retrieved knowledge**. You can also use the
**synonym feature**.
## Avoid duplicates by promoting unicity
The more time-consuming reading documentation is, the more painful and reluctant
its use will be. You must avoid hazy points or catch-all. With being unhelpful,
the catch-all document may be **confusing** and **counterproductive**.
Duplicates introduce noise and mislead users. This is why you should always
focus on the relevant content and avoid duplicating content within your site
(for example landing page which contains all information, summing up, etc.). If
duplicates are expected because they belong to multiple datasets (for example a
different version), you should use [facets][3].
## Conciseness
What is clearly thought out is clearly and concisely expressed.
We highly recommend that you read this blog post about [how to build a helpful
search for technical documentation][2].
[1]: https://www.sitemaps.org/index.html
[2]:
https://blog.algolia.com/how-to-build-a-helpful-search-for-technical-documentation-the-laravel-example/
[3]: https://www.algolia.com/doc/guides/searching/faceting/

37
packages/website/docs/what-is-docsearch.md Normal file
View file

@ -0,0 +1,37 @@
---
title: What is DocSearch?
---
## Why?
We have created DocSearch because we are scratching our own itch. As
developers, we spent a lot of time reading documentation, and it can be hard to
find relevant information in large documentations. We're not blaming anyone
here; building a good search is a challenge.
It happens that we are a search company and we actually have a lot of experience
building search interfaces. We wanted to use those skills to help others. That's
why we created a way to automatically extract content from tech documentation
and make it available to everyone from the first keystroke.
## Quick description
We split DocSearch into a crawler and a frontend library. We run the crawler on
our end every 24 hours to extract content from your website and push it to an Algolia
index. You can then add the frontend library to your website to search in that index.
## How to feature DocSearch?
DocSearch is entirely free and automated. The one thing we'll need from you is
to read [our checklist][2] and apply! After that, we'll share with you the
JavaScript snippet needed to add DocSearch to your website. We ask that you keep
the "Search by Algolia" link displayed.
DocSearch is [one of our ways][1] to give back to the open source community for
everything it did for us already.
You can now [apply to the program][3]
[1]: https://opencollective.com/algolia
[2]: who-can-apply.md
[3]: apply.mdx

61
packages/website/docs/who-can-apply.md Normal file
View file

@ -0,0 +1,61 @@
---
title: Who can apply?
---
We built DocSearch from the ground up with the idea of improving search on large
technical documentations. For this reason, we are offering a free hosting
version to all online technical documentations.
We're always sad to have to turn down applications, but with the number of
requests we receive every day, we've had to focus on fair criteria. We hope you
understand.
## The checklist
To have your request validated, we'll ask that you check all the following
points.
- You must be the **owner** of the website, or at least have the permissions to
update its content. You'll have to [include a JavaScript snippet][1] to enable
DocSearch.
- Your website must be **publicly available**. We do not host search indices for
websites that are available behind an authentication or a private network.
- Your website must be a **documentation website**. We do not index blogs or
commercial content.
- Your website must **have some final content**. We won't index empty websites
nor those filled with lorem ipsum placeholder content. Please, wait until you
have written some documentation before applying. We would be happy to help you
as soon as you have a steady design.
If in doubt, don't hesitate to [apply][2] and we'll figure it out together.
Even if we cannot accept your request, this does not mean that you cannot enjoy
great search on your website. DocSearch is entirely open source and [you can run
it yourself][3], or use any of [our other API clients][4] to take advantage of
Algolia's features.
## Priority
We're receiving dozens of requests every day, and while we strive to answer them
all as fast as we can, we sometimes give priority to some based on the following
criteria:
- 😀 If your project is open source, we'll handle it before any other
closed-source product. We love open source and want to help as much as we can.
- 🙂 If you're using one of our [official integrations][4], creating your config
will be much faster for us.
- 🙁 If we need to render your website in the browser through JavaScript, it
means that we'll have to crawl it through a much slower browser emulation. We
highly recommend that you put in place server-side rendering for the useful
textual content.
[1]: modal.md
[2]: apply.mdx
[3]: run-your-own.md
[4]: https://www.algolia.com/doc/api-client/getting-started/install/javascript/
[5]: integrations.md

163
packages/website/docusaurus.config.js Executable file
View file

@ -0,0 +1,163 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
module.exports = {
title: 'DocSearch',
tagline:
'The best search experience for docs, integrated in minutes, for free',
url: 'https://docsearch.algolia.com',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'Algolia',
projectName: 'DocSearch',
themes: ['@docusaurus/theme-live-codeblock'],
plugins: ['my-loaders'], // loader required for .svg
themeConfig: {
algolia: {
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
},
navbar: {
logo: {
alt: 'DocSearch',
src: 'img/docsearch-logo.svg',
srcDark: 'img/docsearch-logo-white.svg',
},
title: ' ',
hideOnScroll: true,
items: [
{
type: 'docsVersionDropdown',
position: 'left',
},
{
label: 'Documentation',
to: 'docs/what-is-docsearch',
position: 'right',
},
{
label: 'GitHub',
href: 'https://github.com/algolia/DocSearch',
position: 'right',
},
],
},
colorMode: {
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: true,
},
announcementBar: {
id: 'supportus',
content:
'⭐️ If you like DocSearch, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/algolia/docsearch">GitHub</a>! ⭐️',
},
footer: {
links: [
{
title: 'Docs',
items: [
{
label: 'Getting Started',
to: 'docs/what-is-docsearch',
},
{
label: 'FAQ',
to: 'docs/faq',
},
{
label: 'DocSearch.js',
to: 'docs/dropdown',
},
{
label: 'Run your own scraper',
to: 'docs/run-your-own',
},
{
label: 'Playground',
to: 'playground',
},
],
},
{
title: 'DocSearch',
items: [
{
label: 'Issues',
to: 'https://github.com/algolia/docsearch/issues',
},
{
label: 'Scraper',
to: 'https://github.com/algolia/docsearch-scraper',
},
{
label: 'Configurations',
to: 'https://github.com/algolia/docsearch-configs',
},
{
label: 'Privacy',
to: 'https://www.algolia.com/policies/privacy/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Apply',
to: 'apply',
},
{
label: 'Forum',
href: 'https://discourse.algolia.com/tags/docsearch',
},
{
label: 'Discord',
href: 'https://discord.gg/tXdr5mP',
},
],
},
{
title: 'Social',
items: [
{
label: 'GitHub',
to: 'https://github.com/algolia/docsearch',
},
{
label: 'Twitter',
to: 'https://twitter.com/docsearch_',
},
{
label: 'Algolia Blog',
to: 'https://blog.algolia.com/',
},
],
},
],
logo: {
alt: 'Algolia',
src: 'img/algolia-logo.svg',
},
copyright: `DocSearch 2015-now • Designed and Built by Algolia`,
},
image: 'img/og_image.png',
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};

51
packages/website/package.json Executable file
View file

@ -0,0 +1,51 @@
{
"name": "@docsearch/website",
"version": "1.0.0",
"private": true,
"homepage": "https://docsearch.algolia.com/",
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "yarn lint & docusaurus deploy",
"lint": "yarn run textlint docs"
},
"dependencies": {
"@algolia/ui-library": "2.35.0",
"@docsearch/react": "1.0.0-alpha.28",
"@docusaurus/core": "2.0.0-alpha.69",
"@docusaurus/preset-classic": "2.0.0-alpha.69",
"@docusaurus/theme-live-codeblock": "2.0.0-alpha.69",
"algoliasearch": "4.1.0",
"classnames": "2.2.6",
"docsearch.js": "2.6.3",
"file-loader": "4.3.0",
"image-webpack-loader": "6.0.0",
"imagemin": "7.0.0",
"my-loaders": "file:plugins/my-loaders",
"prism-react-renderer": "1.1.0",
"query-string": "6.9.0",
"react-autosuggest": "9.4.3",
"react-live": "2.2.2",
"textlint": "11.3.1",
"textlint-rule-alex": "1.3.1",
"textlint-rule-common-misspellings": "1.0.1",
"textlint-rule-en-capitalization": "2.0.2",
"textlint-rule-stop-words": "1.0.17",
"textlint-rule-terminology": "1.1.30",
"textlint-rule-write-good": "1.6.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

18
packages/website/plugins/my-loaders/index.js Normal file
View file

@ -0,0 +1,18 @@
module.exports = function(context, options) {
return {
name: 'loaders',
configureWebpack(config, isServer) {
return {
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
exclude: /\.(mdx?)$/i,
use: ['file-loader', { loader: 'image-webpack-loader' }],
},
],
},
};
},
};
};

31
packages/website/sidebars.js Executable file
View file

@ -0,0 +1,31 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
module.exports = {
docs: {
'Getting Started': [
'what-is-docsearch',
'how-does-it-work',
'who-can-apply',
'apply',
],
'Adding DocSearch to your UI': ['migration-guide', 'styling'],
'Requirements, tips, FAQ': [
'required-configuration',
'tips',
'faq',
'integrations',
],
'Under the Hood': [
'scraper',
'inside-the-engine',
'config-file',
'how-do-we-build-an-index',
'run-your-own',
],
},
};

153
packages/website/src/components/ApplyForm.js Normal file
View file

@ -0,0 +1,153 @@
import React, { useState } from 'react';
import {
Card,
Input,
LabelText,
Text,
Button,
InlineLink,
} from '@algolia/ui-library';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useThemeContext from '@theme/hooks/useThemeContext';
function ApplyForm() {
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const [hasSent, setHasSent] = useState(false);
const [url, setUrl] = useState('');
const [email, setEmail] = useState('');
function onSubmit(event) {
event.preventDefault();
const applyForm = event.target;
const method = applyForm.getAttribute('method');
const url = applyForm.getAttribute('action');
const formData = new FormData(applyForm);
const data = {};
formData.forEach(function(value, key) {
data[key] = value;
});
const body = JSON.stringify(data);
fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body,
}).then(response => {
if (response.ok) {
setHasSent(true);
}
});
}
if (hasSent) {
return (
<Card background={theme} className="uil-m-auto" style={{ maxWidth: 600 }}>
<LabelText style={{ fontSize: '1.2em' }}>Thank you!</LabelText>
<br />
<Text
small
className="uil-pv-8 uil-d-block"
aria-label="Request will be processed"
>
Your request will be processed by our team. We'll get back to you at{' '}
{email} with the JavaScript snippet you'll need to integrate into{' '}
<InlineLink href={url}>{url}</InlineLink>.
</Text>
<Text aria-label="recommendations">
Please be patient, in the meantime, you can implement{' '}
<InlineLink href={useBaseUrl('/docs/tips')}>
our recommendations for building a great DocSearch experience.
</InlineLink>
</Text>
</Card>
);
}
return (
<Card background={theme} className="uil-m-auto" style={{ maxWidth: 600 }}>
<form
onSubmit={onSubmit}
id="form-apply-docsearch"
method="POST"
action="https://docsearch-hub.herokuapp.com/form/inbound"
>
<LabelText key="url" tag="label" htmlFor="url">
Documentation URL
<Input
id="url"
type="url"
name="url"
aria-label="URL of the documentation website"
value={url}
onChange={event => setUrl(event.target.value)}
placeholder="https://project.org/docs"
required
/>
</LabelText>
<Text small className="uil-pv-8 uil-d-block">
We'll scrape pages at this address and index the content on Algolia.
</Text>
<LabelText tag="label" htmlFor="email" key="email">
Email
<Input
id="email"
type="email"
name="email"
aria-label="Email address of the owner of this website"
value={email}
onChange={event => setEmail(event.target.value)}
placeholder="you@project.org"
required
/>
</LabelText>
<Text small className="uil-pv-8 uil-d-block">
We'll send you the JavaScript snippet you'll have to integrate into
your documentation.
</Text>
<div className="uil-ph-32 uil-ta-center uil-d-flex uil-fxd-column">
<LabelText tag="label" htmlFor="owner" key="owner">
<input
id="owner"
name="owner"
aria-label="Confirm I am owner of the website"
type="checkbox"
className="uil-mr-8"
required
/>
I'm the owner of the website and I have{' '}
<InlineLink href={useBaseUrl('/docs/who-can-apply')}>
read the checklist
</InlineLink>
</LabelText>
<Button
className="uil-mt-16 uil-mb-16"
tag="button"
type="submit"
id="joinButton"
primary
>
Join the program
</Button>
</div>
<Text className="uil-ta-center" small>
<InlineLink href="https://www.algolia.com/policies/terms">
Refer to Algolia's Privacy Policy for more information on how we use
and protect your data
</InlineLink>
</Text>
</form>
</Card>
);
}
export default ApplyForm;

90
packages/website/src/components/DocSearch/index.js Normal file
View file

@ -0,0 +1,90 @@
import React, { useRef, useEffect } from 'react';
import Head from '@docusaurus/Head';
export default function DocSearch({ appId, indexName, apiKey }) {
const docsearchRef = useRef(null);
useEffect(() => {
if (!docsearchRef.current) {
return;
}
import('docsearch.js').then(({ default: docsearch }) => {
docsearch({
appId,
apiKey,
indexName,
inputSelector: `#${docsearchRef.current.id}`,
autocompleteOptions: {
hint: false,
appendTo: '.sbx-docsearch-demo__wrapper',
},
});
});
}, [docsearchRef, indexName, apiKey]);
return (
<>
<Head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
/>
</Head>
<div>
<svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
<symbol
xmlns="http://www.w3.org/2000/svg"
id="sbx-icon-search-13"
viewBox="0 0 40 40"
>
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
fillRule="evenodd"
/>
</symbol>
<symbol
xmlns="http://www.w3.org/2000/svg"
id="sbx-icon-clear-3"
viewBox="0 0 20 20"
>
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
fillRule="evenodd"
/>
</symbol>
</svg>
<form noValidate="novalidate" className="sbx-docsearch-demo">
<div role="search" className="sbx-docsearch-demo__wrapper">
<input
id="q"
type="search"
name="search"
placeholder="Search documentation..."
autoComplete="off"
required="required"
className="mb-2 sbx-docsearch-demo__input"
ref={docsearchRef}
/>
<button
type="submit"
title="Submit your search query."
className="sbx-docsearch-demo__submit"
>
<svg role="img" aria-label="Search">
<use xlinkHref="#sbx-icon-search-13"></use>
</svg>
</button>
<button
type="reset"
title="Clear the search query."
className="sbx-docsearch-demo__reset"
>
<svg role="img" aria-label="Reset">
<use xlinkHref="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
</div>
</>
);
}

18
packages/website/src/components/DocSearchLogo.js Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
export function DocSearchLogo(props) {
return (
<svg props {...props} viewBox="0 0 476 78" className="docsearch-logo">
<g fillRule="nonzero" fill="none">
<path
d="M36.493 77.289h-33.419c-1.698 0-3.074-1.37-3.074-3.061h36.523c12.769.062 24.6-6.663 31.038-17.642 6.438-10.979 6.504-24.543.174-35.584-6.331-11.041-18.096-17.88-30.865-17.942h-36.87c0-1.69 1.376-3.061 3.074-3.061h33.796c10.31.01 20.193 4.1 27.472 11.369 7.28 7.268 11.36 17.12 11.341 27.384-.059 21.366-17.741 38.536-39.191 38.536z"
fill="#5468FF"
/>
<path
d="M0 69.045h23.711c2.932.01 5.761-1.071 7.933-3.031h-31.644v3.031zM0 60.801h36.374c.734-.987 1.418-1.975 2.053-3.071h-38.427v3.071zM0 52.546h41.025c.407-.987.773-1.975 1.091-3.061h-42.116v3.061zM0 44.302h43.306c.149-.987.268-2.034.337-3.061h-43.643v3.061zM0 36.058h43.633c-.069-1.037-.188-2.064-.337-3.071h-43.296v3.071zM0 27.804h42.116c-.317-1.037-.684-2.064-1.091-3.061h-41.025v3.061zM0 19.559h38.427c-.631-1.055-1.316-2.076-2.053-3.061h-36.374v3.061zM0 8.244v3.071h31.674c-2.171-1.962-5.001-3.043-7.933-3.031l-23.741-.039zM135.68 50.078c-1.822 3.303-4.582 5.999-7.933 7.751-3.767 1.931-7.962 2.888-12.197 2.784h-16.581v-43.69h16.571c4.239-.11 8.44.826 12.227 2.725 3.351 1.711 6.114 4.379 7.933 7.662 1.892 3.487 2.846 7.402 2.767 11.364.07 3.976-.889 7.904-2.787 11.404zm-11.414-2.192c2.294-2.179 3.441-5.249 3.441-9.212s-1.147-7.03-3.441-9.202c-2.301-2.185-5.52-3.278-9.659-3.278h-5.018v24.96h5.018c4.145 0 7.365-1.089 9.659-3.268zM175.456 19.125c3.323 1.888 6.066 4.643 7.933 7.968 1.975 3.518 2.981 7.493 2.916 11.522.053 4.045-.973 8.032-2.975 11.552-1.891 3.344-4.661 6.112-8.013 8.007-6.972 3.83-15.43 3.83-22.402 0-3.351-1.893-6.118-4.662-8.003-8.007-2.008-3.518-3.035-7.506-2.975-11.552-.061-4.036.967-8.015 2.975-11.522 1.894-3.328 4.66-6.082 8.003-7.968 6.996-3.831 15.475-3.831 22.471 0h.069zm-19.556 10.318c-2.043 2.245-3.068 5.302-3.074 9.172-.007 3.87 1.018 6.918 3.074 9.143 4.576 4.529 11.965 4.529 16.541 0 2.056-2.258 3.084-5.305 3.084-9.143 0-3.837-1.025-6.885-3.074-9.143-4.595-4.511-11.976-4.511-16.571 0l.02-.03zM225.108 20.882c3.7 2.991 6.218 7.187 7.11 11.848h-11.226c-.762-1.928-2.093-3.58-3.818-4.739-1.812-1.184-3.942-1.79-6.109-1.738-2.895-.102-5.673 1.143-7.517 3.367-1.904 2.258-2.856 5.286-2.856 9.084s.952 6.813 2.856 9.044c1.846 2.222 4.623 3.465 7.517 3.367 2.161.068 4.292-.521 6.109-1.688 1.714-1.149 3.044-2.782 3.818-4.69h11.236c-.901 4.657-3.418 8.851-7.11 11.848-3.656 2.942-8.284 4.417-13.883 4.423-3.928.086-7.807-.887-11.226-2.814-3.21-1.857-5.81-4.601-7.487-7.899-1.805-3.582-2.71-7.546-2.638-11.552-.073-4.01.832-7.977 2.638-11.562 1.677-3.298 4.277-6.042 7.487-7.899 3.419-1.915 7.294-2.877 11.216-2.784 5.606 0 10.234 1.461 13.883 4.384zM267.006 54.679c-1.26 2.01-3.069 3.62-5.216 4.641-2.61 1.216-5.469 1.808-8.35 1.728-4.919 0-8.971-1.195-12.158-3.584-3.182-2.37-5.103-6.057-5.216-10.012h11.295c.082 1.47.712 2.857 1.765 3.89 1.055.962 2.448 1.473 3.877 1.422 1.182.068 2.343-.329 3.233-1.106.794-.779 1.222-1.853 1.18-2.962.027-1.033-.366-2.034-1.091-2.774-.769-.78-1.686-1.401-2.697-1.827-1.071-.474-2.568-.987-4.472-1.698-2.324-.765-4.593-1.686-6.793-2.755-1.81-.931-3.366-2.286-4.532-3.949-1.339-2.022-2.002-4.413-1.894-6.832-.062-2.396.631-4.751 1.983-6.734 1.381-1.944 3.29-3.454 5.504-4.354 2.545-1.048 5.279-1.563 8.032-1.511 4.879 0 8.756 1.152 11.632 3.456 2.898 2.349 4.669 5.803 4.879 9.518h-11.483c-.138-1.287-.695-2.494-1.587-3.436-.925-.872-2.169-1.328-3.441-1.264-1.078-.036-2.134.314-2.975.987-.799.748-1.218 1.814-1.14 2.903-.032.972.325 1.916.992 2.626.731.757 1.608 1.358 2.578 1.767 1.031.454 2.519 1.03 4.463 1.728 2.366.761 4.67 1.702 6.892 2.814 1.83.97 3.403 2.357 4.591 4.048 1.36 2.043 2.033 4.463 1.924 6.911.015 2.243-.599 4.445-1.775 6.358zM285.263 25.325v9.153h14.875v7.978h-14.875v9.706h16.69v8.462h-27.261v-43.7h27.301v8.402zM335.015 52.645h-16.442l-2.737 7.968h-11.166l16.075-43.374h12.227l16.095 43.374h-11.315l-2.737-7.968zm-2.727-8.037l-5.464-16.064-5.524 16.064h10.988zM374.85 60.613l-9.5-16.498h-2.4v16.498h-10.611v-43.69h18.128c3.042-.08 6.061.549 8.816 1.836 2.258 1.069 4.141 2.789 5.405 4.937 1.223 2.179 1.842 4.643 1.795 7.138.088 2.921-.844 5.783-2.638 8.096-1.967 2.326-4.67 3.917-7.666 4.512l10.432 17.18-11.761-.01zm-11.9-23.696h6.585c1.672.149 3.339-.342 4.661-1.372 1.058-1.098 1.598-2.59 1.488-4.107.084-1.51-.465-2.987-1.517-4.078-1.284-1.081-2.945-1.613-4.621-1.481h-6.595v11.038zM424.81 20.882c3.703 2.988 6.222 7.186 7.11 11.848h-11.236c-.755-1.937-2.087-3.598-3.818-4.759-1.811-1.185-3.942-1.791-6.109-1.738-2.896-.1-5.673 1.153-7.507 3.387-1.904 2.258-2.856 5.286-2.856 9.084s.952 6.813 2.856 9.044c1.841 2.223 4.615 3.467 7.507 3.367 2.165.057 4.297-.546 6.109-1.728 1.717-1.146 3.047-2.78 3.818-4.69h11.236c-.897 4.659-3.415 8.854-7.11 11.848-3.656 2.942-8.284 4.417-13.883 4.423-3.931.087-7.814-.885-11.236-2.814-3.209-1.855-5.807-4.599-7.477-7.899-1.808-3.58-2.713-7.545-2.638-11.552-.077-4.01.828-7.978 2.638-11.562 1.67-3.299 4.268-6.044 7.477-7.899 3.423-1.926 7.305-2.894 11.236-2.804 5.6.039 10.227 1.521 13.883 4.443zM475.167 16.923v43.69h-10.68v-18.226h-16.63v18.226h-10.611v-43.69h10.611v16.933h16.63v-16.933z"
fill="currentColor"
/>
</g>
</svg>
);
}

35
packages/website/src/components/ErrorBoundary.js Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
export default class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
info: null,
};
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true, error };
}
componentDidCatch(error, info) {
this.setState({
hasError: true,
error: error,
info: info,
});
}
render() {
if (this.state.hasError) {
return (
<div>
<h1>Oops, something went wrong :(</h1>
<p>The error: {this.state.error.toString()}</p>
</div>
);
}
return this.props.children;
}
}

162
packages/website/src/css/custom.css Normal file
View file

@ -0,0 +1,162 @@
@import url(fragments.css);
@import url(searchbox.css);
:root {
--ifm-font-size-base: 16px;
--ifm-code-font-size: 90%;
--ifm-background-color: var(--white);
--ifm-color-primary: var(--nebula-blue);
--ifm-footer-background-color: var(--moon-grey);
--ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
}
html[data-theme='dark'] {
--ifm-font-base-color: #dee0f2;
--ifm-navbar-link-hover-color: #8b9dff;
--ifm-link-color: #8b9dff;
--ifm-menu-color-active: #8b9dff;
--ifm-background-color: #0a141c;
--ifm-footer-background-color: #0a141c;
--ifm-navbar-background-color: #21243d;
--ifm-menu-color-background-active: #21243d;
}
.bg-analytics {
position: relative;
}
.bg-analytics::after {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-image: url('../../static/img/assets/bg-analytics.svg');
background-size: cover;
background-position: center -300px;
}
#hero {
background-image: linear-gradient(
var(--ifm-navbar-background-color),
var(--ifm-footer-background-color)
);
}
html[data-theme='dark'] #hero {
background-image: linear-gradient(
var(--ifm-background-color),
var(--ifm-navbar-background-color)
);
}
.docsearch-logo {
color: #21243d;
}
html[data-theme='dark'] .docsearch-logo {
color: #fff;
}
html[data-theme='dark'] div[class*='background-curves-Hero'] {
opacity: 0.4;
}
html[data-theme='dark'] .bg-analytics::after {
opacity: 0.1;
}
html[data-theme='dark'] .uil-bgc-white {
background-color: var(--ifm-background-color);
}
html[data-theme='dark'] .uil-bgc-moon {
background-color: var(--ifm-navbar-background-color);
}
html[data-theme='dark'] .uil-color-solstice {
color: var(--ifm-font-base-color);
}
html[data-theme='dark'] .uil-color-telluric {
color: var(--ifm-font-base-color);
}
html[data-theme='dark'] .react-toggle-track {
background-color: var(--ifm-footer-background-color);
}
html[data-theme='dark'] img.ds-icon {
filter: invert();
}
html[data-theme='dark'] img.github__logo {
filter: none;
}
html:not([data-theme='dark']) img.github__logo {
filter: invert();
}
html[data-theme='dark'] [class*='light-Card'] {
-webkit-transition: -webkit-transform 0.2s ease-out, box-shadow 0.2s ease-out;
-webkit-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
background-image: radial-gradient(circle at 50% 0, #3a416f, #21243d);
}
.footer .footer__logo {
max-width: 6rem;
}
.docSidebarContainer_node_modules-\@docusaurus-theme-classic-src-theme-DocPage- {
background-color: var(--ifm-background-color);
background-image: linear-gradient(
90deg,
var(--ifm-background-color) 95%,
var(--ifm-footer-background-color)
);
border: none;
}
@keyframes heartbeat {
0% {
transform: scale(0.75);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.75);
}
60% {
transform: scale(1);
}
80% {
transform: scale(0.75);
}
100% {
transform: scale(0.75);
}
}
.ds-icon-heart {
margin-left: 1em;
margin-right: 1em;
animation: heartbeat 1s infinite;
transform-origin: center;
}
[class*='announcementBar_'] {
z-index: 1;
}
.diagonal-box {
transform: skewY(-6deg);
}
.diagonal-content {
transform: skewY(6deg);
}
.ratio {
padding-bottom: 40%;
}

12367
packages/website/src/css/fragments.css Normal file
View file

File diff suppressed because it is too large Load diff

149
packages/website/src/css/searchbox.css Normal file
View file

@ -0,0 +1,149 @@
.sbx-docsearch-demo {
display: block;
margin: 0 auto;
position: relative;
width: 100%;
height: 3em;
white-space: nowrap;
box-sizing: border-box;
font-size: 14px;
}
.sbx-docsearch-demo__wrapper {
width: 100%;
height: 100%;
}
.sbx-docsearch-demo__input {
display: inline-block;
transition: box-shadow 0.4s ease, background 0.4s ease;
border: 0;
border-radius: 4px;
box-shadow: inset 0 0 0 1px #cccccc;
background: #ffffff;
padding: 0;
padding-right: 77px;
padding-left: 11px;
width: 100%;
height: 100%;
vertical-align: middle;
white-space: normal;
font-size: inherit;
appearance: none;
}
.sbx-docsearch-demo__input::-webkit-search-decoration,
.sbx-docsearch-demo__input::-webkit-search-cancel-button,
.sbx-docsearch-demo__input::-webkit-search-results-button,
.sbx-docsearch-demo__input::-webkit-search-results-decoration {
display: none;
}
.sbx-docsearch-demo__input:hover {
box-shadow: inset 0 0 0 1px #b3b3b3;
}
.sbx-docsearch-demo__input:focus,
.sbx-docsearch-demo__input:active {
outline: 0;
box-shadow: inset 0 0 0 1px rgb(84, 104, 255);
background: #ffffff;
}
.sbx-docsearch-demo__input::placeholder {
color: #aaaaaa;
}
.sbx-docsearch-demo__submit {
position: absolute;
top: 0;
right: 0;
left: inherit;
margin: 0;
border: 0;
border-radius: 0 3px 3px 0;
background-color: rgb(84, 104, 255);
padding: 0;
width: 48px;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: inherit;
user-select: none;
}
.sbx-docsearch-demo__submit::before {
display: inline-block;
margin-right: -4px;
height: 100%;
vertical-align: middle;
content: '';
}
.sbx-docsearch-demo__submit:hover,
.sbx-docsearch-demo__submit:active {
cursor: pointer;
}
.sbx-docsearch-demo__submit:focus {
outline: 0;
}
.sbx-docsearch-demo__submit svg {
width: 21px;
height: 21px;
vertical-align: middle;
fill: #ffffff;
}
.sbx-docsearch-demo__reset {
display: none;
position: absolute;
top: 10px;
right: 56px;
margin: 0;
border: 0;
background: none;
cursor: pointer;
padding: 0;
font-size: inherit;
user-select: none;
fill: rgba(0, 0, 0, 0.5);
}
.sbx-docsearch-demo__reset:focus {
outline: 0;
}
.sbx-docsearch-demo__reset svg {
display: block;
margin: 4px;
width: 13px;
height: 13px;
}
.sbx-docsearch-demo__input:valid ~ .sbx-docsearch-demo__reset {
display: block;
animation-name: sbx-reset-in;
animation-duration: 0.15s;
}
@keyframes sbx-reset-in {
0% {
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}
.algolia-autocomplete {
height: 100%;
top: 50px !important;
}
body .algolia-autocomplete .ds-dropdown-menu {
min-width: 100%;
width: 100%;
}

32
packages/website/src/pages/apply.js Normal file
View file

@ -0,0 +1,32 @@
import React from 'react';
import Layout from '@theme/Layout';
import { Section, Hero } from '@algolia/ui-library';
import ApplyForm from '../components/ApplyForm.js';
import { DocSearchLogo } from '../components/DocSearchLogo';
import useThemeContext from '@theme/hooks/useThemeContext';
function Apply() {
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
return (
<>
<Hero background="curves" title={<DocSearchLogo width="50%" />} />
<Section>
<ApplyForm theme={theme} />
</Section>
</>
);
}
function ApplyPage() {
return (
<Layout
title="DocSearch: Search made for documentation"
description="The easiest way to add search to your documentation - Powered by Algolia"
>
<Apply />
</Layout>
);
}
export default ApplyPage;

26
packages/website/src/pages/demo-projects.json Normal file
View file

@ -0,0 +1,26 @@
[
{
"name": "Bootstrap",
"logo": "img/logos/bootstrap.jpg",
"preview": "img/demos/example-bootstrap.gif",
"href": "https://getbootstrap.com/docs/4.3/getting-started/introduction/"
},
{
"name": "Vue.js",
"logo": "img/logos/vue.svg",
"preview": "img/demos/example-vuejs.gif",
"href": "https://vuejs.org/v2/guide/"
},
{
"name": "React",
"logo": "img/logos/react.jpg",
"preview": "img/demos/example-react.gif",
"href": "https://reactjs.org/docs/getting-started.html"
},
{
"name": "Moment.js",
"logo": "img/logos/momentjs.svg",
"preview": "img/demos/example-momentjs.gif",
"href": "https://momentjs.com/docs/"
}
]

247
packages/website/src/pages/demo.js Normal file
View file

@ -0,0 +1,247 @@
import React, { useState, useEffect, useRef } from 'react';
import Layout from '@theme/Layout';
import { useLocation } from 'react-router';
import queryString from 'query-string';
import {
Button,
Hero,
Text,
Pill,
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 github from 'prism-react-renderer/themes/github';
import vsDark from 'prism-react-renderer/themes/vsDark';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { DocSearchLogo } from '../components/DocSearchLogo';
import useThemeContext from '@theme/hooks/useThemeContext';
function Demo() {
const { siteConfig } = useDocusaurusContext();
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const DEFAULT_INDEX_NAME = siteConfig.themeConfig.algolia.indexName;
const DEFAULT_API_KEY = siteConfig.themeConfig.algolia.apiKey;
const {
indexName: indexNameFromUrl = DEFAULT_INDEX_NAME,
} = queryString.parse(useLocation().search);
const [indexName, setIndexName] = useState(indexNameFromUrl);
const [apiKey, setApiKey] = useState(null);
const [projectName, setProjectName] = useState(null);
const [docsearchIssueUrl, setDocsearchIssueUrl] = useState(null);
const [selection, setSelection] = useState(false);
const searchClient = useRef(
algoliasearch('DSW01O6QPF', 'e55d03a808bad4e426d28fd4a1a18338')
);
function resetCredentials() {
setProjectName(DEFAULT_INDEX_NAME);
setIndexName(DEFAULT_INDEX_NAME);
setApiKey(DEFAULT_API_KEY);
}
useEffect(() => {
const index = searchClient.current.initIndex('live-demo');
if (!selection && !projectName) {
index
.search(indexName, {
filters: 'status.stage: "Outbound"',
hitsPerPage: 1,
})
.then(result => {
if (result.nbHits === 0) {
resetCredentials();
} else {
const activeDocSearchIndex = result.hits[0];
setProjectName(activeDocSearchIndex.name);
setIndexName(activeDocSearchIndex.docsearch.index);
setApiKey(activeDocSearchIndex.docsearch.apiKey);
setDocsearchIssueUrl(
activeDocSearchIndex.outbound.docsearchIssueUrl
);
console.log(activeDocSearchIndex.outbound);
}
})
.catch(() => {
resetCredentials();
});
setSelection(true);
}
}, [indexName]);
const code = `<!-- at the end of the \`head\` -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<!-- at the end of the \`body\` -->
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '${apiKey}',
indexName: '${indexName}',
inputSelector: '#search', // CSS selector to target the <input />
debug: false, // Set to \`true\` if you want to inspect the dropdown
});
</script>`;
return (
<>
<Hero background="orbInside" title="Integrate it!" padding="small" />
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<Text>
Try it out with the index: <Pill>{indexName}</Pill>
</Text>
<ErrorBoundary>
{apiKey && (
<DocSearch
appId="BH4D9OD16A"
indexName={indexName}
apiKey={apiKey}
/>
)}
</ErrorBoundary>
</Card>
<Card
className="m-auto"
style={{
position: 'relative',
maxWidth: '800px',
marginTop: '2rem',
marginBottom: '2rem',
}}
background={theme}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<DocSearchLogo width="190px" />
<img
className="ds-icon-heart"
src={useBaseUrl('/img/icons/icon-heart.png')}
width="30px"
/>
{projectName !== null && <LabelText big>{projectName}</LabelText>}
</div>
<Text style={{ marginTop: '1.5rem' }}>
This page demonstrates a search-as-you-type experience implemented by
DocSearch on {projectName}'s documentation.
</Text>
<LabelText big>Instructions</LabelText>
<Text className="mt-4">
We have configured the crawler. It will run every 24 hours. You're now
a few steps away from having it work on your website.
</Text>
{docsearchIssueUrl && (
<InlineLink
style={{
textDecoration: 'none',
}}
href={docsearchIssueUrl}
>
Thumb up the request to feature DocSearch on the repo 👍{' '}
<img
className="github__logo"
src={useBaseUrl('/img/icons/icon-github.png')}
width="30px"
alt="GitHub"
/>
</InlineLink>
)}
<Text className="mt-4">Include a search input:</Text>
<LiveProvider
code={`<input type="text" id="search" placeholder="Search the doc" />`}
language="html"
noInline={true}
transformCode={_code =>
`class Null extends React.Component {render(){return null}}`
}
theme={theme === 'dark' ? vsDark : github}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
<Text className="mt-4">Include these assets:</Text>
<LiveProvider
code={code}
language="html"
noInline={true}
transformCode={_code =>
`class Null extends React.Component {render(){return null}}`
}
theme={theme === 'dark' ? vsDark : github}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
<Text className="pt-2">
Need to change something?{' '}
<InlineLink
style={{
textDecoration: 'none',
}}
href={`https://github.com/algolia/docsearch-configs/blob/master/configs/${indexName}.json`}
>
Please submit a PR on your configuration
</InlineLink>
.
</Text>
<Text>
<LabelText big>DocSearch on another website?</LabelText>
</Text>
<div className="jc-center fxd-column d-flex my-4">
<Button
primary
style={{ textDecoration: 'none', alignItems: 'center' }}
href={useBaseUrl('/apply')}
>
Join the Program
</Button>
</div>
</Card>
</>
);
}
function DemoPage() {
return (
<Layout
title="DocSearch Demo"
description="Try out the search for your DocSearch project"
>
<Demo />
</Layout>
);
}
export default DemoPage;

1017
packages/website/src/pages/index.js Executable file
View file

File diff suppressed because it is too large Load diff

153
packages/website/src/pages/inspector.js Normal file
View file

@ -0,0 +1,153 @@
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 algoliasearch from 'algoliasearch';
function Inspector() {
const { siteConfig } = useDocusaurusContext();
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const DEFAULT_INDEX_NAME = siteConfig.themeConfig.algolia.indexName;
const {
indexName: indexNameFromUrl = DEFAULT_INDEX_NAME,
} = queryString.parse(useLocation().search);
const [indexName, setIndexName] = useState(indexNameFromUrl);
const [record, setIndexRecord] = useState(null);
const [objectID, setObjectID] = useState(null);
const searchClient = algoliasearch(
'BH4D9OD16A',
'2b64d7d554f4bea7e9f7fa5c0ae39948'
);
const index = searchClient.initIndex(indexName);
useEffect(() => {
if (objectID) {
index.getObjects([objectID], {}).then(({ results }) => {
setIndexRecord(results[0]);
});
}
}, [objectID]);
return (
<>
<Hero
background="orbInside"
title="Inspect your DocSearch index"
padding="small"
/>
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<DocSearchLogo width="190px" />
<img
className="ds-icon-heart"
src={useBaseUrl('/img/icons/icon-heart.png')}
width="30px"
/>
<Pill>{indexName}</Pill>
</div>
<LabelText>Object:ID</LabelText>
<br />
<input
type="text"
style={{ margin: '3em 0', height: '2em', width: '80%' }}
onChange={e => setObjectID(e.target.value)}
/>
<br />
{record ? <Record record={record}></Record> : null}
{objectID && !record && (
<Text>No record found for the ObjectID {objectID}</Text>
)}
</Card>
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<LabelText>Instruction to select another index:</LabelText>
<br />
<br />
<br />
<Text>
Just change the GET parameter indexName{' '}
<a href="https://docsearch.algolia.com/inspector?indexName=<MyIndexName>">
{'https://docsearch.algolia.com/inspector?indexName=<MyIndexName>'}
</a>
</Text>
</Card>
</>
);
}
function InspectorPage() {
return (
<Layout
title="DocSearch Inspector"
description="Try out the search for your DocSearch project"
>
<Inspector />
</Layout>
);
}
function Record(props) {
const record = props.record;
return (
<>
<LabelText>One record found: </LabelText>
<Text>
URL is <a href={record.url}>{record.url}</a>
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl0 : {record.hierarchy.lvl0}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl1 : {record.hierarchy.lvl1}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl2 : {record.hierarchy.lvl2}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl3 : {record.hierarchy.lvl3}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl4 : {record.hierarchy.lvl4}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl5 : {record.hierarchy.lvl5}
</Text>
<Text style={{ marginTop: '1.5rem' }}>
lvl6 : {record.hierarchy.lvl0}
</Text>
{record.content ? (
<Text>Content is {record.content} </Text>
) : (
<Text> This record has no content (matching the Text selector)</Text>
)}
</>
);
}
export default InspectorPage;

188
packages/website/src/pages/landing.js Normal file
View file

@ -0,0 +1,188 @@
import React, { useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import { useLocation } from 'react-router';
import queryString from 'query-string';
import {
Button,
Hero,
Text,
Pill,
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 github from 'prism-react-renderer/themes/github';
import vsDark from 'prism-react-renderer/themes/vsDark';
import useThemeContext from '@theme/hooks/useThemeContext';
function Landing() {
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const {
appId: appIdQS = 'BH4D9OD16A',
indexName: indexNameQS = '',
apiKey: apiKeyQS = '',
} = queryString.parse(useLocation().search);
const [isValidDSCred, setisValidDSCred] = useState(false);
const [wrongCredentials, setWrongCredentials] = useState(false);
const [appId, setAppId] = useState(appIdQS);
const [indexName, setIndexName] = useState(indexNameQS);
const [apiKey, setApiKey] = useState(apiKeyQS);
const fallbackToDocSearchDocCred = () => {
setisValidDSCred(false);
setAppId('BH4D9OD16A');
setIndexName('docsearch');
setApiKey('25626fae796133dc1e734c6bcaaeac3c');
};
useEffect(() => {
// Credential not provided
if (!indexName && !apiKey) {
fallbackToDocSearchDocCred();
return;
}
if ((!indexName && !apiKey) || apiKey.length !== 32) {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
return;
}
const searchClient = algoliasearch(appId, apiKey);
const index = searchClient.initIndex(indexName);
index
.search('')
.then(_ => setisValidDSCred(true))
.catch(_ => {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
});
}, [appId, indexName, apiKey]);
return (
<>
<Hero background="orbInside" title="Integrate it!" padding="small" />
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<Text>
Try it out with the index: <Pill>{`${indexName}`}</Pill>
</Text>
<ErrorBoundary>
{isValidDSCred && (
<DocSearch appId={appId} indexName={indexName} apiKey={apiKey} />
)}
{wrongCredentials && (
<Text color="mars-0">
The credentials provided from the URL were wrong, we will demo the
search with the search of our documentation instead.
</Text>
)}
</ErrorBoundary>
</Card>
<Card
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px', marginTop: '2em' }}
background={theme}
>
<LabelText big>Instructions:</LabelText>
<Text className="mt-4">
We ha've successfully configured the underlying crawler and it will
now run every 24h.
<br />
You're now a few steps away from having it working on your website:
</Text>
<Text className="mt-4">Include a search input:</Text>
<LiveProvider
code={`<input type="text" id="q" placeholder="Search the doc" />`}
language="html"
noInline={true}
transformCode={code =>
`class Null extends React.Component {render(){return null}}`
}
theme={theme === 'dark' ? vsDark : github}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
<Text className="mt-4">Include these assets:</Text>
<LiveProvider
code={`<!-- at the end of the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
apiKey: '${apiKey}',
indexName: '${indexName}',
inputSelector: '#q', // CSS selector to target <input/>
debug: false // Set to true if you want to inspect the dropdown
});
</script>`}
language="html"
noInline={true}
transformCode={code =>
`class Null extends React.Component {render(){return null}}`
}
theme={theme === 'dark' ? vsDark : github}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
<Text>
Need to change something?
<InlineLink
style={{
textDecoration: 'none',
alignItems: 'center',
paddingLeft: '1em',
}}
href={`https://github.com/algolia/docsearch-configs/blob/master/configs/${indexName}.json`}
>
Please submit a PR on your configuration
</InlineLink>
</Text>
<Text>
<LabelText big>Want another website?</LabelText>
</Text>
<div className="jc-center fxd-column d-flex my-4">
<Button
primary
style={{ textDecoration: 'none', alignItems: 'center' }}
href={useBaseUrl('/apply')}
>
Join the Program
</Button>
</div>
</Card>
</>
);
}
function LandingPage() {
return (
<Layout
title="DocSearch Landing"
description="Try out the search for your DocSearch project"
>
<Landing />
</Layout>
);
}
export default LandingPage;

151
packages/website/src/pages/playground.js Normal file
View file

@ -0,0 +1,151 @@
import React, { useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import { useLocation } from 'react-router';
import queryString from 'query-string';
import {
Button,
Hero,
Text,
Pill,
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';
function Playground() {
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const {
appId: appIdQS = 'BH4D9OD16A',
indexName: indexNameQS = '',
apiKey: apiKeyQS = '',
} = queryString.parse(useLocation().search);
const [isValidDSCred, setisValidDSCred] = useState(false);
const [wrongCredentials, setWrongCredentials] = useState(false);
const [appId, setAppId] = useState(appIdQS);
const [indexName, setIndexName] = useState(indexNameQS);
const [apiKey, setApiKey] = useState(apiKeyQS);
const fallbackToDocSearchDocCred = () => {
setisValidDSCred(false);
setAppId('BH4D9OD16A');
setIndexName('docsearch');
setApiKey('25626fae796133dc1e734c6bcaaeac3c');
};
useEffect(() => {
// Credential not provided
if (!indexName && !apiKey) {
fallbackToDocSearchDocCred();
return;
}
if ((!indexName && !apiKey) || apiKey.length !== 32) {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
return;
}
const searchClient = algoliasearch(appId, apiKey);
const index = searchClient.initIndex(indexName);
index
.search('')
.then(_ => setisValidDSCred(true))
.catch(_ => {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
});
}, [appId, indexName, apiKey]);
return (
<>
<Hero background="orbInside" title="Playground" padding="small" />
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<Text>
Try it out with the index: <Pill>{`${indexName}`}</Pill>
</Text>
<ErrorBoundary>
{isValidDSCred && (
<DocSearch appId={appId} indexName={indexName} apiKey={apiKey} />
)}
{wrongCredentials && (
<Text color="mars-0">
The credentials provided from the URL were wrong, we will demo the
search with the search of our documentation instead.
</Text>
)}
</ErrorBoundary>
</Card>
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px', marginTop: '2em' }}
>
<LabelText big>Instructions:</LabelText>
<Text className="mt-4">
You can try it out with your own <Pill>apiKey</Pill> and{' '}
<Pill>indexName</Pill> by fetching the following URL:
</Text>
<Text className="mt-4">
<a
href={useBaseUrl(
'/playground/?indexName=<indexName>&apiKey=<apiKey>'
)}
>{`https://docsearch.algolia.com/playground/?indexName=<indexName>&apiKey=<apiKey>&appId=<appId>`}</a>
</Text>
<Text className="mt-4">
<Pill>appId</Pill> is optional.
</Text>
<Text>
Need to change something?
<InlineLink
style={{
textDecoration: 'none',
alignItems: 'center',
paddingLeft: '1em',
}}
href={`https://github.com/algolia/docsearch-configs/blob/master/configs/${indexName}.json`}
>
Please submit a PR on your configuration
</InlineLink>
</Text>
<Text>
<LabelText big>Want another website?</LabelText>
</Text>
<div className="jc-center fxd-column d-flex my-4">
<Button
primary
style={{ textDecoration: 'none', alignItems: 'center' }}
href={useBaseUrl('/apply')}
>
Join the Program
</Button>
</div>
</Card>
</>
);
}
function PlaygroundPage() {
return (
<Layout
title="DocSearch Playground"
description="Try out the search for your DocSearch project"
>
<Playground />
</Layout>
);
}
export default PlaygroundPage;

201
packages/website/src/pages/showcase-projects.json Normal file
View file

@ -0,0 +1,201 @@
[{
"name": "Bootstrap",
"image": "img/logos/bootstrap.jpg",
"href": "https://getbootstrap.com/docs/4.1/getting-started/introduction/"
},
{
"name": "Babel",
"image": "img/logos/babel.jpg",
"href": "https://babeljs.io/docs/en/"
},
{
"name": "GraphQL",
"image": "img/logos/graphql.jpg",
"href": "https://graphql.org/learn/"
},
{
"name": "TypeScript",
"image": "img/logos/typescriptlang.svg",
"href": "https://www.typescriptlang.org/index.html"
},
{
"name": "React",
"image": "img/logos/react.jpg",
"href": "https://reactjs.org/docs/getting-started.html"
},
{
"name": "Requests",
"image": "img/logos/requests.png",
"href": "https://requests.readthedocs.io/en/master/"
},
{
"name": "ESLint",
"image": "img/logos/eslint.svg",
"href": "https://eslint.org/"
},
{
"name": "webpack",
"image": "img/logos/webpack.svg",
"href": "https://webpack.js.org/concepts/"
},
{
"name": "Gatsby",
"image": "img/logos/gatsby.png",
"href": "https://www.gatsbyjs.org/docs/"
},
{
"name": "Netlify",
"image": "img/logos/netlify.svg",
"href": "https://docs.netlify.com/"
},
{
"name": "Vue.js",
"image": "img/logos/vue.svg",
"href": "https://vuejs.org/"
},
{
"name": "Yarn",
"image": "img/logos/yarn.jpg",
"href": "https://yarnpkg.com/lang/en/docs/"
},
{
"name": "Material-UI",
"image": "img/logos/material-ui.svg",
"href": "https://material-ui.com"
},
{
"name": "Ant Design",
"image": "img/logos/ant-design.svg",
"href": "https://ant.design/index-cn"
},
{
"name": "React Native",
"image": "img/logos/react-native.svg",
"href": "https://facebook.github.io/react-native/docs/getting-started"
},
{
"name": "jQuery",
"image": "img/logos/jquery.jpg",
"href": "https://api.jquery.com/"
},
{
"name": "GitLab",
"image": "img/logos/gitlab.svg",
"href": "https://docs.gitlab.com/"
},
{
"name": "Homebrew",
"image": "img/logos/homebrew.png",
"href": "https://brew.sh/"
},
{
"name": "Moment.js",
"image": "img/logos/momentjs.svg",
"href": "https://momentjs.com/docs/"
},
{
"name": "Tailwind",
"image": "img/logos/tailwindcss.svg",
"href": "https://tailwindcss.com/docs/installation/"
},
{
"name": "BootstrapVue",
"image": "img/logos/bootstrap-vue.svg",
"href": "https://bootstrap-vue.js.org/docs"
},
{
"name": "Sass",
"image": "img/logos/sass.png",
"href": "https://sass-lang.com/"
},
{
"name": "Twilio",
"image": "img/logos/twilio.png",
"href": "https://www.twilio.com/docs"
},
{
"name": "Docusaurus",
"image": "img/logos/docusaurus.svg",
"href": "https://docusaurus.io/"
},
{
"name": "Gradle",
"image": "img/logos/gradle.png",
"href": "https://docs.gradle.org/current/userguide/userguide.html"
},
{
"name": "Nuxt.js",
"image": "img/logos/nuxtjs.svg",
"href": "https://nuxtjs.org/"
},
{
"name": "Vuetify",
"image": "img/logos/vuetify.png",
"href": "https://vuetifyjs.com/en/"
},
{
"name": "Jekyll",
"image": "img/logos/jekyll.png",
"href": "https://jekyllrb.com/"
},
{
"name": "PyTorch",
"image": "img/logos/pytorch.svg",
"href": "https://pytorch.org/get-started/locally/"
},
{
"name": "Apollo",
"image": "img/logos/apollo.png",
"href": "https://www.apollographql.com/docs/"
},
{
"name": "Scala",
"image": "img/logos/scala.svg",
"href": "https://docs.scala-lang.org/"
},
{
"name": "Laravel",
"image": "img/logos/laravel.svg",
"href": "https://laravel.com/docs/6.x"
},
{
"name": "socket.io",
"image": "img/logos/socketio.svg",
"href": "https://socket.io/docs/"
},
{
"name": "Jest",
"image": "img/logos/jest.png",
"href": "https://jestjs.io/"
},
{
"name": "Couchbase",
"image": "img/logos/couchbase.svg",
"href": "https://docs.couchbase.com/"
},
{
"name": "HELM",
"image": "img/logos/helm.svg",
"href": "https://docs.helm.sh/docs/"
},
{
"name": "Timescale",
"image": "img/logos/timescale.svg",
"href": "https://docs.timescale.com/"
},
{
"name": "Home Assistant",
"image": "img/logos/home-assistant.svg",
"href": "http://home-assistant.io/"
},
{
"name": "GNS3",
"image": "img/logos/gns3.png",
"href": "https://docs.gns3.com/"
},
{
"name": "NestJS",
"image": "img/logos/nestjs.png",
"href": "https://docs.nestjs.com/"
}
]

166
packages/website/src/pages/v3me.js Normal file
View file

@ -0,0 +1,166 @@
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router';
import queryString from 'query-string';
import Layout from '@theme/Layout';
import {
Button,
Hero,
Text,
Pill,
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 useThemeContext from '@theme/hooks/useThemeContext';
function V3Me() {
const theme = useThemeContext.isDarkTheme ? 'dark' : 'light';
const getParams = queryString.parse(useLocation().search);
const {
appId: appIdQS = 'BH4D9OD16A',
indexName: indexNameQS = '',
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);
const [indexName, setIndexName] = useState(indexNameQS);
const [apiKey, setApiKey] = useState(apiKeyQS);
const fallbackToDocSearchDocCred = () => {
setisValidDSCred(false);
setAppId('BH4D9OD16A');
setIndexName('docsearch');
setApiKey('25626fae796133dc1e734c6bcaaeac3c');
};
useEffect(() => {
// Credential not provided
if (!indexName && !apiKey) {
fallbackToDocSearchDocCred();
return;
}
if ((!indexName && !apiKey) || apiKey.length !== 32) {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
return;
}
const searchClient = algoliasearch(appId, apiKey);
const index = searchClient.initIndex(indexName);
index
.search('')
.then(_ => setisValidDSCred(true))
.catch(_ => {
setWrongCredentials(true);
fallbackToDocSearchDocCred();
});
}, [appId, indexName, apiKey]);
return (
<>
<Hero background="orbInside" title="V3Me" padding="small" />
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px' }}
>
<Text>
Try it out the v3 WIP with the index: <Pill>{`${indexName}`}</Pill>
</Text>
<ErrorBoundary>
{isValidDSCred && (
<DocSearchModal
appId={appId}
apiKey={apiKey}
indexName={indexName}
/>
)}
{wrongCredentials && (
<Text color="mars-0">
The credentials provided from the URL were wrong, we will demo the
search with the search of our documentation instead.
</Text>
)}
</ErrorBoundary>
</Card>
<Card
background={theme}
className="m-auto mt-4"
style={{ position: 'relative', maxWidth: '800px', marginTop: '2em' }}
>
<LabelText big>Instructions:</LabelText>
<Text className="mt-4">
You can try it out with your own <Pill>apiKey</Pill> and{' '}
<Pill>indexName</Pill> by fetching the following URL:
</Text>
<Text className="mt-4">
<a
href={useBaseUrl('/v3me/?indexName=<indexName>&apiKey=<apiKey>')}
>{`https://docsearch.algolia.com/v3me/?indexName=<indexName>&apiKey=<apiKey>&appId=<appId>`}</a>
</Text>
<Text className="mt-4">
<Pill>appId</Pill> is optional.
</Text>
<Text>
Need to change something?
<InlineLink
style={{
textDecoration: 'none',
alignItems: 'center',
paddingLeft: '1em',
}}
href={`https://github.com/algolia/docsearch-configs/blob/master/configs/${indexName}.json`}
>
Please submit a PR on your configuration
</InlineLink>
</Text>
<Text>
<LabelText big>Want another website?</LabelText>
</Text>
<div className="jc-center fxd-column d-flex my-4">
<Button
primary
style={{ textDecoration: 'none', alignItems: 'center' }}
href={useBaseUrl('/apply')}
>
Join the Program
</Button>
</div>
</Card>
</>
);
}
function V3MePage() {
return (
<Layout>
<V3Me />
</Layout>
);
}
export default V3MePage;

1
packages/website/static/img/algolia-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

161
packages/website/static/img/assets/anatomy.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 351 KiB

1
packages/website/static/img/assets/bg-analytics.svg Normal file
View file

@ -0,0 +1 @@
<svg height="675" viewBox="0 0 1440 675" width="1440" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" opacity=".5" stroke="#c5c9e0" transform="translate(0 1)"><path d="m1440 .9135c-.8406-.6093-42.0885-.9135-123.7428-.9135-122.4837 0-122.4837 223.6878-244.9674 223.6878h-244.9656c-122.481 0-122.481 223.6878-244.9647 223.6878h-244.9647c-122.4846 0-95.0661 170.0244-217.5498 170.0244h-118.845"/><path d="m1440 43.8588c-.8406-.4392-42.0885-.6588-123.7428-.6588-122.4837 0-122.4837 210.3129-244.9674 210.3129h-244.9656c-122.481 0-122.481 210.3138-244.9647 210.3138h-244.9647c-122.4846 0-95.0661 158.9733-217.5498 158.9733h-118.845"/><path d="m1440 88.5933c-.8406-.2619-42.0885-.3933-123.7428-.3933-122.4837 0-122.4837 196.2873-244.9674 196.2873h-244.9656c-122.481 0-122.481 196.2846-244.9647 196.2846h-244.9647c-122.4846-.0009-95.0661 147.4281-217.5498 147.4281h-118.845"/><path d="m1440 133.3305c-.8406-.0873-42.0885-.1305-123.7428-.1305-122.4837 0-122.4837 182.259-244.9674 182.259h-244.9656c-122.481 0-122.481 182.2572-244.9647 182.2572h-244.9647c-122.4846 0-95.0661 135.8838-217.5498 135.8838h-118.845" stroke-dasharray="10"/><path d="m1440 176.4c-.8406.0828-42.0885.1242-123.7428.1242-122.4837 0-122.4837 168.8409-244.9674 168.8409h-244.9656c-122.481 0-122.481 168.8436-244.9647 168.8436h-244.9647c-122.4846 0-95.0661 124.7913-217.5498 124.7913h-118.845"/><path d="m1440 221.4c-.8406.2592-42.0885.3879-123.7428.3879-122.4837 0-122.4837 154.7172-244.9674 154.7172h-244.9656c-122.481 0-122.481 154.719-244.9647 154.719h-244.9647c-122.4846.0009-95.0661 113.1759-217.5498 113.1759h-118.845"/><path d="m1440 265.5c-.8406.4338-42.0885.6507-123.7428.6507-122.4837 0-122.4837 140.5935-244.9674 140.5935h-244.9656c-122.481 0-122.481 140.5917-244.9647 140.5917h-244.9647c-122.4846 0-95.0661 101.5641-217.5498 101.5641h-118.845"/><path d="m1440 307.8c-.8406.603-42.0885.9054-123.7428.9054-122.4837 0-122.4837 127.1313-244.9674 127.1313h-244.9656c-122.481 0-122.481 127.1304-244.9647 127.1304h-244.9647c-122.4846 0-95.0661 90.4329-217.5498 90.4329h-118.845"/><path d="m1440 352.8h-124.2c-122.4837 0-122.0265 113.2722-244.5102 113.2722h-244.9656c-122.481 0-122.481 113.0049-244.9647 113.0049h-244.9647c-122.4846.0009-95.0661 78.8229-217.5498 78.8229h-118.845"/><path d="m1440 396.9c-.8406.9558-42.0885 1.4346-123.7428 1.4346-122.4837 0-122.4837 98.8713-244.9674 98.8713h-244.9656c-122.481 0-122.481 98.874-244.9647 98.874h-244.9647c-122.4846 0-95.0661 67.2201-217.5498 67.2201h-118.845"/><path d="m1440 440.1c-.8406 1.1232-42.0885 1.6848-123.7428 1.6848-122.4837 0-122.4837 85.4208-244.9674 85.4208h-244.9656c-122.481 0-122.481 85.4208-244.9647 85.4208h-244.9647c-122.4846 0-95.0661 56.0736-217.5498 56.0736h-118.845" stroke-dasharray="10"/><path d="m1440 483.3c-.8406 1.3023-42.0885 1.9539-123.7428 1.9539-122.4837 0-122.4837 71.6256-244.9674 71.6256h-244.9656c-122.481 0-122.481 71.6283-244.9647 71.6283h-244.9647c-122.4846 0-95.0661 44.6922-217.5498 44.6922h-118.845"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

1
packages/website/static/img/assets/bg-docsearch.svg Normal file
View file

@ -0,0 +1 @@
<svg height="542" viewBox="0 0 3203 542" width="3203" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m3209.5 541h-1528.5" stroke="#5468ff"/><g stroke="#c5c9e0" transform="translate(1601 59)"><path d="m1607.48047 445h-825.48047c-41.644526 0-708 35-708 35"/><path d="m1607.48047 407h-825.48047c-83.27453 0-714 69-714 69"/><path d="m1607.48047 371h-825.48047c-124.879623 0-720 104-720 104"/><path d="m1607.48047 334h-825.48047c-166.481685 0-726 138-726 138"/><path d="m1607.48047 296h-825.48047c-208.070298 0-732 173-732 173"/><path d="m1607.48047 260h-826.48047c-249.642161 0-738 207-738 207"/><path d="m1607.48047 222h-825.48047c-291.595705 0-745 242-745 242"/><path d="m1607.48047 185h-825.48047c-333.197646 0-751 277-751 277"/><path d="m1607.48047 148h-825.48047c-374.786578 0-757 312-757 312"/><path d="m1607.48047 111h-825.48047c-416.356939 0-763 345-763 345"/><path d="m1607.48047 74h-825.48047c-458.51572 0-770 380-770 380"/><path d="m1607.48047 37h-825.48047c-500.115939 0-776 415-776 415"/><path d="m1607.48047 0h-826.48047c-541.053893 0-781 450-781 450"/></g><g stroke="#c5c9e0" transform="matrix(-1 0 0 1 1597 59)"><path d="m1607.48047 445h-825.48047c-41.644526 0-708 35-708 35"/><path d="m1607.48047 407h-825.48047c-83.27453 0-714 69-714 69"/><path d="m1607.48047 371h-825.48047c-124.879623 0-720 104-720 104"/><path d="m1607.48047 334h-825.48047c-166.481685 0-726 138-726 138"/><path d="m1607.48047 296h-825.48047c-208.070298 0-732 173-732 173"/><path d="m1607.48047 260h-826.48047c-249.642161 0-738 207-738 207"/><path d="m1607.48047 222h-825.48047c-291.595705 0-745 242-745 242"/><path d="m1607.48047 185h-825.48047c-333.197646 0-751 277-751 277"/><path d="m1607.48047 148h-825.48047c-374.786578 0-757 312-757 312"/><path d="m1607.48047 111h-825.48047c-416.356939 0-763 345-763 345"/><path d="m1607.48047 74h-825.48047c-458.51572 0-770 380-770 380"/><path d="m1607.48047 37h-825.48047c-500.115939 0-776 415-776 415"/><path d="m1607.48047 0h-826.48047c-541.053893 0-781 450-781 450"/></g><path d="m-7.5 541h1688.5" stroke="#5468ff"/><g fill="#fff" fill-rule="nonzero" stroke="#c5c9e0"><circle cx="1030" cy="197" r="6"/><circle cx="1282" cy="422" r="6"/><circle cx="1913" cy="473" r="6"/><circle cx="2176" cy="234" r="6"/><path d="m2033 200h14v14h-14z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 451.131063 1503.12673)"/><path d="m2040 202v9"/><path d="m2045.5 207h-10.5"/><path d="m1149 406h15v15h-15z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 46.342354 938.880338)"/><path d="m1156 409v9"/><path d="m1160 414h-9"/><path d="m896 205h15v15h-15z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 114.368832 701.110786)"/><path d="m903 208v9"/><path d="m908 213h-9"/><path d="m2284 431h15v15h-15z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 361.098487 1748.768866)"/><path d="m2292 434v9"/><path d="m2297 438h-9"/><path d="m1780 401h15v15h-15z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 234.693509 1383.600251)"/><path d="m1788 404v9"/><path d="m1791 409h-9"/><g transform="translate(1403 368)"><path d="m3.289589 3.249109h15.358272v15.358272h-15.358272z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -4.514771 10.956869)"/><path d="m10.9647202 6.13628037v9.59491773"/><path d="m15.7675155 10.9284028h-9.59491769"/></g><g transform="translate(1176 124)"><path d="m3.289589 3.249109h15.358272v15.358272h-15.358272z" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -4.514771 10.956869)"/><path d="m10.9647202 6.13628037v9.59491773"/><path d="m15.7675155 10.9284028h-9.59491769"/></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

791
packages/website/static/img/assets/configuration.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 733 KiB

BIN
packages/website/static/img/assets/default-colorscheme-v3-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
packages/website/static/img/assets/default-colorscheme-v3-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
packages/website/static/img/assets/default-colorscheme.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
packages/website/static/img/assets/developers.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 830 KiB

BIN
packages/website/static/img/assets/docsearch-how-it-works.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
packages/website/static/img/assets/docsearch-shadow-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
packages/website/static/img/assets/docsearch-shadow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
packages/website/static/img/assets/docsearch-ui-anatomy.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 79 KiB

1
packages/website/static/img/assets/illus-analytics.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
packages/website/static/img/assets/illus3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 381 KiB

156
packages/website/static/img/assets/implementation.svg Normal file
View file

@ -0,0 +1,156 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="285px" height="155px" viewBox="0 0 285 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>implementation</title>
<defs>
<rect id="path-1" x="2.84217094e-14" y="0.634468935" width="199.687305" height="127.179487" rx="8"></rect>
<filter x="-4.0%" y="-4.7%" width="108.0%" height="112.6%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.137254902 0 0 0 0 0.145098039 0 0 0 0 0.2 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feColorMatrix values="0 0 0 0 0.0666666667 0 0 0 0 0.0784313725 0 0 0 0 0.196078431 0 0 0 0.08 0" type="matrix" in="shadowOffsetOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<rect id="path-3" x="0" y="0" width="180" height="44" rx="22"></rect>
<filter x="-0.3%" y="-1.1%" width="101.1%" height="104.5%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<filter x="-2.2%" y="-9.1%" width="105.0%" height="120.5%" filterUnits="objectBoundingBox" id="filter-5">
<feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.526194303 0 0 0 0 0.572896277 0 0 0 0 0.86645154 0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
<feGaussianBlur stdDeviation="3" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
<feOffset dx="1" dy="2" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
<feColorMatrix values="0 0 0 0 0.753394147 0 0 0 0 0.770553611 0 0 0 0 0.900107563 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="0%" y1="9.07029478%" x2="100%" y2="90.9297052%" id="linearGradient-6">
<stop stop-color="#D5DBE4" offset="0%"></stop>
<stop stop-color="#F8F8F8" offset="100%"></stop>
</linearGradient>
<rect id="path-7" x="0" y="0" width="21" height="19" rx="3"></rect>
<filter x="-23.8%" y="-21.1%" width="147.6%" height="152.6%" filterUnits="objectBoundingBox" id="filter-8">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.112549592 0 0 0 0 0.145130364 0 0 0 0 0.34876019 0 0 0 0.382921766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-19.0%" y="-15.8%" width="138.1%" height="142.1%" filterUnits="objectBoundingBox" id="filter-9">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="0.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
<feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
<feColorMatrix values="0 0 0 0 0.804213643 0 0 0 0 0.816907755 0 0 0 0 0.906448143 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
</feMerge>
</filter>
<rect id="path-10" x="0" y="0" width="21" height="19" rx="3"></rect>
<filter x="-23.8%" y="-21.1%" width="147.6%" height="152.6%" filterUnits="objectBoundingBox" id="filter-11">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.112549592 0 0 0 0 0.145130364 0 0 0 0 0.34876019 0 0 0 0.382921766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-19.0%" y="-15.8%" width="138.1%" height="142.1%" filterUnits="objectBoundingBox" id="filter-12">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="0.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
<feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
<feColorMatrix values="0 0 0 0 0.804213643 0 0 0 0 0.816907755 0 0 0 0 0.906448143 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-913.000000, -1687.000000)">
<g id="How" transform="translate(0.000000, 1402.000000)">
<g id="implementation" transform="translate(918.000000, 288.500000)">
<g id="Group-20">
<g id="card">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#21243D" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<text id="&lt;script-…." font-family="Menlo-Regular, Menlo" font-size="14" font-weight="normal" line-spacing="21" fill="#FFFFFF">
<tspan x="9.29747759" y="21.8792173">&lt;script ….</tspan>
</text>
</g>
<g id="s-link" transform="translate(80.000000, 105.500000)">
<g id="searchbox" transform="translate(0.000000, 0.253432)">
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#D4D9E1" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
</g>
<g id="Group" transform="translate(0.000000, 16.000000)"></g>
<g id="Group" transform="translate(32.000000, 16.000000)"></g>
<g id="Group" transform="translate(188.000000, 16.000000)"></g>
<g id="Group" transform="translate(12.000000, 12.000000)" stroke="#5468FF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<g id="Path">
<path d="M15.4164079,15.4164079 L19.9999998,19.9999998 L15.4164079,15.4164079 C12.1176558,18.7151599 6.76932192,18.7151599 3.47056984,15.4164079 C0.171817761,12.1176558 0.171817761,6.76932192 3.47056984,3.47056984 C6.76932192,0.171817761 12.1176558,0.171817761 15.4164079,3.47056984 C18.7151599,6.76932192 18.7151599,12.1176558 15.4164079,15.4164079 Z"></path>
</g>
</g>
<g id="Group" transform="translate(44.000000, 9.500000)" fill="#8A9BB6" font-family="Hind-Medium, Hind" font-size="16" font-weight="400" letter-spacing="0.168070154">
<g id="typography/searchbox/placeholder">
<text id="Search-the-docs…">
<tspan x="0" y="17">Search</tspan>
</text>
</g>
</g>
<g id="Stacked-Group" transform="translate(112.000000, 10.500000)">
<g id="key" transform="translate(0.000000, 2.000000)">
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="url(#linearGradient-6)" fill-rule="evenodd" xlink:href="#path-7"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
</g>
<g id="Group" transform="translate(3.000000, 1.500000)" fill="#7D8BA0" fill-rule="nonzero">
<g id="⌘">
<path d="M6,6.996139 L4.9980695,6.996139 C4.44594319,6.996139 3.97490542,6.80116025 3.58494208,6.41119691 C3.19497875,6.02123357 3,5.55019581 3,4.9980695 C3,4.44594319 3.19497875,3.97490542 3.58494208,3.58494208 C3.97490542,3.19497875 4.44594319,3 4.9980695,3 C5.55019581,3 6.02219881,3.19497875 6.41409266,3.58494208 C6.80598652,3.97490542 7.0019305,4.44594319 7.0019305,4.9980695 L7.0019305,6 L8.003861,6 L8.003861,4.9980695 C8.003861,4.44594319 8.19883975,3.97490542 8.58880309,3.58494208 C8.97876643,3.19497875 9.44980419,3 10.0019305,3 C10.5540568,3 11.0250946,3.19497875 11.4150579,3.58494208 C11.8050213,3.97490542 12,4.44594319 12,4.9980695 C12,5.55019581 11.8050213,6.02123357 11.4150579,6.41119691 C11.0250946,6.80116025 10.5540568,6.996139 10.0019305,6.996139 L9,6.996139 L9,7.9980695 L10.0019305,7.9980695 C10.5540568,7.9980695 11.0250946,8.19401348 11.4150579,8.58590734 C11.8050213,8.97780119 12,9.44980419 12,10.0019305 C12,10.5540568 11.8050213,11.0250946 11.4150579,11.4150579 C11.0250946,11.8050213 10.5540568,12 10.0019305,12 C9.44980419,12 8.97876643,11.8050213 8.58880309,11.4150579 C8.19883975,11.0250946 8.003861,10.5540568 8.003861,10.0019305 L8.003861,9 L7.0019305,9 L7.0019305,10.0019305 C7.0019305,10.5540568 6.80598652,11.0250946 6.41409266,11.4150579 C6.02219881,11.8050213 5.55019581,12 4.9980695,12 C4.44594319,12 3.97490542,11.8050213 3.58494208,11.4150579 C3.19497875,11.0250946 3,10.5540568 3,10.0019305 C3,9.44980419 3.19497875,8.97780119 3.58494208,8.58590734 C3.97490542,8.19401348 4.44594319,7.9980695 4.9980695,7.9980695 L6,7.9980695 L6,6.996139 Z M7.0019305,7.9980695 L8.003861,7.9980695 L8.003861,6.996139 L7.0019305,6.996139 L7.0019305,7.9980695 Z M6,6 L6,4.9980695 C6,4.72393685 5.90251063,4.48841797 5.70752896,4.29150579 C5.51254729,4.09459361 5.27606317,3.996139 4.9980695,3.996139 C4.72393685,3.996139 4.48938321,4.09459361 4.29440154,4.29150579 C4.09941987,4.48841797 4.0019305,4.72393685 4.0019305,4.9980695 C4.0019305,5.27606317 4.09941987,5.51254729 4.29440154,5.70752896 C4.48938321,5.90251063 4.72393685,6 4.9980695,6 L6,6 Z M9,6 L10.0019305,6 C10.2799242,6 10.5164083,5.90154539 10.71139,5.7046332 C10.9063716,5.50772102 11.003861,5.27220214 11.003861,4.9980695 C11.003861,4.72393685 10.9054064,4.48841797 10.7084942,4.29150579 C10.511582,4.09459361 10.2760631,3.996139 10.0019305,3.996139 C9.72393683,3.996139 9.48745271,4.09459361 9.29247104,4.29150579 C9.09748937,4.48841797 9,4.72393685 9,4.9980695 L9,6 Z M9,9 L9,10.0019305 C9,10.2760631 9.09845461,10.5106168 9.2953668,10.7055985 C9.49227898,10.9005801 9.72779786,10.9980695 10.0019305,10.9980695 C10.2799242,10.9980695 10.5164083,10.9005801 10.71139,10.7055985 C10.9063716,10.5106168 11.003861,10.2741327 11.003861,9.996139 C11.003861,9.72200635 10.9054064,9.48745271 10.7084942,9.29247104 C10.511582,9.09748937 10.2760631,9 10.0019305,9 L9,9 Z M6,9 L4.9980695,9 C4.72393685,9 4.48938321,9.09748937 4.29440154,9.29247104 C4.09941987,9.48745271 4.0019305,9.72393683 4.0019305,10.0019305 C4.0019305,10.2760631 4.09941987,10.5106168 4.29440154,10.7055985 C4.48938321,10.9005801 4.72393685,10.9980695 4.9980695,10.9980695 C5.27606317,10.9980695 5.51254729,10.9005801 5.70752896,10.7055985 C5.90251063,10.5106168 6,10.2760631 6,10.0019305 L6,9 Z"></path>
</g>
</g>
</g>
<g id="key" transform="translate(33.000000, 2.000000)">
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
<use fill="url(#linearGradient-6)" fill-rule="evenodd" xlink:href="#path-10"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-10"></use>
</g>
<g id="Group" transform="translate(3.000000, 1.500000)" fill="#7E8BA1" font-family="Hind-Regular, Hind" font-size="13" font-weight="normal" letter-spacing="0.136557">
<g id="K">
<text>
<tspan x="3.7072215" y="12">K</tspan>
</text>
</g>
</g>
</g>
<text id="+" font-family="Hind-Regular, Hind" font-size="16" font-weight="normal" letter-spacing="0.168070154" fill="#93A0B3">
<tspan x="22" y="17">+</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
packages/website/static/img/assets/keyboard.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
packages/website/static/img/assets/no-results.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
packages/website/static/img/assets/offline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 393 KiB

BIN
packages/website/static/img/assets/playground.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
packages/website/static/img/assets/recommended-layout.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

252
packages/website/static/img/assets/scraping.svg Normal file
View file

@ -0,0 +1,252 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="288px" height="249px" viewBox="0 0 288 249" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>scraping</title>
<defs>
<linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-1">
<stop stop-color="#F5F5FA" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<path d="M5.84772823,0 L186.41224,0 C189.641851,2.94908481e-16 192.259968,2.61811711 192.259968,5.84772823 L192.259968,145.030571 C192.259968,148.260182 189.641851,150.878299 186.41224,150.878299 L5.84772823,150.878299 C2.61811711,150.878299 1.28369171e-15,148.260182 0,145.030571 L0,5.84772823 C4.92665127e-16,2.61811711 2.61811711,1.48144836e-15 5.84772823,0 Z" id="path-2"></path>
<filter x="-11.4%" y="-11.3%" width="122.9%" height="129.2%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.145098039 0 0 0 0 0.17254902 0 0 0 0 0.380392157 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.364705882 0 0 0 0 0.392156863 0 0 0 0 0.580392157 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="81.3984375%" x2="50%" y2="2.77555756e-15%" id="linearGradient-5">
<stop stop-color="#A0AAF8" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#5468FF" stop-opacity="0.4" offset="100%"></stop>
</linearGradient>
<filter x="-42.4%" y="-42.4%" width="184.8%" height="184.8%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.145098039 0 0 0 0 0.17254902 0 0 0 0 0.380392157 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<ellipse id="path-7" cx="45.8639053" cy="46" rx="34.9763314" ry="34.8402367"></ellipse>
<filter x="-11.4%" y="-14.4%" width="128.6%" height="128.7%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="2" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.768627451 0 0 0 0 0.831372549 0 0 0 0 0.905882353 0 0 0 0.354266827 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-216.000000, -1601.000000)">
<g id="How" transform="translate(0.000000, 1402.000000)">
<g id="scraping" transform="translate(216.332736, 228.246568)">
<g id="Group-3" transform="translate(0.000000, 48.753432)">
<g id="Group-8" transform="translate(21.571103, 0.380238)">
<g id="Rectangle-+-Rectangle-Copy-+-Group-7-+-Group-6-Mask">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<path d="M18.7808109,15.7927831 L30.6574667,15.7927831 C31.9284865,15.7927831 32.9588517,16.8231483 32.9588517,18.0941681 C32.9588517,19.365188 31.9284865,20.3955532 30.6574667,20.3955532 L18.7808109,20.3955532 C17.509791,20.3955532 16.4794259,19.365188 16.4794259,18.0941681 C16.4794259,16.8231483 17.509791,15.7927831 18.7808109,15.7927831 Z" id="Rectangle-7-Copy-10" fill="#C5C9E0" mask="url(#mask-3)"></path>
<path d="M117.657366,15.7927831 L129.534022,15.7927831 C130.805042,15.7927831 131.835407,16.8231483 131.835407,18.0941681 C131.835407,19.365188 130.805042,20.3955532 129.534022,20.3955532 L117.657366,20.3955532 C116.386346,20.3955532 115.355981,19.365188 115.355981,18.0941681 C115.355981,16.8231483 116.386346,15.7927831 117.657366,15.7927831 Z" id="Rectangle-7-Copy-11" fill="#C5C9E0" mask="url(#mask-3)"></path>
<path d="M139.629934,15.7927831 L151.50659,15.7927831 C152.777609,15.7927831 153.807975,16.8231483 153.807975,18.0941681 C153.807975,19.365188 152.777609,20.3955532 151.50659,20.3955532 L139.629934,20.3955532 C138.358914,20.3955532 137.328549,19.365188 137.328549,18.0941681 C137.328549,16.8231483 138.358914,15.7927831 139.629934,15.7927831 Z" id="Rectangle-7-Copy-12" fill="#C5C9E0" mask="url(#mask-3)"></path>
<path d="M161.602502,15.7927831 L173.479157,15.7927831 C174.750177,15.7927831 175.780542,16.8231483 175.780542,18.0941681 C175.780542,19.365188 174.750177,20.3955532 173.479157,20.3955532 L161.602502,20.3955532 C160.331482,20.3955532 159.301117,19.365188 159.301117,18.0941681 C159.301117,16.8231483 160.331482,15.7927831 161.602502,15.7927831 Z" id="Rectangle-7-Copy-13" fill="#C5C9E0" mask="url(#mask-3)"></path>
<rect id="Rectangle" fill="#C5C9E0" mask="url(#mask-3)" x="107.116268" y="31.5855662" width="68.6642744" height="34.3321372" rx="4.66019417"></rect>
<rect id="Rectangle-Copy-4" fill="#C5C9E0" mask="url(#mask-3)" x="107.116268" y="105.496936" width="68.6642744" height="34.3321372" rx="4.66019417"></rect>
<rect id="Rectangle-Copy" fill="#C5C9E0" mask="url(#mask-3)" x="16.4794259" y="70.7242026" width="68.6642744" height="29.525638" rx="4.66019417"></rect>
<g id="Group-7" mask="url(#mask-3)" fill="#C5C9E0" opacity="0.5">
<g transform="translate(16.479426, 41.198565)">
<path d="M2.30138502,0 L14.1780408,0 C15.4490607,1.50553553e-15 16.4794259,1.03036517 16.4794259,2.30138502 C16.4794259,3.57240487 15.4490607,4.60277004 14.1780408,4.60277004 L2.30138502,4.60277004 C1.03036517,4.60277004 1.55655039e-16,3.57240487 0,2.30138502 C-1.55655039e-16,1.03036517 1.03036517,-2.10606651e-16 2.30138502,0 Z" id="Rectangle-7"></path>
<path d="M2.30138502,73.9113694 L14.1780408,73.9113694 C15.4490607,73.9113694 16.4794259,74.9417345 16.4794259,76.2127544 C16.4794259,77.4837742 15.4490607,78.5141394 14.1780408,78.5141394 L2.30138502,78.5141394 C1.03036517,78.5141394 1.4936963e-13,77.4837742 1.49213975e-13,76.2127544 C1.49058319e-13,74.9417345 1.03036517,73.9113694 2.30138502,73.9113694 Z" id="Rectangle-7-Copy-5"></path>
<rect id="Rectangle-7-Copy-4" x="18.5393541" y="-4.04121181e-14" width="50.1249203" height="4.60277004" rx="2.30138502"></rect>
<rect id="Rectangle-7-Copy-6" x="18.5393541" y="73.9113694" width="50.1249203" height="4.60277004" rx="2.30138502"></rect>
<path d="M2.30138502,10.3750964 L66.3628894,10.3750964 C67.6339092,10.3750964 68.6642744,11.4054616 68.6642744,12.6764814 C68.6642744,13.9475013 67.6339092,14.9778664 66.3628894,14.9778664 L2.30138502,14.9778664 C1.03036517,14.9778664 -1.13531183e-13,13.9475013 -1.13686838e-13,12.6764814 C-1.13842493e-13,11.4054616 1.03036517,10.3750964 2.30138502,10.3750964 Z" id="Rectangle-7-Copy"></path>
<path d="M2.30138502,84.2864658 L66.3628894,84.2864658 C67.6339092,84.2864658 68.6642744,85.3168309 68.6642744,86.5878508 C68.6642744,87.8588706 67.6339092,88.8892358 66.3628894,88.8892358 L2.30138502,88.8892358 C1.03036517,88.8892358 -1.13531183e-13,87.8588706 -1.13686838e-13,86.5878508 C-1.13842493e-13,85.3168309 1.03036517,84.2864658 2.30138502,84.2864658 Z" id="Rectangle-7-Copy-7"></path>
</g>
</g>
<g id="Group-6" mask="url(#mask-3)" fill="#C5C9E0" opacity="0.5">
<g transform="translate(107.116268, 80.337201)">
<path d="M2.30138502,-1.21236354e-13 L27.9108957,-1.21236354e-13 C29.1819156,-1.22358015e-13 30.2122807,1.03036517 30.2122807,2.30138502 C30.2122807,3.57240487 29.1819156,4.60277004 27.9108957,4.60277004 L2.30138502,4.60277004 C1.03036517,4.60277004 1.55655039e-16,3.57240487 0,2.30138502 C-1.55655039e-16,1.03036517 1.03036517,-1.21446961e-13 2.30138502,-1.21236354e-13 Z" id="Rectangle-7-Copy-2"></path>
<rect id="Rectangle-7-Copy-3" x="32.272209" y="-1.21236354e-13" width="36.3920654" height="4.60277004" rx="2.30138502"></rect>
<path d="M2.30138502,10.3750964 L14.1780408,10.3750964 C15.4490607,10.3750964 16.4794259,11.4054616 16.4794259,12.6764814 C16.4794259,13.9475013 15.4490607,14.9778664 14.1780408,14.9778664 L2.30138502,14.9778664 C1.03036517,14.9778664 1.55655039e-16,13.9475013 0,12.6764814 C-1.55655039e-16,11.4054616 1.03036517,10.3750964 2.30138502,10.3750964 Z" id="Rectangle-7-Copy-9"></path>
<rect id="Rectangle-7-Copy-8" x="18.5393541" y="10.3750964" width="50.1249203" height="4.60277004" rx="2.30138502"></rect>
</g>
</g>
</g>
<circle id="Oval" fill="#ED5A6A" cx="6.1797847" cy="4.80649921" r="2.05992823"></circle>
<circle id="Oval-Copy" fill="#F8BE9A" cx="14.4194976" cy="4.80649921" r="2.05992823"></circle>
<circle id="Oval-Copy-2" fill="#61C5C8" cx="22.6592106" cy="4.80649921" r="2.05992823"></circle>
</g>
<g id="Group-12" transform="translate(0.285178, 69.925704)" fill-rule="nonzero">
<rect id="Rectangle-2" fill="#5468FF" x="0" y="-5.68434189e-14" width="234.831818" height="3.08723094" rx="1.54361547"></rect>
<rect id="Rectangle-3" fill="url(#linearGradient-5)" x="6.79776317" y="3.08723094" width="220.000335" height="16.6710471"></rect>
</g>
</g>
<g id="Group" filter="url(#filter-6)" transform="translate(165.011827, 0.000000)">
<circle id="Oval" fill-opacity="0.5" fill="#C5C9E0" cx="45.8639053" cy="45.8639053" r="45.8639053"></circle>
<g id="Oval">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#F5F5FA" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
<path d="M38.6327928,37.5340772 C38.9334449,37.5340772 39.1771715,37.7778038 39.1771715,38.0784559 L39.1771715,65.2973908 C39.1771715,65.5980428 38.9334449,65.8417695 38.6327928,65.8417695 C38.3321408,65.8417695 38.0884141,65.5980428 38.0884141,65.2973908 L38.0884141,38.0784559 C38.0884141,37.7778038 38.3321408,37.5340772 38.6327928,37.5340772 Z" id="Rectangle-Copy" fill="#848AB8" transform="translate(38.632793, 51.687923) rotate(52.000000) translate(-38.632793, -51.687923) "></path>
<g id="Group-4" transform="translate(40.828402, 8.710059)">
<rect id="Rectangle" fill="#21243D" x="0" y="36.7455621" width="23.408284" height="1.36094675" rx="0.680473373"></rect>
<rect id="Rectangle" fill="#5468FF" x="3.53846154" y="35.6568047" width="3.26627219" height="3.26627219" rx="1.63313609"></rect>
<rect id="Rectangle" fill="#5468FF" x="4.62721893" y="0" width="1.0887574" height="41.9171598" rx="0.544378698"></rect>
</g>
<g id="Group-3" transform="translate(3.810651, 3.810651)" fill="#FFFFFF">
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy" transform="translate(0.544379, 42.053254) rotate(10.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-2" transform="translate(0.544379, 42.053254) rotate(20.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-3" transform="translate(0.544379, 42.053254) rotate(30.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-4" transform="translate(0.544379, 42.053254) rotate(40.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-5" transform="translate(0.544379, 42.053254) rotate(50.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-6" transform="translate(0.544379, 42.053254) rotate(60.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-7" transform="translate(0.544379, 42.053254) rotate(70.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-8" transform="translate(0.544379, 42.053254) rotate(80.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-9" transform="translate(0.544379, 42.053254) rotate(90.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-10" transform="translate(0.544379, 42.053254) rotate(100.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-11" transform="translate(0.544379, 42.053254) rotate(110.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-12" transform="translate(0.544379, 42.053254) rotate(120.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-13" transform="translate(0.544379, 42.053254) rotate(130.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-14" transform="translate(0.544379, 42.053254) rotate(140.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-15" transform="translate(0.544379, 42.053254) rotate(150.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(41.644970, 0.000000)">
<g id="Mins-Copy-16" transform="translate(0.544379, 42.053254) rotate(160.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
</g>
<g transform="translate(45.455621, 3.810651)" fill="#FFFFFF" id="Mins-Copy-17">
<g transform="translate(0.544379, 42.053254) rotate(170.000000) translate(-0.544379, -42.053254) ">
<g id="Group" transform="translate(0.000000, 0.272189)">
<rect id="Rectangle" x="0" y="0" width="1.0887574" height="1.90532544" rx="0.5"></rect>
<rect id="Rectangle-Copy-2" x="0" y="81.6568047" width="1.0887574" height="1.90532544" rx="0.5"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
packages/website/static/img/assets/tailwind.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_7.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
packages/website/static/img/build_index/how_do_we_build_docsearch_index_8.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
packages/website/static/img/demos/example-bootstrap.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 348 KiB

BIN
packages/website/static/img/demos/example-momentjs.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 384 KiB

BIN
packages/website/static/img/demos/example-react.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
packages/website/static/img/demos/example-vuejs.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

1
packages/website/static/img/docsearch-logo-white.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

17
packages/website/static/img/docsearch-logo.svg Normal file
View file

@ -0,0 +1,17 @@
<svg
width="476"
height="78"
viewBox="0 0 476 78"
xmlns="http://www.w3.org/2000/svg"
>
<g fill-rule="nonzero" fill="none">
<path
d="M36.493 77.289h-33.419c-1.698 0-3.074-1.37-3.074-3.061h36.523c12.769.062 24.6-6.663 31.038-17.642 6.438-10.979 6.504-24.543.174-35.584-6.331-11.041-18.096-17.88-30.865-17.942h-36.87c0-1.69 1.376-3.061 3.074-3.061h33.796c10.31.01 20.193 4.1 27.472 11.369 7.28 7.268 11.36 17.12 11.341 27.384-.059 21.366-17.741 38.536-39.191 38.536z"
fill="#5468FF"
/>
<path
d="M0 69.045h23.711c2.932.01 5.761-1.071 7.933-3.031h-31.644v3.031zM0 60.801h36.374c.734-.987 1.418-1.975 2.053-3.071h-38.427v3.071zM0 52.546h41.025c.407-.987.773-1.975 1.091-3.061h-42.116v3.061zM0 44.302h43.306c.149-.987.268-2.034.337-3.061h-43.643v3.061zM0 36.058h43.633c-.069-1.037-.188-2.064-.337-3.071h-43.296v3.071zM0 27.804h42.116c-.317-1.037-.684-2.064-1.091-3.061h-41.025v3.061zM0 19.559h38.427c-.631-1.055-1.316-2.076-2.053-3.061h-36.374v3.061zM0 8.244v3.071h31.674c-2.171-1.962-5.001-3.043-7.933-3.031l-23.741-.039zM135.68 50.078c-1.822 3.303-4.582 5.999-7.933 7.751-3.767 1.931-7.962 2.888-12.197 2.784h-16.581v-43.69h16.571c4.239-.11 8.44.826 12.227 2.725 3.351 1.711 6.114 4.379 7.933 7.662 1.892 3.487 2.846 7.402 2.767 11.364.07 3.976-.889 7.904-2.787 11.404zm-11.414-2.192c2.294-2.179 3.441-5.249 3.441-9.212s-1.147-7.03-3.441-9.202c-2.301-2.185-5.52-3.278-9.659-3.278h-5.018v24.96h5.018c4.145 0 7.365-1.089 9.659-3.268zM175.456 19.125c3.323 1.888 6.066 4.643 7.933 7.968 1.975 3.518 2.981 7.493 2.916 11.522.053 4.045-.973 8.032-2.975 11.552-1.891 3.344-4.661 6.112-8.013 8.007-6.972 3.83-15.43 3.83-22.402 0-3.351-1.893-6.118-4.662-8.003-8.007-2.008-3.518-3.035-7.506-2.975-11.552-.061-4.036.967-8.015 2.975-11.522 1.894-3.328 4.66-6.082 8.003-7.968 6.996-3.831 15.475-3.831 22.471 0h.069zm-19.556 10.318c-2.043 2.245-3.068 5.302-3.074 9.172-.007 3.87 1.018 6.918 3.074 9.143 4.576 4.529 11.965 4.529 16.541 0 2.056-2.258 3.084-5.305 3.084-9.143 0-3.837-1.025-6.885-3.074-9.143-4.595-4.511-11.976-4.511-16.571 0l.02-.03zM225.108 20.882c3.7 2.991 6.218 7.187 7.11 11.848h-11.226c-.762-1.928-2.093-3.58-3.818-4.739-1.812-1.184-3.942-1.79-6.109-1.738-2.895-.102-5.673 1.143-7.517 3.367-1.904 2.258-2.856 5.286-2.856 9.084s.952 6.813 2.856 9.044c1.846 2.222 4.623 3.465 7.517 3.367 2.161.068 4.292-.521 6.109-1.688 1.714-1.149 3.044-2.782 3.818-4.69h11.236c-.901 4.657-3.418 8.851-7.11 11.848-3.656 2.942-8.284 4.417-13.883 4.423-3.928.086-7.807-.887-11.226-2.814-3.21-1.857-5.81-4.601-7.487-7.899-1.805-3.582-2.71-7.546-2.638-11.552-.073-4.01.832-7.977 2.638-11.562 1.677-3.298 4.277-6.042 7.487-7.899 3.419-1.915 7.294-2.877 11.216-2.784 5.606 0 10.234 1.461 13.883 4.384zM267.006 54.679c-1.26 2.01-3.069 3.62-5.216 4.641-2.61 1.216-5.469 1.808-8.35 1.728-4.919 0-8.971-1.195-12.158-3.584-3.182-2.37-5.103-6.057-5.216-10.012h11.295c.082 1.47.712 2.857 1.765 3.89 1.055.962 2.448 1.473 3.877 1.422 1.182.068 2.343-.329 3.233-1.106.794-.779 1.222-1.853 1.18-2.962.027-1.033-.366-2.034-1.091-2.774-.769-.78-1.686-1.401-2.697-1.827-1.071-.474-2.568-.987-4.472-1.698-2.324-.765-4.593-1.686-6.793-2.755-1.81-.931-3.366-2.286-4.532-3.949-1.339-2.022-2.002-4.413-1.894-6.832-.062-2.396.631-4.751 1.983-6.734 1.381-1.944 3.29-3.454 5.504-4.354 2.545-1.048 5.279-1.563 8.032-1.511 4.879 0 8.756 1.152 11.632 3.456 2.898 2.349 4.669 5.803 4.879 9.518h-11.483c-.138-1.287-.695-2.494-1.587-3.436-.925-.872-2.169-1.328-3.441-1.264-1.078-.036-2.134.314-2.975.987-.799.748-1.218 1.814-1.14 2.903-.032.972.325 1.916.992 2.626.731.757 1.608 1.358 2.578 1.767 1.031.454 2.519 1.03 4.463 1.728 2.366.761 4.67 1.702 6.892 2.814 1.83.97 3.403 2.357 4.591 4.048 1.36 2.043 2.033 4.463 1.924 6.911.015 2.243-.599 4.445-1.775 6.358zM285.263 25.325v9.153h14.875v7.978h-14.875v9.706h16.69v8.462h-27.261v-43.7h27.301v8.402zM335.015 52.645h-16.442l-2.737 7.968h-11.166l16.075-43.374h12.227l16.095 43.374h-11.315l-2.737-7.968zm-2.727-8.037l-5.464-16.064-5.524 16.064h10.988zM374.85 60.613l-9.5-16.498h-2.4v16.498h-10.611v-43.69h18.128c3.042-.08 6.061.549 8.816 1.836 2.258 1.069 4.141 2.789 5.405 4.937 1.223 2.179 1.842 4.643 1.795 7.138.088 2.921-.844 5.783-2.638 8.096-1.967 2.326-4.67 3.917-7.666 4.512l10.432 17.18-11.761-.01zm-11.9-23.696h6.585c1.672.149 3.339-.342 4.661-1.372 1.058-1.098 1.598-2.59 1.488-4.107.084-1.51-.465-2.987-1.517-4.078-1.284-1.081-2.945-1.613-4.621-1.481h-6.595v11.038zM424.81 20.882c3.703 2.988 6.222 7.186 7.11 11.848h-11.236c-.755-1.937-2.087-3.598-3.818-4.759-1.811-1.185-3.942-1.791-6.109-1.738-2.896-.1-5.673 1.153-7.507 3.387-1.904 2.258-2.856 5.286-2.856 9.084s.952 6.813 2.856 9.044c1.841 2.223 4.615 3.467 7.507 3.367 2.165.057 4.297-.546 6.109-1.728 1.717-1.146 3.047-2.78 3.818-4.69h11.236c-.897 4.659-3.415 8.854-7.11 11.848-3.656 2.942-8.284 4.417-13.883 4.423-3.931.087-7.814-.885-11.236-2.814-3.209-1.855-5.807-4.599-7.477-7.899-1.808-3.58-2.713-7.545-2.638-11.552-.077-4.01.828-7.978 2.638-11.562 1.67-3.299 4.268-6.044 7.477-7.899 3.423-1.926 7.305-2.894 11.236-2.804 5.6.039 10.227 1.521 13.883 4.443zM475.167 16.923v43.69h-10.68v-18.226h-16.63v18.226h-10.611v-43.69h10.611v16.933h16.63v-16.933z"
fill="currentColor"
/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

1
packages/website/static/img/docsearch-mark.svg Normal file
View file

@ -0,0 +1 @@
<svg height="200" viewBox="0 0 200 200" width="200" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m96.352 193.277h-80.91c-4.111 0-7.443-3.32-7.443-7.416h88.424c30.913.15 59.559-16.146 75.145-42.749 15.587-26.602 15.747-59.47.42-86.222s-43.812-43.324-74.725-43.474h-89.265c0-4.096 3.332-7.416 7.443-7.416h81.822c24.96.025 48.887 9.935 66.512 27.547s27.503 41.482 27.458 66.355c-.144 51.772-42.952 93.376-94.883 93.376z" fill="#5468ff"/><path d="m8 173.301h57.405c7.098.025 13.948-2.595 19.207-7.345h-76.612zm0-19.977h88.064c1.777-2.392 3.433-4.785 4.97-7.44h-93.034zm0-20h99.324c.984-2.392 1.873-4.785 2.641-7.416h-101.965zm0-19.977h104.846c.36-2.392.648-4.928.816-7.416h-105.663zm0-19.976h105.639c-.168-2.512-.456-5-.816-7.44h-104.822zm0-20.001h101.965c-.768-2.512-1.657-5-2.641-7.416h-99.324zm0-19.976h93.034c-1.528-2.555-3.187-5.031-4.97-7.416h-88.064zm0-27.417v7.44h76.684c-5.256-4.754-12.109-7.374-19.207-7.345z" fill="#21243d"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 956 B

BIN
packages/website/static/img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
packages/website/static/img/icons/highlight.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
packages/website/static/img/icons/icon-github.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 727 B

BIN
packages/website/static/img/icons/icon-heart.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 612 B

BIN
packages/website/static/img/icons/ranking.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
packages/website/static/img/icons/typo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
packages/website/static/img/icons/zap.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
packages/website/static/img/logo-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

1
packages/website/static/img/logos/Netlify.svg Normal file
View file

@ -0,0 +1 @@
<svg height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="0%" cy="0%" gradientTransform="scale(1 .998901)" r="100%"><stop offset="0" stop-color="#20c6b7"/><stop offset="1" stop-color="#4d9abf"/></radialGradient><path d="m28.589 14.135-.014-.006c-.008-.003-.016-.006-.023-.013-.0232546-.0249781-.0335986-.059335-.028-.093l.773-4.726 3.625 3.626-3.77 1.604c-.0104771.0042249-.0217063.0062666-.033.0060231h-.015c-.005-.0030231-.01-.0070231-.02-.0170231-.1403008-.1562145-.30808-.2853537-.495-.381zm5.258-.288 3.876 3.876c.805.806 1.208 1.208 1.355 1.674.022.069.04.138.054.209l-9.263-3.923c-.0049777-.0020554-.009978-.0040555-.015-.006-.037-.015-.08-.032-.08-.07s.044-.056.081-.071l.012-.005zm5.127 7.003c-.2.376-.59.766-1.25 1.427l-4.37 4.369-5.652-1.177-.03-.006c-.05-.008-.103-.017-.103-.062-.0433911-.4713092-.2806301-.9034101-.655-1.193-.023-.023-.017-.059-.01-.092 0-.005 0-.01.002-.014l1.063-6.526.004-.022c.006-.05.015-.108.06-.108.4601638-.0572447.8780834-.2968279 1.16-.665.009-.01.015-.021.027-.027.032-.015.07 0 .103.014l9.65 4.082zm-6.625 6.801-7.186 7.186 1.23-7.56.002-.01c.001-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005c.2693157-.1149054.5075111-.2920953.695-.517.024-.028.053-.055.09-.06.0096031-.0015676.0193969-.0015676.029 0l5.06 1.04zm-8.707 8.707-.81.81-8.955-12.942c-.0032383-.0047338-.0065723-.0094014-.01-.014-.014-.019-.029-.038-.026-.06.001-.016.011-.03.022-.042l.01-.013c.027-.04.05-.08.075-.123l.02-.035.003-.003c.014-.024.027-.047.051-.06.021-.01.05-.006.073-.001l9.921 2.046c.0277403.0043138.0539087.0156764.076.033.013.013.016.027.019.043.1402807.5307603.5205833.9654447 1.028 1.175.028.014.016.045.003.078-.006486.0144631-.011511.0295379-.015.045-.125.76-1.197 7.298-1.485 9.063zm-1.692 1.691c-.597.591-.949.904-1.347 1.03-.3924239.1240902-.8135761.1240902-1.206 0-.466-.148-.869-.55-1.674-1.356l-8.993-8.993 2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0 .5391605.1626614 1.1180435.1333285 1.638-.083.027-.0099541.054-.017.075.002.0105013.0095854.0198934.0203193.028.032l8.999 13.059zm-14.087-10.186-2.063-2.063 4.074-1.738c.01041347-.0045408.02163982-.0069222.033-.007.034 0 .054.034.072.065.040942.0629884.0843078.1243677.13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646c.00996901.0018476.01997064.0035145.03.005.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01zm-4.056-4.995c.00904416-.1681306.03928336-.3344462.09-.495.148-.466.55-.868 1.356-1.674l3.34-3.34c1.53783313 2.2318797 3.07983583 4.4608836 4.626 6.687.027.036.057.076.026.106-.146.161-.292.337-.395.528-.01117396.024551-.02837354.0458785-.05.062-.013.008-.027.005-.042.002h-.002l-8.949-1.877zm5.68-6.403 4.491-4.491c.422.185 1.958.834 3.332 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06-.1444092.6585202.0521423 1.3455108.523 1.828.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001-.1773551-.0464661-.3596787-.0713132-.543-.074-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005-.0176716-.0144418-.0328709-.0316677-.045-.051zm5.398-5.398 5.814-5.814c.805-.805 1.208-1.208 1.674-1.355.3924239-.1240902.8135761-.1240902 1.206 0 .466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404c-.0102293.01864308-.0241854.03498188-.041.048-.025.017-.06.01-.09 0-.6618548-.20085389-1.3801835-.06242595-1.92.37-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676 3.818 3.818-.92 5.698v.015c-.0008214.012986-.003516.0257851-.008.038-.01.02-.03.024-.05.03-.1967009.0595815-.3819596.1518728-.548.273-.0071383.0050871-.0138293.0107745-.02.017-.011.012-.022.023-.04.0250544-.0146501.0003982-.0292499-.0019785-.043-.0070544l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071-.0341968-.3242158-.1400876-.6367644-.31-.915-.028-.046-.059-.094-.035-.141zm-3.932 8.606 5.454 2.31c.03.014.063.027.076.058.0052043.0186436.0052043.0383564 0 .057-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173s-.035 0-.052-.017c-.03-.03 0-.072.027-.11.0047734-.0065913.0094407-.0132588.014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897.0090537-.0151144.0205416-.0286296.034-.04.027-.02.067-.01.098.004zm-6.246 9.185 12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025l-1.052 6.462-.004.026c-.007.05-.014.107-.061.107-.569406.0384334-1.0831685.3553721-1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z" fill="url(#a)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

1
packages/website/static/img/logos/ant-design.svg Normal file
View file

@ -0,0 +1 @@
<svg height="200" viewBox="0 0 200 200" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="62.102327%" x2="108.19718%" y1="0%" y2="37.863576%"><stop offset="0" stop-color="#4285eb"/><stop offset="1" stop-color="#2ec7ff"/></linearGradient><linearGradient id="b" x1="69.644116%" x2="54.042898%" y1="0%" y2="108.456714%"><stop offset="0" stop-color="#29cdff"/><stop offset=".378600687" stop-color="#148eff"/><stop offset="1" stop-color="#0a60ff"/></linearGradient><linearGradient id="c" x1="69.690817%" x2="16.722898%" y1="-12.974359%" y2="117.391248%"><stop offset="0" stop-color="#fa816e"/><stop offset=".41472606" stop-color="#f74a5c"/><stop offset="1" stop-color="#f51d2c"/></linearGradient><linearGradient id="d" x1="68.127987%" x2="30.440091%" y1="-35.690574%" y2="114.942679%"><stop offset="0" stop-color="#fa8e7d"/><stop offset=".512635191" stop-color="#f74a5c"/><stop offset="1" stop-color="#f51d2c"/></linearGradient><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="m91.5880863 4.17652823-87.40812086 87.33624457c-4.69920605 4.6953418-4.69920605 12.2791122 0 16.9744542l87.40812086 87.336245c4.699206 4.695342 12.2892177 4.695342 16.9884237 0l36.648977-36.61884c4.208482-4.205021 4.208482-11.022708 0-15.227729-4.208482-4.205022-11.03178-4.205022-15.240262 0l-27.783295 27.760449c-1.169625 1.168663-2.9447691 1.168663-4.1143941 0l-69.8016279-69.74423c-1.1696249-1.168663-1.1696249-2.942347 0-4.1110102l69.8016279-69.7442295c1.169625-1.1686632 2.9447691-1.1686632 4.1143941 0l27.783295 27.7604491c4.208482 4.2050214 11.03178 4.2050214 15.240262 0s4.208482-11.0227082 0-15.2277296l-36.644937-36.61485588c-4.718501-4.59373277-12.3112882-4.55654383-16.9924637.12078231z" fill="url(#a)"/><path d="m91.5880863 4.17652823-87.40812086 87.33624457c-4.69920605 4.6953418-4.69920605 12.2791122 0 16.9744542l87.40812086 87.336245c4.699206 4.695342 12.2892177 4.695342 16.9884237 0l36.648977-36.61884c4.208482-4.205021 4.208482-11.022708 0-15.227729-4.208482-4.205022-11.03178-4.205022-15.240262 0l-27.783295 27.760449c-1.169625 1.168663-2.9447691 1.168663-4.1143941 0l-69.8016279-69.74423c-1.1696249-1.168663-1.1696249-2.942347 0-4.1110102l69.8016279-69.7442295c2.9123281-2.5106987 7.6641061-7.5960583 14.6421161-8.7854336 5.185933-.8839226 10.855567 1.0615752 17.008902 5.8364937-4.113891-4.1105132-11.166559-11.154912-21.158004-21.13319648-4.718501-4.59373277-12.3112882-4.55654383-16.9924637.12078231z" fill="url(#b)"/><path d="m153.685633 135.854579c4.208482 4.205021 11.031779 4.205021 15.240261 0l27.034083-27.011853c4.699206-4.695342 4.699206-12.2791127.00055-16.9739066l-27.26975-27.1507035c-4.218445-4.2000301-11.043909-4.1939734-15.254882.0135367-4.208482 4.2050214-4.208482 11.0227081 0 15.2277295l18.41814 18.4029944c1.169625 1.1686631 1.169625 2.9423475 0 4.1110105l-18.168402 18.153462c-4.208483 4.205021-4.208483 11.022708 0 15.22773z" fill="url(#c)"/></g><ellipse cx="100.519339" cy="100.436681" fill="url(#d)" rx="23.600193" ry="23.580786"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
packages/website/static/img/logos/apollo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
packages/website/static/img/logos/babel.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
packages/website/static/img/logos/bootstrap-vue.svg Normal file
View file

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 2041 2160" xmlns="http://www.w3.org/2000/svg"><path d="m1397 271-370 642-371-642h-592l963 1667 962-1667z" fill="#34495e"/><path d="m44 0h1952l-979 1696z" fill="#563d7c" fill-rule="nonzero"/><path d="m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z" fill="#41b883"/><path d="m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 703 B

BIN
packages/website/static/img/logos/bootstrap.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
packages/website/static/img/logos/calico.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

1
packages/website/static/img/logos/couchbase.svg Normal file
View file

@ -0,0 +1 @@
<svg enable-background="new 219.5 311.5 174 175" height="175" viewBox="219.5 311.5 174 175" width="174" xmlns="http://www.w3.org/2000/svg"><path d="m306 317.256c-43.489 0-78.744 35.255-78.744 78.744s35.255 78.744 78.744 78.744 78.744-35.255 78.744-78.744-35.255-78.744-78.744-78.744zm53.295 93.262c.05 4.93-3.737 9.051-8.653 9.418-6.8.816-13.6 1.7-20.4 1.87-12.223.408-24.48.697-36.72.391-10.642-.272-25.109-.986-31.875-2.244s-8.959-4.301-9.01-10.03c-.091-10.2-.091-20.4 0-30.6 0-5.967 4.08-9.911 10.506-10.438 3.587-.289 7.174-.442 10.778-.527 3.281-.085 4.59 1.224 4.607 4.539v17.986 2.363h54.859c0-.663 0-1.343 0-2.006 0-6.188 0-12.376 0-18.564 0-3.06 1.326-4.437 4.403-4.318 4.352.187 8.704.357 13.005.884 4.788.665 8.388 4.704 8.5 9.537.091 10.551.091 21.131 0 31.739z" fill="#cc2a2f"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 797 B

1
packages/website/static/img/logos/docusaurus.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

1
packages/website/static/img/logos/eslint.svg Normal file
View file

@ -0,0 +1 @@
<svg height="256" viewBox="0 0 255.99999 256" width="256" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-19.412313 -1.491)"><path d="m97.021 99.016 48.432-27.962c1.212-.7 2.706-.7 3.918 0l48.433 27.962c1.211.7 1.959 1.993 1.959 3.393v55.924c0 1.399-.748 2.693-1.959 3.394l-48.433 27.962c-1.212.7-2.706.7-3.918 0l-48.432-27.962c-1.212-.7-1.959-1.994-1.959-3.394v-55.924c.001-1.4.748-2.693 1.959-3.393" fill="#8080f2"/><path d="m273.336 124.488-57.867-100.672c-2.102-3.64-5.985-6.325-10.188-6.325h-115.736c-4.204 0-8.088 2.685-10.19 6.325l-57.867 100.45c-2.102 3.641-2.102 8.236 0 11.877l57.867 99.847c2.102 3.64 5.986 5.501 10.19 5.501h115.735c4.203 0 8.087-1.805 10.188-5.446l57.867-100.01c2.104-3.639 2.104-7.907.001-11.547m-47.917 48.41c0 1.48-.891 2.849-2.174 3.59l-73.71 42.527c-1.282.74-2.888.74-4.17 0l-73.767-42.527c-1.282-.741-2.179-2.109-2.179-3.59v-85.055c0-1.481.884-2.849 2.167-3.59l73.707-42.527c1.282-.741 2.886-.741 4.168 0l73.772 42.527c1.283.741 2.186 2.109 2.186 3.59z" fill="#4b32c3"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

Some files were not shown because too many files have changed in this diff Show more