Various website fixes

This commit is contained in:
Keavon Chambers 2022-03-17 02:12:23 -07:00
parent 36d67393b9
commit f6726c1427
15 changed files with 47 additions and 41 deletions

View file

@ -1,4 +1,4 @@
![Graphite Logo](graphite_splash.png)
![Graphite logo](https://static.graphite.rs/readme/graphite-readme-logo.svg)
# Powerful 2D vector and raster editing. Procedural and nondestructive.
@ -6,18 +6,17 @@ Graphite is a digital content creation software package for 2D graphics, merging
While the project is still in early development, implementation progress has been moving forward at a swift pace. The Graphite Alpha release is launching soon and focuses on vector art for SVG creation. The next major milestone will introduce a nondestructive backend for vector graphics with a powerful node graph system. Later releases will provide better vector rendering capabilities and then resolution-agnostic raster editing and compositing.
Play around with Graphite right now in your browser at [editor.graphite.design](https://editor.graphite.design). Windows, Mac, and Linux will additionally be supported with a native (not web-based) desktop client later in the development roadmap.
Play around with Graphite right now in your browser at [editor.graphite.rs](https://editor.graphite.rs). Windows, Mac, and Linux will additionally be supported with a native (not web-based) desktop client later in the development roadmap.
## Contributing
We need Rust and web developers! See [instructions here](https://github.com/GraphiteEditor/Graphite/issues/202) for getting started.
We are also in search of a new logo and brand style system. If you are an experienced designer, please get in touch for more details.
We are also in search of artists to help create material for the website. Please get in touch for more details.
## Discord
If the Graphite project strikes your fancy, join our Discord community to chat with the community and development team. You're invited to stop by just to lurk, ask questions, offer suggestions, or get involved in the project. We are seeking collaborators to help design and develop the software and this is where we communicate. Paste `https://di----scord.gg/uMjBz----5N68W` into your browser and delete the dashes. (To prevent spam bots, please don't share the link on any website without the dashes.)
If the Graphite project strikes your fancy, [join our Discord community](https://discord.graphite.rs) to chat with the community and development team. You're invited to stop by just to lurk, ask questions, offer suggestions, or get involved in the project. We are seeking collaborators to help design and develop the software and this is where we communicate.
## Vision
Graphite is an open source, cross-platform digital content creation desktop and web application for 2D graphics editing, photo processing, vector art, digital painting, illustration, data visualization, compositing, and more. Inspired by the open source success of Blender in the 3D domain, it aims to bring 2D content creation to new heights with efficient workflows influenced by Photoshop/Gimp and Illustrator/Inkscape and backed by a powerful node-based, nondestructive approach proven by Houdini and Substance.

View file

@ -3,10 +3,10 @@ name = "graphite-editor"
publish = false
version = "0.0.0"
rust-version = "1.56.0"
authors = ["Graphite Authors <contact@graphite.design>"]
authors = ["Graphite Authors <contact@graphite.rs>"]
edition = "2021"
readme = "../README.md"
homepage = "https://www.graphite.design"
homepage = "https://graphite.rs"
repository = "https://github.com/GraphiteEditor/Graphite"
license = "Apache-2.0"

View file

@ -13,9 +13,9 @@
"type": "git",
"url": "git+https://github.com/GraphiteEditor/Graphite.git"
},
"author": "Graphite Authors <contact@graphite.design>",
"author": "Graphite Authors <contact@graphite.rs>",
"license": "Apache-2.0",
"homepage": "https://www.graphite.design",
"homepage": "https://graphite.rs",
"dependencies": {
"class-transformer": "^0.5.0",
"reflect-metadata": "^0.1.13",

View file

@ -1,7 +1,7 @@
<template>
<div class="menu-bar-input">
<div class="entry-container">
<div @click="() => visitWebsite('https://www.graphite.design')" class="entry">
<div @click="() => visitWebsite('https://graphite.rs')" class="entry">
<IconLabel :icon="'GraphiteLogo'" />
</div>
</div>

View file

@ -58,7 +58,7 @@ function githubUrl(panicDetails: string): string {
**Steps To Reproduce**
Describe precisely how the crash occurred, step by step, starting with a new editor window.
1. Open the Graphite Editor at https://editor.graphite.design
1. Open the Graphite Editor at https://editor.graphite.rs
2.
3.
4.

View file

@ -82,7 +82,7 @@ export function createDialogState(editor: EditorState) {
const buttons: TextButtonWidget[] = [
{
kind: "TextButton",
callback: (): unknown => window.open("https://www.graphite.design", "_blank"),
callback: (): unknown => window.open("https://graphite.rs", "_blank"),
props: { label: "Website", emphasized: false, minWidth: 0 },
},
{

View file

@ -3,10 +3,10 @@ name = "graphite-wasm"
publish = false
version = "0.0.0"
rust-version = "1.56.0"
authors = ["Graphite Authors <contact@graphite.design>"]
authors = ["Graphite Authors <contact@graphite.rs>"]
edition = "2021"
readme = "../../README.md"
homepage = "https://www.graphite.design"
homepage = "https://graphite.rs"
repository = "https://github.com/GraphiteEditor/Graphite"
license = "Apache-2.0"

View file

@ -3,10 +3,10 @@ name = "graphite-graphene"
publish = false
version = "0.0.0"
rust-version = "1.56.0"
authors = ["Graphite Authors <contact@graphite.design>"]
authors = ["Graphite Authors <contact@graphite.rs>"]
edition = "2021"
readme = "../README.md"
homepage = "https://www.graphite.design"
homepage = "https://graphite.rs"
repository = "https://github.com/GraphiteEditor/Graphite"
license = "Apache-2.0"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

View file

@ -3,10 +3,10 @@ name = "graphite-proc-macros"
publish = false
version = "0.0.0"
rust-version = "1.56.0"
authors = ["Graphite Authors <contact@graphite.design>"]
authors = ["Graphite Authors <contact@graphite.rs>"]
edition = "2021"
readme = "../README.md"
homepage = "https://www.graphite.design"
homepage = "https://graphite.rs"
repository = "https://github.com/GraphiteEditor/Graphite"
license = "Apache-2.0"

View file

@ -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"

View file

@ -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"
+++

View file

@ -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.

View file

@ -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

View file

@ -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;