Add code style formatting to the website

.vscode/settings.json

@@ -13,6 +13,13 @@
 		"editor.formatOnSave": true,
 		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
 	},
+	"[scss]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": true,
+		},
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+	},
 	// Handlebars: don't save on format
 	// (`about.hbs` is used by Cargo About to encode license information)
 	"[handlebars]": {
@@ -26,6 +33,7 @@
 	"eslint.workingDirectories": [
 		"./frontend",
 		"./bezier-rs/docs/interactive-docs",
+		"./website",
 	],
 	"eslint.validate": [
 		"javascript",

website/.eslintrc.js

@@ -0,0 +1,85 @@
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		node: true,
+		es2020: true,
+	},
+	parserOptions: {
+		ecmaVersion: 2020,
+	},
+	extends: [
+		// JS defaults
+		"airbnb-base",
+		// General Prettier defaults
+		"prettier",
+	],
+	settings: {
+		// https://github.com/import-js/eslint-plugin-import#resolvers
+		"import/resolver": {
+			// `node` must be listed first!
+			node: {},
+		},
+	},
+	ignorePatterns: [
+		// Ignore generated directories
+		"node_modules/",
+		"public/",
+
+		// Don't ignore JS and TS dotfiles in this folder
+		"!.*.js",
+		"!.*.ts",
+	],
+	plugins: ["prettier"],
+	rules: {
+		// Standard ESLint config
+		indent: "off",
+		quotes: ["error", "double"],
+		camelcase: ["error", { properties: "always" }],
+		"linebreak-style": ["error", "unix"],
+		"eol-last": ["error", "always"],
+		"max-len": ["error", { code: 200, tabWidth: 4 }],
+		"prefer-destructuring": "off",
+		"no-console": "warn",
+		"no-debugger": "warn",
+		"no-param-reassign": ["error", { props: false }],
+		"no-bitwise": "off",
+		"no-shadow": "off",
+		"no-use-before-define": "off",
+		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
+
+		// Import plugin config (used to intelligently validate module import statements)
+		"import/prefer-default-export": "off",
+		"import/no-relative-packages": "error",
+		"import/order": [
+			"error",
+			{
+				alphabetize: {
+					order: "asc",
+					caseInsensitive: true,
+				},
+				warnOnUnassignedImports: true,
+				"newlines-between": "always-and-inside-groups",
+				pathGroups: [],
+			},
+		],
+
+		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
+		"prettier/prettier": [
+			"error",
+			{
+				tabWidth: 4,
+				tabs: true,
+				printWidth: 200,
+			},
+		],
+	},
+	overrides: [
+		{
+			files: ["*.js"],
+			rules: {
+				"@typescript-eslint/explicit-function-return-type": ["off"],
+			},
+		},
+	],
+};

website/.gitignore

@@ -1 +1,2 @@
+node_modules/
 public/

website/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "graphite-website",
+	"description": "Graphite's website. This npm package is for dev tooling only, such as eslint.",
+	"private": true,
+	"scripts": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/GraphiteEditor/Graphite.git"
+	},
+	"author": "Graphite Authors <contact@graphite.rs>",
+	"license": "Apache-2.0",
+	"homepage": "https://graphite.rs",
+	"devDependencies": {
+		"@typescript-eslint/eslint-plugin": "^5.20.0",
+		"@typescript-eslint/parser": "^5.20.0",
+		"eslint": "^8.14.0",
+		"eslint-config-airbnb-base": "^15.0.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-prettier": "^4.0.0",
+		"prettier": "^2.6.1",
+		"sass": "^1.50.1"
+	}
+}

website/sass/base.scss

@@ -20,7 +20,7 @@
 	--font-size-article-h1: 32px;
 	--font-size-article-h2: 24px;
 	--font-size-article-h3: 18px;
-
+  
 	@media screen and (max-width: 760px) {
 		--font-size-intro-heading: 40px;
 		--font-size-intro-body: 18px;
@@ -586,7 +586,6 @@ hr,
 					width: 100%;
 				}
 			}
