Merge pull request #107 from SDFIdk/npm-setup

Setup for NPM publish
SDFIdk · Jul 24, 2023 · a77ed33 · a77ed33
2 parents 3b319c1 + ed1b887
commit a77ed33
Show file tree

Hide file tree

Showing 23 changed files with 265 additions and 52 deletions.
diff --git a/.github/workflows/release-package.yml b/.github/workflows/release-package.yml
@@ -0,0 +1,31 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm test
+
+  # Important note:
+  # This only works in github actions when you've added an "automation token" by the name of "NPM_TOKEN" to "repository secrets"
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/README.md b/README.md
@@ -13,8 +13,8 @@ Før brug skal man oprette en bruger på [Dataforsyningen](https://dataforsyning
 1. Opret en bruger på [Dataforsyningen](https://www.dataforsyningen.dk)
 2. Log ind på dataforsyningen.dk med din nye bruger, og opret en token.
 3. Indsæt `<script>`-tag i `<head>`-tagget på din hjemmeside
-   - Benyt enten vores CDN: `<script src="https://okapi.dataforsyningen.dk/lib/okapi-1.7.0.min.js"
-  integrity="sha384-+Xt8qfJii0f0NCBi9Wy83Gb+ODxpaHB/LgRt2/a1vi772Vhl/62/6XDh+iKzvf/y"
+   - Benyt enten vores CDN: `<script src="https://okapi.dataforsyningen.dk/lib/okapi-1.8.0.min.js"
+  integrity="sha384-vkK/oUyzuktOgFrUWzg1wVw7cig1qUhwfiPCbJ9v4b2fBNYCbxwwJ+jrptNSX6V7"
   crossorigin="anonymous"></script>`
    - Eller hav filen liggende på din egen server: `<script src="/path/to/okapi.min.js"></script>`
 4. Indsæt `<div id="map" class="geomap" data-token="...">`-tag, dér hvor du vil have kortet.
@@ -34,25 +34,61 @@ Nu har du et indlejret kort på din hjemmeside.
 
 ## Installation
 
+### NPM
+
+Først installerer du `@dataforsyningen/okapi` via NPM:
+```sh
+npm install @dataforsyningen/okapi --save
+```
+
+Så kan du benytte `okapi` som imports i dine Javascript-filer:
+```javascript
+import { Initialize } from '@dataforsyningen/okapi'
+
+const map = new Initialize({})
+```
+
+Derefter kan du bygge/bundle dine Javascripts med Webpack/esbuild/etc. og implementere dem i de HTML-sider, du ønsker.
+
+F.eks. i dette tilfælde, hvor vi har bygget okapi ind i filerne `bundled.js` og `bundled.css`
+```html
+...
+<head>
+  ...
+  <link rel="stylesheet" href="bundled.css">
+</head>
+<body>
+
+  <div
+    id="map"
+    class="geomap"
+    data-token="InsertYourTokenHere">
+  </div>
+
+  <script src="bundled.js"></script>
+</body>
+...
+```
+
 ### CDN
 
 ```html
-<script src="https://okapi.dataforsyningen.dk/lib/okapi-1.7.0.min.js"
-integrity="sha384-+Xt8qfJii0f0NCBi9Wy83Gb+ODxpaHB/LgRt2/a1vi772Vhl/62/6XDh+iKzvf/y"
+<script src="https://okapi.dataforsyningen.dk/lib/okapi-1.8.0.min.js"
+integrity="sha384-vkK/oUyzuktOgFrUWzg1wVw7cig1qUhwfiPCbJ9v4b2fBNYCbxwwJ+jrptNSX6V7"
 crossorigin="anonymous"></script>
 ```
 
 ### Lokal kopi
 
-Download filen: `https://okapi.dataforsyningen.dk/lib/okapi-1.7.0.min.js`
+Download filen: `https://okapi.dataforsyningen.dk/lib/okapi-1.8.0.min.js`
 
 ```html
 <script src="/path/to/okapi.js"></script>
 ```
 
 ### CSS
 
-Vores standard styling kan findes her: `https://okapi.dataforsyningen.dk/lib/okapi-1.7.0.min.css`
+Vores standard styling kan findes her: `https://okapi.dataforsyningen.dk/lib/okapi-1.8.0.min.css`
 
 ## Anvendelse
 

diff --git a/build/build-es.mjs b/build/build-es.mjs
@@ -0,0 +1,31 @@
+import esbuild from 'esbuild'
+import { stylusLoader } from 'esbuild-stylus-loader'
+
+const entry_points = {
+  index: 'src/Index.js'
+}
+
+console.log('--------------------------')
+console.log('Building ES module')
+
+// Production build
+
+esbuild.build({
+  entryPoints: ['src/Index.js'],
+  outfile: 'dist/index.js',
+  bundle: true,
+  minify: true,
+  format: 'esm',
+  sourcemap: true,
+  loader: { 
+    '.png': 'dataurl'
+  },
+  plugins: [
+    stylusLoader()
+  ]
+})
+.then((response) => {
+  console.log('Build finished. `dist` updated 👍')
+})
+.catch(() => process.exit(1))
+
diff --git a/dist/index.css b/dist/index.css