feat: improved Astro integration
This commit is contained in:
Pavlik Kiselev
Thijs Louisse
parent
70b0241189
commit
df9ca9fec5
144 changed files with 31701 additions and 14439 deletions
|
|
@ -4,8 +4,12 @@ bundlesize/
|
||||||
.history/
|
.history/
|
||||||
storybook-static/
|
storybook-static/
|
||||||
*.d.ts
|
*.d.ts
|
||||||
|
_site-dev
|
||||||
|
_site
|
||||||
|
docs/_merged_*
|
||||||
patches/
|
patches/
|
||||||
|
|
||||||
|
_demos
|
||||||
/docs/_assets/scoped-custom-element-registry.min.js
|
/docs/_assets/scoped-custom-element-registry.min.js
|
||||||
/docs/_assets/scoped-custom-element-registry.min.js.map
|
/docs/_assets/scoped-custom-element-registry.min.js.map
|
||||||
/docs/_merged_assets/scoped-custom-element-registry.min.js
|
/docs/_merged_assets/scoped-custom-element-registry.min.js
|
||||||
|
|
|
||||||
4
.github/workflows/release.yml
vendored
4
.github/workflows/release.yml
vendored
|
|
@ -19,10 +19,10 @@ jobs:
|
||||||
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- name: Setup Node.js 16.x
|
- name: Setup Node.js 22.x
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16.x
|
node-version: 22.x
|
||||||
registry-url: 'https://registry.npmjs.org'
|
registry-url: 'https://registry.npmjs.org'
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
|
|
|
||||||
2
.github/workflows/verify-pr.yml
vendored
2
.github/workflows/verify-pr.yml
vendored
|
|
@ -55,7 +55,7 @@ jobs:
|
||||||
runs-on: ${{ matrix.os }}
|
runs-on: ${{ matrix.os }}
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x, 18.x]
|
node-version: [22.x]
|
||||||
os: [ubuntu-latest, windows-latest]
|
os: [ubuntu-latest, windows-latest]
|
||||||
steps:
|
steps:
|
||||||
- uses: google/wireit@setup-github-actions-caching/v2
|
- uses: google/wireit@setup-github-actions-caching/v2
|
||||||
|
|
|
||||||
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -6,7 +6,7 @@ dist/
|
||||||
.astro
|
.astro
|
||||||
|
|
||||||
# generated __mdjs-stories.js files
|
# generated __mdjs-stories.js files
|
||||||
public/docs
|
_demos/*
|
||||||
|
|
||||||
## editors
|
## editors
|
||||||
/.idea
|
/.idea
|
||||||
|
|
@ -55,6 +55,9 @@ browserstack.err
|
||||||
|
|
||||||
debug.log
|
debug.log
|
||||||
|
|
||||||
|
_site
|
||||||
|
_site-dev
|
||||||
|
|
||||||
## generated test fiels
|
## generated test fiels
|
||||||
__output
|
__output
|
||||||
.wireit
|
.wireit
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
coverage/
|
coverage/
|
||||||
CHANGELOG.md
|
CHANGELOG.md
|
||||||
bundlesize/
|
bundlesize/
|
||||||
|
_site
|
||||||
|
_site-dev
|
||||||
.history
|
.history
|
||||||
|
|
||||||
|
_demos
|
||||||
/docs/_assets/scoped-custom-element-registry.min.js
|
/docs/_assets/scoped-custom-element-registry.min.js
|
||||||
/docs/_assets/scoped-custom-element-registry.min.js.map
|
/docs/_assets/scoped-custom-element-registry.min.js.map
|
||||||
/docs/_merged_data/
|
/docs/_merged_data/
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import { defineConfig } from "astro/config";
|
import lit from '@astrojs/lit';
|
||||||
import lit from "@astrojs/lit";
|
import { defineConfig } from 'astro/config';
|
||||||
import { mdjsParse, mdjsStoryParse, mdjsSetupCode } from '@mdjs/core';
|
import { mdjsParse, mdjsStoryParse, mdjsSetupCode } from '@mdjs/core';
|
||||||
import { copyMdjsStories } from './src/utils/remark-plugings/copyMdjsStories/index.js';
|
import pagefind from 'astro-pagefind';
|
||||||
import { cleanupRocketMetadata } from './src/utils/remark-plugings/cleanupRocketMetadata/index.js';
|
import { remarkProcessDemos } from './src/utils/remark-plugings/remark-process-demos.mjs';
|
||||||
import { updateMainTagsForMdjsStories } from './src/utils/remark-plugings/updateMainTagsForMdjsStories/index.js';
|
import { remarkModifiedTime } from './src/utils/remark-plugings/remark-modified-time.mjs';
|
||||||
|
|
||||||
const mdjsSetupConfig = {
|
const mdjsSetupConfig = {
|
||||||
simulationSettings: {
|
simulationSettings: {
|
||||||
simulatorUrl: '/simulator/',
|
simulatorUrl: '/next/simulator/',
|
||||||
languages: [
|
languages: [
|
||||||
{ key: 'de-DE', name: 'German' },
|
{ key: 'de-DE', name: 'German' },
|
||||||
{ key: 'en-GB', name: 'English (United Kingdom)' },
|
{ key: 'en-GB', name: 'English (United Kingdom)' },
|
||||||
|
|
@ -19,35 +19,23 @@ const mdjsSetupConfig = {
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [lit()],
|
base: '/next',
|
||||||
|
trailingSlash: 'never',
|
||||||
|
integrations: [lit(), pagefind()],
|
||||||
markdown: {
|
markdown: {
|
||||||
remarkPlugins: [updateMainTagsForMdjsStories, mdjsParse, mdjsStoryParse, [mdjsSetupCode, mdjsSetupConfig], copyMdjsStories, cleanupRocketMetadata],
|
// ing-web
|
||||||
|
remarkPlugins: [
|
||||||
|
mdjsParse,
|
||||||
|
mdjsStoryParse,
|
||||||
|
[mdjsSetupCode, mdjsSetupConfig],
|
||||||
|
remarkProcessDemos,
|
||||||
|
remarkModifiedTime,
|
||||||
|
],
|
||||||
|
shikiConfig: {
|
||||||
|
themes: {
|
||||||
|
light: 'github-light',
|
||||||
|
dark: 'github-dark',
|
||||||
},
|
},
|
||||||
vite: {
|
|
||||||
// the fix is copied from https://github.com/withastro/astro/issues/5517#issuecomment-1337328843.
|
|
||||||
// This allows to import rocket-preset-extend-lion-docs. The following error pops up otherwise:
|
|
||||||
// ```
|
|
||||||
// [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
|
|
||||||
// node_modules/rocket-preset-extend-lion-docs/src/getPublicApiOfPkg.js:6:0:
|
|
||||||
// 6 │ await init;
|
|
||||||
// ```
|
|
||||||
optimizeDeps: {
|
|
||||||
exclude: ['rocket-preset-extend-lion-docs']
|
|
||||||
},
|
},
|
||||||
// Fix taken from https://github.com/vitejs/vite/issues/6985#issuecomment-1044375490.
|
|
||||||
// It throws an error otherwise:
|
|
||||||
// ```
|
|
||||||
// astro-poc2/node_modules/vite/dist/node/chunks/dep-df561101.js:43799
|
|
||||||
// const err = new Error('The server is being restarted or closed. Request is outdated');
|
|
||||||
// ```
|
|
||||||
// Note, if this erorr is still present, as a workaround try adding 'esnext' to node_modules/vite/dist/node/constants.js -> ESBUILD_MODULES_TARGET
|
|
||||||
// build: {
|
|
||||||
// target: 'esnext'
|
|
||||||
// },
|
|
||||||
build: {
|
|
||||||
rollupOptions: {
|
|
||||||
external: /^lit/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
157
astro.md
Normal file
157
astro.md
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
# Astro Starter Kit: Minimal
|
||||||
|
|
||||||
|
```
|
||||||
|
npm create astro@latest -- --template minimal
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||||
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||||
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
├── src/
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:3000`. Note comment out/ uncomment the `remarkPlugins:` related to either `ing-web` or `lion` portal in `astro.config.mjs` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
|
|
||||||
|
## Site search integration by PageFind
|
||||||
|
|
||||||
|
> Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. The feature is advertised by Astro website: [Astro Starlight Site Search Guide](https://starlight.astro.build/guides/site-search/)
|
||||||
|
|
||||||
|
### How it is integrated
|
||||||
|
|
||||||
|
* Note, follow [Pagefind documentation](https://pagefind.app/docs/) for more details. For tests purposes, add a UI markup to any astro page to enable search component on a page:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
|
||||||
|
<script src="/pagefind/pagefind-ui.js" is:inline></script>
|
||||||
|
<div id="search"></div>
|
||||||
|
<script is:inline>
|
||||||
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
new PagefindUI({ element: "#search", showSubResults: true });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### How to run
|
||||||
|
|
||||||
|
* Run `npm run build` to generate static html files
|
||||||
|
* Run `npm run pageFind` to index static html files in `dist` folder and generate files in `dist/pagefind/` that we import in the UI search component part in the snippet above. Note, the UI search component will not show up on the page if this step is not run
|
||||||
|
* Run `npm run preview`. This will run the app from the dist folder
|
||||||
|
|
||||||
|
## Migration of ing-bank/lion/packages-node
|
||||||
|
|
||||||
|
### rocket-preset-extend-lion-docs
|
||||||
|
|
||||||
|
* It is not possible to use `rocket-preset-extend-lion-docs` out of the box. The reason is that its code relies on some Rocket specific global JS variable names (f.e. `plugins` variable in node_modules/plugins-manager/src/addPlugin.js). Also it specifies the order among existing plugins to inject the its internal plugins (see more for details [rocket-preset-extend-lion-docs source](https://github.com/ing-bank/lion/blob/master/packages-node/rocket-preset-extend-lion-docs/preset/extendLionDocs.js#L66)). We can't reuse that order. Same applies to the dependent `remarkUrlToLocal` plugin. To integrate `rocket-preset-extend-lion-docs` the following steps were done:
|
||||||
|
* `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/assets` contains the patched files taken from the original plugins. Then during the installation those files are copied to `node_modules`. The script for copying is defined in `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/copy.sh` and it is currently triggered by `postinstall` command in `package.json`
|
||||||
|
* `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/wrapper.js` contains a copy of `P00019-ing-web/rocket.config.mjs`. That is configuration setup where we specify the replacement rules. F.e here we specify that `<lion-` should be changed to `<ing-button`.
|
||||||
|
|
||||||
|
### remark-extend
|
||||||
|
|
||||||
|
`remark-extend` is setup by `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/wrapper.js`
|
||||||
|
|
||||||
|
### babel-plugin-extend-docs
|
||||||
|
|
||||||
|
`babel-plugin-extend-docs` is setup by `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/wrapper.js`
|
||||||
|
|
||||||
|
## How to migrate components documentation
|
||||||
|
|
||||||
|
### Lion Portal
|
||||||
|
|
||||||
|
In this section there are steps for migrating a component directly from [lion/docs](https://github.com/ing-bank/lion/tree/master/docs) to Astro portal. For the sake of the example let's migrate a button component from [lion/docs/components/button](https://github.com/ing-bank/lion/tree/master/docs/components/button). Here are the steps:
|
||||||
|
|
||||||
|
* Migrate assets and extensions
|
||||||
|
* In this repo create a directory called `public/components/button`. The name should match the component directory name. Note files in `/public` directory are going to be available at runtime by URL `host:port/`. F.e. `public/components/button/src/icon.svg.js` is available by URL `host:port/components/button/src/icon.svg.js`
|
||||||
|
* Copy all assets into the created directory from the Lion repo. These files need to be copied:
|
||||||
|
* `public/components/button/extensions/BootstrapButtonTypes.ts`
|
||||||
|
* `public/components/button/extensions/bootstrap-button.mjs`
|
||||||
|
* `public/components/button/src/icon.svg.js`
|
||||||
|
* Inside the copied files replace the `imports` for `js`/`mjs` files so that the files which are located in `node_modules`, imported directly from `node_modules`:
|
||||||
|
* Inside `bootstrap-button.mjs` replace
|
||||||
|
|
||||||
|
```
|
||||||
|
import { LionButton } from '@lion/ui/button.js';
|
||||||
|
import { css } from 'lit';
|
||||||
|
```
|
||||||
|
|
||||||
|
with
|
||||||
|
|
||||||
|
```
|
||||||
|
import { LionButton } from '/node_modules/@lion/ui/button.js';
|
||||||
|
import { css } from '/node_modules/lit';
|
||||||
|
```
|
||||||
|
|
||||||
|
* Migrate docs
|
||||||
|
* In this repo create a directory called `src/content/demo/button`. The name should match the component directory name
|
||||||
|
* Copy all `md` files into the created directory from the Lion repo
|
||||||
|
* Inside `md` files identify all `imports` inside the blocks wrapped by the ` ```js script` block.
|
||||||
|
* Replace all `relative imports`. F.e. in `button/examples.md` replace
|
||||||
|
|
||||||
|
```
|
||||||
|
import iconSvg from './src/icon.svg.js';
|
||||||
|
```
|
||||||
|
|
||||||
|
with
|
||||||
|
|
||||||
|
```
|
||||||
|
import iconSvg from '/components/button/src/icon.svg.js';
|
||||||
|
```
|
||||||
|
|
||||||
|
* The imports which refer to `node_modules` should stay untouched. F.e. `import { html } from '@mdjs/mdjs-preview';` should not be changed
|
||||||
|
* Update Astro configuration
|
||||||
|
* Go throught every `md` file in `src/content/demo/button` and`js`, `mdjs` file in `public/components/button/`,
|
||||||
|
* Copy the js file name that are imported and then
|
||||||
|
* Add those file name into Astro-Lion integration here: `src/utils/astrojs-integration/lion/lion-integration.js`
|
||||||
|
|
||||||
|
### Ing-web Portal
|
||||||
|
|
||||||
|
* Follow all the steps from `Lion Portal` section but for components located in [P00019-ing-web/docs/components](https://dev.azure.com/INGCDaaS/IngOne/_git/P00019-ing-web?path=/docs/components)
|
||||||
|
* Replace all relative imports that refer to a package in `node_modules` as follows: replace `import '#define/ing-button.js';` with `import 'ing-web/button.js';`
|
||||||
|
|
||||||
|
## Futher improvements
|
||||||
|
|
||||||
|
* Propose the solution where the existing `docs` directory is kept untouched (or almost untouched) and via the build script all the files are copied to the structure Astro requires. That way we can keep the relative paths and it will make the development experience almost the same as now
|
||||||
|
* Note. Consider the `watch` feature. Whenever any file inside `docs` is changed, Astro rerender those changes as it happens now on Rocket
|
||||||
|
* Note. `docs` might be put into `content` directory. Then every md file should be provided with the proper tas, such as: `component`, `category` (Development, Changelog, Design), `platform` (web, ios, android). Those are required to render based on secondary navigation input (category + platform)
|
||||||
|
* In the current setup the ing-web is installed as a dependency as is referred as `node_modules/ing-web`. Should it instead be refered as `packages/ing-web`
|
||||||
|
* Update `rocket-preset-extend-lion-docs` and `remarkUrlToLocal` properly. See details in the `Migration of ing-bank/lion/packages-node` section.
|
||||||
|
* With the current limitation of having one `md` file per route, consider combining file mantually for the same route. F.e. on lion there is directory `docs/components/button`. That one contains multiple `md` files. And all those are for web platform. Consider combining those to one `web.md` file. The proposal assumes that there will be docs for the multiple platforms and then the doc for Design and Changelog.
|
||||||
|
* As a consiquence update the way in-page navigation (right side menu) works. It shdould be updated as follows:
|
||||||
|
* Build the menu dynamically based on `H2` tags found on the page
|
||||||
|
* Write a `remark` plugin or reuse existing one to add anchor tags with IDs for every `##` hearder
|
||||||
|
* `src/utils/remark-plugings/wrapper-for-rocket-preset-extend-lion-docs/wrapper.js` contains some replacement pattern based on the URLs used in Rocket. We need to review those replacements according to our new endpoints
|
||||||
|
* What is `docs/components/button/status.mjs` and how we reuse it?
|
||||||
|
* `rocket-preset-extend-lion-docs` should be cleaned up from everything related to Rocket. The name `Rocket` should gone
|
||||||
3
astro.tsconfig.json
Normal file
3
astro.tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/base"
|
||||||
|
}
|
||||||
10
config.mjs
10
config.mjs
|
|
@ -1,10 +0,0 @@
|
||||||
export const maxDepthForNonComponentsNavigation = 2;
|
|
||||||
export const docsDirName = '/docs/';
|
|
||||||
export const isToBeConcatenated = (path) => {
|
|
||||||
if (path.includes('/components/')) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
const pathAfterDocs = path.split(docsDirName)[1];
|
|
||||||
const numberOfSections = pathAfterDocs.split('/').length;
|
|
||||||
return numberOfSections > maxDepthForNonComponentsNavigation;
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
---
|
||||||
|
title: Slack
|
||||||
|
description: Fundamental white label web components for building your design system
|
||||||
|
---
|
||||||
|
|
||||||
# Slack
|
# Slack
|
||||||
|
|
||||||
You can also find us on the Lit & Friends Slack in the [#lion](https://lit-and-friends.slack.com/archives/CJGFWJN9J) channel.
|
You can also find us on the Lit & Friends Slack in the [#lion](https://lit-and-friends.slack.com/archives/CJGFWJN9J) channel.
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: What does the term Accessibility mean within the context of Lion?
|
||||||
date: 2021-12-07
|
date: 2021-12-07
|
||||||
tags: [ux, accessibility]
|
tags: [ux, accessibility]
|
||||||
cover_image: /blog/images/accessibility.png
|
cover_image: /blog/images/accessibility.png
|
||||||
|
eleventyNavigation:
|
||||||
|
key: The Accessibility of Lion
|
||||||
|
title: The Accessibility of Lion
|
||||||
---
|
---
|
||||||
|
|
||||||
## Accessibility within Design Systems
|
## Accessibility within Design Systems
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: Maintainer can now define their public api of a package itself.
|
||||||
date: 2021-03-09
|
date: 2021-03-09
|
||||||
tags: [javascript, exports]
|
tags: [javascript, exports]
|
||||||
cover_image: /blog/images/controlling-exports-cover-image.jpg
|
cover_image: /blog/images/controlling-exports-cover-image.jpg
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Controlling exports
|
||||||
|
title: Controlling exports
|
||||||
---
|
---
|
||||||
|
|
||||||
When publishing npm packages it can often be hard to understand what users are actually using.
|
When publishing npm packages it can often be hard to understand what users are actually using.
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: Extending a component library and its documentation for a speedy de
|
||||||
date: 2020-12-01
|
date: 2020-12-01
|
||||||
tags: javascript, documentation, demos
|
tags: javascript, documentation, demos
|
||||||
cover_image: https://miro.medium.com/max/2000/1*NZ6tdtJHHJjxtPmIFxWpGw.jpeg
|
cover_image: https://miro.medium.com/max/2000/1*NZ6tdtJHHJjxtPmIFxWpGw.jpeg
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Extending Lion Documentation
|
||||||
|
title: Extending Lion Documentation
|
||||||
---
|
---
|
||||||
|
|
||||||
If you extend [Lion](https://lion.js.org/) components, you don't only want to reuse the components, but you probably want to reuse the documentation (Storybook demos) as well. Wouldn't it be nice to just take it all from lion, but replace it with your own design system extension, so you don't have the extra maintenance of essentially copying the docs from `Lion` for your own design system implementation?
|
If you extend [Lion](https://lion.js.org/) components, you don't only want to reuse the components, but you probably want to reuse the documentation (Storybook demos) as well. Wouldn't it be nice to just take it all from lion, but replace it with your own design system extension, so you don't have the extra maintenance of essentially copying the docs from `Lion` for your own design system implementation?
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: A static website with docs and demos for lion
|
||||||
date: 2021-03-10
|
date: 2021-03-10
|
||||||
tags: [javascript, rocket, documentation]
|
tags: [javascript, rocket, documentation]
|
||||||
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Extending lions website
|
||||||
|
title: Extending lions website
|
||||||
---
|
---
|
||||||
|
|
||||||
After a month of preparations we can finally present to you our new website. With it we are enabled to give more context to each of our components.
|
After a month of preparations we can finally present to you our new website. With it we are enabled to give more context to each of our components.
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: A library of performant, accessible & flexible Web Components
|
||||||
date: 2020-08-10
|
date: 2020-08-10
|
||||||
tags: [javascript, tests, demos]
|
tags: [javascript, tests, demos]
|
||||||
cover_image: https://miro.medium.com/max/1400/1*FT8CF6G-1IVa88G04nkf5w.png
|
cover_image: https://miro.medium.com/max/1400/1*FT8CF6G-1IVa88G04nkf5w.png
|
||||||
|
eleventyNavigation:
|
||||||
|
key: ING open sources Lion
|
||||||
|
title: ING open sources Lion
|
||||||
---
|
---
|
||||||
|
|
||||||
**TL;DR:** Web development can be hard, whether you're making your own components, implementing Design Systems, support many different browsers, incorporating accessibility, or adding third party dependencies. Lion aims to make your life a little bit easier, by taking the groundwork of feature complete, accessible, performant, and framework agnostic components out of your hands! Check out the repo at [ing-bank/lion](https://github.com/ing-bank/lion).
|
**TL;DR:** Web development can be hard, whether you're making your own components, implementing Design Systems, support many different browsers, incorporating accessibility, or adding third party dependencies. Lion aims to make your life a little bit easier, by taking the groundwork of feature complete, accessible, performant, and framework agnostic components out of your hands! Check out the repo at [ing-bank/lion](https://github.com/ing-bank/lion).
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,9 @@ published: false
|
||||||
description: Lion introduces the new package @lion/ui which is a collection of all lion UI components.
|
description: Lion introduces the new package @lion/ui which is a collection of all lion UI components.
|
||||||
date: 2023-03-20
|
date: 2023-03-20
|
||||||
tags: [javascript]
|
tags: [javascript]
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Introducing Lion UI
|
||||||
|
title: Introducing Lion UI
|
||||||
---
|
---
|
||||||
|
|
||||||
### A new package
|
### A new package
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: A static website with docs and demos for lion
|
||||||
date: 2021-03-10
|
date: 2021-03-10
|
||||||
tags: [javascript, rocket, documentation]
|
tags: [javascript, rocket, documentation]
|
||||||
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Introducing lions website
|
||||||
|
title: Introducing lions website
|
||||||
---
|
---
|
||||||
|
|
||||||
After a month of preparations, we can finally present to you our new website. With it, we are enabled to give more context to each of our components.
|
After a month of preparations, we can finally present to you our new website. With it, we are enabled to give more context to each of our components.
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ description: Lion has been a long user of the scoped registry - always requiring
|
||||||
date: 2022-04-05
|
date: 2022-04-05
|
||||||
tags: [javascript, polyfills]
|
tags: [javascript, polyfills]
|
||||||
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
cover_image: /blog/images/introducing-lions-website-cover-image.jpg
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Lion without polyfills
|
||||||
|
title: Lion without polyfills
|
||||||
---
|
---
|
||||||
|
|
||||||
The only reason Lion always loaded a polyfill was because of its usage of [@open-wc/scoped-elements](https://open-wc.org/docs/development/scoped-elements/). From today on this polyfill became optional.
|
The only reason Lion always loaded a polyfill was because of its usage of [@open-wc/scoped-elements](https://open-wc.org/docs/development/scoped-elements/). From today on this polyfill became optional.
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,9 @@ export class BootstrapButton extends LionButton {
|
||||||
--bs-border-radius: 0.375rem;
|
--bs-border-radius: 0.375rem;
|
||||||
--bs-border-width: 1px;
|
--bs-border-width: 1px;
|
||||||
|
|
||||||
--bs-btn-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
|
--bs-btn-font-family:
|
||||||
'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
|
||||||
|
'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
margin: 0.25rem 0.125rem;
|
margin: 0.25rem 0.125rem;
|
||||||
|
|
||||||
|
|
@ -34,7 +35,8 @@ export class BootstrapButton extends LionButton {
|
||||||
--bs-btn-border-color: transparent;
|
--bs-btn-border-color: transparent;
|
||||||
--bs-btn-border-radius: var(--bs-border-radius);
|
--bs-btn-border-radius: var(--bs-border-radius);
|
||||||
--bs-btn-hover-border-color: transparent;
|
--bs-btn-hover-border-color: transparent;
|
||||||
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
--bs-btn-box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||||
--bs-btn-disabled-opacity: 0.65;
|
--bs-btn-disabled-opacity: 0.65;
|
||||||
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
|
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -54,8 +56,11 @@ export class BootstrapButton extends LionButton {
|
||||||
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
|
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
|
||||||
border-radius: var(--bs-btn-border-radius);
|
border-radius: var(--bs-btn-border-radius);
|
||||||
background-color: var(--bs-btn-bg);
|
background-color: var(--bs-btn-bg);
|
||||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
transition:
|
||||||
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
color 0.15s ease-in-out,
|
||||||
|
background-color 0.15s ease-in-out,
|
||||||
|
border-color 0.15s ease-in-out,
|
||||||
|
box-shadow 0.15s ease-in-out;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -59,11 +59,12 @@ export const Github = () => html`
|
||||||
|
|
||||||
```js preview-story
|
```js preview-story
|
||||||
export const Whatsapp = () => {
|
export const Whatsapp = () => {
|
||||||
const obamaImgUrl = new URL('./src/wa-combobox/assets/obama.jpeg', import.meta.url).href;
|
// in Rocket this is resolved based on the URL, in astro this is resolved based on filesystem (or is it?)
|
||||||
const trumpImgUrl = new URL('./src/wa-combobox/assets/trump.jpeg', import.meta.url).href;
|
const obamaImgUrl = new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;
|
||||||
const bidenImgUrl = new URL('./src/wa-combobox/assets/biden.jpeg', import.meta.url).href;
|
const trumpImgUrl = new URL('../src/wa-combobox/assets/trump.jpeg', import.meta.url).href;
|
||||||
const bushImgUrl = new URL('./src/wa-combobox/assets/bush.jpeg', import.meta.url).href;
|
const bidenImgUrl = new URL('../src/wa-combobox/assets/biden.jpeg', import.meta.url).href;
|
||||||
const clintonImgUrl = new URL('./src/wa-combobox/assets/clinton.jpeg', import.meta.url).href;
|
const bushImgUrl = new URL('../src/wa-combobox/assets/bush.jpeg', import.meta.url).href;
|
||||||
|
const clintonImgUrl = new URL('../src/wa-combobox/assets/clinton.jpeg', import.meta.url).href;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<wa-combobox name="combo" label="Filter chats">
|
<wa-combobox name="combo" label="Filter chats">
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,4 @@ eleventyNavigation:
|
||||||
parent: Node Tools
|
parent: Node Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Babel Extend Docs ||10
|
# Node Tools: Babel Extend Docs
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Node Tools >> Babel Extend Docs
|
parent: Node Tools >> Babel Extend Docs
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Babel Extend Docs >> Overview ||10
|
# Babel Extend Docs: Overview
|
||||||
|
|
||||||
A plugin which rewrites imports and templates according to a configuration.
|
A plugin which rewrites imports and templates according to a configuration.
|
||||||
This enables the reuse of existing documentation from source packages while still using your extensions code.
|
This enables the reuse of existing documentation from source packages while still using your extensions code.
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ eleventyNavigation:
|
||||||
order: 30
|
order: 30
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools ||30
|
# Node Tools
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,4 @@ eleventyNavigation:
|
||||||
parent: Node Tools
|
parent: Node Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Providence Analytics ||20
|
# Node Tools: Providence Analytics
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Node Tools >> Providence Analytics
|
parent: Node Tools >> Providence Analytics
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Providence Analytics >> Overview ||10
|
# Providence Analytics: Overview
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,4 @@ eleventyNavigation:
|
||||||
parent: Node Tools
|
parent: Node Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Publish Docs ||10
|
# Node Tools: Publish Docs
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Node Tools >> Publish Docs
|
parent: Node Tools >> Publish Docs
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Publish Docs >> Overview ||10
|
# Publish Docs: Overview
|
||||||
|
|
||||||
A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
|
A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,4 @@ eleventyNavigation:
|
||||||
parent: Node Tools
|
parent: Node Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Remark Extend ||30
|
# Node Tools: Remark Extend
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Node Tools >> Remark Extend
|
parent: Node Tools >> Remark Extend
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Remark Extend >> Overview ||10
|
# Remark Extend: Overview
|
||||||
|
|
||||||
A plugin for remark to extend markdown by importing from source files.
|
A plugin for remark to extend markdown by importing from source files.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,4 @@ eleventyNavigation:
|
||||||
parent: Node Tools
|
parent: Node Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Extend Docs ||5
|
# Node Tools: Extend Docs
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Node Tools >> Extend Docs
|
parent: Node Tools >> Extend Docs
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Tools >> Extend Docs >> Overview ||10
|
# Extend Docs: Overview
|
||||||
|
|
||||||
When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
|
When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
|
||||||
Copying and rewriting imports/tags the markdown files works but also means that whenever something change you need copy and rewrite again.
|
Copying and rewriting imports/tags the markdown files works but also means that whenever something change you need copy and rewrite again.
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ eleventyNavigation:
|
||||||
parent: Rationales
|
parent: Rationales
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rationales >> TypeScript ||30
|
# Rationales: TypeScript
|
||||||
|
|
||||||
[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
|
[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ eleventyNavigation:
|
||||||
parent: Rationales
|
parent: Rationales
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rationales >> Accessibility ||5
|
# Rationales: Accessibility
|
||||||
|
|
||||||
In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
|
In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ eleventyNavigation:
|
||||||
order: 50
|
order: 50
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rationales ||50
|
# Rationales
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ eleventyNavigation:
|
||||||
parent: Rationales
|
parent: Rationales
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rationales >> Side Effects ||10
|
# Rationales: Side Effects
|
||||||
|
|
||||||
All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
|
All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
|
||||||
Everything else can be tree shaken by [rollup](https://rollupjs.org).
|
Everything else can be tree shaken by [rollup](https://rollupjs.org).
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ eleventyNavigation:
|
||||||
parent: Rationales
|
parent: Rationales
|
||||||
---
|
---
|
||||||
|
|
||||||
# Rationales >> Versioning Lion ||20
|
# Rationales: Versioning Lion
|
||||||
|
|
||||||
Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
|
Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Core
|
parent: Systems >> Core
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Core >> SlotMixin ||20
|
# Core: SlotMixin
|
||||||
|
|
||||||
The SlotMixin is made for solving accessibility challenges that inherently come with the usage of shadow dom.
|
The SlotMixin is made for solving accessibility challenges that inherently come with the usage of shadow dom.
|
||||||
Until [AOM](https://wicg.github.io/aom/explainer.html) is in place, it is not possible to create relations between different shadow doms.
|
Until [AOM](https://wicg.github.io/aom/explainer.html) is in place, it is not possible to create relations between different shadow doms.
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Systems
|
parent: Systems
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Core ||10
|
# Systems: Core
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Core
|
parent: Systems >> Core
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Core >> Overview ||10
|
# Core: Overview
|
||||||
|
|
||||||
The core package is mostly for in-depth usage.
|
The core package is mostly for in-depth usage.
|
||||||
It handles the version of `lit-element` and `lit-html`.
|
It handles the version of `lit-element` and `lit-html`.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Formatting and Parsing ||21
|
# Form: Formatting and Parsing
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Systems
|
parent: Systems
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form ||20
|
# Systems: Form
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Interaction States ||22
|
# Form: Interaction States
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html, render } from '@mdjs/mdjs-preview';
|
import { html, render } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> ModelValue ||20
|
# Form: ModelValue
|
||||||
|
|
||||||
The modelValue or model can be considered as the ‘aorta’ of our form system.
|
The modelValue or model can be considered as the ‘aorta’ of our form system.
|
||||||
It is the single source of truth; not only for the current state
|
It is the single source of truth; not only for the current state
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Overview ||10
|
# Form: Overview
|
||||||
|
|
||||||
This page should be used as a starting point when first using the Form System.
|
This page should be used as a starting point when first using the Form System.
|
||||||
It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts.
|
It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Styling ||40
|
# Form: Styling
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Use Cases ||50
|
# Form: Use Cases
|
||||||
|
|
||||||
This is a meta package to show interaction between various form elements.
|
This is a meta package to show interaction between various form elements.
|
||||||
For usage and installation please see the appropriate packages.
|
For usage and installation please see the appropriate packages.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Form
|
parent: Systems >> Form
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Form >> Validate ||30
|
# Form: Validate
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Systems
|
parent: Systems
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Icon ||40
|
# Systems: Icon
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Icon
|
parent: Systems >> Icon
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Icon >> Overview ||10
|
# Icon: Overview
|
||||||
|
|
||||||
The icon system provides a way of defining icon sets which are lazily loaded on demand when
|
The icon system provides a way of defining icon sets which are lazily loaded on demand when
|
||||||
icons are rendered on the page. This way icon imports do not block the initial render of your
|
icons are rendered on the page. This way icon imports do not block the initial render of your
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ eleventyNavigation:
|
||||||
order: 20
|
order: 20
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems ||20
|
# Systems
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Format Dates ||40
|
# Localize: Format Dates
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Systems
|
parent: Systems
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize ||30
|
# Systems: Localize
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Format Numbers ||30
|
# Localize: Format Numbers
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Overview ||10
|
# Localize: Overview
|
||||||
|
|
||||||
Is meant to translate text into multiple languages.
|
Is meant to translate text into multiple languages.
|
||||||
In it's simplest form it is a function that returns the translated text for a namespace + key.
|
In it's simplest form it is a function that returns the translated text for a namespace + key.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Rationale ||60
|
# Localize: Rationale
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Translate Text ||20
|
# Localize: Translate Text
|
||||||
|
|
||||||
## As a function
|
## As a function
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Localize
|
parent: Systems >> Localize
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Localize >> Use Cases ||50
|
# Localize: Use Cases
|
||||||
|
|
||||||
The localization system helps to manage localization data split into locales and automate its loading.
|
The localization system helps to manage localization data split into locales and automate its loading.
|
||||||
The loading of data tries to be as unobtrusive as possible for a typical workflow while providing a flexible and controllable mechanism for non-trivial use cases.
|
The loading of data tries to be as unobtrusive as possible for a typical workflow while providing a flexible and controllable mechanism for non-trivial use cases.
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,13 @@ eleventyNavigation:
|
||||||
parent: Systems >> Overlays >> Configuration
|
parent: Systems >> Overlays >> Configuration
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays >> Configuration >> Positioning ||40
|
# Configuration: Positioning
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
||||||
import { ref, createRef } from 'lit/directives/ref.js';
|
import { ref, createRef } from 'lit/directives/ref.js';
|
||||||
import './assets/demo-el-using-overlaymixin.mjs';
|
import './assets/demo-el-using-overlaymixin.js';
|
||||||
import './assets/applyDemoOverlayStyles.mjs';
|
import './assets/applyDemoOverlayStyles.js';
|
||||||
import './assets/demo-overlay-positioning.mjs';
|
import './assets/demo-overlay-positioning.mjs';
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,13 +12,13 @@ eleventyNavigation:
|
||||||
parent: Systems >> Overlays
|
parent: Systems >> Overlays
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays >> Edge cases ||10
|
# Overlays: Edge cases
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
||||||
import { ref, createRef } from 'lit/directives/ref.js';
|
import { ref, createRef } from 'lit/directives/ref.js';
|
||||||
import './assets/demo-el-using-overlaymixin.mjs';
|
import './assets/demo-el-using-overlaymixin.js';
|
||||||
import './assets/applyDemoOverlayStyles.mjs';
|
import './assets/applyDemoOverlayStyles.js';
|
||||||
import './assets/demo-overlay-positioning.mjs';
|
import './assets/demo-overlay-positioning.mjs';
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,23 @@
|
||||||
# Systems >> Overlays >> Configuration ||40
|
---
|
||||||
|
parts:
|
||||||
|
- Configuration
|
||||||
|
- Overlays
|
||||||
|
- Systems
|
||||||
|
title: 'Overlays: Configuration'
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Systems >> Overlays >> Configuration
|
||||||
|
title: Configuration
|
||||||
|
order: 40
|
||||||
|
parent: Systems >> Overlays
|
||||||
|
---
|
||||||
|
|
||||||
|
# Overlays: Configuration
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
import './assets/demo-el-using-overlaymixin.js';
|
import './assets/demo-el-using-overlaymixin.js';
|
||||||
import './assets/applyDemoOverlayStyles.js';
|
import './assets/applyDemoOverlayStyles.js';
|
||||||
import { withDropdownConfig, withTooltipConfig } from '@lion/ui/overlays.js';
|
import { withDropdownConfig, withModalDialogConfig, withTooltipConfig } from '@lion/ui/overlays.js';
|
||||||
```
|
```
|
||||||
|
|
||||||
The `OverlayController` has many configuration options.
|
The `OverlayController` has many configuration options.
|
||||||
|
|
@ -29,13 +42,13 @@ export const placementLocal = () => {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<demo-el-using-overlaymixin .config=${placementModeLocalConfig}>
|
<demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
|
||||||
<button slot="invoker">Click me to open the local overlay!</button>
|
<button slot="invoker">Click me to open the local overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -51,13 +64,13 @@ export const placementLocal = () => {
|
||||||
export const placementGlobal = () => {
|
export const placementGlobal = () => {
|
||||||
const placementModeGlobalConfig = { placementMode: 'global' };
|
const placementModeGlobalConfig = { placementMode: 'global' };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${placementModeGlobalConfig}>
|
<demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
|
||||||
<button slot="invoker">Click me to open the global overlay!</button>
|
<button slot="invoker">Click me to open the global overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -67,6 +80,36 @@ export const placementGlobal = () => {
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## isAlertDialog
|
||||||
|
|
||||||
|
In some cases the dialog should act like an [alertdialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/), which is a combination of an alert and dialog. If that is the case, you can add `is-alert-dialog` attribute, which sets the correct role on the dialog.
|
||||||
|
|
||||||
|
```js preview-story
|
||||||
|
export const alertDialog = () => {
|
||||||
|
const placementModeGlobalConfig = { ...withModalDialogConfig(), isAlertDialog: true };
|
||||||
|
return html`
|
||||||
|
<demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
|
||||||
|
<button slot="invoker">Click me to open the alert dialog!</button>
|
||||||
|
<div slot="content" class="demo-overlay">
|
||||||
|
Are you sure you want to perform this action?
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="${ev => ev.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="${ev => ev.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</demo-el-using-overlaymixin>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
## isTooltip (placementMode: 'local')
|
## isTooltip (placementMode: 'local')
|
||||||
|
|
||||||
As specified in the [overlay rationale](./rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
|
As specified in the [overlay rationale](./rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
|
||||||
|
|
@ -82,7 +125,7 @@ export const usingTooltipConfig = () => {
|
||||||
const tooltipConfig = { ...withTooltipConfig() };
|
const tooltipConfig = { ...withTooltipConfig() };
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
|
<demo-el-using-overlaymixin id="tooltip" .config="${tooltipConfig}">
|
||||||
<button slot="invoker">Hover me to open the tooltip!</button>
|
<button slot="invoker">Hover me to open the tooltip!</button>
|
||||||
<div slot="content" class="demo-overlay">Hello!</div>
|
<div slot="content" class="demo-overlay">Hello!</div>
|
||||||
</demo-el-using-overlaymixin>
|
</demo-el-using-overlaymixin>
|
||||||
|
|
@ -103,7 +146,7 @@ You use the feature on any type of overlay.
|
||||||
export const trapsKeyboardFocus = () => {
|
export const trapsKeyboardFocus = () => {
|
||||||
const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
|
const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}>
|
<demo-el-using-overlaymixin .config="${trapsKeyboardFocusConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
<div><a href="#">A focusable anchor</a></div>
|
<div><a href="#">A focusable anchor</a></div>
|
||||||
|
|
@ -111,7 +154,7 @@ export const trapsKeyboardFocus = () => {
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -129,13 +172,39 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
|
||||||
export const hidesOnEsc = () => {
|
export const hidesOnEsc = () => {
|
||||||
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
|
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
|
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
|
>
|
||||||
|
⨯
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</demo-el-using-overlaymixin>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
And how it works if `hidesOnEsc` is disabled. In most cases `hidesOnOutsideEsc` needs also to be set to `false`.
|
||||||
|
|
||||||
|
```js preview-story
|
||||||
|
export const hidesOnEscFalse = () => {
|
||||||
|
const hidesOnEscConfig = {
|
||||||
|
...withModalDialogConfig(),
|
||||||
|
hidesOnEsc: false,
|
||||||
|
hidesOnOutsideEsc: false,
|
||||||
|
};
|
||||||
|
return html`
|
||||||
|
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
|
||||||
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
|
<div slot="content" class="demo-overlay">
|
||||||
|
Hello! You can close this notification here:
|
||||||
|
<button
|
||||||
|
class="close-button"
|
||||||
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -153,13 +222,13 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
|
||||||
export const hidesOnOutsideEsc = () => {
|
export const hidesOnOutsideEsc = () => {
|
||||||
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
|
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
|
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -177,14 +246,14 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
|
||||||
export const hidesOnOutsideClick = () => {
|
export const hidesOnOutsideClick = () => {
|
||||||
const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
|
const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}>
|
<demo-el-using-overlaymixin .config="${hidesOnOutsideClickConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
<label for="myInput">Clicking this label should not trigger close</label>
|
<label for="myInput">Clicking this label should not trigger close</label>
|
||||||
<input id="myInput" />
|
<input id="myInput" />
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -207,13 +276,13 @@ export const elementToFocusAfterHide = () => {
|
||||||
|
|
||||||
const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
|
const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}>
|
<demo-el-using-overlaymixin .config="${elementToFocusAfterHideConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -243,13 +312,13 @@ This currently only supports CSS Animations, because it relies on the `animation
|
||||||
export const hasBackdrop = () => {
|
export const hasBackdrop = () => {
|
||||||
const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
|
const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${hasBackdropConfig}>
|
<demo-el-using-overlaymixin .config="${hasBackdropConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -273,19 +342,19 @@ export const isBlocking = () => {
|
||||||
This overlay gets closed when overlay B gets opened
|
This overlay gets closed when overlay B gets opened
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</demo-el-using-overlaymixin>
|
</demo-el-using-overlaymixin>
|
||||||
<demo-el-using-overlaymixin .config=${isBlockingConfig}>
|
<demo-el-using-overlaymixin .config="${isBlockingConfig}">
|
||||||
<button slot="invoker">Overlay B: open second</button>
|
<button slot="invoker">Overlay B: open second</button>
|
||||||
<div slot="content" class="demo-overlay demo-overlay--blocking">
|
<div slot="content" class="demo-overlay demo-overlay--blocking">
|
||||||
Overlay A is hidden... now close me and see overlay A again.
|
Overlay A is hidden... now close me and see overlay A again.
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -306,13 +375,13 @@ Boolean property. When true, prevents scrolling content that is outside of the `
|
||||||
export const preventsScroll = () => {
|
export const preventsScroll = () => {
|
||||||
const preventsScrollConfig = { preventsScroll: true };
|
const preventsScrollConfig = { preventsScroll: true };
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${preventsScrollConfig}>
|
<demo-el-using-overlaymixin .config="${preventsScrollConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -345,13 +414,13 @@ export const viewportConfig = () => {
|
||||||
viewportConfig: { placement: 'bottom-left' },
|
viewportConfig: { placement: 'bottom-left' },
|
||||||
};
|
};
|
||||||
return html`
|
return html`
|
||||||
<demo-el-using-overlaymixin .config=${viewportConfig}>
|
<demo-el-using-overlaymixin .config="${viewportConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay in the bottom left corner!</button>
|
<button slot="invoker">Click me to open the overlay in the bottom left corner!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -425,13 +494,13 @@ export const popperConfig = () => {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<demo-el-using-overlaymixin .config=${popperConfig}>
|
<demo-el-using-overlaymixin .config="${popperConfig}">
|
||||||
<button slot="invoker">Click me to open the overlay!</button>
|
<button slot="invoker">Click me to open the overlay!</button>
|
||||||
<div slot="content" class="demo-overlay">
|
<div slot="content" class="demo-overlay">
|
||||||
Hello! You can close this notification here:
|
Hello! You can close this notification here:
|
||||||
<button
|
<button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
|
||||||
>
|
>
|
||||||
⨯
|
⨯
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Systems
|
parent: Systems
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays ||40
|
# Systems: Overlays
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Overlays
|
parent: Systems >> Overlays
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays >> Overview ||10
|
# Overlays: Overview
|
||||||
|
|
||||||
Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
|
Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Overlays
|
parent: Systems >> Overlays
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays >> Rationale ||30
|
# Overlays: Rationale
|
||||||
|
|
||||||
This page describes the goal and duties of the overlay system, mainly by identifying all different
|
This page describes the goal and duties of the overlay system, mainly by identifying all different
|
||||||
appearances and types of overlays.
|
appearances and types of overlays.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Systems >> Overlays
|
parent: Systems >> Overlays
|
||||||
---
|
---
|
||||||
|
|
||||||
# Systems >> Overlays >> Use Cases ||20
|
# Overlays: Use Cases
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
import { html, render, LitElement } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,6 @@ eleventyNavigation:
|
||||||
parent: Tools
|
parent: Tools
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Ajax ||20
|
# Tools: Ajax
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Ajax
|
parent: Tools >> Ajax
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Ajax >> Overview ||10
|
# Ajax: Overview
|
||||||
|
|
||||||
`Ajax` is a small wrapper around `fetch` which:
|
`Ajax` is a small wrapper around `fetch` which:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Ajax
|
parent: Tools >> Ajax
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Ajax >> Use Cases ||20
|
# Ajax: Use Cases
|
||||||
|
|
||||||
```js script
|
```js script
|
||||||
import { html } from '@mdjs/mdjs-preview';
|
import { html } from '@mdjs/mdjs-preview';
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Helpers
|
parent: Tools >> Helpers
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Helpers >> Action Logger ||20
|
# Helpers: Action Logger
|
||||||
|
|
||||||
A visual element to show action logs in demos `sb-action-logger`
|
A visual element to show action logs in demos `sb-action-logger`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,15 @@
|
||||||
# Tools >> Helpers ||5
|
---
|
||||||
|
parts:
|
||||||
|
- Helpers
|
||||||
|
- Tools
|
||||||
|
title: 'Tools: Helpers'
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Tools >> Helpers
|
||||||
|
title: Helpers
|
||||||
|
order: 5
|
||||||
|
parent: Tools
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tools: Helpers
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Helpers
|
parent: Tools >> Helpers
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Helpers >> Overview ||10
|
# Helpers: Overview
|
||||||
|
|
||||||
A helpers package that contains several helpers that are used inside lion but can be used outside as well.
|
A helpers package that contains several helpers that are used inside lion but can be used outside as well.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ eleventyNavigation:
|
||||||
order: 20
|
order: 20
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools ||20
|
# Tools
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Singleton Manager
|
parent: Tools >> Singleton Manager
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Singleton Manager >> Example Complex ||40
|
# Singleton Manager: Example Complex
|
||||||
|
|
||||||
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
|
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Singleton Manager
|
parent: Tools >> Singleton Manager
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Singleton Manager >> Example Fail ||20
|
# Singleton Manager: Example Fail
|
||||||
|
|
||||||
In this SPA (Single Page Application) demo you will be able to reproduce the issue.
|
In this SPA (Single Page Application) demo you will be able to reproduce the issue.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Singleton Manager
|
parent: Tools >> Singleton Manager
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Singleton Manager >> Example Success ||30
|
# Singleton Manager: Example Success
|
||||||
|
|
||||||
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
|
In this SPA (Single Page Application) demo you will be able to reproduce the solution.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,15 @@
|
||||||
# Tools >> Singleton Manager ||30
|
---
|
||||||
|
parts:
|
||||||
|
- Singleton Manager
|
||||||
|
- Tools
|
||||||
|
title: 'Tools: Singleton Manager'
|
||||||
|
eleventyNavigation:
|
||||||
|
key: Tools >> Singleton Manager
|
||||||
|
title: Singleton Manager
|
||||||
|
order: 30
|
||||||
|
parent: Tools
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tools: Singleton Manager
|
||||||
|
|
||||||
-> go to Overview
|
-> go to Overview
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ eleventyNavigation:
|
||||||
parent: Tools >> Singleton Manager
|
parent: Tools >> Singleton Manager
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tools >> Singleton Manager >> Overview ||10
|
# Singleton Manager: Overview
|
||||||
|
|
||||||
A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton.
|
A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton.
|
||||||
Primarily useful if two major version of a package with a singleton is used.
|
Primarily useful if two major version of a package with a singleton is used.
|
||||||
|
|
|
||||||
42722
package-lock.json
generated
42722
package-lock.json
generated
File diff suppressed because it is too large
Load diff
259
package.json
259
package.json
|
|
@ -3,124 +3,120 @@
|
||||||
"name": "@lion/root",
|
"name": "@lion/root",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "export PROD=true && npm run build-docs && npx astro build && node -e 'require(\"./src/utils/post-build-dist/post-build-dist.js\").postBuildDist()'",
|
"build": "npm run build:astro && npm run build:rocket && npm run build:astro:update-links && mv dist _site/next",
|
||||||
"build-docs": "npm run clean && node -e 'require(\"./src/utils/copy-docs\").copyDocs()' && node -e 'require(\"./src/utils/copy-docs\").processImports()'",
|
"build:astro": "ASTRO_BASE_URL=/next npx astro build --force",
|
||||||
"build-docs:watch": "node -e 'require(\"./src/utils/copy-docs\").watch()'",
|
"build:astro:update-links": "node ./src/utils/rewrite-links.mjs",
|
||||||
|
"build:rocket": "rocket build",
|
||||||
"bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize",
|
"bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize",
|
||||||
"changeset": "changeset",
|
"changeset": "changeset",
|
||||||
"clean": "rm -rf ./public/docs && rm -rf ./src/content/docs && rm -rf ./dist",
|
"custom-elements-manifest": "npm run custom-elements-manifest --workspaces --if-present && node ./scripts/create-api-tables.mjs",
|
||||||
"clean:full": "npm run clean && rm -rf ./node_modules",
|
|
||||||
"custom-elements-manifest": "npm run custom-elements-manifest --workspaces --if-present",
|
|
||||||
"debug": "web-test-runner --watch --config web-test-runner-chrome.config.mjs",
|
"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:firefox": "web-test-runner --watch --config web-test-runner-firefox.config.mjs",
|
||||||
|
"debug:no-scoped-registries-polyfill": "npm run debug -- --no-scoped-registries-polyfill",
|
||||||
"debug:webkit": "web-test-runner --watch --config web-test-runner-webkit.config.mjs",
|
"debug:webkit": "web-test-runner --watch --config web-test-runner-webkit.config.mjs",
|
||||||
"dev": "astro dev",
|
"dev": "astro dev --force",
|
||||||
"format": "npm run format:eslint && npm run format:prettier",
|
"format": "npm run format:eslint && npm run format:prettier",
|
||||||
"format:eslint": "eslint --ext .js,.html . --fix",
|
"format:eslint": "eslint --ext .js,.html . --fix",
|
||||||
"format:prettier": "prettier \"**/*.{js,md}\" \"packages/*/package.json\" \"package.json\" --write",
|
"format:prettier": "prettier \"**/*.{js,md,astro}\" \"packages/*/package.json\" \"package.json\" --write",
|
||||||
"postinstall": "npx patch-package && npm run custom-elements-manifest",
|
"postinstall": "npx patch-package && npm run custom-elements-manifest",
|
||||||
"lint": "run-p lint:*",
|
"lint": "run-p lint:*",
|
||||||
"lint:eslint": "eslint --ext .js,.html .",
|
"lint:eslint": "eslint --ext .js,.html .",
|
||||||
"lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '{.github/**/*.md,.changeset/*.md,**/CHANGELOG.md,packages/ui/_legacy-changelogs/*.md}'",
|
"lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '{.github/**/*.md,.changeset/*.md,**/CHANGELOG.md,packages/ui/_legacy-changelogs/*.md}'",
|
||||||
"lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
|
"lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
|
||||||
"lint:types": "npm run types",
|
|
||||||
"lint:versions": "node ./scripts/lint-versions.js",
|
"lint:versions": "node ./scripts/lint-versions.js",
|
||||||
"prepare": "husky install",
|
"prepare": "husky install",
|
||||||
"preview": "astro preview",
|
"preview": "npx serve _site",
|
||||||
"release": "changeset publish",
|
"release": "changeset publish",
|
||||||
"rm-all-node_modules": "npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules",
|
"repo:clean-slate": "git clean -dfX",
|
||||||
"start": "npm run build-docs && npm run watch & astro dev",
|
"repo:diff-package-lock": "npx diff-package-lock",
|
||||||
|
"start": "rocket start",
|
||||||
|
"start:astro": "astro dev",
|
||||||
"start:prod": "npm run preview",
|
"start:prod": "npm run preview",
|
||||||
|
"temporary-disabled__lint:types": "npm run types",
|
||||||
"test": "run-p test:browser test:node",
|
"test": "run-p test:browser test:node",
|
||||||
"test:browser": "web-test-runner --coverage",
|
"test:browser": "web-test-runner --coverage",
|
||||||
"test:browserstack": "web-test-runner --config ./web-test-runner-browserstack.config.js",
|
"test:browserstack": "web-test-runner --config ./web-test-runner-browserstack.config.js",
|
||||||
"test:node": "npm run test:node --workspaces --if-present",
|
"test:node": "npm run test:node --workspaces --if-present",
|
||||||
"test:screenshots": "rimraf screenshots/.diff/ && rimraf screenshots/.current/ && mocha --require scripts/screenshots/bootstrap.js --exit --timeout 10000 \"packages/**/test/*.screenshots-test.js\"",
|
"test:screenshots": "npx rimraf screenshots/.diff/ && npx rimraf screenshots/.current/ && mocha --require scripts/screenshots/bootstrap.js --exit --timeout 10000 \"packages/**/test/*.screenshots-test.js\"",
|
||||||
"test:screenshots:update": "cross-env UPDATE_SCREENSHOTS=true npm run test:screenshots",
|
"test:screenshots:update": "cross-env UPDATE_SCREENSHOTS=true npm run test:screenshots",
|
||||||
"types": "npm run types --workspaces --if-present",
|
"types": "npm run types --workspaces --if-present",
|
||||||
"types-check-only": "npm run types-check-only --workspaces --if-present",
|
"types-check-only": "npm run types-check-only --workspaces --if-present"
|
||||||
"watch": "npm-watch"
|
|
||||||
},
|
},
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*",
|
"packages/*",
|
||||||
"packages-node/*"
|
"packages-node/*"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/lit": "^3.0.2",
|
"lit": "^3.2.1"
|
||||||
"@mdjs/core": "^0.20.0",
|
|
||||||
"@rollup/plugin-commonjs": "^24.0.0",
|
|
||||||
"@rollup/plugin-node-resolve": "^13.0.6",
|
|
||||||
"astro": "^3.3.1",
|
|
||||||
"astro-seo": "^0.8.0",
|
|
||||||
"changeset": "^0.2.6",
|
|
||||||
"find-node-modules": "^2.1.3",
|
|
||||||
"image-extensions": "^1.1.0",
|
|
||||||
"npm-watch": "^0.11.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.10.1",
|
"@astrojs/lit": "^4.3.0",
|
||||||
|
"@astrojs/mdx": "^4.0.8",
|
||||||
|
"@babel/core": "^7.25.8",
|
||||||
"@bundled-es-modules/fetch-mock": "^6.5.2",
|
"@bundled-es-modules/fetch-mock": "^6.5.2",
|
||||||
"@changesets/cli": "^2.26.1",
|
"@changesets/cli": "^2.27.9",
|
||||||
"@custom-elements-manifest/analyzer": "^0.5.7",
|
"@custom-elements-manifest/analyzer": "^0.10.3",
|
||||||
"@open-wc/building-rollup": "^1.2.1",
|
"@custom-elements-manifest/to-markdown": "^0.1.0",
|
||||||
"@open-wc/eslint-config": "^7.0.0",
|
"@lit-labs/testing": "^0.2.5",
|
||||||
"@open-wc/testing": "^3.1.2",
|
"@lit/reactive-element": "^2.1.0",
|
||||||
"@open-wc/testing-helpers": "^2.1.2",
|
"@mdjs/core": "^0.21.1",
|
||||||
"@types/chai-as-promised": "^7.1.5",
|
"@mdjs/mdjs-preview": "^0.6.0",
|
||||||
"@types/chai-dom": "^0.0.8",
|
"@mdjs/mdjs-story": "^0.4.0",
|
||||||
"@types/convert-source-map": "^1.5.1",
|
"@open-wc/building-rollup": "^2.2.3",
|
||||||
"@types/fs-extra": "^9.0.7",
|
"@open-wc/eslint-config": "^12.0.3",
|
||||||
"@types/glob": "^7.1.3",
|
"@open-wc/scoped-elements": "^3.0.5",
|
||||||
"@types/istanbul-reports": "^3.0.0",
|
"@open-wc/testing": "^4.0.0",
|
||||||
"@types/mocha": "^10.0.0",
|
"@open-wc/testing-helpers": "^3.0.1",
|
||||||
"@types/prettier": "^2.2.1",
|
"@rocket/blog": "0.4.0",
|
||||||
"@web/dev-server": "^0.1.8",
|
"@rocket/cli": "^0.10.2",
|
||||||
"@web/dev-server-legacy": "^0.1.7",
|
"@rocket/launch": "^0.6.0",
|
||||||
"@web/test-runner": "^0.13.7",
|
"@rocket/search": "^0.5.1",
|
||||||
"@web/test-runner-browserstack": "^0.5.0",
|
"@thepassle/module-graph": "^0.11.0",
|
||||||
"@web/test-runner-commands": "^0.6.1",
|
"@types/autosize": "^4.0.3",
|
||||||
"@web/test-runner-playwright": "^0.8.8",
|
"@types/chai-as-promised": "^8.0.1",
|
||||||
"@webcomponents/scoped-custom-element-registry": "^0.0.5",
|
"@types/chai-dom": "^1.11.3",
|
||||||
"@yarnpkg/lockfile": "^1.1.0",
|
"@types/fs-extra": "^11.0.4",
|
||||||
"babel-polyfill": "^6.26.0",
|
"@types/glob": "^8.1.0",
|
||||||
|
"@types/mocha": "^10.0.9",
|
||||||
|
"@web/dev-server-legacy": "^2.1.1",
|
||||||
|
"@web/test-runner": "^0.19.0",
|
||||||
|
"@web/test-runner-browserstack": "^0.7.2",
|
||||||
|
"@web/test-runner-commands": "^0.9.0",
|
||||||
|
"@web/test-runner-playwright": "^0.11.0",
|
||||||
|
"@webcomponents/scoped-custom-element-registry": "^0.0.10",
|
||||||
|
"@webcomponents/template-shadowroot": "^0.2.1",
|
||||||
|
"astro": "^5.3.0",
|
||||||
|
"astro-pagefind": "^1.8.3",
|
||||||
|
"astro-seo": "^0.7.5",
|
||||||
"bundlesize": "^1.0.0-beta.2",
|
"bundlesize": "^1.0.0-beta.2",
|
||||||
"cem-plugin-vs-code-custom-data-generator": "^1.4.1",
|
"cem-plugin-vs-code-custom-data-generator": "^1.4.2",
|
||||||
"chai": "^4.2.0",
|
"chai": "^4.5.0",
|
||||||
"chai-as-promised": "^7.1.1",
|
"chai-as-promised": "^8.0.0",
|
||||||
"chalk": "^4.1.0",
|
"cross-env": "^7.0.3",
|
||||||
"concurrently": "^5.2.0",
|
"es-module-lexer": "^1.7.0",
|
||||||
"cross-env": "^7.0.2",
|
"eslint": "^8.57.1",
|
||||||
"es6-promisify": "^6.1.1",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint": "^8.26.0",
|
"eslint-plugin-import": "^2.31.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-plugin-wc": "^2.2.0",
|
||||||
"eslint-plugin-import": "^2.26.0",
|
"globby": "^14.0.2",
|
||||||
"eslint-plugin-lit": "^1.6.1",
|
"gray-matter": "^4.0.3",
|
||||||
"eslint-plugin-lit-a11y": "^2.2.0",
|
"husky": "^9.1.6",
|
||||||
"eslint-plugin-wc": "^1.3.2",
|
"lint-staged": "^15.2.10",
|
||||||
"globby": "^13.1.2",
|
"looks-same": "^9.0.1",
|
||||||
"husky": "^6.0.0",
|
"markdownlint-cli": "^0.42.0",
|
||||||
"lint-staged": "^10.0.0",
|
"mocha": "^10.7.3",
|
||||||
"looks-same": "^7.2.3",
|
|
||||||
"markdownlint-cli": "^0.17.0",
|
|
||||||
"mermaid": "^9.3.0",
|
|
||||||
"mkdirp-promise": "^5.0.1",
|
|
||||||
"mocha": "^10.1.0",
|
|
||||||
"mock-fs": "^5.1.2",
|
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"nyc": "^15.0.0",
|
"patch-package": "^8.0.0",
|
||||||
"playwright": "^1.20.0",
|
|
||||||
"postinstall-postinstall": "^2.1.0",
|
"postinstall-postinstall": "^2.1.0",
|
||||||
"prettier": "^2.0.5",
|
"prettier": "^3.3.3",
|
||||||
"prettier-package-json": "^2.1.3",
|
"prettier-package-json": "^2.8.0",
|
||||||
"remark-html": "^13.0.1",
|
"remark-html": "^13.0.2",
|
||||||
"rimraf": "^2.6.3",
|
"rocket-preset-extend-lion-docs": "^0.4.0",
|
||||||
"rollup": "^2.0.0",
|
"semver": "^7.6.3",
|
||||||
"semver": "^7.5.2",
|
"sinon": "^19.0.2",
|
||||||
"sinon": "^7.2.2",
|
"typescript": "^4.9.5",
|
||||||
"ssl-root-cas": "^1.3.1",
|
"unist-util-visit": "^5.0.0",
|
||||||
"typescript": "~4.8.4",
|
"wireit": "^0.14.12"
|
||||||
"whatwg-fetch": "^3.0.0",
|
|
||||||
"wireit": "^0.7.2"
|
|
||||||
},
|
},
|
||||||
"bundlesize": [
|
"bundlesize": [
|
||||||
{
|
{
|
||||||
|
|
@ -128,23 +124,96 @@
|
||||||
"maxSize": "20 kB"
|
"maxSize": "20 kB"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"comments": {
|
||||||
"overrides": {
|
"overrides": {
|
||||||
"sharp": "^0.31.x"
|
"//": [
|
||||||
|
"For best compatibility, we sometimes need to override a package version depended upon by multiple packages."
|
||||||
|
],
|
||||||
|
"sharp": [
|
||||||
|
"Version of 'sharp' package we get via '@rocket/cli' is too old to be built on a Mac.",
|
||||||
|
"But updating package '@rocket-cli' causes our portal to break. Reason unknown.",
|
||||||
|
"So, we override the sharp version in here until '@rocket-cli' can be updated."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"olderVersions": {
|
||||||
|
"//": [
|
||||||
|
"Our aim is to keep all depencies up-to-date(for maintainability, performance and security).",
|
||||||
|
"We use [npm-outdated](https://marketplace.visualstudio.com/items?itemName=mskelton.npm-outdated) as a helper for this.",
|
||||||
|
"Sometimes we can't bc/o incompatibility issues."
|
||||||
|
],
|
||||||
|
"eslint": [
|
||||||
|
"Can't be updated yet to 9.x, because of eslint-plugin-import"
|
||||||
|
],
|
||||||
|
"typescript": [
|
||||||
|
"Since changes in types can be reflected in the code, we want to keep this stable for a longer period of time.",
|
||||||
|
"As semver is not followed, we keep our major versions aligned with a minot of TS (hence '~' instead of '^' is used)"
|
||||||
|
],
|
||||||
|
"remark-html": [
|
||||||
|
"Can't be updated to 14.x, because remark-html is still in commonjs."
|
||||||
|
],
|
||||||
|
"@rocket/*": [
|
||||||
|
"Pinned, as newer versions require a complete overhaul of docs. Later we will move to astro."
|
||||||
|
],
|
||||||
|
"looks-same": [
|
||||||
|
"Part of ./scripts/screenshots, which is not incorporated atm in automated test suite. TODO: re-evaluate solution and whether visual regression testing needs to be part of this repo"
|
||||||
|
],
|
||||||
|
"@open-wc/building-rollup": [
|
||||||
|
"Can't be updated to 3.x, as v2 seems to be better compatible with rocket setup"
|
||||||
|
],
|
||||||
|
"chai": [
|
||||||
|
"Can't be updated to 5.x, because @web/dev-server-core test-helpers (having implicit dep on chai) is not compatible with chai >= 5.x"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"toBeRemoved": {
|
||||||
|
"//": [
|
||||||
|
"For maintainability, performance and security, we want to keep the number of dependencies as low as possible (in case functionality can be achieved via existing dependencies or platform functionality)."
|
||||||
|
],
|
||||||
|
"@bundled-es-modules/fetch-mock": [
|
||||||
|
"Can be achieved via sinon as well"
|
||||||
|
],
|
||||||
|
"publish-docs/fs-extra | @types/fs-extra": [
|
||||||
|
"Copy can be achieved via node's fs module"
|
||||||
|
],
|
||||||
|
"@web/dev-server-legacy": [
|
||||||
|
"Only needed for browserstack config. Can be achieved via @web/dev-server"
|
||||||
|
],
|
||||||
|
"@lit/reactive-element": [
|
||||||
|
"We make sure latest version is hoisted and resolved, until we move to astro (when we can regenerate the package-lock.json file w/o breaking Rocket)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependenciesAstroForTheFuture": {
|
||||||
|
"@astrojs/lit": "^4.3.0",
|
||||||
|
"@astrojs/mdx": "^4.0.8",
|
||||||
|
"@mdjs/core": "^0.21.1",
|
||||||
|
"@mdjs/mdjs-preview": "^0.6.0",
|
||||||
|
"@mdjs/mdjs-story": "^0.4.0",
|
||||||
|
"@open-wc/scoped-elements": "^3.0.5",
|
||||||
|
"@webcomponents/scoped-custom-element-registry": "^0.0.10",
|
||||||
|
"@webcomponents/template-shadowroot": "^0.2.1",
|
||||||
|
"astro": "^5.3.0",
|
||||||
|
"astro-pagefind": "^1.8.3",
|
||||||
|
"astro-seo": "^0.7.5",
|
||||||
|
"es-module-lexer": "^1.7.0",
|
||||||
|
"lit": "^3.2.1",
|
||||||
|
"rocket-preset-extend-lion-docs": "^0.4.0",
|
||||||
|
"unist-util-visit": "^5.0.0"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"sharp": "^0.29.x",
|
||||||
|
"@mdjs/core": "^0.21.1",
|
||||||
|
"@mdjs/mdjs-story": "^0.4.0",
|
||||||
|
"remark-rehype": "^8",
|
||||||
|
"remark-parse": "9",
|
||||||
|
"@mdjs/mdjs-preview": {
|
||||||
|
".": "^0.6.0",
|
||||||
|
"@lion/ui": "^0.15.0"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"printWidth": 100,
|
"printWidth": 100,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"arrowParens": "avoid",
|
"arrowParens": "avoid",
|
||||||
"trailingComma": "all"
|
"trailingComma": "all"
|
||||||
},
|
|
||||||
"watch": {
|
|
||||||
"build-docs:watch": {
|
|
||||||
"patterns": [
|
|
||||||
"docs"
|
|
||||||
],
|
|
||||||
"extensions": [
|
|
||||||
"*"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
"@babel/parser": "^7.24.5",
|
"@babel/parser": "^7.24.5",
|
||||||
"@babel/traverse": "^7.24.5",
|
"@babel/traverse": "^7.24.5",
|
||||||
"@babel/types": "^7.24.5",
|
"@babel/types": "^7.24.5",
|
||||||
"es-module-lexer": "^0.3.26",
|
"es-module-lexer": "^1.7.0",
|
||||||
"globby": "^14.0.1",
|
"globby": "^14.0.1",
|
||||||
"prettier": "^3.2.5"
|
"prettier": "^3.2.5"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
|
// @ts-nocheck
|
||||||
import { parse } from '@babel/parser';
|
import { parse } from '@babel/parser';
|
||||||
// @ts-expect-error
|
|
||||||
import _traverse from '@babel/traverse';
|
import _traverse from '@babel/traverse';
|
||||||
// @ts-expect-error
|
|
||||||
import _generate from '@babel/generator';
|
import _generate from '@babel/generator';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import * as babelTypes from '@babel/types';
|
import * as babelTypes from '@babel/types';
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
"unified": "^9.2.0",
|
"unified": "^9.2.0",
|
||||||
"unist-util-is": "^4.0.2",
|
"unist-util-is": "^4.0.2",
|
||||||
"unist-util-select": "^3.0.1",
|
"unist-util-select": "^3.0.1",
|
||||||
"unist-util-visit": "^2.0.2"
|
"unist-util-visit": "^5.0.0"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"remark"
|
"remark"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// unified works my modifying the original passed node
|
// unified works my modifying the original passed node
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
const visit = require('unist-util-visit');
|
const { visit } = require('unist-util-visit');
|
||||||
const { select } = require('unist-util-select');
|
const { select } = require('unist-util-select');
|
||||||
const unified = require('unified');
|
const unified = require('unified');
|
||||||
const markdown = require('remark-parse');
|
const markdown = require('remark-parse');
|
||||||
|
|
|
||||||
|
|
@ -33,11 +33,12 @@
|
||||||
"@babel/core": "^7.10.1",
|
"@babel/core": "^7.10.1",
|
||||||
"@babel/plugin-syntax-import-assertions": "^7.14.5",
|
"@babel/plugin-syntax-import-assertions": "^7.14.5",
|
||||||
"babel-plugin-extend-docs": "^0.5.3",
|
"babel-plugin-extend-docs": "^0.5.3",
|
||||||
"es-module-lexer": "^0.3.6",
|
"es-module-lexer": "^1.7.0",
|
||||||
"glob": "^7.1.6",
|
"glob": "^7.1.6",
|
||||||
"plugins-manager": "^0.3.0",
|
"plugins-manager": "^0.3.0",
|
||||||
"remark-extend": "^0.5.3",
|
"remark-extend": "^0.5.3",
|
||||||
"unist-util-visit": "^2.0.2"
|
"remark-parse": "^9.0.0",
|
||||||
|
"unist-util-visit": "^5.0.0"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"docs",
|
"docs",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
import babelPkg from '@babel/core';
|
import babelPkg from '@babel/core';
|
||||||
import visit from 'unist-util-visit';
|
import { visit } from 'unist-util-visit';
|
||||||
|
|
||||||
const { transformSync } = babelPkg;
|
const { transformSync } = babelPkg;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import visit from 'unist-util-visit';
|
import { visit } from 'unist-util-visit';
|
||||||
|
|
||||||
/** @typedef {import('vfile').VFileOptions} VFileOptions */
|
/** @typedef {import('vfile').VFileOptions} VFileOptions */
|
||||||
/** @typedef {import('unist').Node} Node */
|
/** @typedef {import('unist').Node} Node */
|
||||||
|
|
|
||||||
|
|
@ -87,17 +87,17 @@ describe('remarkExtendLionDocsTransformJs', () => {
|
||||||
expect(result.html).to.include('ing-accordion');
|
expect(result.html).to.include('ing-accordion');
|
||||||
expect(result.html).to.equal(
|
expect(result.html).to.equal(
|
||||||
[
|
[
|
||||||
'<mdjs-preview mdjs-story-name="main">',
|
'<mdjs-preview mdjs-story-name="main">\n' +
|
||||||
'',
|
'\n' +
|
||||||
'',
|
'\n' +
|
||||||
'',
|
'\n' +
|
||||||
'<pre class="language-js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">',
|
'<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token html language-html">\n' +
|
||||||
' <ing-accordion></ing-accordion>',
|
'</span></span></span><span class="code-line"><span class="token template-string"><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ing-accordion</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ing-accordion</span><span class="token punctuation">></span></span>\n' +
|
||||||
'</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>',
|
'</span></span></span><span class="code-line"><span class="token template-string"><span class="token html language-html"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n' +
|
||||||
'</code></pre>',
|
'</span></code></pre>\n' +
|
||||||
'',
|
'\n' +
|
||||||
'',
|
'\n' +
|
||||||
'',
|
'\n' +
|
||||||
'</mdjs-preview>',
|
'</mdjs-preview>',
|
||||||
].join('\n'),
|
].join('\n'),
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"extends": "../../tsconfig.json",
|
"extends": "../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./dist-types",
|
"outDir": "./dist-types",
|
||||||
"rootDir": ".",
|
"rootDir": "."
|
||||||
},
|
},
|
||||||
"include": ["src", "test", "types"],
|
"include": ["src", "test", "types"],
|
||||||
"exclude": ["dist-types"]
|
"exclude": ["dist-types"]
|
||||||
|
|
|
||||||
|
|
@ -64,8 +64,11 @@ export const ArrowMixinImplementation = superclass =>
|
||||||
|
|
||||||
[data-popper-placement^='left'] .arrow {
|
[data-popper-placement^='left'] .arrow {
|
||||||
right: calc(
|
right: calc(
|
||||||
-1 * (var(--tooltip-arrow-height) +
|
-1 *
|
||||||
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
|
(
|
||||||
|
var(--tooltip-arrow-height) +
|
||||||
|
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -75,8 +78,11 @@ export const ArrowMixinImplementation = superclass =>
|
||||||
|
|
||||||
[data-popper-placement^='right'] .arrow {
|
[data-popper-placement^='right'] .arrow {
|
||||||
left: calc(
|
left: calc(
|
||||||
-1 * (var(--tooltip-arrow-height) +
|
-1 *
|
||||||
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
|
(
|
||||||
|
var(--tooltip-arrow-height) +
|
||||||
|
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1040,7 +1040,7 @@ describe('OverlayController', () => {
|
||||||
// Don't hide on inside shadowDom click
|
// Don't hide on inside shadowDom click
|
||||||
/** @type {ShadowRoot} */
|
/** @type {ShadowRoot} */
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
(ctrl.contentNode.querySelector(tagString).shadowRoot).querySelector('button').click();
|
ctrl.contentNode.querySelector(tagString).shadowRoot.querySelector('button').click();
|
||||||
|
|
||||||
await aTimeout(0);
|
await aTimeout(0);
|
||||||
expect(ctrl.isShown).to.be.true;
|
expect(ctrl.isShown).to.be.true;
|
||||||
|
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
diff --git a/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js b/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
|
|
||||||
index 2f1ee5d..6865631 100644
|
|
||||||
--- a/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
|
|
||||||
+++ b/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
|
|
||||||
@@ -1,10 +1,13 @@
|
|
||||||
import Slugger from "github-slugger";
|
|
||||||
import { visit } from "unist-util-visit";
|
|
||||||
+import * as path from 'path';
|
|
||||||
import { InvalidAstroDataError, safelyGetAstroData } from "./frontmatter-injection.js";
|
|
||||||
const rawNodeTypes = /* @__PURE__ */ new Set(["text", "raw", "mdxTextExpression"]);
|
|
||||||
const codeTagNames = /* @__PURE__ */ new Set(["code", "pre"]);
|
|
||||||
function rehypeHeadingIds() {
|
|
||||||
return function(tree, file) {
|
|
||||||
+ const fileName = file.history[0];
|
|
||||||
+ const parentDirectoryName = path.basename(path.dirname(fileName));
|
|
||||||
const headings = [];
|
|
||||||
const slugger = new Slugger();
|
|
||||||
const isMDX = isMDXFile(file);
|
|
||||||
@@ -52,7 +55,7 @@ function rehypeHeadingIds() {
|
|
||||||
let slug = slugger.slug(text);
|
|
||||||
if (slug.endsWith("-"))
|
|
||||||
slug = slug.slice(0, -1);
|
|
||||||
- node.properties.id = slug;
|
|
||||||
+ node.properties.id = `${parentDirectoryName}-${slug}`;
|
|
||||||
}
|
|
||||||
headings.push({ depth, slug: node.properties.id, text });
|
|
||||||
});
|
|
||||||
|
|
@ -1,275 +0,0 @@
|
||||||
diff --git a/node_modules/@mdjs/core/src/mdjsParse.js b/node_modules/@mdjs/core/src/mdjsParse.js
|
|
||||||
index 730e32a..5d6f3f5 100644
|
|
||||||
--- a/node_modules/@mdjs/core/src/mdjsParse.js
|
|
||||||
+++ b/node_modules/@mdjs/core/src/mdjsParse.js
|
|
||||||
@@ -5,13 +5,12 @@ import { remove } from 'unist-util-remove';
|
|
||||||
/** @typedef {import('unist').Node} Node */
|
|
||||||
|
|
||||||
export function mdjsParse() {
|
|
||||||
- let jsCode = '';
|
|
||||||
-
|
|
||||||
/**
|
|
||||||
* @param {Node} tree
|
|
||||||
* @param {VFileOptions} file
|
|
||||||
*/
|
|
||||||
function transformer(tree, file) {
|
|
||||||
+ let jsCode = '';
|
|
||||||
visit(
|
|
||||||
tree,
|
|
||||||
'code',
|
|
||||||
diff --git a/node_modules/@mdjs/core/src/mdjsSetupCode.js b/node_modules/@mdjs/core/src/mdjsSetupCode.js
|
|
||||||
index 02a7c56..db3e466 100644
|
|
||||||
--- a/node_modules/@mdjs/core/src/mdjsSetupCode.js
|
|
||||||
+++ b/node_modules/@mdjs/core/src/mdjsSetupCode.js
|
|
||||||
@@ -76,10 +76,6 @@ export function mdjsSetupCode({
|
|
||||||
` Object.assign(storyEl, ${JSON.stringify(simulationSettings)});`,
|
|
||||||
' }',
|
|
||||||
`};`,
|
|
||||||
- 'if (needsMdjsElements) {',
|
|
||||||
- ` if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
|
|
||||||
- ` if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
|
|
||||||
- '}',
|
|
||||||
].join('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
diff --git a/node_modules/@mdjs/core/src/mdjsStoryParse.js b/node_modules/@mdjs/core/src/mdjsStoryParse.js
|
|
||||||
index fe734a3..3ddd3a1 100644
|
|
||||||
--- a/node_modules/@mdjs/core/src/mdjsStoryParse.js
|
|
||||||
+++ b/node_modules/@mdjs/core/src/mdjsStoryParse.js
|
|
||||||
@@ -54,132 +54,130 @@ export function mdjsStoryParse({
|
|
||||||
storyTag = defaultStoryTag,
|
|
||||||
previewStoryTag = defaultPreviewStoryTag,
|
|
||||||
} = {}) {
|
|
||||||
- /** @type {Story[]} */
|
|
||||||
- const stories = [];
|
|
||||||
- let htmlIndex = 0;
|
|
||||||
-
|
|
||||||
- /* eslint-disable no-param-reassign */
|
|
||||||
-
|
|
||||||
/**
|
|
||||||
- * @param {UnistNode} _node
|
|
||||||
- * @param {number} index
|
|
||||||
- * @param {UnistParent} parent
|
|
||||||
+ * @param {Node} tree
|
|
||||||
+ * @param {VFileOptions} file
|
|
||||||
*/
|
|
||||||
- const nodeCodeVisitor = (_node, index, parent) => {
|
|
||||||
- let node = /** @type {UnistNode & {[key: string]: unknown}} */ (_node);
|
|
||||||
- if (node.lang === 'js' && node.meta === 'story' && typeof node.value === 'string') {
|
|
||||||
- const storyData = extractStoryData(node.value);
|
|
||||||
- node.type = 'html';
|
|
||||||
- node.value = storyTag(storyData.name);
|
|
||||||
- stories.push(storyData);
|
|
||||||
- }
|
|
||||||
- if (node.lang === 'js' && node.meta === 'preview-story' && typeof node.value === 'string') {
|
|
||||||
- const storyData = extractStoryData(node.value);
|
|
||||||
- const newValue = previewStoryTag(storyData.name);
|
|
||||||
- if (newValue.includes('[[CODE SLOT]]')) {
|
|
||||||
- const tagParts = newValue.split('[[CODE SLOT]]');
|
|
||||||
-
|
|
||||||
- const inside = [node];
|
|
||||||
- let skipAmount = 1;
|
|
||||||
+ async function transformer(tree, file) {
|
|
||||||
+ /** @type {Story[]} */
|
|
||||||
+ const stories = [];
|
|
||||||
+ let htmlIndex = 0;
|
|
||||||
+
|
|
||||||
+ /**
|
|
||||||
+ * @param {UnistNode} _node
|
|
||||||
+ * @param {number} index
|
|
||||||
+ * @param {UnistParent} parent
|
|
||||||
+ */
|
|
||||||
+ const nodeCodeVisitor = (_node, index, parent) => {
|
|
||||||
+ let node = /** @type {UnistNode & {[key: string]: unknown}} */ (_node);
|
|
||||||
+ if (node.lang === 'js' && node.meta === 'story' && typeof node.value === 'string') {
|
|
||||||
+ const storyData = extractStoryData(node.value);
|
|
||||||
+ node.type = 'html';
|
|
||||||
+ node.value = storyTag(storyData.name);
|
|
||||||
+ stories.push(storyData);
|
|
||||||
+ }
|
|
||||||
+ if (node.lang === 'js' && node.meta === 'preview-story' && typeof node.value === 'string') {
|
|
||||||
+ const storyData = extractStoryData(node.value);
|
|
||||||
+ const newValue = previewStoryTag(storyData.name);
|
|
||||||
+ if (newValue.includes('[[CODE SLOT]]')) {
|
|
||||||
+ const tagParts = newValue.split('[[CODE SLOT]]');
|
|
||||||
|
|
||||||
- const next = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
- parent.children[index + 1]
|
|
||||||
- );
|
|
||||||
- if (next && next.type === 'code' && next.meta === 'story-code') {
|
|
||||||
- inside.push(next);
|
|
||||||
- skipAmount += 1;
|
|
||||||
+ const inside = [node];
|
|
||||||
+ let skipAmount = 1;
|
|
||||||
|
|
||||||
- const next2 = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
- parent.children[index + 2]
|
|
||||||
+ const next = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
+ parent.children[index + 1]
|
|
||||||
);
|
|
||||||
- if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
|
|
||||||
- inside.push(next2);
|
|
||||||
+ if (next && next.type === 'code' && next.meta === 'story-code') {
|
|
||||||
+ inside.push(next);
|
|
||||||
skipAmount += 1;
|
|
||||||
+
|
|
||||||
+ const next2 = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
+ parent.children[index + 2]
|
|
||||||
+ );
|
|
||||||
+ if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
|
|
||||||
+ inside.push(next2);
|
|
||||||
+ skipAmount += 1;
|
|
||||||
+ }
|
|
||||||
}
|
|
||||||
+
|
|
||||||
+ node = {
|
|
||||||
+ type: 'root',
|
|
||||||
+ children: [
|
|
||||||
+ { type: 'html', value: tagParts[0] },
|
|
||||||
+ { type: 'text', value: '\n\n' },
|
|
||||||
+ ...inside,
|
|
||||||
+ { type: 'text', value: '\n\n' },
|
|
||||||
+ { type: 'html', value: tagParts[1] },
|
|
||||||
+ ],
|
|
||||||
+ };
|
|
||||||
+ parent.children.splice(index, skipAmount, node);
|
|
||||||
+ } else {
|
|
||||||
+ node.type = 'html';
|
|
||||||
+ node.value = previewStoryTag(storyData.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
- node = {
|
|
||||||
- type: 'root',
|
|
||||||
- children: [
|
|
||||||
- { type: 'html', value: tagParts[0] },
|
|
||||||
- { type: 'text', value: '\n\n' },
|
|
||||||
- ...inside,
|
|
||||||
- { type: 'text', value: '\n\n' },
|
|
||||||
- { type: 'html', value: tagParts[1] },
|
|
||||||
- ],
|
|
||||||
- };
|
|
||||||
- parent.children.splice(index, skipAmount, node);
|
|
||||||
- } else {
|
|
||||||
- node.type = 'html';
|
|
||||||
- node.value = previewStoryTag(storyData.name);
|
|
||||||
+ stories.push(storyData);
|
|
||||||
}
|
|
||||||
|
|
||||||
- stories.push(storyData);
|
|
||||||
- }
|
|
||||||
-
|
|
||||||
- if (node.lang === 'html' && node.meta === 'story') {
|
|
||||||
- const storyData = extractStoryData(
|
|
||||||
- `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
|
||||||
- { type: 'html' },
|
|
||||||
- );
|
|
||||||
- node.type = 'html';
|
|
||||||
- node.value = storyTag(storyData.name);
|
|
||||||
- stories.push(storyData);
|
|
||||||
- htmlIndex += 1;
|
|
||||||
- }
|
|
||||||
- if (node.lang === 'html' && node.meta === 'preview-story') {
|
|
||||||
- const storyData = extractStoryData(
|
|
||||||
- `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
|
||||||
- { type: 'html' },
|
|
||||||
- );
|
|
||||||
-
|
|
||||||
- const newValue = previewStoryTag(storyData.name);
|
|
||||||
- if (newValue.includes('[[CODE SLOT]]')) {
|
|
||||||
- const tagParts = newValue.split('[[CODE SLOT]]');
|
|
||||||
- const inside = [node];
|
|
||||||
- let skipAmount = 1;
|
|
||||||
- const next = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
- parent.children[index + 1]
|
|
||||||
+ if (node.lang === 'html' && node.meta === 'story') {
|
|
||||||
+ const storyData = extractStoryData(
|
|
||||||
+ `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
|
||||||
+ { type: 'html' },
|
|
||||||
+ );
|
|
||||||
+ node.type = 'html';
|
|
||||||
+ node.value = storyTag(storyData.name);
|
|
||||||
+ stories.push(storyData);
|
|
||||||
+ htmlIndex += 1;
|
|
||||||
+ }
|
|
||||||
+ if (node.lang === 'html' && node.meta === 'preview-story') {
|
|
||||||
+ const storyData = extractStoryData(
|
|
||||||
+ `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
|
||||||
+ { type: 'html' },
|
|
||||||
);
|
|
||||||
- if (next && next.type === 'code' && next.meta === 'story-code') {
|
|
||||||
- inside.push(next);
|
|
||||||
- skipAmount += 1;
|
|
||||||
|
|
||||||
- const next2 = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
- parent.children[index + 2]
|
|
||||||
+ const newValue = previewStoryTag(storyData.name);
|
|
||||||
+ if (newValue.includes('[[CODE SLOT]]')) {
|
|
||||||
+ const tagParts = newValue.split('[[CODE SLOT]]');
|
|
||||||
+ const inside = [node];
|
|
||||||
+ let skipAmount = 1;
|
|
||||||
+ const next = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
+ parent.children[index + 1]
|
|
||||||
);
|
|
||||||
- if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
|
|
||||||
- inside.push(next2);
|
|
||||||
+ if (next && next.type === 'code' && next.meta === 'story-code') {
|
|
||||||
+ inside.push(next);
|
|
||||||
skipAmount += 1;
|
|
||||||
+
|
|
||||||
+ const next2 = /** @type {UnistNode & {[key: string]: unknown}} */ (
|
|
||||||
+ parent.children[index + 2]
|
|
||||||
+ );
|
|
||||||
+ if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
|
|
||||||
+ inside.push(next2);
|
|
||||||
+ skipAmount += 1;
|
|
||||||
+ }
|
|
||||||
}
|
|
||||||
+
|
|
||||||
+ node = {
|
|
||||||
+ type: 'root',
|
|
||||||
+ children: [
|
|
||||||
+ { type: 'html', value: tagParts[0] },
|
|
||||||
+ { type: 'text', value: '\n\n' },
|
|
||||||
+ ...inside,
|
|
||||||
+ { type: 'text', value: '\n\n' },
|
|
||||||
+ { type: 'html', value: tagParts[1] },
|
|
||||||
+ ],
|
|
||||||
+ };
|
|
||||||
+ parent.children.splice(index, skipAmount, node);
|
|
||||||
+ } else {
|
|
||||||
+ node.type = 'html';
|
|
||||||
+ node.value = previewStoryTag(storyData.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
- node = {
|
|
||||||
- type: 'root',
|
|
||||||
- children: [
|
|
||||||
- { type: 'html', value: tagParts[0] },
|
|
||||||
- { type: 'text', value: '\n\n' },
|
|
||||||
- ...inside,
|
|
||||||
- { type: 'text', value: '\n\n' },
|
|
||||||
- { type: 'html', value: tagParts[1] },
|
|
||||||
- ],
|
|
||||||
- };
|
|
||||||
- parent.children.splice(index, skipAmount, node);
|
|
||||||
- } else {
|
|
||||||
- node.type = 'html';
|
|
||||||
- node.value = previewStoryTag(storyData.name);
|
|
||||||
+ stories.push(storyData);
|
|
||||||
+ htmlIndex += 1;
|
|
||||||
}
|
|
||||||
+ };
|
|
||||||
|
|
||||||
- stories.push(storyData);
|
|
||||||
- htmlIndex += 1;
|
|
||||||
- }
|
|
||||||
- };
|
|
||||||
-
|
|
||||||
- /**
|
|
||||||
- * @param {Node} tree
|
|
||||||
- * @param {VFileOptions} file
|
|
||||||
- */
|
|
||||||
- async function transformer(tree, file) {
|
|
||||||
// unifiedjs expects node changes to be made on the given node...
|
|
||||||
await init;
|
|
||||||
// @ts-ignore
|
|
||||||
12
patches/@mdjs+mdjs-preview+0.6.0.patch
Normal file
12
patches/@mdjs+mdjs-preview+0.6.0.patch
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
diff --git a/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js b/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
|
||||||
|
index a8a829c..4f556c8 100644
|
||||||
|
--- a/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
|
||||||
|
+++ b/node_modules/@mdjs/mdjs-preview/src/MdJsPreview.js
|
||||||
|
@@ -1,6 +1,6 @@
|
||||||
|
import { LitElement, html, css, nothing, render } from 'lit';
|
||||||
|
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
|
||||||
|
-import { LionAccordion } from '@lion/ui/accordion';
|
||||||
|
+import { LionAccordion } from '@lion/ui/accordion.js';
|
||||||
|
|
||||||
|
import {
|
||||||
|
subscribe,
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
diff --git a/node_modules/@rocket/cli/src/RocketStart.js b/node_modules/@rocket/cli/src/RocketStart.js
|
|
||||||
index c7bd339..4a751a6 100755
|
|
||||||
--- a/node_modules/@rocket/cli/src/RocketStart.js
|
|
||||||
+++ b/node_modules/@rocket/cli/src/RocketStart.js
|
|
||||||
@@ -96,11 +96,13 @@ export class RocketStart {
|
|
||||||
await this.eleventy.write();
|
|
||||||
}
|
|
||||||
|
|
||||||
+
|
|
||||||
/** @type {DevServerConfig} */
|
|
||||||
const devServerConfig = metaConfigToWebDevServerConfig(
|
|
||||||
{
|
|
||||||
nodeResolve: true,
|
|
||||||
- watch: this.config.watch !== undefined ? this.config.watch : true,
|
|
||||||
+ // This prevents endless watch loops (manual refreshes are needed now, but this is a good tradeoff)
|
|
||||||
+ watch: false, // this.config.watch !== undefined ? this.config.watch : true,
|
|
||||||
rootDir: this.config.outputDevDir,
|
|
||||||
open: true,
|
|
||||||
clearTerminalOnReload: false,
|
|
||||||
|
|
@ -29,7 +29,7 @@ This way the shared variables instantiated on every `transformer` function call.
|
||||||
|
|
||||||
### mdjsSetupCode.js
|
### mdjsSetupCode.js
|
||||||
|
|
||||||
Dynamic `imports` for `@mdjs/mdjs-preview/define` and `@mdjs/mdjs-story/define` were removed. These imports are inlined into `__mdjs-story.js` by `copyMdjsStories.js` remark plugin. This is done to enable `dist` bundling.
|
Dynamic `imports` for `@mdjs/mdjs-preview/define` and `@mdjs/mdjs-story/define` were removed. These imports are inlined into `__mdjs-story.js` by `remarkProcessDemos.mjs` remark plugin. This is done to enable `dist` bundling.
|
||||||
|
|
||||||
## @astrojs/markdown-remark
|
## @astrojs/markdown-remark
|
||||||
|
|
||||||
|
|
|
||||||
81
public/styles/lion/variables.css
Normal file
81
public/styles/lion/variables.css
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
html {
|
||||||
|
/* Base colors */
|
||||||
|
--dandilion-100: #fff6cc;
|
||||||
|
--dandilion-300: #ffe366;
|
||||||
|
--dandilion-500: #ffd100;
|
||||||
|
--dandilion-700: #997d00;
|
||||||
|
--dandilion-900: #332a00;
|
||||||
|
|
||||||
|
--blue-500: #002eff;
|
||||||
|
|
||||||
|
--green-500: #00ff51;
|
||||||
|
|
||||||
|
--black: #080700;
|
||||||
|
--white: #ffffff;
|
||||||
|
|
||||||
|
--gray-100: #e6e6e6;
|
||||||
|
--gray-300: #b3b3b3;
|
||||||
|
--gray-500: #808080;
|
||||||
|
--gray-700: #4d4d4d;
|
||||||
|
--gray-900: #1a1a1a;
|
||||||
|
|
||||||
|
/* Alias tokens */
|
||||||
|
--primary-color: var(--dandilion-700);
|
||||||
|
--secondary-color: var(--blue-500);
|
||||||
|
--primary-color-lighter: var(--dandilion-300);
|
||||||
|
--primary-color-darker: var(--dandilion-700);
|
||||||
|
--primary-text-color: var(--black);
|
||||||
|
--primary-icon-color: var(--dandilion-900);
|
||||||
|
--primary-lines-color: var(--gray-300);
|
||||||
|
--primary-text-inverse-color: var(--gray-100);
|
||||||
|
--markdown-link-color: var(--blue-500);
|
||||||
|
|
||||||
|
/* Contrast colors */
|
||||||
|
--contrast-color-light: var(--white);
|
||||||
|
--contrast-color-dark: var(--dandilion-900);
|
||||||
|
|
||||||
|
/* background-colors */
|
||||||
|
--page-background: var(--white);
|
||||||
|
--secondary-background: var(--gray-100);
|
||||||
|
--footer-background: rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
/* typography */
|
||||||
|
--text-color: var(--black);
|
||||||
|
--primary-font-family: 'Open Sans', sans-serif;
|
||||||
|
--secondary-font-family: 'Montserrat', sans-serif;
|
||||||
|
--monospace-font-family:
|
||||||
|
'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
|
||||||
|
|
||||||
|
/* controls */
|
||||||
|
--switch-unselected-color: var(--gray-500);
|
||||||
|
--switch-selected-color: var(--green-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--primary-color: #e63946;
|
||||||
|
--primary-color-lighter: #e25761;
|
||||||
|
--primary-color-darker: #a22831;
|
||||||
|
--primary-text-color: var(--white);
|
||||||
|
--primary-text-inverse-color: #2c3e50;
|
||||||
|
|
||||||
|
/* Contrast colors */
|
||||||
|
--contrast-color-light: #fff;
|
||||||
|
--contrast-color-dark: #1d3557;
|
||||||
|
|
||||||
|
/* background-colors */
|
||||||
|
--page-background: #333;
|
||||||
|
--footer-background: #4f4f4f;
|
||||||
|
|
||||||
|
/* typography */
|
||||||
|
--text-color: white;
|
||||||
|
|
||||||
|
/* controls */
|
||||||
|
--switch-unselected-color: #808080;
|
||||||
|
--switch-selected-color: #42b983;
|
||||||
|
|
||||||
|
/* markdown */
|
||||||
|
--markdown-octicon-link: white;
|
||||||
|
--markdown-syntax-background-color: #a0a0a0;
|
||||||
|
--markdown-link-color: #fb7881;
|
||||||
|
--markdown-blockquote-color: #c9e3ff;
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { rocketLaunch } from '@rocket/launch';
|
import { rocketLaunch } from '@rocket/launch';
|
||||||
import { rocketSearch } from '@rocket/search';
|
|
||||||
import { rocketBlog } from '@rocket/blog';
|
import { rocketBlog } from '@rocket/blog';
|
||||||
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
|
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
|
||||||
import { TitleMetaPlugin } from '@rocket/cli';
|
import { TitleMetaPlugin } from '@rocket/cli';
|
||||||
|
|
@ -30,7 +29,7 @@ class LionTitleMetaPlugin {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
presets: [rocketLaunch(), rocketSearch(), rocketBlog()],
|
presets: [rocketLaunch(), rocketBlog()],
|
||||||
eleventy(eleventyConfig) {
|
eleventy(eleventyConfig) {
|
||||||
eleventyConfig.setUseGitIgnore(false);
|
eleventyConfig.setUseGitIgnore(false);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import nodeResolve from '@rollup/plugin-node-resolve';
|
|
||||||
import commonjs from '@rollup/plugin-commonjs';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
plugins: [
|
|
||||||
commonjs(), // <-- this handles some parsing of js syntax or something (necessary for `export { init } from "mathjax";`)
|
|
||||||
nodeResolve(), // <-- this allows npm modules to be added to bundle
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
@ -3,6 +3,20 @@ import { globby } from 'globby';
|
||||||
import matter from 'gray-matter';
|
import matter from 'gray-matter';
|
||||||
import { processContentWithTitle } from '@rocket/core/title';
|
import { processContentWithTitle } from '@rocket/core/title';
|
||||||
|
|
||||||
|
const getTitleLineNumber = content => {
|
||||||
|
let captureHeading = true;
|
||||||
|
let lineNumber = 0;
|
||||||
|
for (const line of content.split('\n')) {
|
||||||
|
if (line.startsWith('```')) {
|
||||||
|
captureHeading = !captureHeading;
|
||||||
|
}
|
||||||
|
if (captureHeading && line.startsWith('# ')) {
|
||||||
|
return lineNumber;
|
||||||
|
}
|
||||||
|
lineNumber += 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// since it's a one-time script, the path is just hardcoded
|
// since it's a one-time script, the path is just hardcoded
|
||||||
const paths = await globby('docs/fundamentals/**/*.md');
|
const paths = await globby('docs/fundamentals/**/*.md');
|
||||||
|
|
||||||
|
|
@ -14,6 +28,7 @@ for (const path of paths) {
|
||||||
// rocket values
|
// rocket values
|
||||||
const { eleventyNavigation: rocketEleventyNavigation, ...rocketRest } =
|
const { eleventyNavigation: rocketEleventyNavigation, ...rocketRest } =
|
||||||
processContentWithTitle(grayMatterFile.content) || {};
|
processContentWithTitle(grayMatterFile.content) || {};
|
||||||
|
const titleLineNumber = getTitleLineNumber(grayMatterFile.content);
|
||||||
if (!rocketEleventyNavigation) {
|
if (!rocketEleventyNavigation) {
|
||||||
// not all pages need to change
|
// not all pages need to change
|
||||||
continue;
|
continue;
|
||||||
|
|
@ -24,6 +39,11 @@ for (const path of paths) {
|
||||||
...rocketRest,
|
...rocketRest,
|
||||||
eleventyNavigation: { ...eleventyNavigation, ...rocketEleventyNavigation },
|
eleventyNavigation: { ...eleventyNavigation, ...rocketEleventyNavigation },
|
||||||
};
|
};
|
||||||
|
const contentArray = grayMatterFile.content.split('\n');
|
||||||
|
console.log(grayMatterFile.content, contentArray, titleLineNumber);
|
||||||
|
contentArray[titleLineNumber] = `# ${grayMatterFile.data.title}`;
|
||||||
|
grayMatterFile.content = contentArray.join('\n');
|
||||||
|
console.log(grayMatterFile.content);
|
||||||
|
|
||||||
await writeFile(grayMatterFile.path, matter.stringify(grayMatterFile));
|
await writeFile(grayMatterFile.path, matter.stringify(grayMatterFile));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue