jlengrand/rocket
1
0
Fork 0
mirror of https://github.com/modernweb-dev/rocket.git synced 2026-03-10 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: generated manifests

Browse Source
This commit is contained in:
Benny Powers
2021-07-11 22:03:58 +03:00
committed by Thomas Allmer
parent 8585e2ad66
commit 305a657ff5
25 changed files with 467 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.eleventyignore Normal file
View File

@@ -0,0 +1 @@
*.docs.md

1
docs/_assets/style.css
View File

@@ -1,5 +1,6 @@
:root {
--markdown-table-row-odd-background-color: #efefef;
--markdown-syntax-background-color: #f9f9f9;
}
body[layout^='layout-home'] .markdown-body .call-to-action:nth-of-type(2) {

35
docs/docs/configuration/images.md
View File

@@ -88,8 +88,10 @@ The default preset for regular markdown content is available as `responsive`.
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
imagePresets: {
responsive: {
widths: [300, 820],
@@ -97,8 +99,9 @@ export default {
sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
},
},
};
});
```
<!-- prettier-ignore-end -->
## Ignoring Images
@@ -148,8 +151,10 @@ For this example we want to also ignore `.jpeg` files.
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
imagePresets: {
responsive: {
// ...
@@ -157,8 +162,9 @@ export default {
src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
},
},
};
});
```
<!-- prettier-ignore-end -->
With that setting we get the following behavior
@@ -180,8 +186,10 @@ becomes
You can add your own image preset like so
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
imagePresets: {
'my-image-preset': {
widths: [30, 60],
@@ -189,8 +197,9 @@ export default {
sizes: '(min-width: 1024px) 30px, 60px',
},
},
};
});
```
<!-- prettier-ignore-end -->
Once that `imagePreset` is defined you can use it by adding it to any `img` tag.
@@ -232,15 +241,18 @@ If you want to add `webp` (or replace `avif` with it) you can do so by setting t
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
imagePresets: {
responsive: {
formats: ['avif', 'webp', 'jpeg'],
},
},
};
});
```
<!-- prettier-ignore-end -->
## Default widths
@@ -262,16 +274,19 @@ If you want to add more widths you can add them to `widths`.
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
imagePresets: {
responsive: {
widths: [300, 600, 900, 1200, 1640],
sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
},
},
};
});
```
<!-- prettier-ignore-end -->
<inline-notification type="tip">

37
docs/docs/configuration/overview.md
View File

@@ -4,22 +4,27 @@ The configuration file is `rocket.config.js` or `rocket.config.mjs`.
The config files consist of the following parts:
<!-- prettier-ignore-start -->
```js
import { rocketLaunch } from '@rocket/launch';
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
presets: [rocketLaunch()],
emptyOutputDir: true,
pathPrefix: 'subfolder-only-for-build',
};
});
```
<!-- prettier-ignore-end -->
Rocket is primarily build around plugins for each of its systems.
New plugins can be added and all default plugins can be adjusted or even removed by using the following functions.
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
// add remark/unified plugin to the Markdown processing (e.g. enable special code blocks)
setupUnifiedPlugins: [],
@@ -40,8 +45,9 @@ export default {
// add a plugin to the cli (e.g. a new command like "rocket my-command")
setupCliPlugins: [],
};
});
```
<!-- prettier-ignore-end -->
## Adding Rollup Plugins
@@ -55,19 +61,19 @@ You can accomplish this with Rollup and dev server plugins. Make sure to add bot
For these cases you can use `setupDevAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server:
<!-- prettier-ignore-start -->
```js
import json from '@rollup/plugin-json';
import { addPlugin } from 'plugins-manager';
/** @type {import('@rocket/cli').RocketCliOptions} */
const config = {
export default ({
setupDevAndBuildPlugins: [
addPlugin({ name: 'json', plugin: json, location: 'top', options: { my: 'settings' } }),
],
};
export default config;
});
```
<!-- prettier-ignore-end -->
This will add the Rollup plugin `json` with the id `json` at the top of the plugin list of Rollup and the dev server. It needs to be at the top so further plugins down the line can work with JSON imports.
For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rollup`. Note that [not all Rollup plugins](https://modern-web.dev/docs/dev-server/plugins/rollup/#compatibility-with-rollup-plugins) will work with the dev-server.
@@ -76,25 +82,28 @@ For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rol
All plugins which are either default or are added via a preset can still be adjusted by using `adjustPluginOptions`.
<!-- prettier-ignore-start -->
```js
import { adjustPluginOptions } from 'plugins-manager';
/** @type {import('@rocket/cli').RocketCliOptions} */
const config = {
export default ({
setupDevAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
};
export default config;
});
```
<!-- prettier-ignore-end -->
## Lifecycle
You can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
async before11ty() {
await copyDataFiles();
},
};
});
```
<!-- prettier-ignore-end -->

7
docs/docs/configuration/service-worker.md
View File

@@ -12,11 +12,14 @@ Changing the service worker file name can be quite a hassle so you can adjust ge
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
serviceWorkerName: 'my-service-worker-name.js',
};
});
```
<!-- prettier-ignore-end -->
## Meet the Service Worker

