Merge pull request #141 from VLK-STUDIO/feature/docs-style-enhancements

feat: #138

docs/docusaurus.config.js

@@ -48,12 +48,21 @@ module.exports = {
         { to: '/blog', label: 'Blog', position: 'right' },
         {
           href: 'https://github.com/VLK-STUDIO/morfeo',
+          title: 'GitHub repository',
           position: 'right',
           className: 'header-github-link',
           'aria-label': 'GitHub repository',
         },
+        {
+          href: 'https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl',
+          position: 'right',
+          title: 'Web Extension',
+          className: 'web-extension-link',
+          'aria-label': 'Web Extension',
+        },
         {
           href: 'https://discord.gg/5hbsKMBRBh',
+          title: 'Discord server',
           position: 'right',
           className: 'header-discord-link',
           'aria-label': 'Discord server',

docs/sidebars.js

@@ -99,7 +99,7 @@ module.exports = {
       ],
     },
   ],
-  benchMarkSidebars: [
+  benchMarkSidebar: [
     {
       type: 'autogenerated',
       dirName: 'Benchmarks',
@@ -111,4 +111,10 @@ module.exports = {
       dirName: 'ThemeSpecification',
     },
   ],
+  reactSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'React',
+    },
+  ],
 };

docs/src/components/AddToChrome/AddToChrome.js

@@ -2,15 +2,19 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import clsx from 'clsx';
 import styles from './AddToChrome.module.css';
+import { Icon } from '../Icon';
 
 export function AddToChrome() {
   return (
     <Link
       to="https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl"
-      className={clsx('morfeo-button-inverted', styles.link)}
+      className={clsx(
+        'button button--outline button--primary button--lg',
+        styles.link,
+      )}
     >
-      <img src="/img/chromeLogo.svg" className={styles.image} />
-      <span className="morfeo-typography-link">Add Morfeo to Chrome</span>
+      <Icon name="webExtension" className={styles.image} />
+      Add Morfeo to Chrome
     </Link>
   );
 }

docs/src/components/AddToChrome/AddToChrome.module.css

@@ -3,9 +3,6 @@
   align-items: center;
   width: fit-content;
   margin-bottom: var(--spacings-s);
