RoleModel · jdmcleod · Feb 4, 2026 · Feb 4, 2026 · Feb 4, 2026 · Feb 4, 2026
diff --git a/.github/instructions/css.instructions.md b/.github/instructions/css.instructions.md
@@ -0,0 +1,16 @@
+---
+applyTo: '**/*.css,**/*.scss'
+---
+
+SCSS is used for styling, but avoid using mixins. Use BEM methodology for class naming.
+
+## CSS Library
+We use Optics for our CSS library. It provides a set of components and tokens that should be used
+to maintain consistency across the application. Consider if the component you are creating should be a modifier of an existing component before creating a new one.
+
+## CSS Variables
+Avoid adding in fallbacks for CSS variables. See the list of available Optics tokens in the
+`.github/docs/optics/tokens.json` file.
+
+## Specificity
+Never use `!important`. Always make the selector more specific to solve those issues.
diff --git a/.github/instructions/js.instructions.md b/.github/instructions/js.instructions.md
@@ -0,0 +1,11 @@
+---
+applyTo: "**/*.js,**/*.mjs,**/*.cjs"
+---
+
+- Prefer ESM syntax for JavaScript files, and avoid using CommonJS syntax unless the file is already CommonJS.
+- Important: Never use semicolons at the end of statements.
+- Use single quotes for strings, except when the string contains a single quote, in which case use double quotes.
+- Use `const` for variables that are not reassigned, and `let` for variables that are reassigned.
+
+## Frameworks and Libraries
+- Use [Lit](https://lit.dev/) for building web components.
diff --git a/.github/instructions/project.instructions.md b/.github/instructions/project.instructions.md
@@ -0,0 +1,18 @@
+---
+applyTo: '**/*'
+---
+## Project Context
+This project is a collection of web components developed by RoleModel Software, designed to enhance web applications with reusable UI elements. The PDF Viewer component leverages PDF.js to provide a customizable and embeddable PDF viewing experience.
+
+## General
+- Do not create summary markdown files after making changes
+
+## Tech Stack
+- Lit for web components
+- PDF.js for PDF rendering
+
+## Response
+- Provide evidence-based responses to feedback, focusing on technical accuracy and clarity.
+- Maintain a professional and constructive tone in all communications.
+- Avoid unnecessary embellishments or emotional language; focus on the task at hand.
+— Avoid unnecessary comments; the code should be self-explanatory.
diff --git a/.github/workflows/release-package.yml b/.github/workflows/release-package.yml
@@ -0,0 +1,20 @@
+name: Deploy to NPM
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: yarn install --immutable
+      - run: yarn build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -1,2 +1,9 @@
-# spider
-Shared web components library
+# Spider web components
+i By RoleModel Software 
+
+# PDF Viewer 
+
+[PDF.js](https://mozilla.github.io/pdf.js) is awesome, but you will notice this paragraph in their setup instructions:
+> The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.
+
+This component aims to be that skin layer built upon PDF.js packaged in a lovely drop-in web component.
diff --git a/data/example.pdf b/data/example.pdf
diff --git a/data/the-veldt.pdf b/data/the-veldt.pdf
diff --git a/index.html b/index.html
@@ -5,9 +5,10 @@
 <!--    <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spider Web Components</title>
-    <script type="module" src="/src/components/pdf-viewer/pdf-viewer.js"></script>
+    <script type="module" src="/src/components/pdf-viewer/rm-pdf-viewer.js"></script>
+    <link rel="stylesheet" href="/src/assets/application.css" />
   </head>
   <body>
-    <pdf-viewer></pdf-viewer>
+    <rm-pdf-viewer src="/data/the-veldt.pdf" theme-hue="217" theme-saturation="89"></rm-pdf-viewer>
   </body>
 </html>