diff --git a/docs/client.md b/docs/client.md index 9fd4116d..b085da74 100644 --- a/docs/client.md +++ b/docs/client.md @@ -1,35 +1,38 @@ --- id: client -title: Client -sidebar_label: Client +title: Publishing to Eik +sidebar_label: Publishing to Eik --- -## Installation +## Install the Eik CLI -```sh -npm install -g @eik/cli -``` +See [Installation](./client_installation.md) for how to set up the CLI you will need for publishing. -## Quickstart guide +## Configure Eik -### Step 1. - -Generate an eik.json file in the current directory +Generate an `eik.json` file in the current directory: ```sh eik init ``` -Fill in the generated `eik.json` file with the necessary details. +Set the URL to your Eik server as the `server` property. See [the server docs](/docs/server) if you need to set up a server. -For the `server` property, you will need to have set up and know the address to, and Eik asset server. -See [the server docs](/docs/server) +### Configure which files to publish Set the `files` property of `eik.json` with paths to client side -asset files in your project relative to the `eik.json` file. -Eg. if you have a `scripts.js` file in an assets directory, the `js.input` value will be `assets/scripts.js` +asset files or directories in your project relative to the `eik.json` file. + +```json +{ + "name": "my-app", + "version": "1.0.0", + "server": "https://assets.myserver.com", + "files": "./public" +} +``` -### Step 2 +## Publish Run publish to publish your assets to the server @@ -37,7 +40,7 @@ Run publish to publish your assets to the server eik publish ``` -## Additional tasks +## Next steps ### Publishing global dependencies diff --git a/docs/client_app_packages.md b/docs/client_app_packages.md index 923755ff..ec40c6f5 100644 --- a/docs/client_app_packages.md +++ b/docs/client_app_packages.md @@ -18,7 +18,7 @@ In your app's Eik config you use the `files` key to define a local path or paths ```json { - "files": "./dist" + "files": "./public" } ``` @@ -27,7 +27,7 @@ In your app's Eik config you use the `files` key to define a local path or paths ```json { "eik": { - "files": "./dist" + "files": "./public" } } ``` @@ -48,12 +48,12 @@ The following example shows how entrypoint definitions correspond to final file Given the following local files: -* `./dist/index.js` -* `./dist/index.js.map` -* `./dist/ie11.js` -* `./dist/ie11.js.map` -* `./dist/index.css` -* `./dist/index.css.map` +* `./public/index.js` +* `./public/index.js.map` +* `./public/ie11.js` +* `./public/ie11.js.map` +* `./public/index.css` +* `./public/index.css.map` And the following eik.json definition: @@ -62,7 +62,7 @@ And the following eik.json definition: "server": "http://assets.myserver.com", "name": "my-pack", "version": "1.0.0", - "files": "./dist" + "files": "./public" } ``` @@ -74,7 +74,7 @@ Or the following package.json definition: "name": "my-pack", "version": "1.0.0", "server": "http://assets.myserver.com", - "files": "./dist" + "files": "./public" } } ``` diff --git a/docs/client_installation.md b/docs/client_installation.md index b75737d7..74d0c793 100644 --- a/docs/client_installation.md +++ b/docs/client_installation.md @@ -1,7 +1,7 @@ --- id: client_installation -title: Client Installation -sidebar_label: Installation +title: CLI installation +sidebar_label: CLI installation --- In order to interact with an Eik server, you must install the client which can then be used to perform a variety of tasks such as mirroring NPM packages, publishing app packages, aliasing, publishing import maps and more. Interacting with the client is done via the command line in a terminal. To get started, you will need to have [Node.js](https://nodejs.org/en/) installed which comes with the [NPM](https://npmjs.com) package manager. diff --git a/docs/client_login.md b/docs/client_login.md index d55a8c7e..9e7e0c0e 100644 --- a/docs/client_login.md +++ b/docs/client_login.md @@ -1,10 +1,10 @@ --- id: client_login -title: Client Login -sidebar_label: Client Login +title: CLI Login +sidebar_label: CLI Login --- -To make use of the Eik client, it is necessary to authenticate with an Eik server. To do this, the `eik login` command can be used. +To make use of the Eik CLI, it is necessary to authenticate with an Eik server. To do this, the `eik login` command can be used. ## The Eik login command @@ -12,11 +12,11 @@ To make use of the Eik client, it is necessary to authenticate with an Eik serve eik login ``` -The login command will ask for a server URL and a server key. Server keys are configured on the server and, once entered, the client will authenticate with the server and receive back a JSON web token which it will save in an `.eikrc` file in the users home directory for use in subsequent commands. +The login command will ask for a server URL and a server key. Server keys are configured on the server and, once entered, the client will authenticate with the server and receive back a JSON web token which it will save in an `.eikrc` file in the users home directory for use in subsequent commands. ![Login screenshot](/img/login.png) -## Authenticating +## Authenticating ### Without the command prompt @@ -28,7 +28,7 @@ eik login --server https://assets.myeikserver.com --key ###### ### With multiple Eik servers -It is possible to be authenticated against several Eik servers at once by calling the `eik login` command multiple times and providing different server URLs and keys each time. +It is possible to be authenticated against several Eik servers at once by calling the `eik login` command multiple times and providing different server URLs and keys each time. ```sh eik login --server https://assets.myeikserver1.com --key ###### diff --git a/docs/client_npm_packages.md b/docs/client_npm_packages.md index ce7aab06..834d899e 100644 --- a/docs/client_npm_packages.md +++ b/docs/client_npm_packages.md @@ -17,10 +17,10 @@ While not strictly necessary, to avoid clashes with your own app packages, Eik p ```json { "name": "lit", - "server": "https://myeikserver.com", + "server": "https://assets.myserver.com", "version": "1.0.0", "type": "npm", - "files": "./dist" + "files": "./public" } ``` diff --git a/docs/client_putting_it_all_together.md b/docs/client_putting_it_all_together.md index 6fa789b2..395e3165 100644 --- a/docs/client_putting_it_all_together.md +++ b/docs/client_putting_it_all_together.md @@ -44,8 +44,8 @@ Set the `package.json` name and version to match `@podium/browser` and add some "name": "@podium/browser", "version": "1.2.1", "eik": { - "server": "https://myeikserver.com", - "files": "./dist", + "server": "https://assets.myserver.com", + "files": "./public", "type": "npm" } } @@ -53,10 +53,10 @@ Set the `package.json` name and version to match `@podium/browser` and add some ### Run a build to bundle up @podium/browser into a single file -We can use Rollup to bundle up the code from `@podium/browser` into a single file and place it into the `dist` directory ready for upload like so: +We can use Rollup to bundle up the code from `@podium/browser` into a single file and place it into the `public` directory ready for upload like so: ``` -npx rollup -f es -o ./dist/index.js ./node_modules/@podium/browser/src/index.js +npx rollup -f es -o ./public/index.js ./node_modules/@podium/browser/src/index.js ``` N.B. We ensure that ESM is preserved with the `-f es` flag. @@ -123,11 +123,11 @@ Create an `eik.json` file describing the apps asset setup and enter the import m ```json { - "server": "https://myeikserver.com", + "server": "https://assets.myserver.com", "name": "my-app", "version": "1.0.0", - "files": "./dist", - "import-map": "https://myeikserver.com/map/my-map/v1" + "files": "./public", + "import-map": "https://assets.myserver.com/map/my-map/v1" } ``` @@ -150,7 +150,7 @@ import eik from '@eik/rollup-plugin'; export default { input: './src/index.js', output: { - file: './dist/index.js', + file: './public/index.js', format: 'es', sourcemap: true, }, @@ -163,7 +163,7 @@ export default { }; ``` -*n.b.* The `files` field in `eik.json` is set to read `./dist/index.js` which is produced by the rollup build. +*n.b.* The `files` field in `eik.json` is set to read `./public/index.js` which is produced by the rollup build. Also note that you are not required to use Rollup at all. You could use Esbuild or Webpack for example. ### Publish bundled code to the Eik server diff --git a/docs/overview_eik_json.md b/docs/overview_eik_json.md index 830638ac..d9bf5f9c 100644 --- a/docs/overview_eik_json.md +++ b/docs/overview_eik_json.md @@ -16,9 +16,9 @@ __*Example*__ { "name": "my-app", "version": "1.0.0", - "server": "https://assets.myeikserver.com", - "files": "./dist", - "import-map": "https://assets.myeikserver.com/map/my-map/1.0.0" + "server": "https://assets.myserver.com", + "files": "./public", + "import-map": "https://assets.myserver.com/map/my-map/1.0.0" } ``` @@ -33,9 +33,9 @@ __*Example*__ "eik": { "name": "my-app", "version": "1.0.0", - "server": "https://assets.myeikserver.com", - "files": "./dist", - "import-map": "https://assets.myeikserver.com/map/my-map/1.0.0" + "server": "https://assets.myserver.com", + "files": "./public", + "import-map": "https://assets.myserver.com/map/my-map/1.0.0" } } ``` @@ -49,9 +49,9 @@ __*Example*__ "name": "my-app", "version": "1.0.0", "eik": { - "server": "https://assets.myeikserver.com", - "files": "./dist", - "import-map": "https://assets.myeikserver.com/map/my-map/1.0.0" + "server": "https://assets.myserver.com", + "files": "./public", + "import-map": "https://assets.myserver.com/map/my-map/1.0.0" } } ``` @@ -79,7 +79,7 @@ Once generated, it's necessary to add information about the Eik server URL for t ## eik.json file fields -### name +### name * required @@ -119,11 +119,11 @@ Defines JavaScript and CSS file entrypoints to publish. This can be a string def #### Defining "files" -The following specifies that all files in the `dist` folder should be uploaded to the Eik server. Note that relative paths and absolute paths can be used as well. +The following specifies that all files in the `public` folder should be uploaded to the Eik server. Note that relative paths and absolute paths can be used as well. ```json { - "files": "./dist", + "files": "./public", } ``` @@ -131,7 +131,7 @@ Nested folders are also supported: ```json { - "files": "./dist/assets", + "files": "./public/assets", } ``` @@ -139,7 +139,7 @@ You can use glob syntax to decide which files to include: ```json { - "files": "./dist/**/*.js", + "files": "./public/**/*.js", } ``` @@ -151,7 +151,7 @@ files: { // file `./path/to/esm.js` is uploaded and renamed to `/script.js` 'script.js': './path/to/esm.js', - // file `/absolute/path/to/esm.js` is uploaded and renamed to `/script.js` + // file `/absolute/path/to/esm.js` is uploaded and renamed to `/script.js` 'script.js': '/absolute/path/to/esm.js', // everything in `./path/to/folder` is uploaded to `/folder` diff --git a/sidebars.js b/sidebars.js index d3f5cf82..8d2dd92a 100644 --- a/sidebars.js +++ b/sidebars.js @@ -6,12 +6,8 @@ module.exports = { 'overview_workflow', 'overview_eik_json', ], - Mapping: [ - 'mapping_import_map', - 'mapping_browser', - 'mapping_plugins', - ], Client: [ + 'client', 'client_installation', 'client_login', 'client_app_packages', @@ -20,6 +16,11 @@ module.exports = { 'client_aliases', 'client_putting_it_all_together', ], + Mapping: [ + 'mapping_import_map', + 'mapping_browser', + 'mapping_plugins', + ], Server: [ 'server', 'server_api', diff --git a/src/pages/index.js b/src/pages/index.js index 63b5d389..4c69248a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,62 +6,6 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import styles from './styles.module.css'; -const features = [ - { - title: <>Conceptual Overview, - imageUrl: 'img/undraw_docusaurus_mountain.svg', - description: ( - <> - Get an overview of how the Eik asset server works and helps you improve performance. - - ), - linkUrl: 'docs/overview', - }, - { - title: <>Publish Assets, - imageUrl: 'img/undraw_docusaurus_tree.svg', - description: ( - <> - Get the Eik client to publish assets to, and maintain assets on an Eik server. - - ), - linkUrl: 'docs/client', - }, - { - title: <>Serve Assets, - imageUrl: 'img/undraw_docusaurus_react.svg', - description: ( - <> - Download and run your own Eik server to serve assets for maximum performance and ease. - - ), - linkUrl: 'docs/server', - }, -]; - -function Feature({imageUrl, title, description, linkUrl}) { - const imgUrl = useBaseUrl(imageUrl); - return ( -
- {imgUrl && ( -
- {title} -
- )} -

