Initial commit

.github/workflows/delete_development.yml

@@ -0,0 +1,19 @@
+name: delete_development
+on:
+  workflow_dispatch:
+env:
+  COMPONENT_NAME: ${{ github.event.repository.name }}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+        aws-region: us-east-2
+    - name: Delete S3 bucket
+      run: aws s3 rm s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME --recursive
+    - name: Invalidate Cloudfront cache
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME*"

.github/workflows/deploy_development.yml

@@ -0,0 +1,38 @@
+name: deploy_development
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version number'
+        required: true 
+        default: ''
+        type: string
+env:
+  MAJORVERSION: ''
+  COMPONENT_NAME: ${{ github.event.repository.name }}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: 'Checkout GitHub Action'
+      uses: actions/checkout@v4
+    - name: Get version from input
+      run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+      env: 
+        GITHUB_BRANCH: ${{ github.event.inputs.version }}
+    - name: Display version install
+      run: echo "Installing dev version ${VERSION}"
+
+    - run: npm install
+    - run: npm rebuild
+    - run: npm run-script build
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+        aws-region: us-east-2
+    - name: Deploy toolbox to S3 bucket
+      run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
+    - name: Invalidate Cloudfront cache
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$VERSION*"

.github/workflows/deploy_production.yml

@@ -0,0 +1,64 @@
+name: deploy_production
+on:
+  push:
+    tags: [ '**' ]
+env:
+  MAJORVERSION: ''
+  MINORVERSION: ''
+  FULLVERSION: ''
+  COMPONENT_NAME: ${{ github.event.repository.name }}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: 'Checkout GitHub Action'
+      uses: actions/checkout@v4
+    - name: 'Get Version'
+      id: get_version
+      uses: battila7/get-version-action@v2
+
+    - name: 'Check for correct naming convention'
+      if: ${{ !steps.get_version.outputs.is-semver }}
+      run: exit 1
+    - name: 'Get major version from tag'
+      run: echo "MAJORVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+      env: 
+        GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
+    - name: 'Get minor version from tag'
+      run: echo "MINORVERSION=${GITHUB_BRANCH}.${GITHUB_BRANCH_MINOR}" >> $GITHUB_ENV
+      env: 
+        GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
+        GITHUB_BRANCH_MINOR: ${{ steps.get_version.outputs.minor }}
+    - name: Get patch (full) version from tag
+      run: echo "FULLVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+      env: 
+        GITHUB_BRANCH: ${{ steps.get_version.outputs.version-without-v }}
+    - name: Display major version install
+      run: echo "Installing major version ${MAJORVERSION}"
+    - name: Display minor version install
+      run: echo "Installing minor version ${MINORVERSION}"
+    - name: Display patch (full) version install
+      run: echo "Installing patch (full) version ${FULLVERSION}"
+
+    - run: npm install
+    - run: npm rebuild
+    - run: npm run-script build
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+        aws-region: us-east-2
+
+    - name: Deploy toolbox to S3 bucket for major version
+      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MAJORVERSION --delete --acl bucket-owner-full-control
+    - name: Invalidate Cloudfront cache for major version
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MAJORVERSION*"
+    - name: Deploy toolbox to S3 bucket for minor version
+      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MINORVERSION --delete --acl bucket-owner-full-control
+    - name: Invalidate Cloudfront cache for minor version
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MINORVERSION*"
+    - name: Deploy toolbox to S3 bucket for patch (full) version
+      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$FULLVERSION --delete --acl bucket-owner-full-control
+    - name: Invalidate Cloudfront cache for patch (full) version
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$FULLVERSION*"

.github/workflows/deploy_production_manual.yml

@@ -0,0 +1,41 @@
+name: deploy_production_manual
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version number'
+        required: true 
+        default: ''
+        type: string
+env:
+  MAJORVERSION: ''
+  MINORVERSION: ''
+  FULLVERSION: ''
+  COMPONENT_NAME: ${{ github.event.repository.name }}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: 'Checkout GitHub Action'
+      uses: actions/checkout@v4
+    - name: Get version from input
+      run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+      env: 
+        GITHUB_BRANCH: ${{ github.event.inputs.version }}
+    - name: Display version install
+      run: echo "Installing production version ${VERSION}"
+
+    - run: npm install
+    - run: npm rebuild
+    - run: npm run-script build
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+        aws-region: us-east-2
+
+    - name: Deploy toolbox to S3 bucket for version
+      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
+    - name: Invalidate Cloudfront cache for version
+      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$VERSION*"

.github/workflows/templating.yml