7
docs/docs/markdown-javascript/preview.md
View File

@@ -72,15 +72,18 @@ excludeFromSearch: true
Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
<!-- prettier-ignore-start -->
```js
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
setupUnifiedPlugins: [
adjustPluginOptions('mdjsSetupCode', {
simulationSettings: { simulatorUrl: '/simulator/' },
}),
],
};
});
```
<!-- prettier-ignore-end -->
<inline-notification type="tip">

7
docs/docs/presets/blog.md
View File

@@ -24,10 +24,13 @@ pnpm add @rocket/blog
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
import { rocketBlog } from '@rocket/blog';
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
presets: [rocketBlog()],
};
});
```
<!-- prettier-ignore-end -->

7
docs/docs/presets/launch/custom-elements.md Normal file
View File

@@ -0,0 +1,7 @@
---
layout: layout-api
package: '@rocket/launch'
module: inline-notification/index.js
---
# Presets >> Launch >> Custom Elements || 20

4
docs/docs/presets/launch/index.md Normal file
View File

@@ -0,0 +1,4 @@
# Presets >> Launch || 20
- [Preset](./preset/)
- [Custom Elements](./custom-elements/)

9
docs/docs/presets/launch.md → docs/docs/presets/launch/preset.md
View File

@@ -8,7 +8,7 @@ alerts:
content: You **really** shouldn't!
---
# Presets >> Launch || 20
# Presets >> Launch >> Preset || 10
Rocket comes with a preset you will love. Simple, responsive and behaving like native, it sure is going to be a hit among your users.
@@ -36,13 +36,16 @@ pnpm add @rocket/launch
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
import { rocketLaunch } from '@rocket/launch';
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
presets: [rocketLaunch()],
};
});
```
<!-- prettier-ignore-end -->
## Data

43
docs/docs/presets/search.md
View File

@@ -1,43 +0,0 @@
# Presets >> Search || 30
Add a search for all your static content.
## Installation
<code-tabs collection="package-managers" default-tab="npm">
```bash tab npm
npm i @rocket/search
```
```bash tab yarn
yarn add @rocket/search
```
```bash tab pnpm
pnpm add @rocket/search
```
</code-tabs>
## Usage
👉 `rocket.config.js`
```js
import { rocketSearch } from '@rocket/search';
export default {
presets: [rocketSearch()],
};
```
## Styling
| Property | Default | Description |
| ------------------------------------- | --------- | ------------------------------------ |
| `--rocket-search-background-color` | `#fff` | Search results background color |
| `--rocket-search-input-border-color` | `#dfe1e5` | |
| `--rocket-search-input-border-radius` | `24px` | |
| `--rocket-search-fill-color` | `#000` | Search Icon Color |
| `--rocket-search-highlight-color` | `#6c63ff` | Highlighted search result text color |

9
docs/docs/presets/search/custom-elements.md Normal file
View File

@@ -0,0 +1,9 @@
---
layout: layout-api
package: '@rocket/search'
modules:
- src/RocketSearch.js
- src/RocketSearchCombobox.js
---
# Presets >> Search >> Custom Elements || 20

4
docs/docs/presets/search/index.md Normal file
View File

@@ -0,0 +1,4 @@
# Presets >> Search || 10
- [Preset](./preset/)
- [Custom Elements](./custom-elements/)

36
docs/docs/presets/search/preset.md Normal file
View File

@@ -0,0 +1,36 @@
# Presets >> Search >> Preset || 10
Add a search for all your static content.
## Installation
<code-tabs collection="package-managers" default-tab="npm">
```bash tab npm
npm i @rocket/search
```
```bash tab yarn
yarn add @rocket/search
```
```bash tab pnpm
pnpm add @rocket/search
```
</code-tabs>
## Usage
👉 `rocket.config.js`
<!-- prettier-ignore-start -->
```js
import { rocketSearch } from '@rocket/search';
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
presets: [rocketSearch()],
});
```
<!-- prettier-ignore-end -->

8
docs/docs/tools/plugins-manager.md
View File

@@ -7,12 +7,16 @@ This allows your users to adjust the options before actually applying the plugin
Many plugin systems require you to either execute a plugin function like in `rollup`.
<!-- prettier-ignore-start -->
```js
import json from '@rollup/plugin-json';
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
plugins: [json({ preferConst: true })],
};
});
```
<!-- prettier-ignore-end -->
or add it in a special way like in `eleventy`

8
docs/guides/configuration/getting-started.md
View File

