chore: Website UI Improvements

README.md

@@ -1,9 +1,7 @@
-# react-native-owl [![github][github-image]][github-url]
+# react-native-owl [![github][github-image]][github-url] [![npm][npm-image]][npm-url] [![docs][docs-image]][docs-url]
 
 > **Work In Progress**: Visual regression testing for React Native
 
-
-
 ## Installation
 
 ```sh
@@ -12,14 +10,14 @@ yarn add -D react-native-owl
 npm install -D react-native-owl
 ```
 
-## 📃 [Documentation](https://formidable.com/open-source/react-native-owl/docs/)
+## 📃 [Documentation](https://formidable.com/open-source/react-native-owl/)
 
 The documentation contains everything you need to know about `react-native-owl`, and contains several sections in order of importance
 when you first get started:
 
 - **[Getting started](https://formidable.com/open-source/react-native-owl/docs/introduction/getting-started)** — contains the "Getting Started" guide.
-- **[Configuration](https://formidable.com/open-source/react-native-owl/introduction/config-file)** — explains all the configuration options for `react-native-owl`.
-- **[Running on CI](https://formidable.com/open-source/react-native-owl/advanced/running-ci)** — example GitHub Action to run react-native-owl on CO.
+- **[Configuration](https://formidable.com/open-source/react-native-owl/docs/introduction/config-file)** — explains all the configuration options for `react-native-owl`.
+- **[Running on CI](https://formidable.com/open-source/react-native-owl/docs/advanced/running-ci)** — example GitHub Action to run react-native-owl on CO.
 
 _You can find the raw markdown files inside this repository's `docs` folder._
 
@@ -29,3 +27,7 @@ _You can find the raw markdown files inside this repository's `docs` folder._
 
 [github-image]: https://github.com/FormidableLabs/react-native-owl/workflows/Run%20Tests/badge.svg
 [github-url]: https://github.com/FormidableLabs/react-native-owl/actions
+[npm-image]: https://img.shields.io/npm/v/react-native-owl
+[npm-url]: https://www.npmjs.com/package/react-native-owl
+[docs-image]: https://img.shields.io/badge/docs-visit%20site-blue
+[docs-url]: https://formidable.com/open-source/react-native-owl/

docs/advanced/running-ci.md

@@ -4,8 +4,6 @@ sidebar_position: 1
 
 # Running on CI
 
-This is a placeholder.
-
 :::info
 
 With visual regression testing, it is all about **consistency**. Please make sure that you use the same simulator across environments. ie. Use the same emulator to generate the baseline images and the same (model) one on CI so that the library can compare the screenshots.

docs/api/matchers.md

@@ -4,15 +4,13 @@ sidebar_position: 2
 
 # Matchers
 
-This is a placeholder.
-
 ### toMatchBaseline(name: string)
 
 This custom matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method.
 
 #### Example
 
-```js
+```js {7}
 import { takeScreenshot } from 'react-native-owl';
 
 describe('App.tsx', () => {
@@ -26,4 +24,4 @@ describe('App.tsx', () => {
 
 The first time this test is run, or when run with the `--update` flag, the `.toMatchBaseline` expectation will always be successful.
 
-On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. ***Any*** differences will cause the expectation to fail, and the report to be generated.
+On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. **_Any_** differences will cause the expectation to fail, and the report to be generated.

docs/api/methods.md

@@ -4,15 +4,13 @@ sidebar_position: 1
 
 # Methods
 
-This is a placeholder.
-
 ### takeScreenshot(name: string)
 
 Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) using the specified filename (no extension required). If running the tests using the `--update` or `-u` flag, or its the first time its being run, this will store the screenshot under the `baseline` directory.
 
 #### Example
 
-```js
+```js {5}
 import { takeScreenshot } from 'react-native-owl';
 
 describe('App.tsx', () => {
@@ -26,4 +24,4 @@ describe('App.tsx', () => {
 
 The first time this test is run, or when run with the `--update` flag, the screenshot will be stored at `./owl/baseline/ios/homescreen.png` (or `/android/` is testing on Android).
 
-On subsequent test runs, the screenshot will be stored at `./owl/current/ios/homescreen.png`.
+On subsequent test runs, the screenshot will be stored at `./owl/current/ios/homescreen.png`.

website/docusaurus.config.js

@@ -49,6 +49,11 @@ const config = {
         disableSwitch: true,
         respectPrefersColorScheme: false,
       },
+      announcementBar: {
+        id: 'announcement-blogpost',
+        content: `Read the announcement "<strong><a target="_blank" rel="noopener noreferrer" href="/blog/2022/react-native-owl/">We're Building a Visual Regression Testing Library for React Native</a></strong>" in our blog.`,
+        isCloseable: false,
+      },
       navbar: {
         style: 'dark',
         title: 'React Native Owl',
@@ -126,6 +131,7 @@ const config = {
         ],
       },
       prism: {
+        defaultLanguage: 'javascript',
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },

website/src/components/Hero/index.tsx

@@ -20,7 +20,7 @@ export const Hero = () => {
   const { siteConfig } = useDocusaurusContext();
 
   return (
-    <header className={clsx('hero hero--dark', styles.heroBanner)}>
+    <header className={styles.hero}>
       <div className="container">
         <div className="row">
           <div className="col col--6">
@@ -39,7 +39,7 @@ export const Hero = () => {
           </div>
 
           <div className={clsx('col col--6', styles.codeSampleWrapper)}>
-            <CodeBlock title="App.owl.ts" className="typescript">
+            <CodeBlock title="App.owl.ts" className={styles.codeSample}>
               {heroExample}
             </CodeBlock>
           </div>

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

@@ -3,15 +3,16 @@
  * and scoped locally.
  */
 
-.heroBanner {
+.hero {
+  color: var(--ifm-color-white);
   background-color: var(--brand-blue);
   position: relative;
-  z-index: 1;
-  padding: 2rem;
+  padding: 1.5rem;
   margin-bottom: 3rem;
+  z-index: 1;
 }
 
-.heroBanner:after {
+.hero:after {
   background: inherit;
   border-bottom: 10px solid var(--brand-orange);
   content: '';
@@ -28,28 +29,32 @@
   -webkit-backface-visibility: hidden;
 }
 
-.heroSubtitle {
-  font-weight: 500;
-  margin-bottom: 2rem;
-}
-
-@media screen and (min-width: 966px) {
-  .heroBanner {
+@media (min-width: 1416px) {
+  .hero {
     padding: 3rem 0 4rem;
     margin-bottom: 10rem;
   }
 }
 
+.heroSubtitle {
+  font-weight: 500;
+  margin-bottom: 2rem;
+}
+
 .logoBadge {
   max-width: 8rem;
   margin-bottom: 0.75rem;
 }
 
+.codeSample {
+  width: 100%;
+}
+
 .codeSampleWrapper {
   margin-top: 2rem;
 }
 
-@media screen and (min-width: 1025px) {
+@media (min-width: 1025px) {
   .codeSampleWrapper {
     display: flex;
     align-items: center;

website/src/components/HomepageFeatures/index.tsx

@@ -4,6 +4,13 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const FeatureList = [
+  {
+    title: 'Visual regression testing',
+    imageSource: '/images/homepage/diff.png',
+    description: (
+      <>We've created a simple api for capturing and comparing screenshots.</>
+    ),
+  },
   {
     title: 'Take screenshots from your app',
     imageSource: '/images/homepage/mockup.png',
@@ -14,14 +21,6 @@ const FeatureList = [
       </>
     ),
   },
-  {
-    title: 'Compare screenshots taken',
-    Svg: require('../../../static/images/homepage/diff.svg').default,
-    svgClassName: styles.visualExample,
-    description: (
-      <>We've created a simple api for capturing and comparing screenshots.</>
-    ),
-  },
   {
     title: 'View the differences',
     imageSource: '/images/homepage/report.png',
@@ -35,28 +34,21 @@ const FeatureList = [
 ];
 
 export const HomepageFeatures = () => {
-  return FeatureList.map(
-    ({ Svg, svgClassName, title, description, imageSource }, idx) => {
-      return (
-        <section key={idx}>
-          <div className={styles.feature}>
-            <h2>{title}</h2>
-            <p className="hero__subtitle">{description}</p>
+  return FeatureList.map(({ title, description, imageSource }, idx) => {
+    return (
+      <section key={idx} className={styles.feature}>
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.subtitle}>{description}</p>
 
-            <div className="padding--md">
-              {!!imageSource && (
-                <img src={imageSource} className={styles.sectionImageMockup} />
-              )}
-              {!!Svg && (
-                <Svg
-                  className={svgClassName ? svgClassName : styles.featureSvg}
-                  alt={title}
-                />
-              )}
-            </div>
-          </div>
-        </section>
-      );
-    }
-  );
+        <div>
+          {!!imageSource && (
+            <img
+              src={`/open-source/react-native-owl${imageSource}`}
+              className={styles.sectionImageMockup}
+            />
+          )}
+        </div>
+      </section>
+    );
+  });
 };

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

@@ -1,7 +1,7 @@
 .feature {
-  background-color: var(--ifm-color-secondary);
+  background-color: var(--brand-beige);
   padding: 2rem;
-  margin: 1rem auto;
+  margin: 2rem auto;
   text-align: center;
 }
 
@@ -11,10 +11,13 @@
   }
 }
 
-.featureSvg {
-  width: 100%;
-  max-width: 10rem;
-  height: 10rem;
+.title {
+  font-size: 2rem;
+}
+
+.subtitle {
+  font-size: 1.45rem;
+  line-height: 2.35rem;
 }
 
 .visualExample {

website/src/css/custom.css

@@ -8,6 +8,7 @@
 :root {
   --brand-blue: #1e2852;
   --brand-orange: #f04d21;
+  --brand-beige: #ebe5da;
 
   --ifm-navbar-height: 4.25rem;
 

website/src/theme/AnnouncementBar/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useThemeConfig, useAnnouncementBar } from '@docusaurus/theme-common';
+import { translate } from '@docusaurus/Translate';
+import IconClose from '@theme/IconClose';
+
+import styles from './styles.module.css';
+
+function AnnouncementBar(): JSX.Element | null {
+  const { isActive, close } = useAnnouncementBar();
+  const { announcementBar } = useThemeConfig();
+
+  if (!isActive) {
+    return null;
+  }
+
+  const { content, backgroundColor, textColor, isCloseable } = announcementBar!;
+
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{ backgroundColor, color: textColor }}
+      role="banner"
+    >
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <div
+        className={styles.announcementBarContent}
+        // Developer provided the HTML, so assume it's safe.
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+      {isCloseable ? (
+        <button
+          type="button"
+          className={clsx('clean-btn close', styles.announcementBarClose)}
+          onClick={close}
+          aria-label={translate({
+            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+            message: 'Close',
+            description: 'The ARIA label for close button of announcement bar',
+          })}
+        >
+          <IconClose width={14} height={14} strokeWidth={3.1} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export default AnnouncementBar;