rust-lang / www.rust-lang.org

The home of the Rust website

www.rust-lang.org

the home of the rust website

• View Staging (master)

Development

Running the app locally

1. Install cargo watch by running cargo install cargo-watch in your terminal.

2. To build the app and run the server, run cargo watch -x run in your terminal.

3. Navigate to http://localhost:7878 in your browser. If you make any updates to the styles, or any other project files, cargo watch will automatically restart the server for you, all you have to do is refresh your browser to see your changes.

Where to edit

• If you would like to edit styles, you should edit src/styles/app.scss.
• If you would like to update group data, you should edit the yml files in src/data/.
• If you would like to edit page content, you should edit the hbs files in templates.

Contributing

Please read our CONTRIBUTING.md before submitting a PR!

Deployment

www.rust-lang.org is currently hosted on Heroku. The master branch is automatically deployed to www-staging.rust-lang.org and the deploy branch is a snapshot of master that is manually updated and automatically deployed to www.rust-lang.org .

www.rust-lang.org's Issues

Dynamically match categories

From #84

enforce npm lints and checks in CI?

this is an open question for release.

Network page

This is the tracking and comment issue for the network page.

languages dropdown in header and footer

Add an above-the-fold image to the home page

The design calls for an above-the-fold image, but does not specify one. We still need to create and add some kind of above-the-fold image. We had discussed the possibility of an illustration of some kind of Rube Goldberg machine, maybe one that includes Ferris, but it hasn't been created yet.

Footer content

What final content should be in the footer?

Feedback on tools stuff (etc)

Tools feels like an area which is going to change a lot this year, so the comments below are what I think the website should look like now, but I imagine we'll want to change later in the year.

On a non-tools-ish note, I think that 'getting started', at least in a very summary form, should be on the front page, and be one of the more prominent items in the navigation (second to last position seems like it is buried, also see below).

I think Cargo should not be a top-level navigation item. I think that Cargo and Rustup should be covered as part of the 'getting started' content, and that can include links out to more detail about Cargo, but it doesn't need to have a dedicated content page on the Rust website.

Rather than have multiple tools pages, I think having a single page is enough. Cargo and Rustup can be covered to a lesser extent as part of 'getting started'. IDEs and debugging will probably want their own pages later in the year, but I don't think they need it now. I think a single page summarising the important Rust tools (categorised like in the current draft) would be better than a set of pages. We can also link out to individual pages, where they exist.

On a general point, I'm not sure what the plan is for the navigation, the current layout seems like there is no prioritisation. I think that "What?", "Production", "Contribute", "Tools", "getting started", and "Learn" should be very visible, "Cargo" shouldn't exist, and the rest should be less visible or lower priority (based on the various user stories I can imagine for first encounters with the website).

i18n / l10n method?

So, yeah, as it seems explicit the website needs to be i18n / l10n, there must be the backend support for that.
Presumbly this is done by using fluent-rs, and so the Fluent Translation Language will be the method of defining translation language.

I can imagine some behaviours which probably be good:

• Translations are placed in different directories (or simply different filenames) for different languages correspondingly
• Replace the text in the webpage template with variables (from Context), and load the variables dynamically (according to the language) in the rust code

There are two main questions before it can really be implemented into action:

1. Where to place the tranlation file?
   1. Should they be placed within the directory of the webpage template; or should they be placed together?
   2. Should the translations (in the same language) be placed in a hierarchical manner, or centralized?
2. How to name the translation text id?
   • When to use underscore _ and when to use hyphen -?
   • Or, either way?

header img should be a background img, not an element

right now the header image is an inline image element, , which pushes all the page content below the fold (on my browser at least)
we want the text to probably overlay this, so let's set it as a background image- potentially throwing some background color and padding on the text so it's viewable with the image behind

[content] governance - include "how to form a new working group"

I'm not sure if this is part of "governance" (#2, #100); I don't see any content about working groups in @aturon's PR right now.

@aturon recently made this comment on internals that I think is a great start for some "how to form a new WG" instructions that I'd love to see on the page that lists all the working groups (which I can't find anything about right now but I hope is coming because I want to link people looking to get involved to such a page)

In general we’re happy for WGs to form organically.

Some WGs have a primary repo in the rust-lang github org, while others have set up their own org. Let me know if you want help with any of that. Please include the standard Rust Code of Conduct and licensing.

We can also have some regular coordination between this WG and the core team, if it would be helpful to pass along issues/concerns/priorities.

WASM page