@@ -22,17 +22,17 @@ The Plugins Manager helps you register and execute your plugins across the vario
If you want to add a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
<!-- prettier-ignore-start -->
```js
import emoji from 'remark-emoji';
import { addPlugin } from 'plugins-manager';
/** @type {Partial<import('@rocket/cli').RocketCliOptions>} */
const config = {
export default ({
setupUnifiedPlugins: [addPlugin({ location: 'markdown', name: 'emoji', plugin: emoji })],
};
export default config;
});
```
<!-- prettier-ignore-end -->
For plugins that should handle the Markdown <abbr title="Abstract Syntax Tree">AST</abbr> you should use `addPlugin({ location: 'markdown', name: 'my-plugin', plugin: MyPlugin})`. <br>
While for the rehype AST you should use `addPlugin({ location: 'remark2rehype', name: 'my-plugin', plugin: MyPlugin})`.

7
docs/guides/first-pages/getting-started.md
View File

@@ -92,13 +92,16 @@ If you don't want to use the `module` package type, make sure to rename the gene
<code-tabs default-tab="rocket.config.js">
<!-- prettier-ignore-start -->
```js tab rocket.config.js
import { rocketLaunch } from '@rocket/launch';
export default {
/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
presets: [rocketLaunch()],
};
});
```
<!-- prettier-ignore-end -->
```md tab docs/index.md
# Welcome to Your Rocket Site

15
package.json
View File

@@ -8,15 +8,16 @@
},
"type": "module",
"scripts": {
"analyze": "node scripts/workspaces-scripts-bin.mjs analyze",
"analyze": "run-s analyze:* format:*",
"analyze:analyze": "node scripts/workspaces-scripts-bin.mjs analyze",
"build": "npm run build:packages && npm run build:site",
"build:packages": "node scripts/workspaces-scripts-bin.mjs build:package",
"build:site": "npm run rocket:build",
"build:site": "run-s analyze:* rocket:build",
"changeset": "changeset",
"debug": "web-test-runner --watch --config web-test-runner-chrome.config.mjs",
"debug:firefox": "web-test-runner --watch --config web-test-runner-firefox.config.mjs",
"debug:webkit": "web-test-runner --watch --config web-test-runner-webkit.config.mjs",
"format": "npm run format:eslint && npm run format:prettier",
"format": "run-s format:*",
"format:eslint": "eslint --ext .ts,.js,.mjs,.cjs . --fix",
"format:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" \"**/!(expected)/package.json\" --write --ignore-path .eslintignore",
"lint": "run-p lint:*",
@@ -32,6 +33,7 @@
"setup": "npm run setup:ts-configs && npm run build:packages",
"setup:patches": "npx patch-package",
"setup:ts-configs": "node scripts/generate-ts-configs.mjs",
"prestart": "yarn analyze",
"start": "node packages/cli/src/cli.js start",
"test": "yarn test:node && yarn test:web",
"test:node": "mocha \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" --timeout 5000 --reporter dot --exit",
@@ -61,12 +63,12 @@
"@web/test-runner": "^0.12.2",
"@web/test-runner-commands": "^0.4.0",
"@web/test-runner-playwright": "^0.8.0",
"cem-plugin-readme": "^0.1.2",
"cem-plugin-readme": "^0.1.3",
"chai": "^4.2.0",
"concurrently": "^5.3.0",
"copyfiles": "^2.4.1",
"deepmerge": "^4.2.2",
"esbuild": "^0.8.31",
"esbuild": "^0.12.15",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"hanbi": "^0.4.1",
@@ -81,7 +83,8 @@
"puppeteer": "^9.0.0",
"remark-emoji": "^2.1.0",
"rimraf": "^3.0.2",
"rocket-preset-code-tabs": "^0.2.1",
"rocket-preset-code-tabs": "^0.2.2",
"rocket-preset-custom-elements-manifest": "^0.1.3",
"rollup": "^2.36.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.3",

26
packages/launch/README.md
View File

@@ -28,16 +28,22 @@ For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/lau
#### CSS Properties
| Name | Description |
| ---------------------------------------------- | ----------- |
| --inline-notification-tip-background-color | |
| --inline-notification-tip-border-color | |
| --inline-notification-warning-background-color | |
| --inline-notification-warning-border-color | |
| --inline-notification-danger-background-color | |
| --inline-notification-danger-border-color | |
| --inline-notification-warning-heading-color | |
| --inline-notification-danger-heading-color | |
| Name | Default | Description |
| ---------------------------------------------- | -------------------------- | ----------- |
| --inline-notification-tip-background-color | `rgba(221, 221, 221, 0.3)` | |
| --inline-notification-tip-border-color | `#42b983` | |
| --inline-notification-warning-background-color | `rgba(255, 229, 100, 0.2)` | |
| --inline-notification-warning-border-color | `#e7c000` | |
| --inline-notification-danger-background-color | `rgba(192, 0, 0, 0.1)` | |
| --inline-notification-danger-border-color | `#c00` | |
| --inline-notification-warning-heading-color | `#b29400` | |
| --inline-notification-danger-heading-color | `#900` | |
#### CSS Parts
| Name | Description |
| ----- | ----------------- |
| title | the title heading |
<hr/>