{title}

-

{description}

- - Read more - -
- ); -} - function Home() { const context = useDocusaurusContext(); const {siteConfig = {}} = context; @@ -70,28 +14,28 @@ function Home() { -
+
{siteConfig.title}
-

{siteConfig.title}

-

{siteConfig.tagline}

-
-
- {features && features.length && ( -
-
-
- {features.map((props, idx) => ( - - ))} -
-
-
- )} -
+ +
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + Publishing to Eik + + + Hosting an Eik server + + + Why Eik? + +
+
); } diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index 25af421a..09998aef 100644 --- a/src/pages/styles.module.css +++ b/src/pages/styles.module.css @@ -17,22 +17,36 @@ } } -.buttons { +.cta { + width: 100%; display: flex; + flex-direction: column; align-items: center; - justify-content: center; + margin-top: 2.4rem; + margin-bottom: 4.2rem; } -.features { +.indexCtas { + --ifm-button-size-multiplier: 1.6; display: flex; + flex-wrap: wrap; align-items: center; - padding: 2rem 0; - width: 100%; + margin-top: 24px; +} + +.indexCtas a:first-of-type { + margin-right: 1rem; +} + + +.indexCtas a, +.indexCtas a:hover { + color: var(--ifm-color-content); } -.featureImage { - height: 200px; - width: 200px; +.indexCtas a:first-of-type, +.indexCtas a:first-of-type:hover { + color: black; } .topImage {