Showcase Page Edits

.gitignore

@@ -41,8 +41,10 @@ jspm_packages
 
 ################
 # JetBrains
+# IDE
 ################
 .idea
+.vscode
 
 ## File-based project format:
 *.iws

website/docusaurus.config.js

@@ -26,40 +26,34 @@ const config = {
  // Simple use-case: string editUrl
  // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
  // Advanced use-case: functional editUrl
- editUrl: ({locale, blogDirPath, blogPath, permalink}) =>
- `https://github.com/wix/Detox/edit/master/website/${blogDirPath}/${blogPath}`,
+ editUrl: ({ locale, blogDirPath, blogPath, permalink }) =>
+ `https://github.com/wix/Detox/edit/next/website/${blogDirPath}/${blogPath}`,
  editLocalizedFiles: false,
  authorsMapPath: 'authors.yml',
  feedOptions: {
- type: null,
+ type: null
  },
  blogTitle: 'Blog',
- blogDescription: 'All the important updates and announcements from Detox crew, tips and tricks and everything else that you don\'t want to miss.',
+ blogDescription:
+ "All the important updates and announcements from Detox crew, tips and tricks and everything else that you don't want to miss.",
  blogSidebarCount: 5,
  blogSidebarTitle: 'All our posts',
  routeBasePath: 'blog',
  include: ['**/*.{md,mdx}'],
- exclude: [
- '**/_*.*',
- '**/_*/**',
- ],
+ exclude: ['**/_*.*', '**/_*/**'],
  postsPerPage: 10,
  truncateMarker: /<!--\s*(truncate)\s*-->/,
- showReadingTime: true,
+ showReadingTime: true
  },
  docs: {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.js'),
- editUrl: 'https://github.com/wix/Detox/edit/master/docs/',
+ editUrl: 'https://github.com/wix/Detox/edit/next/docs/',
  docLayoutComponent: '@site/src/components/CustomLayout',
- remarkPlugins: [
- [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
- ],
+ remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]]
  },
  pages: {
- remarkPlugins: [
- [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
- ],
+ remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]]
  },
  theme: {
  customCss: require.resolve('./src/css/custom.css')
@@ -90,17 +84,23 @@ const config = {
  position: 'left',
  label: 'API'
  },
+ {
+ to: 'showcase',
+ label: 'Showcase',
+ position: 'left',
+ className: 'header-showcase-link'
+ },
  {
  type: 'docsVersionDropdown',
  position: 'right',
- dropdownActiveClassDisabled: true,
+ dropdownActiveClassDisabled: true
  },
  {
  href: 'https://github.com/wix/Detox',
  position: 'right',
  className: 'header-github-link',
- 'aria-label': 'GitHub repository',
- },
+ 'aria-label': 'GitHub repository'
+ }
  ]
  },
  algolia: {
@@ -109,7 +109,7 @@ const config = {
  indexName: 'detox'
  },
  footer: {
- style: 'dark',
+ style: 'light',
  links: [
  {
  title: 'Docs',
@@ -142,29 +142,43 @@ const config = {
  items: [
  {
  label: 'GitHub',
- href: 'https://github.com/wix/Detox'
+ href: 'https://github.com/wix/Detox',
+ position: 'left',
+ className: 'footer-gh-footer',
+ favicon: '/static/img/showcase/gh-footer-light.svg'
  },
  {
  label: 'Twitter',
- href: 'https://twitter.com/detoxe2e/'
+ href: 'https://twitter.com/detoxe2e/',
+ position: 'left',
+ className: 'footer-twitter-footer',
+ favicon: '/static/img/showcase/twitter-footer-light.svg'
  },
  {
  label: 'Discord',
- href: 'https://discord.gg/CkD5QKheF5'
+ href: 'https://discord.gg/CkD5QKheF5',
+ position: 'left',
+ className: 'footer-discord-footer',
+ favicon: '/static/img/showcase/discord-footer-light.png'
  }
  ]
  }
  ]
  },
  docs: {
  sidebar: {
- autoCollapseCategories: true,
- },
+ autoCollapseCategories: true
+ }
  },
  prism: {
  additionalLanguages: ['gradle', 'ini', 'java'],
  theme: lightCodeTheme,
  darkTheme: darkCodeTheme
+ },
+ colorMode: {
+ defaultMode: 'dark',
+ disableSwitch: false,
+ respectPrefersColorScheme: false
  }
  }),
  scripts: [

website/showcase.json

@@ -0,0 +1,86 @@
+[
+ {
+ "title": "Hudl",
+ "image": "img/showcase/hudl.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.hudl.hudroid",
+ "linkApple": "https://apps.apple.com/us/app/hudl/id412223222"
+ },
+ {
+ "title": "Valora",
+ "image": "img/showcase/valora.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=co.clabs.valora",
+ "linkApple": "https://apps.apple.com/us/app/valora-crypto-wallet/id1520414263"
+ },
+ {
+ "title": "Wix Spaces",
+ "image": "img/showcase/wix-spaces.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.wix.android",
+ "linkApple": "https://apps.apple.com/us/app/spaces-follow-businesses/id1099748482"
+ },
+ {
+ "title": "Wix Owner",
+ "image": "img/showcase/wix-owner.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.wix.admin",
+ "linkApple": "https://apps.apple.com/us/app/wix-owner-website-builder/id1545924344"
+ },
+ {
+ "title": "React Native",
+ "image": "img/showcase/react-native.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.thesevenitsolutions.reactnative",
+ "linkApple": "https://apps.apple.com/us/app/react-native-components-apis/id1333539401"
+ },
+ {
+ "title": "Rocket Chat",
+ "image": "img/showcase/rocket-chat.webp",
+ "linkGoogle": "https://play.google.com/store/search?q=rocket%20chat&c=apps",
+ "linkApple": "https://apps.apple.com/us/app/rocket-chat/id1148741252"
+ },
+ {
+ "title": "WealthSimple",
+ "image": "img/showcase/wealthsimple.png",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.wealthsimple.trade",
+ "linkApple": "https://apps.apple.com/us/app/wealthsimple-invest/id948087968"
+ },
+ {
+ "title": "Pitch",
+ "image": "img/showcase/pitch.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.pitch.android&gl=IL",
+ "linkApple": "https://apps.apple.com/us/app/pitch-collaborate-on-decks/id1551335606?platform=iphone"
+ },
+ {
+ "title": "RN DateTimePicker",
+ "titleFontSize": "1.5rem",
+ "image": "img/showcase/rn-datetimepicker.png",
+ "linkGitHub": "https://github.com/react-native-datetimepicker/datetimepicker"
+ },
+ {
+ "title": "Maiia",
+ "image": "img/showcase/maiia.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.cegedim.maiia.patient",
+ "linkApple": "https://apps.apple.com/fr/app/maiia-t%C3%A9l%C3%A9consultation-rdv/id1489590732?agc_click_id=596983166549379072"
+ },
+ {
+ "title": "Noona",
+ "image": "img/showcase/noona.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.timatorgmobile&gl=IL",
+ "linkApple": "https://apps.apple.com/is/app/noona-book-anything/id1448498295"
+ },
+ {
+ "title": "Omnon Notes",
+ "image": "img/showcase/omnon.webp",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.nieratechinc.omnomnotes&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1",
+ "linkApple": "https://apps.apple.com/us/app/omnom-notes/id1505867777?ls=1"
+ },
+ {
+ "title": "Bolt",
+ "image": "img/showcase/bolt.webp",
+ "linkGoogle": "https://play.google.com/store/search?q=bolt&c=apps",
+ "linkApple": "https://apps.apple.com/us/app/bolt-fast-affordable-rides/id675033630"
+ },
+ {
+ "title": "Next",
+ "image": "img/showcase/next.jpg",
+ "linkGoogle": "https://play.google.com/store/apps/details?id=com.nextinsurance",
+ "linkApple": "https://apps.apple.com/us/app/next-insurance/id1580721755"
+ }
+]

website/src/components/Showcase/Card.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import styles from './Card.module.css';
+
+function Card({ className, title, titleFontSize, image, linkGoogle, linkApple, linkGitHub }) {
+ return (
+ <li className={clsx(className, styles.card)}>
+ <img src={require(`@site/static/${image}`).default} className={styles.image} />
+ <span className={styles.title} style={{ fontSize: titleFontSize }}>
+ {title}
+ </span>
+ <div>
+ {linkGoogle && (
+ <Link className={styles.storeButton} href={linkGoogle}>
+ Google Play
+ </Link>
+ )}
+ {linkApple && (
+ <Link className={styles.storeButton} href={linkApple}>
+ App Store
+ </Link>
+ )}
+ {linkGitHub && (
+ <Link className={styles.storeButton} href={linkGitHub}>
+ GitHub
+ </Link>
+ )}
+ </div>
+ </li>
+ );
+}
+
+export default Card;

website/src/components/Showcase/Card.module.css

@@ -0,0 +1,102 @@
+.card {
+ box-sizing: border-box;
+ width: 310px;
+
+ position: relative;
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ border: 1px solid rgb(239, 239, 239);
+ border-radius: 5%;
+ padding: 20px;
+
+ transition: box-shadow 0.25s ease-in-out;
+
+ font-family: 'Nunito Sans', sans-serif;
+ font-weight: normal;
+}
+
+.card:hover {
+ box-shadow: 0px 12px 12px #00000006;
+}
+
+.card::before {
+ content: '';
+
+ position: absolute;
+ z-index: -1;
+
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+
+[data-theme='dark'] .card::before {
+ background: radial-gradient(100% 100% at 1.07% 0%, rgba(255, 99, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+ transition: opacity 0.25s ease-in-out;
+}
+
+.card:hover::before {
+ opacity: 1;
+}
+
+[data-theme='dark'] .card {
+ border-color: #313439;
+}
+
+[data-theme='dark'] .card:hover {
+ box-shadow: 0px 12px 12px #0000001d;
+}
+
+.title {
+ font-weight: 700;
+ font-size: 30px;
+ margin: 20px 0 38px;
+}
+
+.image {
+ width: 70px;
+ height: 70px;
+ border-radius: 25%;
+ box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
+}
+
+.storeButton {
+ display: inline-block;
+ width: 115px;
+ height: 30px;
+ line-height: 30px;
+ margin-right: 10px;
+ color: #000;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 25px;
+ font-size: 16px;
+ background: #f1f1f1;
+}
+
+.storeButton:hover {
+ background-color: #5a3fc6;
+ transition: transform 0.25s ease-in-out;
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+ color: #ffffff;
+ text-decoration: none;
+}
+
+[data-theme='dark'] .storeButton {
+ background-color: #313439;
+ color: #fff;
+}
+
+[data-theme='dark'] .storeButton:hover {
+ background-color: #5a3fc6;
+}
+
+.storeButton:focus {
+ outline: none;
+}

website/src/components/Showcase/Hero.js

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './Hero.module.css';
+
+export default function ShowcaseHero() {
+ return (
+ <section className={clsx('hero hero--primary', styles.heroBanner)}>
+ <div className="container">
+ <h1 className="hero__title">Users Showcase</h1>
+ <p className="hero__subtitle">Check out who is using Detox to Gray box test their React Native Apps</p>
+
+ <a href="https://forms.gle/C1BWzd8k5LhogDtM7" target="_blank" className={styles.button}>
+ Join the Showcase!
+ </a>
+ </div>
+ </section>
+ );
+}