internetarchive · traceypooh · May 4, 2023 · May 4, 2023 · May 4, 2023 · May 4, 2023
diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml
@@ -0,0 +1,25 @@
+name: Icons CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 19.x
+
+    - name: Install dependencies
+      working-directory: ui/icon
+      run: npm install
+
+    - name: Run tests
+      working-directory: ui/icon
+      run: npx eslint .
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "dependencies": {
     "polymer-cli": "^1.9.11"
   },
-  "name": "iaux",
+  "name": "@internetarchive/iaux",
   "license": "AGPL-3.0-only",
   "devDependencies": {
     "eslint": "^5.12.0",
@@ -12,5 +12,6 @@
     "eslint-plugin-jest": "^22.1.3",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.12.3"
-  }
+  },
+  "type": "module"
 }
diff --git a/ui/icon/.eslintrc.cjs b/ui/icon/.eslintrc.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  root: true,
+  extends: 'airbnb-base',
+  plugins: [
+    'eslint-plugin-import',
+  ],
+  rules: {
+    // we use esm.sh self-hosted and `import from 'https://..' is fine
+    'import/no-unresolved': [2, {
+      ignore: [
+        '^https://esm.archive.org/',
+        '^https://offshoot.prod.archive.org/lit',
+      ],
+    }],
+
+    // allow `import .. from '.js'` (.js suffix) in JS files
+    'import/extensions': ['off'],
+
+    'jsx-a11y/label-has-for': 0,
+  },
+};
diff --git a/ui/icon/.gitignore b/ui/icon/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+/*.js
+
+# testing
+/coverage/
diff --git a/ui/icon/.npmignore b/ui/icon/.npmignore
@@ -0,0 +1,3 @@
+bin
+src
+svg
diff --git a/ui/icon/LICENSE b/ui/icon/LICENSE
diff --git a/ui/icon/README.md b/ui/icon/README.md
@@ -0,0 +1,73 @@
+# IA Icons
+
+Lit WebComponent small SVG based archive.org icons.
+
+This repo builds JS sources, tests, and test pages, from a subdirectory of svg files:
+
+[svg/](svg/)
+
+
+## Importing
+
+Each `.svg` source file can then be individually imported via JS/TS like:
+```js
+import twitter from 'https://esm.archive.org/@iaux/icon/twitter'
+```
+
+You can use in markup with the lit / web components definition like:
+```html
+<ia-icon-video></ia-icon-video>
+<script type="module" src="https://esm.archive.org/@iaux/icon/video"></script>
+```
+
+Each icon `.js` file defines an `<ia-icon>` `LitElement` web component.
+---
+
+You can also import *all* icons at once like:
+```js
+import { share, twitter } from 'https://esm.archive.org/@iaux/icon'
+```
+-OR-
+
+```html
+<ia-icon-video></ia-icon-video>
+<script type="module" src="https://esm.archive.org/@iaux/icon"></script>
+```
+---
+
+
+## Demo Pages
+
+- [test/](test/)
+- [test/all.html](test/all.html)
+- [test/live-single.html](test/live-single.html)
+- [test/live-all.html](live-all.html)
+---
+
+
+## Updating
+
+Please run:
+```sh
+./bin/build.sh
+```
+in a `git clone` of this repo to rebuild/update [src/](src/) and [test/](test/) files.
+
+You can add a new (or change an existing) `.svg` file in the [svg/](svg/) subdir.
+
+Running the [bin/build.sh](bin/build.sh) script will automatically create (or update)
+the relevant JS and test files.
+
+## Publishing
+
+When ready to publish an update, `cd` to this directory and:
+```sh
+npm version patch
+
+npm run prepubish
+# make sure all runs ok
+
+npm publish
+
+# you should git commit & push package.json and anything else now
+```
diff --git a/ui/icon/bin/build.sh b/ui/icon/bin/build.sh
@@ -0,0 +1,78 @@
+#!/bin/zsh -e
+
+# (re)generates all `src/*.js` and `test/` files (from `svg/*.svg` source images).
+
+MYDIR=${0:a:h}
+
+cd $MYDIR/..
+
+# start of the main test/display page
+cat >| test/index.html << EOF
+<style>
+  div {
+    display: inline-block;
+    width: 100px;
+    padding: 5px;
+    border: 1px solid gray;
+    border-radius: 5px;
+    vertical-align: top;
+    margin: 10px 5px;
+    background-color: #e9e9e9;
+  }
+</style>
+<body>
+EOF
+
+cp  test/index.html  test/all.html
+
+# Make a 2nd test page that imports all icon definitions at once
+echo -n >| src/index.js
+echo '<script type="module" src="../src/index.js"></script>' >> test/all.html
+
+
+for SVG in svg/*.svg; do
+  BASENAME=$(basename $SVG .svg)
+  BASENAME_CAMEL=$(echo "$BASENAME" |perl -pe 's/-([a-z])/uc($1)/ge')
+  OUT=src/${BASENAME}.js
+  echo "generating $SVG => $OUT"
+
+  # create icon's `src/...js` JS file
+  cat >| $OUT << EOF
+import IAIconBase from './base.js';
+
+class IAIcon extends IAIconBase {
+  constructor() {
+    super(\`
+$(cat $SVG)
+\`);
+  }
+}
+
+customElements.define('ia-icon-$BASENAME', IAIcon);
+
+export default IAIcon;
+EOF
+
+
+  # add the icon to the default export of all icons, if someone does:
+  #   import 'https://esm.archive.org/@iaux/icon'
+  #   import { share, twitter } from 'https://esm.archive.org/@iaux/icon'
+  echo "export { default as ${BASENAME_CAMEL} } from './${BASENAME}.js';" >> src/index.js
+
+
+  # add the icon to the test pages
+  echo "
+
+<div>
+  &lt;ia-icon-$BASENAME/&gt;
+  <hr>
+  <ia-icon-$BASENAME></ia-icon-$BASENAME>
+</div>" \
+    >| .basehtm
+
+  cat .basehtm >> test/all.html
+  cat .basehtm >> test/index.html
+  rm  .basehtm
+  echo '<script type="module" src="../src/'$BASENAME'.js"></script>' >> test/index.html
+
+done
-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    bin
+    src
+    svg