80
packages/search/README.md
View File

@@ -6,7 +6,7 @@ For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/sea
## `src/RocketSearch.js`:
### class: `RocketSearch`
### class: `RocketSearch`, `rocket-search`
#### Superclass
@@ -22,22 +22,22 @@ For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/sea
#### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| -------------- | ------- | ---------------------- | -------------------- | ----------- | -------------- |
| scopedElements | | | | | |
| combobox | | | | | |
| jsonUrl | public | `string` | `''` | | |
| search | public | `string` | `''` | | |
| maxResults | public | `number` | `10` | | |
| noResultsText | public | `string` | `'No results found'` | | |
| results | public | `RocketSearchResult[]` | `[]` | | |
| miniSearch | | `null` | `null` | | |
| Name | Privacy | Type | Default | Description | Inherited From |
| -------------- | ------- | ---------------------------- | -------------------- | ----------- | -------------- |
| scopedElements | | | | | |
| combobox | | `RocketSearchCombobox\|null` | | | |
| jsonUrl | public | `string` | `''` | | |
| search | public | `string` | `''` | | |
| maxResults | public | `number` | `10` | | |
| noResultsText | public | `string` | `'No results found'` | | |
| results | public | `RocketSearchResult[]` | `[]` | | |
| miniSearch | | `MiniSearch\|null` | `null` | | |
#### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ----------- | ------- | ----------- | ---------- | ------ | -------------- |
| setupSearch | | | | | |
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ----------- | ------- | ------------------------------------------------------------------------- | ---------- | --------------- | -------------- |
| setupSearch | | Fetches the search index at `this.jsonUrl` and sets up the search engine. | | `Promise<void>` | |
#### Attributes
@@ -49,6 +49,24 @@ For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/sea
| max-results | maxResults | |
| noResultsText | noResultsText | |
#### CSS Properties
| Name | Default | Description |
| ----------------------------------- | --------- | ------------------------------------- |
| --rocket-search-background-color | `#fff` | Search results background colour |
| --rocket-search-caret-color | `initial` | Search input caret colour |
| --rocket-search-input-border-color | `#dfe1e5` | Search input border colour |
| --rocket-search-input-border-radius | `24px` | Search input border radius |
| --rocket-search-fill-color | `#000` | Search Icon Color |
| --rocket-search-highlight-color | `#6c63ff` | Highlighted search result text colour |
#### CSS Parts
| Name | Description |
| ------------- | -------------------- |
| search-option | search result |
| empty | empty search results |
<hr/>
### Exports
@@ -79,11 +97,39 @@ For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/sea
#### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ----- | ------- | ----------- | ---------- | ------ | -------------- |
| focus | | | | | |
#### CSS Properties
| Name | Default | Description |
| ------------------------------------------ | --------- | ----------- |
| --rocket-search-fill-color | `#000` | |
| --rocket-search-background-color | `#fff` | |
| --rocket-search-input-overlay-border-color | `#ccc` | |
| --rocket-search-input-border-color | `#dfe1e5` | |
| --rocket-search-input-border-radius | `24px` | |
#### Slots
| Name | Description |
| ------- | ----------- |
| prefix | |
| label | |
| listbox | |
| input | |
<details><summary>Private API</summary>
#### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| --------------------- | ------- | ----------- | ---------- | ------ | -------------- |
| \_connectSlotMixin | | | | | |
| \_defineOverlayConfig | | | | | |
| focus | | | | | |
| \_connectSlotMixin | private | | | | |
| \_defineOverlayConfig | private | | | | |
</details>
<hr/>

100
packages/search/custom-elements.json
View File