• code snippet
  • extern crate web
  • do something compute-heavy
  • write results to DOM via web crate
• feature: control and predictability
• feature: small code size
• use case: universal binaries
• use case: wasm in JS
• use case: pure rust web app
• show how easy it is to use together, rather than sell wasm in the first place?
  • sell rust+wasm rather than wasm itself?

Critique

• is this technology used on the web
• is wasm too much jargon? rust targets the web?
• do the boxes link to a more extended page?
• what images would you use?
• how does this improve my product?
• how to make money with this?

Update Embedded Page links to Bookshelf

Currently, the embedded page makes several "Learn More" links to issues on the embedded rust book. See templates/what/embedded/pitch.hbs.

Before launch, these should either be:

• Updated to chapters of the book, if they are written
• The "Learn More" links should be removed.

npm script for style lint

Feedback on Governance page

• We'll ultimately want some more detailed copy about Rust processes and so on. So I think the main governance page should have a short summary, and a link to a more detailed (set of?) pages. Don't have to do that for 1.0 though.

• The roadmap still feels weird to me to have under governance. I personally would love to see a "Where Rust is headed" page that includes both the roadmap and the release timeline info, plus whatever more specific things we'd like to say. (People have long asked for an easy place to get the status of "big features" coming down the pike).

Embedded Page

WG-Embedded

Artifacts

• Visual examples of projects (videos - hobbyist projects)
• Getting started documentation
  • audience: knows some Rust and some embedded
  • can point to extra docs like the Rust book / Discovery book
• Production users / user stories
• Attributes
  • code reuse: drivers that run everywhere. Image constrast

Critique

• might have a different audience (developers or CTOs??)
• Florian thinks this would be a very good thing based on his trip to Embedded World

columns headers and text should be aligned

currently the headers and texts of each column aren't aligned due to the height of the icon! we'll want to account for that and have the headers and text all line up across columns

Feedback on homepage and getting started/downloads

The page that most rustaceans will visit at least once will be the one that tells them how to install Rust (maybe worth pulling stats from current site?). However, currently the "get started" on https://rust-wubwub.herokuapp.com/production on the far right of the top bar so you have to scan some text to find the right link (putting aside colours since those will change).

Note that as it stands, there are two slightly different purposes it looks like "getting started" serves on the prototype website: 1) "I know nothing about Rust, tell me what to do", 2) "I know what to do after installing Rust, but please get me there". Some sites split these two things up, I don't particularly have a preference, other than at least one of these things being reasonably obvious.

I did a census of some existing work. "getting started" below is used in the sense of point 1 above, so language tours don't count. Please note: I'm not saying that any of these are right! I just figured I'd gather some data.

Programming languages:

• https://www.python.org/ - "downloads" is the second item on the most obvious menu on the page, "getting started" is the most obvious item just below the fold and then there's another "downloads" link just to the right
• https://www.ruby-lang.org/en/ - the most obvious link on the page is the "download ruby" link, and it's also the first item in the top bar. "Get started" is a small section in a somewhat subtle sidebar.
• https://nodejs.org/en/ - two download links appear with great emphasis in the middle of the page, and a downloads link also appears in the top bar. No specific "get started" link, just docs.
• http://www.php.net/ - downloads are the first item on the top bar and the top section of the sidebar. No specific "get started" link, just docs.
• https://golang.org/ - "download" is the most prominent link on the page. No obvious "getting started".
• https://dlang.org/ - "install" (i.e. download) is most prominent link on the page, and is also present in the top bar. No obvious "getting started".
• https://www.typescriptlang.org/ - "download" is the most prominent link on the page and also appears in the top bar. "Quick start" is not the same as "getting started" in the sense I've described it above - actual "getting started" is a bit tucked away.
• https://www.haskell.org/ - "downloads" is the most prominent non-video link in the page (but there's not much of a contest) being at the beginning of the top bar. Downloads page doubles as "getting started".
• https://elixir-lang.org/ - "install" is second item on top bar. There's a "learning" link in the top bar (which can then lead you to the "getting started" page) or a direct "getting started" link in the intro prose.
• http://elm-lang.org/ - "install" is second most prominent link on page. "Install" page doubles as "getting started".

Non programming languages:

• https://code.visualstudio.com/ - there are two "download" links, both eye-catching and one of them in the most prominent spot on the page. Downloads page doubles as "getting started".
• https://www.sublimetext.com/ - "download" link first in top bar, and also as most prominent link on the page. No obvious "getting started"
• https://reactjs.org/ - "get started" is the most prominent link on the page. "Installing" is somewhat concealed in the sidebar on the "get started" page.
• https://angular.io/ (new site?) - "get started" is the most prominent link on the page, downloading is a step within that page.
• https://www.vagrantup.com/ - "get started" is the most prominent link on the page, closely followed by "download"
• https://www.drupal.org/ - "download" is the second most prominent link on the page (though it has a different name) and is also present under the more obvious name as first item in the top bar. No obvious "get started"
• https://www.djangoproject.com/ - "get started" is the most obvious link on the page, followed by "download". "download" is also the second item in the top bar
• http://rubyonrails.org/ - bit of an odd one, the most obvious button on the page doesn't actually take you anywhere useful. There is a "learn it" link in the intro paragraph, and a "guides" link as second item in the top bar, both of which take you to places to help you get started. Downloading is a step within the "get started" guide.

One thing that I noticed while doing this census was the number of "try me out online" links and/or live editors for the programming languages.

Event page

The page of the event page.

replace sass dependency with a node/rust one

currently this site is a bit comlpicated because it requires a ruby, node, and rust environment. this is primarily due to using sass (the rubygem) to compile our scss.

to correct this we could do 2 things:

node toochain:

• keep the npm depedency
• include https://www.npmjs.com/package/node-sass as a dependency in our package.json
• create a custom script to run sass, e.g.

{
   "scripts": {
      "build-scss": "sass <path to files> etc etc"
   }
}

rust toolchain:

• vendor the npm dependency
• use something like https://github.com/compass-rs/sass-rs to compile sass programmatically when the server is started

assuming that sass feature coverage is good enough with the lib we pick, i would prefer a rust solution. what do you think @lbaillie ?

Fix unusual hamburger menu rendering on Chrome

Figure out why the hamburger menu looks like this on Chrome when the browser width is narrow:

While it looks totally as expected on mobile (also on Chrome):

The former image's hamburger menu should look just like the latter's.

Getting Started page

[qa] test accessibility

https://github.com/dequelabs/axe-core

i've always used this tool, but i am open to any tool ya'll prefer

do a pass after stage 1 content

Properly place those transparent background Rust logos

From the design, the background logos should look like this (with the right side being where the viewable area ends, no overhang):

But I can't seem to figure out how to place them like that without pushing the edge of the viewable space over to the far right of the logo, like so:

There is a similar issue with the logo at the bottom of the home page pushing past the bottom of the page so there's a bunch of white space at the bottom, in a similar way.

setup travis ci

we're on nightly and need to know if we're breaking, this will help

make sure every panel has an id so it's linkable

Icon for favicon.ico

So, after adding 404, now the /favicon.ico is missing again :) :(

What is supposed to be the favicon.ico then? The Rust logo?

Is this supposed to be part of the route /favicon.ico, or somewhere else?

twitter card

[content] add IRR to community page

we should link to IRR but i have no idea where at the moment, this is to remind us to do it

columnsets not centered on page

seems like there's extra space on the left hand side!

don't hardcode node_modules paths

if we use third party client deps via npm we'll want to use a bundler to avoid hardcoding a node_modules path. happy to help on this!

Ensure that nav and footer styles & content work as expected on all pages

This appears to be an issue with nested templates, such as /what/release-timeline:

Also /learn/getting-started:

[content] Point out on docs page that all documentation is available locally

This is a super handy tip, especially in areas where internet is sporadic. rustup doc will give you access to the whole bookshelf.

It may also be worth considering packaging the website if we plan to have useful content directly there.

Link "download" button on home page

It currently doesn't link to anything but probably should link to a download page or something similar (the getting started page? something else?).

Unified Chinese l10n

This is something from a Chinese speaker and Chinese people perspective, wishing to join different (geo) area Chinese (language) groups (or, at least, minimize the artificial separation), after #96.

As non-Chinese speakers may not know, the so-called Simplified Chinese and Traditional Chinese are directly convertable for most cases, where the characters are 1-1 mappings; Simplified Chinese has 2000+ characters different from Traditional Chinese, while the total number of Chinese character is over ten thousand.
The only tricky parts are:

1. There are a few (tens) characters with 1-n mapping (Simplified-Traditional); very few (3, IIRC) n-1 mapping (Simplified-Traditional) characters (see this table if you can read Chinese)
2. Different geographical regions may (but not always) have different translations towards the same English word

Luckily there is an FLOSS project named OpenCC dedicated for solving these problems. It's performance (correctness?) is the best among all the Simplified-Traditional convert systems I know of. I also found a rust binding (and an incomplete (?) rust implementation, which I don't think I would advice).

