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
2025-05-02 11:47:23 +02:00 · 2022-04-07 03:33:52 +03:00 · 2022-04-07 03:33:52 +03:00 · c669c103f9
commit c669c103f9
parent 49424f5057
9 changed files with 50 additions and 38 deletions
--- a/website/docs/typescript-support.md
+++ b/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:
-
-```bash npm2yarn
-npx tsc
-```
+The `// @ts-check` comment ensures the config file is properly type-checked when running `npx tsc`.

 :::

--- a/website/docusaurus.config.js
+++ b/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
--- a/website/src/components/BrowserWindow/index.tsx
+++ b/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} />
--- a/website/src/components/BrowserWindow/styles.module.css
+++ b/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-top-right-radius: var(--ifm-global-radius);
+  border-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;
+}
--- a/website/src/components/Tweet/index.tsx
+++ b/website/src/components/Tweet/index.tsx
@ -40,20 +40,20 @@ export default function Tweet({
            height="48"
            loading="lazy"
          />
-          <div className="avatar__intro">
-            <div className={styles.tweet}>
-              <div>
-                <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 className={clsx('avatar__intro', styles.tweetMeta)}>
+            <strong className="avatar__name">{name}</strong>
+            <span>@{handle}</span>
          </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>
  );
 }
--- a/website/src/components/Tweet/styles.module.css
+++ b/website/src/components/Tweet/styles.module.css
@ -9,7 +9,10 @@
  font-size: 15px;
 }

-.tweetMeta,
-.tweetMeta:hover {
+.tweetMeta {
  color: var(--ifm-color-emphasis-700);
 }
+
+.tweetMeta strong {
+  color: var(--ifm-font-color-base);
+}
--- a/website/src/data/tweets.tsx
+++ b/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{' '}
--- a/website/src/pages/index.tsx
+++ b/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}
-        height={feature.image.height}
+        width={Math.floor(feature.image.width)}
+        height={Math.floor(feature.image.height)}
        src={withBaseUrl(feature.image.src)}
        loading="lazy"
      />
--- a/website/src/pages/styles.module.css
+++ b/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 */