add astro-rainbow-line package

Author: spearwolf

README.md

@@ -29,8 +29,9 @@ $ pnpm cbt  # => clean build test
 
 | package | description |
 |-|-|
-| [`offscreen-display`](packages/offscreen-display/) | Helpers for creating custom offscreen canvas elements |
-| [`rainbow-line`](packages/rainbow-line/) | A custom element that displays a cut line animated with rainbow colors |
+| [`offscreen-display`](packages/offscreen-display/) | helpers for creating custom offscreen canvas elements |
+| [`rainbow-line`](packages/rainbow-line/) | a web component that displays a cut line animated with rainbow colors |
+| [`@spearwolf/astro-rainbow-line`](packages/astro-rainbow-line/) | astro wrapper for the rainbow-line web component |
 
 ‼️ [for those interested in the shadow-ents-* packages, we are happy to announce that they have now been relocated to their own dedicated monorepo, "shadow-objects"](https://github.com/spearwolf/shadow-objects)
 

packages/astro-rainbow-line/.eslintignore

@@ -0,0 +1 @@
+rainbow-line-v0.2.1.js

packages/astro-rainbow-line/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.eslintignore
+project.json

packages/astro-rainbow-line/README.md

@@ -0,0 +1,5 @@
+# @spearwolf/astro-rainbow-line
+
+An astro wrapper for the [rainbow-line web component](https://github.com/spearwolf/visual-fx-web-components/tree/main/packages/rainbow-line).
+
+> It is currently assumed that the [rainbow-line.js](./rainbow-line-v0.2.1.js) is located under `${import.meta.env.BASE_URL}/js/rainbow-line-v0.2.1.js`.

packages/astro-rainbow-line/RainbowLine.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  shadow?: boolean;
+  colorSliceWidth?: number;
+  sliceCycleTime?: number;
+  cycleDirection?: 'left' | 'right';
+}
+
+const {shadow = false, colorSliceWidth = 10, sliceCycleTime = 7, cycleDirection = 'right'} = Astro.props;
+---
+
+<rainbow-line
+  class="rainbow"
+  color-slice-width={colorSliceWidth}
+  slice-cycle-time={sliceCycleTime}
+  cycle-direction={cycleDirection}></rainbow-line>
+{
+  shadow && (
+    <rainbow-line
+      class="rainbow-shadow"
+      color-slice-width={colorSliceWidth}
+      slice-cycle-time={sliceCycleTime}
+      cycle-direction={cycleDirection}
+    />
+  )
+}
+
+<script is:inline async type="module" src={`${import.meta.env.BASE_URL}/js/rainbow-line-v0.2.1.js`}></script>
+
+<style>
+  .rainbow {
+    height: var(--rainbow-line-height, 4px);
+  }
+  .rainbow-shadow {
+    --height: var(--rainbow-shadow-height, 12px);
+    height: var(--height);
+    opacity: var(--rainbow-shadow-opacity, 0.4);
+    filter: blur(var(--height));
+  }
+</style>

packages/astro-rainbow-line/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@spearwolf/astro-rainbow-line",
+  "description": "astro wrapper for the rainbow-line web component",
+  "version": "1.0.0",
+  "main": "RainbowLine.astro",
+  "author": {
+    "name": "Wolfger Schramm",
+    "email": "wolfger@spearwolf.de",
+    "url": "https://www.spearwolf.de"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/spearwolf/visual-fx-web-components",
+  "scripts": {
+    "publishNpmPkg": "pnpm node ../../scripts/publishNpmPkg.mjs ."
+  }
+}

packages/astro-rainbow-line/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "astro-rainbow-line",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "root": "packages/astro-rainbow-line",
+  "sourceRoot": "{projectRoot}",
+  "projectType": "library",
+  "tags": []
+}

packages/astro-rainbow-line/rainbow-line-v0.2.1.js

@@ -37,7 +37,8 @@ exec(`npm show ${pkgJson.name} versions --json`, (error, stdout, stderr) => {
     } else {
       publishPackage();
     }
-  } else if (stderr && stderr.toString().includes('npm ERR! code E404')) {
+  } else if (stderr && stderr.toString().includes('E404')) {
+    // => npm ERR! code E404
     console.log('oh it looks like this is the first time to publish the package');
     publishPackage();
   } else {