docs: overhaul branding and add new logo #6147

JoshuaKGoldberg · 2022-12-01T23:33:54Z

PR Checklist

Addresses an existing open issue: fixes Docs: Branding guide #5910
That issue was marked as accepting prs
Steps in CONTRIBUTING.md were taken

Overview

Brings in the new logo we settled on internally
Standardizes the name as "typescript-eslint", not "TypeScript ESLint" or "TypeScript-ESLint"
Standardizes the slogan:
- Uses that instead of which - which I am barely 51% confident on [Grammarly which-vs-that explainer]
- Mentions Prettier too (people should know!)

nx-cloud · 2022-12-01T23:33:56Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4141f71. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 47 targets

Sent with 💌 from NxCloud.

typescript-eslint · 2022-12-01T23:33:57Z

Thanks for the PR, @JoshuaKGoldberg!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

netlify · 2022-12-01T23:33:59Z

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	`4141f71`
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/63921f4f4c36110009856095
😎 Deploy Preview	https://deploy-preview-6147--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

JamesHenry

I love the look of the final form of the new logo now, great stuff!

Uses that instead of which - which I barely 51% confident as [Grammarly which-vs-that explainer]

Wow this explainer is actually really good and I genuinely wasn't familiar with this technicality between them, I think I'd always based it on "feel".

Standardizes the name as "TypeScript-ESLint", not "typescript-eslint" or "TypeScript ESLint"

This one really caught me off guard, it would have best to have discussed this first, I haven't seen it mentioned in our chats at all.

The name of the project is typescript-eslint and it always has been. That's the reason why this PR has had to make so many changes.

The onus would be on any proposed name change to justify why it would be better, but nevertheless here are some reasons why typescript-eslint has always been the choice:

It simply has to be written as typescript-eslint in so many important contexts
- domain name
- npm
- github
  ...so having an alternate casing of the same words is of questionable value and just creates noise.
TypeScript is how the TypeScript project is written, ESLint is how the ESLint project is written, so combining them together with a dash actually makes it less clear that a separate unique project is being referenced. Having typescript-eslint helps differentiate it in a sentence.

Please let's discuss these things going forward to avoid confusion 🙏

Again, love the new logo and thanks for improving my grammar!

JoshuaKGoldberg · 2022-12-02T15:25:03Z

Please let's discuss these things going forward to avoid confusion 🙏

I was hoping this PR would be the discussion! 😄

Your points make sense - I'll switch this to prefer typescript-eslint, and add that explainer in the docs. Thanks!

Josh-Cena · 2022-12-02T15:34:16Z

domain name

npm

github

These places all use all-lowercase by convention, but that might not be the canonical name of the product. ESLint uses all-lowercase in these three places as well; TypeScript uses all-lower in the former two, but that's only because Microsoft is weird and they like using CamelCase even in GitHub repos.

JoshuaKGoldberg · 2022-12-02T15:41:24Z

.markdownlint.json

-      "ESLint",
-      "typescript-eslint"
+      "typescript-eslint",
+      "TypeScript"


No actual changes here, just sorting. It happens automatically sometimes anyway.

JoshuaKGoldberg · 2022-12-02T15:42:36Z

packages/website/src/components/FinancialContributors/Sponsors/styles.module.css

