#2 Add CSS application to generated sketch HTML

- Add new plugin for bundling CSS
- Add CSS import to TypeScript
- Update README.md

README.md

@@ -1,8 +1,8 @@
-# generative-art-project-template
+# Generative Art Project Template (TypeScript)
 
 Copyright (C) 2023 Brittni Watkins
 
-A template for new brittni and the polar bear generative art projects using TypeScript with p5.
+A template for new brittni and the polar bear generative art projects using [TypeScript](https://www.typescriptlang.org/) with [p5](https://p5js.org/).
 
 ## LICENSE Information
 

assets/styles/sketch.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2023 Brittni Watkins.
+ *
+ * This file is a part of brittni and the polar bear's Generative Art Project Template,
+ * which is released under the GNU Affero General Public License, Version 3.0.
+ * You may not use this file except in compliance with the license.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. See LICENSE or go to
+ * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details.
+ */
+
+/* To remove borders and scroll bars from the sketch page */
+
+html, body {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+canvas {
+    display: block;
+}

package.json

@@ -53,6 +53,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "rollup": "4.3.1",
     "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-dev": "^2.0.4",
     "rollup-plugin-zip": "^1.0.3"
   }

rollup.config.mjs

@@ -20,6 +20,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import eslint from '@rollup/plugin-eslint';
 import terser from '@rollup/plugin-terser';
+import css from 'rollup-plugin-css-only';
 import html from '@rollup/plugin-html';
 import analyzer from "rollup-plugin-analyzer";
 import dev from 'rollup-plugin-dev';
@@ -55,8 +56,12 @@ export default {
         }),
         terser(),
         exportFavicon(),
+        css({
+            output: 'bundle.css'
+        }),
         html({
-            title: 'Generative Art Template'
+            title: 'Generative Art Template',
+            publicPath: './'
         }),
         analyzer({
             summaryOnly: true

src/sketch.ts

@@ -15,16 +15,22 @@
  * See the GNU Affero General Public License for more details.
  */
 
-import P5 from "p5";
+import P5 from 'p5';
+
+import '../assets/styles/sketch.css';
 
 function sketch(p: P5): void {
     p.setup = (): void => {
-        p.createCanvas(500, 500);
+        p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
     }
 
     p.draw = () : void => {
         p.background(0, 0, 255);
     }
+
+    p.windowResized = () : void => {
+        p.resizeCanvas(p.windowWidth, p.windowHeight);
+    }
 }
 
 new P5(sketch);