Initial commit

snootclub · Dec 14, 2018 · ee0e7c9 · ee0e7c9
commit ee0e7c9
Show file tree

Hide file tree

Showing 6 changed files with 703 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+    "env": {
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 3
+    },
+    "rules": {
+        "indent": [
+            "error",
+            "tab"
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+};
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,18 @@
+env:
+  node: true
+extends: 'eslint:recommended'
+parserOptions:
+  ecmaVersion: 5
+rules:
+  indent:
+    - error
+    - tab
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - never
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules/
+.vscode/
diff --git a/index.js b/index.js
@@ -0,0 +1,175 @@
+let Readline = require("readline")
+let execa = require("execa")
+let path = require("path")
+let fs = require("fs-extra")
+require("colors")
+
+let ask = question => {
+	let reader = Readline.createInterface({
+		input: process.stdin,
+		output: process.stdout
+	})
+
+	return new Promise(good =>
+		reader.question(question, answer => {
+			good(answer)
+			reader.close()
+		})
+	)
+}
+
+let dependencies = [
+	"canvas-sketch",
+	"canvas-sketch-util"
+]
+
+let fileCreators = {
+	"get-canvas.js"() {
+		return `// NOTE: You shouldn't need to edit this file it's only to deal
+// with anomalies of canvas-sketch and parcel together when 
+// they are working together as a team
+
+let createCanvas = () => {
+	let canvas = document.createElement("canvas")
+	canvas.id = "canvas"
+	return canvas
+}
+
+export default () =>
+	document.getElementById("canvas") || createCanvas()
+`
+	},
+
+	"sketch.js"() {
+		return `import canvasSketch from "canvas-sketch"
+import getCanvas from "./get-canvas.js"
+
+let canvas = getCanvas()
+
+let settings = {
+	dimensions: [
+		2048,
+		2048
+	],
+	canvas 
+}
+
+let sketch = () => ({context, width, height}) => {
+	let margin = 400
+	context.fillStyle = "hsl(5, 37%, 94%)"
+	context.fillRect(0, 0, width, height)
+
+	let gradient = context.createLinearGradient(
+		7,
+		30,
+		95,
+		height / 1.75
+	)
+	gradient.addColorStop(0, "hsl(220, 100%, 90%)")
+	gradient.addColorStop(1, "hsl(340, 100%, 50%)")
+	context.fillStyle = gradient
+	context.fillRect(
+		margin,
+		margin,
+		width - margin * 2,
+		height - margin * 2,
+	)
+}
+
+canvasSketch(sketch, settings)
+
+document.body.append(settings.canvas)
+`
+	},
+
+	"index.html"({ name }) {
+		return `<!doctype html>
+<title>${name}</title>
+<style>
+	body {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+	}
+	
+	canvas {
+		border: 1px solid pink;
+		box-shadow: 0 0 4px rgba(250, 240, 15, 0.5);
+	}
+</style>
+<body>
+<script src="./sketch.js"></script>
+`
+	}
+}
+
+let npm = function npm(...args) {
+	console.log(`running "npm ${args.join(" ")}"`.grey.bold)
+	return execa("npm", [...args])
+}
+
+npm.install = function npmInstall(...dependencies) {
+	return this(
+		"install",
+		...dependencies
+	)
+}
+
+npm.devInstall = function npmInstall(...dependencies) {
+	return this.install(
+		"-D",
+		...dependencies
+	)
+}
+
+void async function () {
+	let name = await ask("What is this sketch's name? ".cyan)
+	let currentDirectory = process.cwd()
+	let workingDirectory = path.resolve(
+		currentDirectory,
+		name
+	)
+
+	console.log(`making directory ${workingDirectory}`.grey)
+	await fs.mkdirp(workingDirectory)
+	console.log(`entering ${workingDirectory}`.grey)
+	process.chdir(workingDirectory)
+	await npm("init", "-y")
+	await npm.install("canvas-sketch", "canvas-sketch-util")
+
+	// await npm.devInstall("parcel-bundler")
+
+	let manifestFile = path.resolve(workingDirectory, "package.json")
+	let manifest = await fs.readJson(manifestFile)
+
+	manifest.scripts = {
+		build: "parcel build index.html -d website",
+		watch: "parcel watch index.html -d website",
+		start: "parcel index.html"
+	}
+
+	manifest.main = "index.html"
+
+	console.log(`writing scripts and main to ${manifestFile}`.gray)
+	await fs.outputJson(manifestFile, manifest)
+
+	for (let filename in fileCreators) {
+		let filepath = path.resolve(workingDirectory, filename)
+		console.log(`writing to ${filepath}`.gray)
+		await fs.outputFile(
+			filepath,
+			fileCreators[filename]({name})
+		)
+	}
+
+	console.log(`
+and we're done! you can find your boi in ${workingDirectory}
+if you hop in there and run
+$ ${"npm start".green}
+(you'll want to have ${"parcel".yellow} installed globally)
+you can get started by editing the ${"index.js".green} file.
+
+${"<3".red.bold}
+`)
+}()