From fa0c2f060191767232b783027b18ef526a63de41 Mon Sep 17 00:00:00 2001 From: Caleb Foss Date: Fri, 26 Sep 2025 15:25:05 -0500 Subject: [PATCH 1/3] Config fixes --- jest.config.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 91922e9..9c5263a 100644 --- a/jest.config.js +++ b/jest.config.js @@ -12,5 +12,5 @@ export default { extensionsToTreatAsEsm: [".ts"], collectCoverage: true, coverageReporters: ["text"], - collectCoverageFrom: ["dist/*"], + collectCoverageFrom: ["src/**/*"], }; diff --git a/package.json b/package.json index 11350f1..aeec2e3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ }, "name": "web-spinner", "version": "0.0.0", - "main": "dist/webSpinner.js", + "main": "src/index.ts", "type": "module", "types": "dist/types/index.d.ts", "scripts": { From c4c940e18e4e0e76dd17663b26c6ea27a711e936 Mon Sep 17 00:00:00 2001 From: Caleb Foss Date: Fri, 26 Sep 2025 15:31:34 -0500 Subject: [PATCH 2/3] Remove hyphen from package name (already on NPM) --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7167c94..cd98cc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "web-spinner", + "name": "webspinner", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "dev": true, "packages": { "": { - "name": "web-spinner", + "name": "webspinner", "version": "0.0.0", "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index aeec2e3..4797986 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "webpack": "^5.97.1", "webpack-cli": "^6.0.1" }, - "name": "web-spinner", + "name": "@calebfoss/web-spinner", "version": "0.0.0", "main": "src/index.ts", "type": "module", From 8e28b810c18d2876bbbc43db7c20f7e404bfc21b Mon Sep 17 00:00:00 2001 From: Caleb Foss Date: Sun, 28 Sep 2025 11:03:05 -0500 Subject: [PATCH 3/3] Add learn page --- README.md | 2 + docs/docStyle.css | 4 + docs/learn-canvas.html | 423 +++++++++++++++++++++++++++++++++++++++++ package-lock.json | 4 +- 4 files changed, 431 insertions(+), 2 deletions(-) create mode 100644 docs/learn-canvas.html diff --git a/README.md b/README.md index 4d7aae7..64f24e1 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ [Documentation (under construction)](https://web-spinner.vercel.app) +[Learn with examples (under construction)][https://web-spinner.vercel.app/learn-canvas.html] + [Starter Template](https://github.com/calebfoss/web-spinner-starter) [Contributor Documents (under construction)](./contributor/introduction.md) diff --git a/docs/docStyle.css b/docs/docStyle.css index 2ccdd25..6441164 100644 --- a/docs/docStyle.css +++ b/docs/docStyle.css @@ -81,6 +81,10 @@ main { text-decoration: none; } + a:visited { + color: var(--lightest); + } + a:hover { background-color: var(--dark); text-decoration: underline; diff --git a/docs/learn-canvas.html b/docs/learn-canvas.html new file mode 100644 index 0000000..31557b0 --- /dev/null +++ b/docs/learn-canvas.html @@ -0,0 +1,423 @@ + + + + + + + + + + Web-Spinner - Learn: Canvas + + +
+
+ + +
+
+
+

Web-Spinner - Learn: Canvas

+

Introduction

+

+ This is a beginner-friendly guide to using the 2D canvas in Web Spinner. + The guide covers how to create graphics, animations, and interactive + content. +

+

Setup

+

+ You can create a Web Spinner project using either HTML or JavaScript. + HTML is simpler but more limited. JavaScript allows for more + opportunities with animation and interactivity. Let's begin with a + blank canvas and look at both options. +

+
+

HTML

+

+ See the Pen + + Web Spinner Learn HTML 01 + by Caleb Foss (@calebfoss) on CodePen. +

+

+ c2d stands for Canvas 2D, meaning a space to render + two-dimensional imagery. +

+

+ The canvas is an example of an element, a unit of content on a web + page. +

+
+
+

JavaScript

+

+ See the Pen + + Web Spinner Learn JS 01 + by Caleb Foss (@calebfoss) on CodePen. +

+

+ The lines in the code that begin with // are called + comments. They are ignored by the browser and meant instead for humans to + read. In this case, they describe what each line of code does. +

+
+

Try changing the canvas settings.

+
    +
  • + You can swap the word pink with any + named color + or a hex value: + . Make sure to keep the quotation + marks around it. +
    • +
  • + You can change the height and width numbers to adjust the dimensions + of the canvas. +
    • +
+

Drawing Shapes

+

Start with One Shape

+

Let's put a shape on the canvas.

+
+

HTML

+

+ See the Pen + + Web Spinner Learn HTML 02 + by Caleb Foss (@calebfoss) on CodePen. +

+
+
+

JavaScript

+

+ See the Pen + + Web Spinner Learn JS 02 + by Caleb Foss (@calebfoss) on CodePen. +

+
+

Adding Another

+

+ How we add another shape changes its behavior. When a shape is added + directly to the canvas, it starts with default settings. When a shape is + added as a child of another shape, however, it starts with that + shape's settings. +

+
+

HTML

+

+ See the Pen + + Web Spinner Learn HTML 03-b + by Caleb Foss (@calebfoss) on CodePen. +

+

+ See the Pen + + Web Spinner Learn HTML 03-a + by Caleb Foss (@calebfoss) on CodePen. +

+
+
+

JavaScript

+

+ See the Pen + + Web Spinner Learn JS 02 + by Caleb Foss (@calebfoss) on CodePen. +

+

+ See the Pen + + Web Spinner Learn JS 03-a + by Caleb Foss (@calebfoss) on CodePen. +

+
+
+ + + diff --git a/package-lock.json b/package-lock.json index cd98cc7..ab5611d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "webspinner", + "name": "@calebfoss/web-spinner", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "dev": true, "packages": { "": { - "name": "webspinner", + "name": "@calebfoss/web-spinner", "version": "0.0.0", "license": "ISC", "dependencies": {