@@ -0,0 +1,31 @@
+name: Apply caz templating
+
+on: [push]
+
+jobs:
+  run-caz:
+    # Avoid running more than once
+    if: ${{ github.repository != 'web-illinois/toolkit-template' && github.repository != 'marvel-uiuc/template-ilw' && github.run_number == 1 }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Apply caz template
+        run: npx -y caz ./ output --name ${{ github.event.repository.name }} --repository ${{ github.repository }}
+      - name: Commit template changes
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          rm -rf template index.js .gitignore package-lock.json README.md
+          cp -rT output .
+          rm -rf output
+          git add -A
+          git commit -a -m "chore: init template"
+          git push --force

.gitignore

@@ -0,0 +1,2 @@
+.idea/
+/package-lock.json

README.md

@@ -0,0 +1,55 @@
+# Toolkit Template
+
+Repository template for creating a new Web Component, specifically
+tailored to be part of the
+[Web at Illinois](https://github.com/web-illinois) Web Implementation
+Guidelines Group (WIGG) [Toolkit](https://github.com/web-illinois/toolkit-management).
+
+## How To Use
+
+> [!IMPORTANT]
+> Follow the [steps in the toolkit-management documentation](https://github.com/web-illinois/toolkit-management/blob/main/documentation/README.md)
+> to contribute a component to the toolkit.
+
+## How this template works
+
+The content that will be in the resulting repository is templated under
+the [`template`](./template) directory. The templating is configured
+in [`index.js`](./index.js), and uses a simple scaffolding tool called
+[CAZ](https://github.com/zce/caz).
+
+There is a [templating GitHub Workflow](./.github/workflows/templating.yml) in this
+repository that's configured to run only once when the template is used.
+That workflow executes CAZ to scaffold the repository to the proper contents
+with the naming determined by the new repository's name.
+
+CAZ accepts input using "prompts", which can be specified in the command
+line invocation of the tool. The workflow specifies the values to those
+prompts, and CAZ takes care of the rest.
+
+Finally, the workflow commits the changes to the new repository. This usually
+takes less than 10 seconds. Once done, the repository is ready to be worked on.
+
+## Developing this template
+
+### Adding files
+
+New files can be added to the [`template`](./template) directory, and they
+are automatically picked up.
+
+- Substitutions in file names happen with curly braces, `{variable}`
+- Inside files, [lodash](https://lodash.com/docs#template) templates are used,
+  which uses `<%= variable %>` as delimiters.
+
+> [!NOTE]
+> GitHub Workflows cannot be templated, and so must be entirely dynamic
+> and contained in the main [`.github/workflows`](./.github/workflows) directory.
+
+### Adding Variables
+
+If additional variables are needed, they must be added in two locations:
+
+1. In [`index.js`](./index.js) as prompts.
+2. In the [workflow](./.github/workflows/templating.yml), they need to be
+   given values as arguments for the `caz` command.
+

index.js

@@ -0,0 +1,27 @@
+const path = require("path");
+
+const date = new Date();
+
+/** @type {import('caz').Template} */
+module.exports = {
+    name: "template-ilw",
+    metadata: {
+        year: date.getFullYear(),
+        month: String(date.getMonth() + 1).padStart(2, "0"),
+        day: String(date.getDate()).padStart(2, "0"),
+    },
+    prompts: [
+        {
+            name: "name",
+            type: "text",
+            message: "Project name",
+        },
+        {
+            name: "repository",
+            type: "text",
+            message: "Repository",
+        },
+    ],
+    init: false,
+    install: false
+};

template/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

template/README.md

@@ -0,0 +1,28 @@
+# <%= name %>
+
+Links: **[<%= name %> in Builder](https://builder3.toolkit.illinois.edu/component/<%= name %>/index.html)** | 
+[Illinois Web Theme](https://webtheme.illinois.edu/) | 
+[Toolkit Development](https://github.com/web-illinois/toolkit-management)
+
+## Overview
+
+A 1-3 paragraph explanation of what the component does and how it presents.
+
+## Code Examples
+
+```html
+<<%= name %>></<%= name %>>
+```
+
+## Accessibility Notes and Use
+
+Consider accessibility, both for building the component and for its use:
+
+- Is there sufficient color contrast?
+- Can the component be fully understood without colors?
+- Does the component need alt text or ARIA roles?
+- Can the component be navigated with a keyboard? Is the tab order correct?
+- Are focusable elements interactive, and interactive elements focusable?
+- Are form fields, figures, fieldsets and other interactive elements labelled?
+
+## External References

template/builder/versions/{name}.1.0.0-alpha.json

@@ -0,0 +1,41 @@
+{
+    "title": "<%= _.startCase(name.slice(4)) %>",
+    "tag": "<%= name %>",
+    "github": "https://github.com/web-illinois/<%= name %>/",
+    "type": "web component",
+    "element-name": "<%= name %>",
+    "description": "Description for builder.",
+    "version": "1.0.0-alpha",
+    "date": "<%= month %>/<%= day %>/<%= year %>",
+    "css": "https://dev.toolkit.illinois.edu/<%= name %>/1.0.0-alpha/<%= name %>.css",
+    "js": "https://dev.toolkit.illinois.edu/<%= name %>/1.0.0-alpha/<%= name %>.js",
+    "production": false,
+    "notes": "",
+    "parent-style": "",
+    "samples": [
+        {
+            "name": "default",
+            "description": "Default information",
+            "text": "<p>Lorem ipsum</p>"
+        }
+    ],
+    "attributes-fixed": [],
+    "attributes-text": [],
+    "attributes": [
+        {
+            "name": "theme",
+            "description": "Color theme used",
+            "depreciated": false,
+            "values": [
+                "",
+                "blue",
+                "orange",
+                "white"
+            ]
+        }
+    ],
+    "classes-fixed": [],
+    "classes": [],
+    "css-variables": [
+    ]
+}

template/builder/{name}.json

@@ -0,0 +1,11 @@
+{
+    "title": "<%= _.startCase(name.slice(4)) %>",
+    "tag": "<%= name %>",
+    "github": "https://github.com/web-illinois/<%= name %>/",
+    "type": "web component",
+    "element-name": "<%= name %>",
+    "description": "Description for builder.",
+    "toolkit-version": "",
+    "production-version": "",
+    "development-version": "1.0.0-alpha"
+}