-
 		}
 	}
 

website/sass/blog.scss

@@ -14,18 +14,18 @@
 
 		.feed {
 			margin-top: -4px;
-			
+
 			a {
 				text-decoration: none;
 				display: flex;
 				gap: 8px;
-				
+
 				.icon {
 					vertical-align: top;
 					width: calc(var(--font-size-link) * 1.5);
 					height: calc(var(--font-size-link) * 1.5);
 				}
-				
+
 				.link {
 					vertical-align: top;
 				}
@@ -52,7 +52,7 @@
 				max-width: 540px;
 			}
 		}
-	
+
 		.details {
 			display: flex;
 			flex-direction: column;
@@ -92,4 +92,3 @@
 		}
 	}
 }
-

website/sass/index.scss

@@ -1,6 +1,6 @@
 #logo {
 	display: flex;
-	
+
 	img {
 		width: auto;
 		max-width: 100%;
@@ -27,7 +27,7 @@
 	display: flex;
 	gap: calc(var(--font-size-link) * 0.8);
 	flex-wrap: wrap;
-	
+
 	div {
 		display: flex;
 		gap: calc(var(--font-size-link) * 0.8);
@@ -38,7 +38,6 @@
 			display: block;
 		}
 	}
-
 }
 
 #hero-message {
@@ -250,7 +249,7 @@
 			width: 100%;
 			color: var(--color-fog);
 			box-sizing: border-box;
-			
+
 			&:not(:target) {
 				display: none;
 			}
@@ -291,7 +290,6 @@
 				&.name {
 					flex: 1 0 0;
 					min-width: 240px;
-					
 				}
 
 				&.phone {
@@ -378,7 +376,7 @@
 					width: 48px;
 					height: 48px;
 				}
