chore: 🍻 store configs, build tools and etc

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parser: 'babel-eslint',
+  extends: ['airbnb-base', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: false,
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'max-len': ['error', { code: 120 }],
+    'import/prefer-default-export': 'off',
+  },
+};

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.cache
+.DS_Store
+dist

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "strict",
+  "printWidth": 150,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-idiomatic-order"
+  ]
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "epodivilov.github.io",
+  "version": "1.0.0",
+  "description": "This repository is for managing my personal site",
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epodivilov/epodivilov.github.io.git"
+  },
+  "author": "Evgeniy Podivilov <[email protected]> (https://twitter.com/senior_idealist)",
+  "license": "MIT",
+  "homepage": "https://epodivilov.github.io/",
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "stylelint": "^13.11.0",
+    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0"
+  },
+  "dependencies": {
+    "parcel-bundler": "^1.12.4"
+  },
+  "scripts": {
+    "start": "node tools/start.js",
+    "build": "NODE_ENV=production node tools/build.js"
+  }
+}

src/utils/debounce.js

@@ -0,0 +1,23 @@
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed
+ * since the last time the debounced function was invoked.
+ * @param {Function} fn
+ * @param {number} delay
+ * @returns {Function}
+ */
+export function debounce(fn, delay) {
+  let timeout;
+  let lastArgs;
+
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    lastArgs = args;
+    timeout = setTimeout(() => {
+      fn.apply(this, lastArgs);
+      timeout = undefined;
+    }, delay);
+  };
+}

src/utils/deg-to-rad.js

@@ -0,0 +1,8 @@
+/**
+ * Convert degrees to radians
+ * @param {number} degrees
+ * @returns {number}
+ */
+export function radToDeg(degrees) {
+  return (degrees * Math.PI) / 180;
+}

src/utils/hex-to-rgba.js

@@ -0,0 +1,19 @@
+/**
+ * Convert hex to rgba
+ * @param {string} hexCode color in hex
+ * @param {number} [opacity] from 0 to 1
+ * @returns
+ */
+export function hexToRgba(hexCode, opacity = 1) {
+  let hex = hexCode.replace('#', '');
+
+  if (hex.length === 3) {
+    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `rgba(${r},${g},${b},${opacity})`;
+}

src/utils/rad-to-deg.js

@@ -0,0 +1,8 @@
+/**
+ * Convert radians to degrees
+ * @param {number} radians
+ * @returns {number}
+ */
+export function radToDeg(radians) {
+  return (radians * 180) / Math.PI;
+}

src/utils/raf.js

@@ -0,0 +1,45 @@
+/**
+ * @typedef {Object} Result
+ * @property {Function} Result.start
+ * @property {Function} Result.stop
+ *
+ * @param {(timestamp:number) => void} callback
+ * @param {number} fps number of frames per second
+ * @returns {Result} call to start/re-start
+ */
+export function raf(callback, fps = 60) {
+  const delay = 1000 / fps;
+  let time = null;
+  let frame = -1;
+  let rafId = null;
+
+  /** @param {number} timestamp */
+  function loop(timestamp) {
+    if (time === null) {
+      time = timestamp;
+    }
+
+    const seg = Math.floor((timestamp - time) / delay);
+
+    if (seg > frame) {
+      frame = seg;
+      callback(timestamp);
+    }
+
+    rafId = requestAnimationFrame(loop);
+  }
+
+  return {
+    stop() {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+        time = null;
+        frame = -1;
+      }
+    },
+    start() {
+      loop(0);
+    },
+  };
+}

src/utils/random-hex-color.js

@@ -0,0 +1,3 @@
+export function randomHexColor() {
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+}

src/utils/sketch.js

