js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shoemaker rework

Browse Source
This commit is contained in:
Cory LaViska
2021-02-26 09:09:13 -05:00
parent 4eeeffc493
commit fe45f2159f
202 changed files with 6778 additions and 19633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/tutorials/integrating-with-nextjs.md
View File

@@ -22,7 +22,7 @@ yarn add @shoelace-style/shoelace @shoelace-style/react-wrapper copy-webpack-plu
The next step is to import Shoelace's default theme (stylesheet) in your `_app.js` file:
```css
@import '~@shoelace-style/shoelace/dist/shoelace/shoelace';
@import '~@shoelace-style/shoelace/dist/themes/base';
```
### Defining Custom Elements
@@ -40,10 +40,13 @@ function CustomEls({ URL }) {
if (customEls.current) {
return;
}
setAssetPath(`${URL}/static/static`);
// If you're wanting to selectively import components, replace this line with your own definitions
defineCustomElements();
// customElements.define("sl-button", SlButton);
setBasePath(`${URL}/static/static`);
// Define the components you intend to use
customElements.define("sl-alert", SlAlert);
customElements.define("sl-button", SlButton);
// ...
customEls.current = true;
}, [URL, customEls]);
@@ -74,7 +77,7 @@ function MyApp({ Component, pageProps, URL }) {
### Environmental Variable
However, to make the `setAssetsPath` work as-expected, we need to know where the file is hosted. To do this, we need to set [environmental variables](https://nextjs.org/docs/basic-features/environment-variables). Create a `.local.env` file and put the following inside:
However, to make `setBasePath()` work as-expected, we need to know where the file is hosted. To do this, we need to set [environmental variables](https://nextjs.org/docs/basic-features/environment-variables). Create a `.local.env` file and put the following inside:
```
BASE_URL="localhost:3000"
@@ -96,7 +99,7 @@ MyApp.getInitialProps = async (context) => {
### webpack Config
Next we need to add Shoelace's icons to the final build output. To do this, modify `next.config.js` to look like this.
Next we need to add Shoelace's assets to the final build output. To do this, modify `next.config.js` to look like this.
```javascript
const path = require("path");
@@ -110,9 +113,9 @@ module.exports = {
{
from: path.resolve(
__dirname,
"node_modules/@shoelace-style/shoelace/dist/shoelace/icons"
"node_modules/@shoelace-style/shoelace/dist/assets"
),
to: path.resolve(__dirname, "static/icons"),
to: path.resolve(__dirname, "static/assets"),
},
],
})
@@ -122,7 +125,7 @@ module.exports = {
};
```
?> This will copy the files from `node_modules` into your `static` folder on every development serve or build. You may want to avoid commiting these into your repo. To do so, simply add `static/icons` into your `.gitignore` folder
?> This will copy the files from `node_modules` into your `static` folder on every development serve or build. You may want to avoid commiting these into your repo. To do so, simply add `static/assets` into your `.gitignore` folder
## Additional Resources

21
docs/tutorials/integrating-with-rails.md
View File

@@ -23,7 +23,7 @@ yarn add @shoelace-style/shoelace copy-webpack-plugin
The next step is to import Shoelace's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.
```css
@import '~@shoelace-style/shoelace/dist/shoelace/shoelace';
@import '~@shoelace-style/shoelace/dist/themes/base';
```
### Importing Required Scripts
@@ -32,25 +32,20 @@ After importing the theme, you'll need to import the JavaScript files for Shoela
```js
import '../stylesheets/application.scss'
import { defineCustomElements, setAssetPath } from '@shoelace-style/shoelace'
import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@shoelace-style/shoelace'
// ...
const rootUrl = document.currentScript.src.replace(/\/packs.*$/, '')
// Path to the assets folder (should be independent on the current script source path
// Path to the assets folder (should be independent from the current script source path
// to work correctly in different environments)
setAssetPath(rootUrl + '/packs/js/')
// This enables all web components for the current page
defineCustomElements()
setBasePath(rootUrl + '/packs/js/')
```
?> This will import all Shoelace components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation?id=using-webpack) section of the docs.
### webpack Config
Next we need to add Shoelace's icons to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
```js
const { environment } = require('@rails/webpacker')
@@ -59,7 +54,7 @@ const { environment } = require('@rails/webpacker')
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
// Add shoelace icons to webpack's build process
// Add shoelace assets to webpack's build process
environment.plugins.append(
'CopyPlugin',
new CopyPlugin({
@@ -67,9 +62,9 @@ environment.plugins.append(
{
from: path.resolve(
__dirname,
'../../node_modules/@shoelace-style/shoelace/dist/shoelace/icons'
'../../node_modules/@shoelace-style/shoelace/dist/assets'
),
to: path.resolve(__dirname, '../../public/packs/js/icons')
to: path.resolve(__dirname, '../../public/packs/js/assets')
}
]
})