-				
+
 				span {
 					line-height: 48px;
 					margin-left: 20px;
@@ -396,7 +394,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 20px;
-		
+
 		.headline a {
 			text-decoration: none;
 			color: var(--color-navy);
@@ -405,7 +403,7 @@
 		.publication {
 			font-weight: 800;
 		}
-		
+
 		.summary {
 			overflow: hidden;
 			text-overflow: ellipsis;

website/static/carousel.js

@@ -7,7 +7,7 @@ let carouselDirectionNext;
 let carouselDots;
 let carouselDescriptions;
 let carouselDragLastClientX;
-let velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
+const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
 
 window.addEventListener("DOMContentLoaded", initializeCarousel);
 window.addEventListener("pointerup", () => dragEnd(false));
@@ -25,15 +25,17 @@ function initializeCarousel() {
 	carouselDots = document.querySelectorAll(".carousel-controls .dot");
 	carouselDescriptions = document.querySelectorAll(".screenshot-description p");
 
-	carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", false, true));
+	carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", true, false));
-	carouselDirectionNext.addEventListener("click", () => slideDirection("next", false, true));
+	carouselDirectionNext.addEventListener("click", () => slideDirection("next", true, false));
-	Array.from(carouselDots).forEach((dot) => dot.addEventListener("click", (event) => {
+	Array.from(carouselDots).forEach((dot) =>
-		const index = Array.from(carouselDots).indexOf(event.target);
+		dot.addEventListener("click", (event) => {
-		slideTo(index, true);
+			const index = Array.from(carouselDots).indexOf(event.target);
-	}));
+			slideTo(index, true);
+		})
+	);
 }
 
-function slideDirection(direction, clamped = false, smooth) {
+function slideDirection(direction, smooth, clamped = false) {
 	const directionIndexOffset = { prev: -1, next: 1 }[direction];
 	const offsetDotIndex = currentClosestImageIndex() + directionIndexOffset;
 
@@ -53,7 +55,7 @@ function slideTo(index, smooth) {
 	activeDescription.classList.remove("active");
 	carouselDescriptions[index].classList.add("active");
 
-	setCurrentTransform(index * -100, "%", smooth)
+	setCurrentTransform(index * -100, "%", smooth);
 }
 
 function currentTransform() {
@@ -98,11 +100,11 @@ function dragEnd(dropWithoutVelocity) {
 	document.querySelector("#screenshots").classList.remove("dragging");
 
 	const onlyRecentVelocityDeltaWindow = velocityDeltaWindow.filter((delta) => delta.time > Date.now() - 1000);
-	const timeRange = Date.now() - onlyRecentVelocityDeltaWindow[0]?.time;
+	const timeRange = Date.now() - (onlyRecentVelocityDeltaWindow[0]?.time ?? NaN);
 	// Weighted (higher by recency) sum of velocity deltas from previous window of frames
 	const recentVelocity = onlyRecentVelocityDeltaWindow.reduce((acc, entry) => {
 		const timeSinceNow = Date.now() - entry.time;
-		const recencyFactorScore = 1 - (timeSinceNow / timeRange);
+		const recencyFactorScore = 1 - timeSinceNow / timeRange;
 
 		return acc + entry.delta * recencyFactorScore;
 	}, 0);
@@ -116,15 +118,16 @@ function dragEnd(dropWithoutVelocity) {
 		if (recentVelocity > 0) {
 			// Don't apply the velocity-based fling if we're already snapping to the next image
 			if (closestImageIndex >= activeDotIndex) {
-				slideDirection("prev", true, false);
+				slideDirection("prev", false, true);
 				return;
 			}
 		}
 		// Negative velocity should go to the next image
 		else {
 			// Don't apply the velocity-based fling if we're already snapping to the next image
+			// eslint-disable-next-line no-lonely-if
 			if (closestImageIndex <= activeDotIndex) {
-				slideDirection("next", true, false);
+				slideDirection("next", false, true);
 				return;
 			}
 		}

website/static/navbar.js

@@ -11,8 +11,6 @@ let fullRippleHeight;
 let ripples;
 let activeRippleIndex;
 
-let globalCount = 0;
-
 window.addEventListener("DOMContentLoaded", initializeRipples);
 window.addEventListener("resize", () => animate(true));
 
@@ -22,7 +20,7 @@ function initializeRipples() {
 	navButtons = document.querySelectorAll("header nav a");
 	rippleSvg = document.querySelector("header .ripple");
 	ripplePath = rippleSvg.querySelector("path");
-	fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height) - 4;
+	fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height, 10) - 4;
 
 	ripples = Array.from(navButtons).map((button) => ({
 		element: button,
@@ -33,7 +31,6 @@ function initializeRipples() {
 
 	activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href").replace(/\//g, "") === window.location.pathname.replace(/\//g, ""));
 
-
 	ripples.forEach((ripple) => {
 		const updateTimings = (goingUp) => {
 			const start = ripple.animationStartTime;
@@ -66,11 +63,8 @@ function initializeRipples() {
 
 function animate(forceRefresh) {
 	if (!ripplesInitialized) return;
-	
-	const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
 
-	// console.log(globalCount, new Date().getSeconds(), Date.now(), animateThisFrame, {...ripples[0]});
+	const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
-	globalCount++;
 
 	if (animateThisFrame || forceRefresh) {
 		setRipples();
@@ -79,7 +73,7 @@ function animate(forceRefresh) {
 }
 
 function setRipples() {
-	const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
+	const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize, 10) || NAV_BUTTON_INITIAL_FONT_SIZE;
 	const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
 
 	const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
@@ -98,12 +92,12 @@ function setRipples() {
 		const buttonRect = ripple.element.getBoundingClientRect();
 
 		const buttonCenter = buttonRect.width / 2;
-		const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
+		const rippleCenter = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
 		const rippleOffset = rippleCenter - buttonCenter;
 
 		const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
 
-		const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
+		const rippleRadius = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
 		const handleRadius = rippleRadius * HANDLE_STRETCH;
 
 		path += `L ${rippleStartX},${rippleHeight + 3} `;