update website to include logo/favicon (facebook#29)

Summary:
This commit makes use of the SVG assets that were sitting in `assets/Final/SVG` and features them on the website so there is a proper logo and favicon. Here is how things look in dark and light themes.

I'm not particularly attached to any of the specifics of this design, so the maintainers/reviewers should feel free to change it however they see fit. My primary motivation is having proper branding on the site (particularly the favicon so I can find the page easily among all my Chrome tabs!).

![Screenshot from 2024-05-27 11-08-11](https://github.com/facebook/dotslash/assets/655869/cada26e4-01d9-444a-a036-0eba40e793db)

![Screenshot from 2024-05-27 11-09-20](https://github.com/facebook/dotslash/assets/655869/543e32de-640c-4836-85cb-0acae1453755)

![Screenshot from 2024-05-27 11-09-30](https://github.com/facebook/dotslash/assets/655869/91e250f3-698c-400e-902c-0056da7e23e2)

![Screenshot from 2024-05-27 11-09-37](https://github.com/facebook/dotslash/assets/655869/f7b2b2e2-d94b-4713-946f-7d3903f2cdc1)

While here, I also cleared out a number of stock images from the original Docusaurus template in `static/img` since they are unnecessary / could create confusion.

Pull Request resolved: facebook#29

Reviewed By: dtolnay

Differential Revision: D57847383

Pulled By: zertosh

fbshipit-source-id: 2dd44fa7f63f54729aa4150aa859d66c4d8ab042

website/docusaurus.config.js

@@ -15,7 +15,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'throw',
   trailingSlash: true,
-  // TODO: add a favicon once we have an approved logo
+  favicon: 'img/favicon-on-black.svg',
   organizationName: 'facebook',
   projectName: 'dotslash',
   customFields: {
@@ -49,12 +49,19 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
     ({
       navbar: {
         title: 'DotSlash',
+        logo: {
+          alt: 'DotSlash logo',
+          src: 'img/favicon-on-black.svg',
+          style: {
+            'border-radius': '5px',
+          }
+        },
         items: [
           {
             type: 'doc',
             docId: 'index',
             position: 'left',
-            label: 'Introduction',
+            label: 'Docs',
           },
           {
             href: 'https://github.com/facebook/dotslash',

website/src/css/custom.css

@@ -10,7 +10,10 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #008F11;
+  /* Overrides introduced to match logo. */
+  --ifm-hero-background-color: #343434;
+
+  /* Original overrides from Docusaurus template */
   --ifm-color-primary-dark: rgb(33, 175, 144);
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
@@ -20,13 +23,29 @@
   --ifm-code-font-size: 95%;
 }
 
+.table-of-contents__link:hover {
+    color: var(--ifm-link-color);
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
 
+:root[data-theme='light'] {
+  --ifm-color-primary: #343434;
+  --ifm-link-color: #14C7B8;
+  --ifm-toc-link-hover-color: #14C7B8;
+  --ifm-navbar-link-hover-color: #14C7B8;
+}
+
+.hero--primary {
+  --ifm-hero-background-color: #343434;
+  --ifm-hero-text-color: #fff;
+}
+
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }

website/src/pages/index.js

@@ -15,7 +15,11 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <img
+            src="img/DotSlash_Final_brandmark_color-and-white-on-black.svg"
+            alt="DotSlash logo"
+            width="400"
+             />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link