@@ -19,6 +19,7 @@
 }

 .sponsorsTier img {
+  background: white;


Tangentially related: I noticed sponsor logos such as Nrwl weren't showing up in dark mode. Branding!

JoshuaKGoldberg · 2022-12-02T16:19:21Z


<--- Last few GCs --->

[1980:0x6b6a320]   181736 ms: Scavenge 2010.7 (2081.0) -> 2006.1 (2081.0) MB, 20.0 / 0.0 ms  (average mu = 0.515, current mu = 0.414) allocation failure; 
[1980:0x6b6a320]   181765 ms: Scavenge 2011.7 (2081.0) -> 2007.7 (2081.0) MB, 8.2 / 0.0 ms  (average mu = 0.515, current mu = 0.414) allocation failure; 
[1980:0x6b6a320]   181823 ms: Scavenge 2013.9 (2081.0) -> 2009.6 (2097.0) MB, 11.6 / 0.0 ms  (average mu = 0.515, current mu = 0.414) allocation failure; 


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb6e500 node::Abort() [/opt/hostedtoolcache/node/18.12.1/x64/bin/node]

Ohhh boy!

JamesHenry · 2022-12-03T08:11:43Z

Ok perfect, it's looking good!

Please could we update these two (the navbar and the hero):

Maybe for the hero we could add the logo in there to accompany the typescript-eslint? Or even have it instead of the words? 👀 (given it's already in the upper right)

I'm totally fine if we want to bump a hero update to a follow up though and spend some more time on it...

Other minor thing on the home page:

I think that's our old logo rather than the actual TS logo (i.e. I don't think that's their color)

JamesHenry · 2022-12-03T08:15:17Z

I know not caused by this PR, but seems strange that the section get started buttons are skewed to the left?

JoshuaKGoldberg · 2022-12-03T08:28:30Z

for the hero we could add the logo in there

Hmm yeah +1. I think I'd like to do that as a followup. There are a few different treatments we could try and I'm not solid on which one is best. 🤔

our old logo rather than the actual TS logo

Ha! Yes. Changing.

skewed

Blurgh yeah I haven't been able to figure this one out: #6081. Thanks for the bump - pinging in that issue.

JamesHenry · 2022-12-03T09:39:51Z

How come this is just a black shape? packages/website/static/img/favicon/safari-pinned-tab.svg

packages/website/static/img/favicon/safari-pinned-tab.svg

JoshuaKGoldberg · 2022-12-03T09:57:38Z

packages/website/docusaurusConfig.ts

@@ -66,7 +66,7 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = {
  ],
  image: 'img/logo-twitter-card.png',
  navbar: {
-    title: 'TypeScript ESLint',
+    title: 'typescript-eslint',


@JamesHenry @Josh-Cena this is why I'd gone towards solidifying as TypeScript-ESLint at first. IMO it looks a little odd to have the project name be lower-kebab-case on the homepage:

My logic was:

I think it's good to keep the title casing & general phrasing consistent where possible

For a project homepage, it makes sense to keep things in title case

The hyphen is useful for showing it's a single project

Therefore, TypeScript-ESLint is the logical conclusion

Comment reference to counterpoints: #6147 (review)

Thoughts?

We can make the hero prettier in general in a follow up as we mentioned

webpack and many others have the same approach, but they mostly combine the word with the logo, we can do the same

Yeah I've started playing with this locally and really like putting that logo there. I'll throw up a few examples soon 😄

JamesHenry · 2022-12-03T11:06:44Z

What is jest seeing here? 🤔

If I do a copy of the first line and "find on page" I get 2 results, the 2 lines appear identical in the github diff.

Maybe indentation or even invisible unicode chars?

packages/typescript-estree/tests/lib/__snapshots__/parse.test.ts.snap

Josh-Cena · 2022-12-05T17:24:28Z

FWIW, I like either TypeScript-ESLint or TypeScript ESLint much better than all lower, simply because we've used it for ever, and it feels confusing to switch (also considering that users may have to expand their spell checker dictionary!)... The only motivation is because there are contexts where lowercase is inevitable, but that doesn't feel convincing enough to me, because that in essence means all projects need to be lowercase, which isn't reality.

JamesHenry · 2022-12-05T17:29:15Z

@Josh-Cena The project's name was never in scope for changing as part of this work. One of the few luxuries afforded to me as the project's creator is that I get to decide what it is called :)

we've used it for ever

Likewise with this... it simply isn't the case. I called the project typescript-eslint, so very literally that is what it has been called "for ever"

LICENSE

docs/maintenance/BRANDING.md

branding

873880c

JoshuaKGoldberg force-pushed the branding branch from f6a22f8 to 873880c Compare December 1, 2022 23:35

Fixed remaining markdownlint violations

965d6c9

JoshuaKGoldberg marked this pull request as ready for review December 2, 2022 01:12

JamesHenry requested changes Dec 2, 2022

View reviewed changes

Switch back to typescript-eslint

7f5a66e

JoshuaKGoldberg commented Dec 2, 2022

View reviewed changes

Standardize backticks before monorepo

8eaaa8b

JoshuaKGoldberg commented Dec 2, 2022

View reviewed changes

JoshuaKGoldberg requested a review from JamesHenry December 2, 2022 15:42

JoshuaKGoldberg added 2 commits December 2, 2022 11:28

Merge branch 'main' into branding

d22771d

Trim down reasoning

48e1134

Fixed TypeScript logo blue

eba44fb

JoshuaKGoldberg commented Dec 3, 2022

View reviewed changes

packages/website/static/img/favicon/safari-pinned-tab.svg Show resolved Hide resolved

JoshuaKGoldberg and others added 3 commits December 3, 2022 04:43

Sentence

a37677a

Replace: TypeScript ESLint -> typescript-eslint

89eca4f

chore: update safari pinned tab icon

c05228d

JoshuaKGoldberg commented Dec 3, 2022

View reviewed changes

JamesHenry previously approved these changes Dec 3, 2022

View reviewed changes

JoshuaKGoldberg commented Dec 4, 2022

View reviewed changes

packages/typescript-estree/tests/lib/__snapshots__/parse.test.ts.snap Outdated Show resolved Hide resolved

Fix snapshot

c62524d

JoshuaKGoldberg dismissed JamesHenry’s stale review via c62524d December 4, 2022 05:41

JamesHenry previously approved these changes Dec 4, 2022

View reviewed changes

bradzacher previously approved these changes Dec 5, 2022

View reviewed changes

LICENSE Show resolved Hide resolved

docs/maintenance/BRANDING.md Outdated Show resolved Hide resolved

docs/maintenance/BRANDING.md Show resolved Hide resolved

Merge branch 'main'

10efa72

JoshuaKGoldberg dismissed stale reviews from bradzacher and JamesHenry via 10efa72 December 8, 2022 17:29

bikeshed: ts-eslint

4141f71

JoshuaKGoldberg merged commit 47241bb into typescript-eslint:main Dec 8, 2022

JoshuaKGoldberg deleted the branding branch December 8, 2022 20:08

JoshuaKGoldberg mentioned this pull request Dec 12, 2022

Website: Work the logo into the homepage #6200

Closed

2 tasks

jerone mentioned this pull request Dec 14, 2022

docs: fix contributors spelling #6214

Merged

3 tasks

github-actions bot locked as resolved and limited conversation to collaborators Dec 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: overhaul branding and add new logo #6147

docs: overhaul branding and add new logo #6147

JoshuaKGoldberg commented Dec 1, 2022 •

edited

Loading

nx-cloud bot commented Dec 1, 2022 •

edited

Loading

typescript-eslint bot commented Dec 1, 2022

netlify bot commented Dec 1, 2022 •

edited

Loading

JamesHenry left a comment

JoshuaKGoldberg commented Dec 2, 2022

Josh-Cena commented Dec 2, 2022

JoshuaKGoldberg Dec 2, 2022

JoshuaKGoldberg Dec 2, 2022

JoshuaKGoldberg commented Dec 2, 2022

JamesHenry commented Dec 3, 2022 •

edited

Loading

JamesHenry commented Dec 3, 2022

JoshuaKGoldberg commented Dec 3, 2022

JamesHenry commented Dec 3, 2022

JoshuaKGoldberg Dec 3, 2022

JamesHenry Dec 3, 2022

JamesHenry Dec 3, 2022

JamesHenry Dec 3, 2022

JoshuaKGoldberg Dec 3, 2022

JamesHenry commented Dec 3, 2022

Josh-Cena commented Dec 5, 2022 •

edited

Loading

JamesHenry commented Dec 5, 2022

docs: overhaul branding and add new logo #6147

docs: overhaul branding and add new logo #6147

Conversation

JoshuaKGoldberg commented Dec 1, 2022 • edited Loading

PR Checklist

Overview

nx-cloud bot commented Dec 1, 2022 • edited Loading

☁️ Nx Cloud Report

typescript-eslint bot commented Dec 1, 2022

netlify bot commented Dec 1, 2022 • edited Loading

✅ Deploy Preview for typescript-eslint ready!

JamesHenry left a comment

Choose a reason for hiding this comment

JoshuaKGoldberg commented Dec 2, 2022

Josh-Cena commented Dec 2, 2022

JoshuaKGoldberg Dec 2, 2022

Choose a reason for hiding this comment

JoshuaKGoldberg Dec 2, 2022

Choose a reason for hiding this comment

JoshuaKGoldberg commented Dec 2, 2022

JamesHenry commented Dec 3, 2022 • edited Loading

JamesHenry commented Dec 3, 2022

JoshuaKGoldberg commented Dec 3, 2022

JamesHenry commented Dec 3, 2022

JoshuaKGoldberg Dec 3, 2022

Choose a reason for hiding this comment

JamesHenry Dec 3, 2022

Choose a reason for hiding this comment

JamesHenry Dec 3, 2022

Choose a reason for hiding this comment

JamesHenry Dec 3, 2022

Choose a reason for hiding this comment

JoshuaKGoldberg Dec 3, 2022

Choose a reason for hiding this comment

JamesHenry commented Dec 3, 2022

Josh-Cena commented Dec 5, 2022 • edited Loading

JamesHenry commented Dec 5, 2022

JoshuaKGoldberg commented Dec 1, 2022 •

edited

Loading

nx-cloud bot commented Dec 1, 2022 •

edited

Loading

netlify bot commented Dec 1, 2022 •

edited

Loading

JamesHenry commented Dec 3, 2022 •

edited

Loading

Josh-Cena commented Dec 5, 2022 •

edited

Loading