-  border: var(--borders-medium);
-  border-color: var(--colors-primary);
-  font-weight: var(--font-weights-bold);
 }
 
 .image {

docs/src/components/ClickableCard/ClickableCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './ClickableCard.module.css';
-import ArrowRight from './ArrowRight';
 import clsx from 'clsx';
+import { Icon } from '../Icon';
 
 export function ClickableCard({ children, badge, icon, onClick, className }) {
   return (
@@ -12,7 +12,7 @@ export function ClickableCard({ children, badge, icon, onClick, className }) {
     >
       {icon && <div className={styles.icon}>{icon}</div>}
       {badge && <span className={styles.badge}>{badge}</span>}
-      <ArrowRight onClick={onClick} className={styles.arrowRight} />
+      <Icon name="arrowRight" onClick={onClick} className={styles.arrowRight} />
       {children}
     </div>
   );

docs/src/components/CodeExample/CodeExample.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import { Section } from '../Section';
+
+export function CodeExample() {
+  return (
+    <Section title="Try it now!">
+      <blockquote>
+        This is a React example but Morfeo ban be used everywhere
+      </blockquote>
+      <CodeBlock language="jsx" live title="/src/ShowTheme.js">
+        {`function Button() {
+  const { cardClass, buttonClass } = useClassNames({
+    cardClass: {
+      componentName: 'Card',
+      variant: 'hoverable',
+      p: 'm',
+    },
+    buttonClass: {
+      componentName: 'Button',
+      variant: 'primary',
+    }
+  });
+
+  const onClick = () => {
+    const current = morfeo.getCurrent();
+    morfeo.useTheme(current === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <div className={cardClass}>
+      It's that easy...
+      <button className={buttonClass} onClick={onClick}>
+        Toggle theme
+      </button>
+    </div>
+  )
+}`}
+      </CodeBlock>
+    </Section>
+  );
+}

docs/src/components/CookieBanner/CookieBanner.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './CookieBanner.module.css';
 import { ClickableCard } from '../ClickableCard/ClickableCard';
-import CloseIcon from './CloseIcon';
+import { Icon } from '../Icon';
 import { useCookies } from './CookieProvider';
 import { useHistory } from '@docusaurus/router';
 import { useCallback } from 'react';
@@ -49,7 +49,7 @@ function CookieBanner() {
         We use cookies to improve your experience on our site. To find out more,
         read our privacy policy.
       </p>
-      <CloseIcon className={styles.closeIcon} onClick={onClickClose} />
+      <Icon name="close" className={styles.closeIcon} onClick={onClickClose} />
     </ClickableCard>
   );
 }

docs/src/components/HeroCard/HeroCard.module.css

@@ -22,13 +22,26 @@
 
 .text i {
   color: var(--colors-inverted-text);
+  padding: 0 var(--spacings-2xs);
   background-color: var(--colors-primary);
-  padding-left: var(--spacings-3xs);
-  padding-right: var(--spacings-3xs);
 }
 
 .cta {
+  color: var(--colors-inverted-text) !important;
+  border: var(--borders-strong);
   transition: var(--transitions-fast);
+  border-color: transparent;
+  border-color: var(--colors-primary);
+  background-color: var(--colors-primary);
+}
+
+.cta:hover {
+  animation: shake 1.2s cubic-bezier(.36,.07,.19,.97) both infinite alternate;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  box-shadow: var(--shadows-medium);
+  opacity: 0.9;
 }
 
 .icon {
@@ -51,4 +64,22 @@
   .text i {
     display: inline-block;
   }
+}
+
+@keyframes shake {
+  10%, 90% {
+    transform: scale(1.1) rotate3d(-20, 10, -10, 10deg);
+  }
+
+  20%, 80% {
+    transform: scale(1.1) rotate3d(40, 10, -10, 10deg);
+  }
+
+  30%, 50%, 70% {
+    transform: scale(1.1) rotate3d(-80, 10, -10, 10deg);
+  }
+
+  40%, 60% {
+    transform: scale(1.1) rotate3d(80, 10, -10, 10deg);
+  }
 }

docs/src/components/HomePageHeader/HomePageHeader.js

@@ -3,15 +3,15 @@ import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { HeroCard } from '../HeroCard';
 import styles from './HomePageHeader.module.css';
-import Logo from './Logo';
+import { Icon } from '../Icon';
 
 export function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
         <div className={styles.logoContainer}>
-          <Logo />
+          <Icon name="logo" />
         </div>
         <div className={clsx('hero__subtitle', styles.subtitle)}>
           {siteConfig.tagline.split('\n').map((part, index) => (

docs/src/components/HomepageFeatures/HomepageFeatures.js

@@ -2,16 +2,14 @@ import React, { useCallback } from 'react';
 import { Section } from '../Section';
 import { useHistory } from '@docusaurus/router';
 import { ClickableCard } from '../ClickableCard';
-import CLI from './CLI';
-import JSIcon from './JSIcon';
-import WebExtension from './WebExtension';
+import { Icon } from '../Icon';
 import styles from './HomepageFeatures.module.css';
 
 const features = [
   {
     text: 'Web extension',
     link: '/docs/Features/web-extension',
-    icon: <WebExtension />,
+    icon: <Icon name="webExtension" />,
   },
   {
     text: 'Multi theming',
@@ -26,10 +24,15 @@ const features = [
   {
     text: 'Single source of truth',
     link: '/docs/Features/single-source-of-truth',
-    icon: <JSIcon />,
+    icon: '🧘',
   },
   { text: 'Extendible', link: '/docs/Features/extendible', icon: '🧩' },
-  { text: 'CLI', link: '/docs/Features/CLI/', icon: <CLI />, badge: 'beta' },
+  {
+    text: 'CLI',
+    link: '/docs/Features/CLI/',
+    icon: <Icon name="cli" />,
+    badge: 'beta',
+  },
 ];
 
 export function HomepageFeatures() {