dev:publish end to end

jeremycolin · Sep 1, 2024 · a9874c4 · a9874c4
1 parent 1f6fedf
commit a9874c4
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,40 @@
 # Website Analyzer Web Component
 
-## Installation
+## Installation and Usage
 
-TODO when published
+### Installation as a npm package
 
-## Usage
+```bash
+pnpm install website-analyzer-wc
+```
+
+### Usage as a npm package
+
+In the file where you want to use it, import the package:
+
+```javascript
+import "website-analyzer-wc";
+```
+
+and anywhere in your html / jsx use the tag `<website-analyzer />`
+
+### Installation as a direct script
+
+Copy the content of [main-script.html](./packages/website-analyzer-wc/dist-script/script.html) inside your HTML code, for example inside your <head> tag
 
-TODO: Write usage instructions
+### Usage as a direct script
+
+Use the tag `<website-analyzer />` anywhere you want in your HTML code
+
+## Examples
+
+### UI
+
+The UI looks like this: ![screenshot of web component](./screenshot.png)
+
+### Code
+
+Usage of exampe is in [./packages/website-analyzer-demo](./packages/website-analyzer-demo)
 
 ## Develop
 
@@ -16,7 +44,11 @@ Project is using pnpm with [Corepack](https://pnpm.io/installation#using-corepac
 pnpm install
 ```
 
-## Contributing
+The package `website-analyzer-wc` contains the web component source code and the package `website-analyzer-demo` contains a simple demo setup.
+
+You can uncomment `link-workspace-packages=true` in the .nmprc to link them locally to develop
+
+## Contribute
 
 1. Fork it!
 2. Create your feature branch: `git checkout -b my-new-feature`

diff --git a/packages/website-analyzer-demo/package.json b/packages/website-analyzer-demo/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "website-analyzer-wc": "0.1.0"
+    "website-analyzer-wc": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/packages/website-analyzer-wc/.gitignore b/packages/website-analyzer-wc/.gitignore
@@ -1 +1,2 @@
 README.md
+screenshot.png
diff --git a/...-analyzer-wc/dist-script/main-script.html → ...bsite-analyzer-wc/dist-script/script.html b/...-analyzer-wc/dist-script/main-script.html → ...bsite-analyzer-wc/dist-script/script.html
diff --git a/packages/website-analyzer-wc/package.json b/packages/website-analyzer-wc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "website-analyzer-wc",
   "author": "Jeremy Colin",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Web component to show website performance",
   "main": "dist/main.js",
   "module": "dist/main.js",
@@ -38,6 +38,7 @@
     "url": "https://github.com/jeremycolin/website-analyzer-wc.git"
   },
   "files": [
-    "dist"
+    "dist",
+    "screenshot.png"
   ]
 }
diff --git a/packages/website-analyzer-wc/scripts/prepublish-copy.mjs b/packages/website-analyzer-wc/scripts/prepublish-copy.mjs
@@ -8,11 +8,14 @@ const DIST_SCRIPT_DIR = resolve(__dirname, "..", "dist-script");
 // copy root repository README file inside published package
 copyFileSync(resolve(ROOT_DIR, "README.md"), resolve(SOURCE_DIR, "README.md"));
 
+// copy screenshot
+copyFileSync(resolve(ROOT_DIR, "screenshot.png"), resolve(SOURCE_DIR, "screenshot.png"));
+
 // create ready to copy script tag and write it to disk
 const sourceCodeIIFE = readFileSync(resolve(DIST_SCRIPT_DIR, "main-iife.js"), "utf8").toString();
 
 writeFileSync(
-  resolve(DIST_SCRIPT_DIR, "main-script.html"),
+  resolve(DIST_SCRIPT_DIR, "script.html"),
   `<script>
 ${sourceCodeIIFE}</script>`
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/screenshot.png b/screenshot.png