@@ -10,6 +10,48 @@
"kind": "class",
"description": "",
"name": "RocketSearch",
"cssProperties": [
{
"description": "Search results background colour",
"name": "--rocket-search-background-color",
"default": "#fff"
},
{
"description": "Search input caret colour",
"name": "--rocket-search-caret-color",
"default": "initial"
},
{
"description": "Search input border colour",
"name": "--rocket-search-input-border-color",
"default": "#dfe1e5"
},
{
"description": "Search input border radius",
"name": "--rocket-search-input-border-radius",
"default": "24px"
},
{
"description": "Search Icon Color",
"name": "--rocket-search-fill-color",
"default": "#000"
},
{
"description": "Highlighted search result text colour",
"name": "--rocket-search-highlight-color",
"default": "#6c63ff"
}
],
"cssParts": [
{
"description": "search result",
"name": "search-option"
},
{
"description": "empty search results",
"name": "empty"
}
],
"members": [
{
"kind": "field",
@@ -18,11 +60,20 @@
},
{
"kind": "method",
"name": "setupSearch"
"name": "setupSearch",
"description": "Fetches the search index at `this.jsonUrl` and sets up the search engine.",
"return": {
"type": {
"text": "Promise<void>"
}
}
},
{
"kind": "field",
"name": "combobox"
"name": "combobox",
"type": {
"text": "RocketSearchCombobox|null"
}
},
{
"kind": "field",
@@ -78,7 +129,7 @@
"kind": "field",
"name": "miniSearch",
"type": {
"text": "null"
"text": "MiniSearch|null"
},
"default": "null"
}
@@ -115,6 +166,7 @@
"name": "LitElement",
"package": "@lion/core"
},
"tagName": "rocket-search",
"customElement": true
}
],
@@ -137,14 +189,52 @@
"kind": "class",
"description": "",
"name": "RocketSearchCombobox",
"cssProperties": [
{
"name": "--rocket-search-fill-color",
"default": "#000"
},
{
"name": "--rocket-search-background-color",
"default": "#fff"
},
{
"name": "--rocket-search-input-overlay-border-color",
"default": "#ccc"
},
{
"name": "--rocket-search-input-border-color",
"default": "#dfe1e5"
},
{
"name": "--rocket-search-input-border-radius",
"default": "24px"
}
],
"slots": [
{
"name": "prefix"
},
{
"name": "label"
},
{
"name": "listbox"
},
{
"name": "input"
}
],
"members": [
{
"kind": "method",
"name": "_connectSlotMixin"
"name": "_connectSlotMixin",
"privacy": "private"
},
{
"kind": "method",
"name": "_defineOverlayConfig"
"name": "_defineOverlayConfig",
"privacy": "private"
},
{
"kind": "field",

39
packages/search/src/RocketSearch.js
View File

@@ -31,7 +31,20 @@ function getText({ result, search }) {
return highlightSearchTerms({ text: body, search, terms, addEllipsis: true });
}
// @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110
// | Property | Default | Description |
// | ------------------------------------- | --------- | ------------------------------------ |
/**
* @element rocket-search
* @cssprop [--rocket-search-background-color=#fff] - Search results background colour
* @cssprop [--rocket-search-caret-color=initial] - Search input caret colour
* @cssprop [--rocket-search-input-border-color=#dfe1e5] - Search input border colour
* @cssprop [--rocket-search-input-border-radius=24px] - Search input border radius
* @cssprop [--rocket-search-fill-color=#000] - Search Icon Color
* @cssprop [--rocket-search-highlight-color=#6c63ff] - Highlighted search result text colour
* @csspart search-option - search result
* @csspart empty - empty search results
*/
export class RocketSearch extends ScopedElementsMixin(LitElement) {
static get properties() {
return {
@@ -60,9 +73,14 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
* @type {RocketSearchResult[]}
*/
this.results = [];
/** @type {MiniSearch|null} */
this.miniSearch = null;
}
/**
* Fetches the search index at `this.jsonUrl` and sets up the search engine.
* @return {Promise<void>}
*/
async setupSearch() {
if (!this.jsonUrl) {
throw new Error(
@@ -92,8 +110,9 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
});
}
/** @type {RocketSearchCombobox|null} */
get combobox() {
return this.shadowRoot.querySelector('rocket-search-combobox');
return this.shadowRoot?.querySelector?.('rocket-search-combobox') ?? null;
}
/** @param {import('lit-element').PropertyValues } changedProperties */
@@ -112,9 +131,11 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
<rocket-search-combobox
name="combo"
label="Search"
@input=${ev => {
this.search = ev.target.value;
}}
@input=${
/** @param {Event & { target: HTMLInputElement }} ev */ ev => {
this.search = ev.target.value;
}
}
@focus=${() => {
this.setupSearch();
}}
@@ -125,6 +146,7 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
result => html`
<rocket-search-option
href=${result.id}
part="search-option"
rel="noopener noreferrer"
.title=${getTitle({ result, search: this.search })}
.choiceValue=${this.search}
@@ -134,7 +156,12 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
`,
)}
${this.results.length <= 0 && this.search.length > 0
? html` <rocket-search-option .title=${this.noResultsText}></rocket-search-option> `
? html`
<rocket-search-option
part="search-option empty"
.title=${this.noResultsText}
></rocket-search-option>
`
: ''}
</rocket-search-combobox>
`;

14
packages/search/src/RocketSearchCombobox.js
View File

@@ -21,6 +21,18 @@ searchBtnTmpl.innerHTML = `
</button>
`;
/**
* @cssprop [--rocket-search-fill-color=#000]
* @cssprop [--rocket-search-background-color=#fff]
* @cssprop [--rocket-search-input-overlay-border-color=#ccc]
* @cssprop [--rocket-search-input-border-color=#dfe1e5]
* @cssprop [--rocket-search-input-border-radius=24px]
* @slot prefix
* @slot label
* @slot listbox
* @slot input
* @type {String}
*/
export class RocketSearchCombobox extends LionCombobox {
static get styles() {
return [
@@ -182,6 +194,7 @@ export class RocketSearchCombobox extends LionCombobox {
});
}
/** @private */
_connectSlotMixin() {
if (!this.__isConnectedSlotMixin) {
Object.keys(this.slots).forEach(slotName => {
@@ -208,6 +221,7 @@ export class RocketSearchCombobox extends LionCombobox {
}
}
/** @private */
_defineOverlayConfig() {
/** @type {'bottom'} */
const placement = 'bottom';

2
rocket.config.js
View File

@@ -4,6 +4,7 @@ import { rocketSearch } from '@rocket/search';
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
import { adjustPluginOptions } from 'plugins-manager';
import { codeTabs } from 'rocket-preset-code-tabs';
import { customElementsManifest } from 'rocket-preset-custom-elements-manifest';
/** @type {import('./packages/cli/types/main').RocketCliOptions} */
export default {
@@ -22,6 +23,7 @@ export default {
},
},
}),
customElementsManifest(),
],
setupUnifiedPlugins: [

132
yarn.lock
View File

@@ -1094,10 +1094,10 @@
globby "^11.0.4"
typescript "^4.3.2"
"@custom-elements-manifest/to-markdown@^0.0.9":
version "0.0.9"
resolved "https://registry.yarnpkg.com/@custom-elements-manifest/to-markdown/-/to-markdown-0.0.9.tgz#4d84db87db48b397cbfd3318ddea093e179f75ae"
integrity sha512-39/GRlSUZMRresuTVSUw56PMTdjrGGpUi8sKll5NZEZq78uJOef8gSKEISpyMPiOmivKoLJAxKA2b0MJP+l0KA==
"@custom-elements-manifest/to-markdown@^0.0.12":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@custom-elements-manifest/to-markdown/-/to-markdown-0.0.12.tgz#9aae0271636a5300c8d95e6cb8b83c0d74d52747"
integrity sha512-24RMTw1leMIJuXjtyZXAjYJ3VLRYTSjdNWvYiJ7wKHyLc0Ab4dv27nX9PQvQkxg8huFzweMad5kUkAFp8S9bww==
dependencies:
mdast-builder "^1.1.1"
mdast-util-from-markdown "^1.0.0"
@@ -1345,10 +1345,15 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
"@pwrs/lit-css@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@pwrs/lit-css/-/lit-css-1.0.0.tgz#4355988398166986d15ba8ae38bcc73e247e50d3"
integrity sha512-Xhku8/mFegXIlh/LyPhTQ0ioCOS3CUl7suJx++ueE2PmqHNL+gn8I5IvSp3Jdmau0ae+pY2BJjfCNFfvCSqPsA==
"@power-elements/json-viewer@2.1.1":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@power-elements/json-viewer/-/json-viewer-2.1.1.tgz#f65a4c9bffb4aae2c4eaa8acc1c74cc38f0aac82"
integrity sha512-uQWqhlc1huWMnYycf5ltgU1hStancWyMt7g8bJ0jCZ3QrOlZmHWUdPt55i4I6L7bDKJLbO1J6oB+O4QWj4Nlew==
"@pwrs/lit-css@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@pwrs/lit-css/-/lit-css-1.0.1.tgz#6aa5168e41bd528cdaa6b62c9eb8a7bad6788976"
integrity sha512-xSCPI0Uc0vrgBxBIMhglnjjEftQ61ecCR6xVKnN5OlculOaToP8ggCY6iO3PtFyZDPq33hRL5pWH5Y7w1wv+VA==
dependencies:
string-to-template-literal "^2.0.0"
uglifycss "^0.0.29"
@@ -2766,12 +2771,12 @@ ccount@^2.0.0:
resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.0.tgz#3d6fb55803832766a24c6f339abc507297eb5d25"
integrity sha512-VOR0NWFYX65n9gELQdcpqsie5L5ihBXuZGAgaPEp/U7IOSjnPMEH6geE+2f6lcekaNEfWzAHS45mPvSo5bqsUA==
cem-plugin-readme@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/cem-plugin-readme/-/cem-plugin-readme-0.1.2.tgz#65a4d6c8973bb9c42e2a68fb3053a353e5475379"
integrity sha512-K28QXc6nG22p+aHzdPnQQi3uM02HLkbERCqDCwLT11mmQMr+WS5sbXwnR4YYUhPc/kUbASUu+OoFLlgmQ+7RgQ==
cem-plugin-readme@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/cem-plugin-readme/-/cem-plugin-readme-0.1.3.tgz#c084415a8af4df73d802b7b395976ed62854e169"
integrity sha512-k160SaxSL8we5qhVbu+/RGXctmRIMCVcBwygKh9xDlXIFXypYggUfWpnvJ825VigMRdimn4ZMj2ITc0oqp1IGg==
dependencies:
"@custom-elements-manifest/to-markdown" "^0.0.9"
"@custom-elements-manifest/to-markdown" "^0.0.12"
center-align@^0.1.1:
version "0.1.3"
@@ -3723,6 +3728,11 @@ eleventy-plugin-add-web-component-definitions@^2.0.3:
parse5 "^5.1.1"
unist-util-visit "^2.0.3"
eleventy-plugin-footnotes@0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/eleventy-plugin-footnotes/-/eleventy-plugin-footnotes-0.9.0.tgz#7febf459d0cac929e34219518fb2a2375fe94c98"
integrity sha512-y00cfbcUsIFGoL5Xp2rWrmCcM/hz06jhplFZgX3Vo9O4KIncoz+TyhIlAEOljM6IYKEaiffmujgORqgNhSYm4A==
emitter-mixin@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/emitter-mixin/-/emitter-mixin-0.0.3.tgz#5948cb286f2e48edc3b251a7cfc1f7883396d65c"
@@ -3896,23 +3906,18 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
esbuild-plugin-lit-css@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/esbuild-plugin-lit-css/-/esbuild-plugin-lit-css-1.0.0.tgz#7c138b2c4c1724ff2a18dfc542ce4396e13e93f8"
integrity sha512-Ng5/F6+l0Dj9/Zl0u1pT9meBmE9itI/xVlSvZwHa25+LxCgDPyx/pbSrr78r3MDF3cUDbQDy7VvjIuCUHVK7zQ==
esbuild-plugin-lit-css@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/esbuild-plugin-lit-css/-/esbuild-plugin-lit-css-1.0.2.tgz#d7bd763cdb8ad1f35a2fc8596ad4857faa5f6c23"
integrity sha512-mVTY8GyqIdwXdkYQ9dU88dMRQ0vvL9Ywro2M81+sn5a3MQXhi4HHJ9U+ORyIhlZMsOtHQvI45QRAll67x4XBeA==
dependencies:
"@pwrs/lit-css" "^1.0.0"
"@pwrs/lit-css" "^1.0.1"
esbuild@^0.12.15:
version "0.12.15"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.15.tgz#9d99cf39aeb2188265c5983e983e236829f08af0"
integrity sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==
esbuild@^0.8.31:
version "0.8.31"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.31.tgz#c21e7adb3ad283c951a53de7ad64a5ae2df2ed34"
integrity sha512-7EIU0VdUxltwivjVezX3HgeNzeIVR1snkrAo57WdUnuBMykdzin5rTrxwCDM6xQqj0RL/HjOEm3wFr2ijHKeaA==
escalade@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -4402,6 +4407,14 @@ get-func-name@^2.0.0:
resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
get-github-url@1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/get-github-url/-/get-github-url-1.0.4.tgz#2d9a6233f173139fe9973e3dcf09aee1eec2e13e"
integrity sha1-LZpiM/FzE5/plz49zwmu4e7C4T4=
dependencies:
is-github-url "^1.1.2"
parse-github-url "^0.2.1"
get-intrinsic@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
@@ -4686,6 +4699,14 @@ hast-util-heading-rank@^1.0.0:
resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-1.0.1.tgz#28dfd8b0724cfb0da48308e2a794b1d9f24fd80d"
integrity sha512-P6Hq7RCky9syMevlrN90QWpqWDXCxwIVOfQR2rK6P4GpY4bqjKEuCzoWSRORZ7vz+VgRpLnXimh+mkwvVFjbyQ==
hast-util-is-element@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-2.1.0.tgz#ecdc0c00c06f5b4de8ea27b9084cb75d1326a7b1"
integrity sha512-tg5yLbnC4TYONeeHIF7n0Jtstp+4J0bcBFn+R6wYoZzeHSIp5sl9ApfqGI2mxKtEXi4DEhTssPli6ppGl5PGqg==
dependencies:
"@types/hast" "^2.0.0"
"@types/unist" "^2.0.0"
hast-util-is-element@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz#3b3ed5159a2707c6137b48637fbfe068e175a425"
@@ -4798,7 +4819,7 @@ he@1.2.0, he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hirestime@^6.1.0:
hirestime@6.1.0, hirestime@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/hirestime/-/hirestime-6.1.0.tgz#10bb2041cb9caffbfe7cf12a26ac38c0c9f42ee3"
integrity sha512-sCVxYT/2iSUanrRuiUspZaF78crKojzmVz2mI+gjq1/N+7RPCyZu8S0KyBlE4O+Aq/YmtTzJWGxLxByZvCiKPA==
@@ -5162,6 +5183,11 @@ is-generator-function@^1.0.7:
resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.8.tgz#dfb5c2b120e02b0a8d9d2c6806cd5621aa922f7b"
integrity sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==
is-github-url@^1.1.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/is-github-url/-/is-github-url-1.2.2.tgz#0734176092c9599a38a72422d121ff3e11d6ff3e"
integrity sha1-BzQXYJLJWZo4pyQi0SH/PhHW/z4=
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
@@ -7103,6 +7129,11 @@ parse-filepath@^1.0.2:
map-cache "^0.2.0"
path-root "^0.1.1"
parse-github-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-0.2.1.tgz#e17335025e02c827a14198b614e73ab5b9904be8"
integrity sha1-4XM1Al4CyCehQZi2FOc6tbmQS+g=
parse-json@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -8100,23 +8131,38 @@ rimraf@^3.0.2:
dependencies:
glob "^7.1.3"
rocket-preset-code-tabs@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/rocket-preset-code-tabs/-/rocket-preset-code-tabs-0.2.1.tgz#19fbdbf05736c5783187d73fc4a95b1df4e88ca5"
integrity sha512-m1E8u70iyCrcUDE7tghGZlTjzal0mhvQ1ESIbz/i1iRr3Y/t103FtDfnndZWSUaNcaXECsf8e1zn6DKk53YrMg==
rocket-preset-code-tabs@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/rocket-preset-code-tabs/-/rocket-preset-code-tabs-0.2.2.tgz#de2892d31fbe9fa0368e6015de181e94558cffac"
integrity sha512-GLgdblYomQIwlMS0uYOCFugHoYaVFKwGzwcWA+d34TKMPciRz10Hcj9Y4nyViIp6XodW6blWNvH+aE6oN2EA9Q==
dependencies:
"@pwrs/mixins" "^0.2.0"
eleventy-plugin-add-web-component-definitions "^2.0.3"
esbuild "^0.12.15"
esbuild-plugin-lit-css "^1.0.0"
esbuild-plugin-lit-css "^1.0.2"
hirestime "^6.1.0"
lit "^2.0.0-rc.2"
rocket-preset-markdown-directives "^0.1.1"
rocket-preset-markdown-directives "^0.1.3"
rocket-preset-markdown-directives@^0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/rocket-preset-markdown-directives/-/rocket-preset-markdown-directives-0.1.2.tgz#1d2384327c28c9c3b9ebc7a41b3b6103a6831f56"
integrity sha512-XIbvlnYJu/iK0WlQ4XBZdsC7ZiOE8ga0IpQGCbBSb4C3yIbqFV58Wv/sI/Z8j6OVxb7RSCC/arpdfZaf30EQuQ==
rocket-preset-custom-elements-manifest@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/rocket-preset-custom-elements-manifest/-/rocket-preset-custom-elements-manifest-0.1.3.tgz#546158a07eab84dc6acedd39f2c9affe5fcdc470"
integrity sha512-rh5ov2R7LwU/J7uo6ECEGY4P82EceafXcq4LqhfldUreqOPEL04b7fmh8cC77lVBcZj46kQptdwfL4+Ih38U/w==
dependencies:
"@power-elements/json-viewer" "2.1.1"
eleventy-plugin-footnotes "0.9.0"
esbuild "^0.12.15"
esbuild-plugin-lit-css "^1.0.2"
get-github-url "1.0.4"
hast-util-is-element "2.1.0"
hirestime "6.1.0"
rocket-preset-markdown-directives "0.1.3"
unist-util-visit "3.1.0"
rocket-preset-markdown-directives@0.1.3, rocket-preset-markdown-directives@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/rocket-preset-markdown-directives/-/rocket-preset-markdown-directives-0.1.3.tgz#d1b8eb3dab1e6842b56c7d3d2e9e468950c3584b"
integrity sha512-N0npyQjJkPgKBeDeQBXK2/61Sb4gRCoG5VQRw7v3M3by3bv1JaFd1+x37SyvtEk6b/XYmP74A+Nfg8obJ1I4EQ==
dependencies:
markdown-it "12.1.0"
markdown-it-prism "2.1.8"
@@ -9362,6 +9408,15 @@ unist-util-visit-parents@^4.0.0:
"@types/unist" "^2.0.0"
unist-util-is "^5.0.0"
unist-util-visit@3.1.0, unist-util-visit@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-3.1.0.tgz#9420d285e1aee938c7d9acbafc8e160186dbaf7b"
integrity sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==
dependencies:
"@types/unist" "^2.0.0"
unist-util-is "^5.0.0"
unist-util-visit-parents "^4.0.0"
unist-util-visit@^1.1.3:
version "1.4.1"
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
@@ -9378,15 +9433,6 @@ unist-util-visit@^2.0.0, unist-util-visit@^2.0.2, unist-util-visit@^2.0.3:
unist-util-is "^4.0.0"
unist-util-visit-parents "^3.0.0"
unist-util-visit@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-3.1.0.tgz#9420d285e1aee938c7d9acbafc8e160186dbaf7b"
integrity sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==
dependencies:
"@types/unist" "^2.0.0"
unist-util-is "^5.0.0"
unist-util-visit-parents "^4.0.0"
universalify@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"