@@ -0,0 +1,103 @@
+export class Sketch {
+  /** @type {HTMLCanvasElement} */
+  #canvas;
+
+  /** @type {CanvasRenderingContext2D} */
+  context;
+
+  /** @type {number|null} */
+  #raf = null;
+
+  constructor() {
+    this.#canvas = document.createElement('canvas');
+    this.context = this.#canvas.getContext('2d');
+
+    this.#canvas.width = window.innerWidth * devicePixelRatio;
+    this.#canvas.height = window.innerHeight * devicePixelRatio;
+
+    document.body.appendChild(this.#canvas);
+
+    window.addEventListener('resize', () => {
+      this.#canvas.width = window.innerWidth * devicePixelRatio;
+      this.#canvas.height = window.innerHeight * devicePixelRatio;
+    });
+  }
+
+  get width() {
+    return this.#canvas.width;
+  }
+
+  get height() {
+    return this.#canvas.height;
+  }
+
+  clear(color = '#152028') {
+    this.context.fillStyle = color;
+    this.context.fillRect(0, 0, this.width, this.height);
+  }
+
+  run(callback, fps = 60) {
+    if (this.#raf != null) {
+      cancelAnimationFrame(this.#raf);
+    }
+
+    const delay = 1000 / fps;
+    let time = null;
+    let frame = -1;
+
+    /** @param {number} timestamp */
+    const loop = (timestamp) => {
+      if (time === null) {
+        time = timestamp;
+      }
+
+      const seg = Math.floor((timestamp - time) / delay);
+
+      if (seg > frame) {
+        frame = seg;
+        this.context.save();
+        callback(timestamp);
+        this.context.restore();
+      }
+
+      this.#raf = requestAnimationFrame(loop);
+    };
+
+    loop(0);
+  }
+
+  runs(tuples = []) {
+    if (this.#raf != null) {
+      cancelAnimationFrame(this.#raf);
+    }
+
+    const loops = tuples.map(([cb, fps = 60]) => {
+      const delay = 1000 / fps;
+      let time = null;
+      let frame = -1;
+
+      return (timestamp) => {
+        if (time === null) {
+          time = timestamp;
+        }
+
+        const seg = Math.floor((timestamp - time) / delay);
+
+        if (seg > frame) {
+          frame = seg;
+          this.context.save();
+          cb(timestamp);
+          this.context.restore();
+        }
+      };
+    });
+
+    const mainLoop = (timestamp) => {
+      loops.forEach((cb) => cb(timestamp));
+
+      this.#raf = requestAnimationFrame(mainLoop);
+    };
+
+    mainLoop(0);
+  }
+}

tools/build.js

@@ -0,0 +1,43 @@
+const Bundler = require('parcel-bundler');
+const fs = require('fs/promises');
+const { resolve } = require('path');
+
+function findSketch(name, from) {
+  return fs
+    .readdir(from)
+    .then((result) =>
+      Promise.all(
+        result.map(async (it) => {
+          const path = resolve(from, it);
+
+          return (await fs.stat(path)).isDirectory() ? path : null;
+        })
+      )
+    )
+    .then((list) => list.find((it) => it && it.endsWith(name)));
+}
+
+const [name] = process.argv.slice(2);
+const root = resolve(process.cwd(), 'src/sketches/');
+
+if (name == null) {
+  throw new Error('Need provide name of sketch');
+}
+
+(async () => {
+  const projectDir = await findSketch(name, root);
+
+  const sketch = new Bundler([resolve(projectDir, './src/index.html')], {
+    outDir: resolve(process.cwd(), `./docs/${name}`),
+    publicUrl: './',
+  });
+
+  await sketch.bundle();
+
+  const home = new Bundler([resolve(root, './index.html')], {
+    outDir: resolve(process.cwd(), './docs'),
+    publicUrl: './',
+  });
+
+  await home.bundle();
+})();

tools/start.js

@@ -0,0 +1,33 @@
+const Bundler = require('parcel-bundler');
+const fs = require('fs/promises');
+const { resolve } = require('path');
+
+function findSketch(name, from) {
+  return fs
+    .readdir(from)
+    .then((result) =>
+      Promise.all(
+        result.map(async (it) => {
+          const path = resolve(from, it);
+
+          return (await fs.stat(path)).isDirectory() ? path : null;
+        })
+      )
+    )
+    .then((list) => list.find((it) => it && it.endsWith(name)));
+}
+
+const [name] = process.argv.slice(2);
+const root = resolve(process.cwd(), 'src/sketches/');
+
+if (name == null) {
+  throw new Error('Need provide name of sketch');
+}
+
+(async () => {
+  const projectDir = await findSketch(name, root);
+
+  const bundler = new Bundler([resolve(projectDir, './src/index.html')]);
+
+  await bundler.serve();
+})();