Various website fixes

website/content/blog/2022-02-12-announcing-graphite-alpha.md

@@ -1,6 +1,6 @@
 +++
 title = "Announcing Graphite alpha"
-date = 2021-02-12
+date = 2022-02-12
 
 [extra]
 banner = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.png"

website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md

@@ -1,9 +1,9 @@
 +++
 title = "Graphite: a vision for the future of 2D content creation"
-date = 2021-03-12
+date = 2022-03-12
 
 [extra]
-banner = "https://static.graphite.rs/content/blog/2022-03-12-the-vision-behind-graphite.png"
+banner = "https://static.graphite.rs/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.png"
 author = "Keavon Chambers"
 +++
 

website/content/contribute/_index.md

@@ -9,7 +9,7 @@ It's great to hear you are interested in contributing to Graphite! We want to ma
 
 Graphite is built with Rust and web technologies. Download and install the latest LTS version of [Node.js](https://nodejs.org/) and stable release of [Rust](https://www.rust-lang.org/), as well as [Git](https://git-scm.com/).
 
-**On Windows**, Rust requires the MSVC toolchain properly configured with the Visual Studio Build Tools installed on your machine including the "Desktop development with C++" workload. **If you are having issues building,** you might have skipped this step or you may have outdated Node.js or Rust versions (compare `node --version` and `rustc --version` against the versions listed in the links above, use `rustup update` to upgrade Rust).
+On Windows, Rust requires the MSVC toolchain properly configured with the Visual Studio Build Tools installed on your machine including the "Desktop development with C++" workload. **If you are having issues building,** you might have skipped this step or you may have outdated Node.js or Rust versions (compare `node --version` and `rustc --version` against the versions listed in the links above, use `rustup update` to upgrade Rust).
 
 Clone the project:
 ```
@@ -43,7 +43,7 @@ Pay attention to the tags which provide some useful information like which ones
 
 ## Mentorship.
 
-Join the [project's Discord server](https://discord.graphite.design) then hop on the `#development` channel and ping @Keavon and @TrueDoctor. We would be delighted to help you get started with in-depth explanations of the code, one-on-one mentorship and pair programming. This is very valuable and not at all an inconvenience to us because it helps you avoid the intimidating step of getting started, so please do not hesitate to reach out right away.
+Join the [project's Discord server](https://discord.graphite.rs) then hop on the `#development` channel and ping @Keavon and @TrueDoctor. We would be delighted to help you get started with in-depth explanations of the code, one-on-one mentorship and pair programming. This is very valuable and not at all an inconvenience to us because it helps you avoid the intimidating step of getting started, so please do not hesitate to reach out right away.
 
 ## Docs.
 

website/content/features/_index.md

@@ -5,27 +5,29 @@ template = "page.html"
 
 This page is a work in progress. Below is an incomplete list of planned features in no particular order. Many are long-term aspirations. In the coming days, this will be sequenced into a roadmap and expanded with further details.
 
+Short-term feature development at a more granular level is tracked in the [Task Board](https://github.com/GraphiteEditor/Graphite/projects/1) on GitHub. Check that out to see what's coming down the pipeline during monthly sprints.
+
 The current order of priorities right now begins with adding a node graph system to the existing vector editing toolset, then building a raster-based render engine. More advanced features will build off those core capabilities.
 
 - Node graph and layer tree
 - Resolution-agnostic rendering
+- Compositing engine
 - Procedural generation
-- Capable compositing
-- Constraint solver
-- Advanced typesetting
+- Mixed vector and raster design
 - RAW photo editing
+- Physically-based painting
+- Data viz/graph/chart creation
+- Advanced typesetting
+- HDR/WCG color handling
 - Motion graphics and animation
 - Live video compositing
 - Animated SVG creation
-- Physically-based painting
-- HDR/WCG color handling
 - Real-time collaborative editing
+- Constraint solver
 - Custom node scripting
 - Asset manager and store
 - Portable render engine
 - Batch conversion and processing
-- Mixed vector and raster design
-- Data visualization and graph/charts
 - Data-driven template replacement
 - Native desktop application
 - Distributed rendering system

website/static/js/navbar.js

@@ -5,13 +5,14 @@ const HANDLE_STRETCH = 0.4;
 
 let ripplesInitialized;
 let navButtons;
-let navButtonFontSize;
 let rippleSvg;
 let ripplePath;
 let fullRippleHeight;
 let ripples;
 let activeRippleIndex;
 
+let globalCount = 0;
+
 window.addEventListener("DOMContentLoaded", initializeRipples);
 window.addEventListener("resize", () => animate(true));
 
@@ -30,7 +31,7 @@ function initializeRipples() {
 		goingUp: false,
 	}));
 
-	activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href") === window.location.pathname);
+	activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href").replace(/\//g, "") === window.location.pathname.replace(/\//g, ""));
 
 
 	ripples.forEach((ripple) => {
@@ -55,28 +56,32 @@ function initializeRipples() {
 
 	ripples[activeRippleIndex] = {
 		...ripples[activeRippleIndex],
-		animationStartTime: Date.now(),
-		animationEndTime: Date.now() + RIPPLE_ANIMATION_MILLISECONDS,
+		animationStartTime: 1,
+		animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
 		goingUp: true,
 	};
 
-	animate(false);
+	setRipples();
 }
 
 function animate(forceRefresh) {
 	if (!ripplesInitialized) return;
-
-	navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
-	const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
-
+	
 	const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
+
+	console.log(globalCount, new Date().getSeconds(), Date.now(), animateThisFrame, {...ripples[0]});
+	globalCount++;
+
 	if (animateThisFrame || forceRefresh) {
-		setRipples(mediaQueryScaleFactor);
+		setRipples();
 		window.requestAnimationFrame(() => animate(false));
 	}
 }
 
-function setRipples(mediaQueryScaleFactor) {
+function setRipples() {
+	const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
+	const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
+
 	const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
 	const rippleSvgRect = rippleSvg.getBoundingClientRect();
 	const rippleSvgLeft = rippleSvgRect.left;