So, I suppose it's possible to have a trunk unified Chinese translation for the website, and use OpenCC to automatically convert between different variants. For the (potential) cases where OpenCC can't solve by default, adding variant-specific variables (to FTL) should be enough.

This would save huge amount of duplicated human effort, since people may be dealing with China mainland, Taiwan, Hong Kong, Singapore, ... All of them will have most of the translations lying in the 1-1 mapping parts.

What's your idea?

I can try to combine them for the implementation if agreed by most, to see if it's feasible.

body text should have font

looks like it's just sans-serif at the moment

Learn page

light purple rust logo has zindex above text content

probably want to set it such that this is below all other elements on the page

404 Page

Mentioned in #84

Community page: highlight big things better

On the community page, we'd like to highlight three main things:

• Meetup
• Events
• RustBridge

This is a reminder for me to make it happen.

100% width makes text hard to read

let's throw the content of the page in a container that maintains ~60-80% width so that it's easier to consume at full window width, especially on large monitors

remove unused import

warning: unused import: `std::io`
  --> src/main.rs:10:5
   |
10 | use std::io;
   |     ^^^^^^^
   |
   = note: #[warn(unused_imports)] on by default

contributing doc

add sad ferris to 404 page

thanks for @renyuneyun we have an awesome 404 page now:

i think it'd be cute to put the sad ferris next to this 404. you can find assets for ferris here: http://www.rustacean.net/

maybe this one?
https://www.rust-lang.org/logos/error.png

Quotes from people?

In addition to having quotes from companies using Rust, it'd be great to have quotes from individuals about what they think about Rust-- I'm thinking some things from http://dtrace.org/blogs/bmc/2018/09/18/falling-in-love-with-rust/ if Bryan is willing :)

unused variable warning

warning: unused variable: `e`
  --> src/category.rs:40:17
   |
40 |             Err(e) => Err(RawStr::from_str("url illegal in utf-8")),
   |                 ^ help: consider using `_e` instead
   |
   = note: #[warn(unused_variables)] on by default

hey @renyuneyun - i get this warning on your category work :) - to fix it we can either add an underscore to the unused variable, e.g. Err(_e) or we can try to use that value in the error message! either one works for me, though i think i might prefer trying to use the error value some how!

feel free to ask questions here :)

Fix "Embedded" icon svg

It's supposed to be a little TV/computer monitor but only part of it shows up:

It's supposed to look like this:

The SVG code was taken directly from the Sketch file, just like all the other icons, so I'm not sure why this one is odd.

Implementation Details & TODOs

I am using this issue to keep tabs on implementation progress! It is mostly for my own benefit but if you see a TODO that's not yet TODONE and you think you can help, let me know!

General

#29 fix nav and footer styles so they work on all pages (some nested templates are especially borked)

• Heroku asset pipeline shenanigans (make it so the CSS and images actually get to Heroku)
• add correct fonts
  #37 figure out why tab navigation doesn't seem to work at all
• prettify nav dropdown styling on mobile

Home
#38 figure out why only the left side of the "embedded" svg renders

• resize svgs
• make those purple behind-the-text boxes aligned properly and not extending all the way to the right (on Firefox)
• make the right side of the page not weird (it extends past the window in odd ways)
  #39 figure out how to properly place those transparent Rust logos without causing everything else to be b0rken
• create/add above-the-fold placeholder image
  #40 create/add actual above-the-fold image
• finish "Rust in Production" section
• add nicer purple Rust logo to background in "Rust in Production" section
• finish "Get Involved" section
  #41 add correct content to footer and style more nicely
  #42 make the download link actually link to something

Tools
Assigned to: @efelger

Getting Started
Assigned to: @technomoda

Fix all linter errors

If you run the linter right now, you'll see a bunch of linter errors. Some of these things are actual errors that need to be fixed, and some are just rules that need to be ignored (mainly the at-rule-no-unknown rule needs to have some ignoreAtRules added for SASSy things like mixin and import).

It may be helpful to look at the Stylelint documentation.

Fix all the things!

Related: #47

Keyboard navigation does not work as expected

If you try to navigate using the keyboard, you should be able to tab through the elements until you reach a navigation menu item, then you should be able to hit the space bar to expand that menu option. However, hitting the space bar does not seem to work here (it just scrolls halfway down the page on Chrome) and on Firefox tab navigation does not seem to work at all (hitting tab doesn't seem to bring you to any of the navigation items).