refactor(website): minor fixes and improvements (#7119)

* refactor(website): minor fixes and improvements

* Some fixes

* Round all the corners in browser window

* Add rounded bottom corners to browser window

website/docs/typescript-support.md

@@ -112,11 +112,7 @@ The best IDEs (VS Code, WebStorm, IntelliJ...) will provide a nice auto-completi
 
 By default, the Docusaurus TypeScript config does not type-check JavaScript files.
 
-The `// @ts-check` comment ensures the config file is properly type-checked when running:
+The `// @ts-check` comment ensures the config file is properly type-checked when running `npx tsc`.
-
-```bash npm2yarn
-npx tsc
-```
 
 :::
 

website/docusaurus.config.js

@@ -59,7 +59,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
 const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
 
 const TwitterSvg =
-  '<svg style="fill: #1DA1F2; vertical-align: middle;" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>';
+  '<svg style="fill: #1DA1F2; vertical-align: middle; margin-left: 3px;" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -360,7 +360,7 @@ const config = {
       },
       announcementBar: {
         id: 'announcementBar-2', // Increment on change
-        content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus" >Twitter</a> ${TwitterSvg}`,
+        content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
       },
       prism: {
         // We need to load markdown again so that YAML is loaded before MD

website/src/components/BrowserWindow/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
@@ -28,7 +29,9 @@ export default function BrowserWindow({
           <span className={styles.dot} style={{background: '#fbbe3c'}} />
           <span className={styles.dot} style={{background: '#58cb42'}} />
         </div>
-        <div className={styles.browserWindowAddressBar}>{url}</div>
+        <div className={clsx(styles.browserWindowAddressBar, 'text--truncate')}>
+          {url}
+        </div>
         <div className={styles.browserWindowMenuIcon}>
           <div>
             <span className={styles.bar} />

website/src/components/BrowserWindow/styles.module.css

@@ -7,8 +7,7 @@
 
 .browserWindow {
   border: 3px solid var(--ifm-color-emphasis-200);
-  border-top-left-radius: var(--ifm-global-radius);
+  border-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   box-shadow: var(--ifm-global-shadow-lw);
   margin-bottom: var(--ifm-leading);
 }
@@ -77,5 +76,12 @@
 }
 
 .browserWindowBody {
+  background-color: var(--ifm-background-color);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
   padding: 1rem;
 }
+
+.browserWindowBody *:last-child {
+  margin-bottom: 0;
+}

website/src/components/Tweet/index.tsx

@@ -40,20 +40,20 @@ export default function Tweet({
             height="48"
             loading="lazy"
           />
-          <div className="avatar__intro">
+          <div className={clsx('avatar__intro', styles.tweetMeta)}>
-            <div className={styles.tweet}>
+            <strong className="avatar__name">{name}</strong>
-              <div>
+            <span>@{handle}</span>
-                <strong>{name}</strong>{' '}
-                <span className={styles.tweetMeta}>@{handle}</span>
-              </div>
-            </div>
-            <div className="margin-bottom--sm">{content}</div>
-            <a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
-              {date}
-            </a>
           </div>
         </div>
       </div>
+
+      <div className={clsx('card__body', styles.tweet)}>{content}</div>
+
+      <div className="card__footer">
+        <a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
+          {date}
+        </a>
+      </div>
     </div>
   );
 }

website/src/components/Tweet/styles.module.css

@@ -9,7 +9,10 @@
   font-size: 15px;
 }
 
-.tweetMeta,
+.tweetMeta {
-.tweetMeta:hover {
   color: var(--ifm-color-emphasis-700);
 }
+
+.tweetMeta strong {
+  color: var(--ifm-font-color-base);
+}

website/src/data/tweets.tsx

@@ -37,7 +37,7 @@ const TWEETS: TweetItem[] = [
     name: 'Maël',
     date: 'Jan 20, 2021',
     avatar:
-      'https://pbs.twimg.com/profile_images/1311259425949261825/7hPZqoJd_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1497225853931040769/5mXZAHFR_400x400.jpg',
     content: (
       <>
         I&apos;ve used Docusaurus for two websites this year, and I&apos;ve been
@@ -179,7 +179,7 @@ const TWEETS: TweetItem[] = [
     name: 'swyx',
     date: 'Jul 23, 2021',
     avatar:
-      'https://pbs.twimg.com/profile_images/1456506127961640962/iM2Hf8du_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1510319731466993664/tGoqnzGK_400x400.jpg',
     content: (
       <>
         Happy to share Temporal&apos;s first open source sponsorship — of{' '}

website/src/pages/index.tsx

@@ -54,7 +54,7 @@ function HeroBanner() {
             <Translate>Get Started</Translate>
           </Link>
           <Link className="button button--info" to="https://docusaurus.new">
-            <Translate>Playground</Translate>
+            <Translate>Try a Demo</Translate>
           </Link>
           <span className={styles.indexCtasGitHubButtonWrapper}>
             <iframe
@@ -194,8 +194,8 @@ function Feature({
       <img
         className={styles.featureImage}
         alt={feature.title}
-        width={feature.image.width}
+        width={Math.floor(feature.image.width)}
-        height={feature.image.height}
+        height={Math.floor(feature.image.height)}
         src={withBaseUrl(feature.image.src)}
         loading="lazy"
       />

website/src/pages/styles.module.css

@@ -106,6 +106,7 @@
   float: right;
   margin-top: 20px;
   padding: 0 20px 20px;
+  height: auto;
 }
 
 .indexCtas {
@@ -171,17 +172,20 @@
   }
 }
 
-.tweetsSection {
-  margin-top: -2rem;
-}
-
-.tweetsSection > :global(.col) {
-  padding-top: 2rem;
-  margin-top: -2rem;
-}
-
 .tweetsSection > :global(.col) > * {
-  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 996px) {
+  .tweetsSection > :global(.col:last-child) > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 997px) {
+  .tweetsSection > :global(.col) > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
 /* Used to test CSS insertion order */