Merge pull request #524 from feature-sliced/feature/PROMO--companies-…

…marquee PROMO: Setup marquee for companies
feature-sliced · Sep 4, 2022 · 3829eb8 · 3829eb8
2 parents 48b6a5e + 52149c1
commit 3829eb8
Show file tree

Hide file tree

Showing 12 changed files with 186 additions and 158 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
         "react": "^17.0.1",
         "react-cookie-consent": "^6.4.1",
         "react-dom": "^17.0.1",
+        "react-fast-marquee": "^1.3.5",
         "sha1": "^1.1.1",
         "sharp": "^0.29.3",
         "superstruct": "^0.15.3",

diff --git a/src/pages/_home/_config.jsx b/src/pages/_home/_config.jsx
@@ -49,76 +49,3 @@ export const concepts = [
         description: translate({ id: "pages.home.concepts.needs.description" }),
     },
 ];
-
-/**
- * Companies using Feature-Sliced Design
- * @see https://github.com/feature-sliced/documentation/issues/131
- * @see static/img/companies
- */
-export const companies = [
-    {
-        url: "https://redmadrobot.com/",
-        src: "red_mad_robot.png",
-        alt: "red_mad_robot",
-    },
-    {
-        url: "https://kode.ru/",
-        src: "kode.png",
-        alt: "KODE",
-    },
-    {
-        url: "https://uptarget.co/",
-        src: "uptarget.png",
-        alt: "Uptarget",
-    },
-    {
-        url: "https://www.fxdd.com/",
-        src: "fxdd.svg",
-        alt: "FXDD",
-    },
-    {
-        url: "https://foxford.ru/",
-        src: "foxford.svg",
-        alt: "Foxford",
-    },
-    {
-        url: "https://vigo.ru/",
-        src: "vigo.png",
-        alt: "Vigo",
-    },
-    {
-        url: "https://space307.com/",
-        src: "space307.svg",
-        alt: "~/.space307",
-    },
-    {
-        url: "https://pmp-tech.ru/",
-        src: "pmp-tech.png",
-        alt: "PMP Tech",
-    },
-    {
-        url: "https://www.aligntech.com/",
-        src: "align.svg",
-        alt: "Align",
-    },
-    {
-        url: "https://smile2impress.com/",
-        src: "impress.svg",
-        alt: "Impress",
-    },
-    {
-        url: "https://pochta.tech/",
-        src: "pochtatech.svg",
-        alt: "Почтатех",
-    },
-    {
-        url: "https://befree.ru/",
-        src: "befree.svg",
-        alt: "befree",
-    },
-    {
-        url: "https://www.softcery.com/",
-        src: "softcery.png",
-        alt: "Softcery",
-    },
-];
diff --git a/src/pages/_home/companies/_config.jsx b/src/pages/_home/companies/_config.jsx
@@ -0,0 +1,72 @@
+/**
+ * Companies using Feature-Sliced Design
+ * @see https://github.com/feature-sliced/documentation/issues/131
+ * @see static/img/companies
+ */
+export const companies = [
+    {
+        url: "https://redmadrobot.com/",
+        src: "red_mad_robot.png",
+        alt: "red_mad_robot",
+    },
+    {
+        url: "https://kode.ru/",
+        src: "kode.png",
+        alt: "KODE",
+    },
+    {
+        url: "https://uptarget.co/",
+        src: "uptarget.png",
+        alt: "Uptarget",
+    },
+    {
+        url: "https://www.fxdd.com/",
+        src: "fxdd.svg",
+        alt: "FXDD",
+    },
+    {
+        url: "https://foxford.ru/",
+        src: "foxford.svg",
+        alt: "Foxford",
+    },
+    {
+        url: "https://vigo.ru/",
+        src: "vigo.png",
+        alt: "Vigo",
+    },
+    {
+        url: "https://space307.com/",
+        src: "space307.svg",
+        alt: "~/.space307",
+    },
+    {
+        url: "https://pmp-tech.ru/",
+        src: "pmp-tech.png",
+        alt: "PMP Tech",
+    },
+    {
+        url: "https://www.aligntech.com/",
+        src: "align.svg",
+        alt: "Align",
+    },
+    {
+        url: "https://smile2impress.com/",
+        src: "impress.svg",
+        alt: "Impress",
+    },
+    {
+        url: "https://pochta.tech/",
+        src: "pochtatech.svg",
+        alt: "Почтатех",
+    },
+    {
+        url: "https://befree.ru/",
+        src: "befree.svg",
+        alt: "befree",
+    },
+    {
+        url: "https://www.softcery.com/",
+        src: "softcery.png",
+        alt: "Softcery",
+    },
+];
diff --git a/src/pages/_home/companies/index.jsx b/src/pages/_home/companies/index.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+// It's utility, not hook =)
+import getBaseUrl from "@docusaurus/useBaseUrl";
+import { translate } from "@docusaurus/Translate";
+import Marquee from "react-fast-marquee";
+import { Section } from "@site/src/shared/ui";
+import { companies } from "./_config";
+import styles from "./styles.module.scss";
+
+export const Companies = () => {
+    return (
+        <Section
+            title={translate({ id: "pages.home.companies.using" })}
+            className={styles.root}
+            containerClass={styles.rootContainer}
+        >
+            <Marquee pauseOnHover>
+                {companies.map(({ url, src, alt }) => (
+                    <a
+                        key={src}
+                        className={styles.item}
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            className={styles.image}
+                            src={getBaseUrl(`img/companies/${src}`)}
+                            title={alt}
+                            alt={alt}
+                        />
+                    </a>
+                ))}
+            </Marquee>
+            <span className={styles.addMe}>
+                {translate({ id: "pages.home.companies.add_me" })}{" "}
+                <a
+                    href="https://github.com/feature-sliced/documentation/issues/131"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {translate({ id: "pages.home.companies.tell_us" })}
+                </a>
+            </span>
+        </Section>
+    );
+};
diff --git a/src/pages/_home/companies/styles.module.scss b/src/pages/_home/companies/styles.module.scss
@@ -0,0 +1,47 @@
+.root {
+    /* Protected from dark mode (and flickering) */
+    color: #1c1e21;
+    background: #ffffff;
+
+    &Container {
+        width: 100%;
+        padding: 0 1rem;
+        overflow: hidden;
+    }
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    margin: 0 20px;
+    filter: grayscale(1);
+    opacity: 0.8;
+    transition: 0.25s;
+
+    &:hover {
+        filter: grayscale(0);
+        opacity: 1;
+    }
+}
+
+.image {
+    height: 50px;
+}
+
+.addMe {
+    width: 100%;
+    padding-top: 40px;
+    font-size: 12px;
+    font-style: italic;
+    text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+    .item {
+        margin: 0 10px;
+    }
+
+    .image {
+        height: 20px;
+    }
+}
diff --git a/src/pages/_home/index.jsx b/src/pages/_home/index.jsx
@@ -1,6 +1,5 @@
 import React from "react";
-// It's utility, not hook =)
-import getBaseUrl from "@docusaurus/useBaseUrl";
+
 // eslint-disable-next-line import/no-unresolved
 import Layout from "@theme/Layout";
 // eslint-disable-next-line import/no-unresolved
@@ -11,7 +10,8 @@ import { Card, Section } from "@site/src/shared/ui";
 import imgScheme from "@site/static/img/visual_schema.jpg";
 // NOTE: Locate at index before of specific route-mapping while Node/SSR building
 // "_" for excluding file from routing
-import { features, concepts, companies } from "./_config";
+import { features, concepts } from "./_config";
+import { Companies } from "./companies";
 import styles from "./styles.module.scss";
 
 export default function HomePage() {
@@ -46,40 +46,7 @@ export default function HomePage() {
                         alt="feature-sliced-scheme,themed--scheme"
                     />
                 </Section>
-                <Section
-                    title={translate({ id: "pages.home.companies.using" })}
-                    className={styles.companiesContainer}
-                >
-                    <div className={styles.companies}>
-                        {companies.map(({ url, src, alt }) => (
-                            <a
-                                key={src}
-                                className={styles.companiesItem}
-                                href={url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <img
-                                    className={styles.companiesItemImg}
-                                    // It's utility, not hook =)
-                                    src={getBaseUrl(`img/companies/${src}`)}
-                                    title={alt}
-                                    alt={alt}
-                                />
-                            </a>
-                        ))}
-                    </div>
-                    <span className={styles.companiesSubtitle}>
-                        {translate({ id: "pages.home.companies.add_me" })}{" "}
-                        <a
-                            href="https://github.com/feature-sliced/documentation/issues/131"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {translate({ id: "pages.home.companies.tell_us" })}
-                        </a>
-                    </span>
-                </Section>
+                <Companies />
             </main>
         </Layout>
     );

diff --git a/src/pages/_home/styles.module.scss b/src/pages/_home/styles.module.scss
@@ -13,48 +13,3 @@
         width: 100%;
     }
 }
-
-.companies {
-    --logoCardSize: 150px;
-    --logoCardGap: 3rem;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--logoCardSize), 1fr));
-    grid-gap: var(--logoCardGap);
-    width: 100%;
-    padding: 0 5% 40px 5%;
-
-    /* FIXME: fix later */
-    &Item {
-        align-self: center;
-        transition: 0.25s;
-
-        &:hover {
-            opacity: 0.7;
-        }
-    }
-
-    &ItemImg {
-        width: 100%;
-    }
-
-    &Subtitle {
-        width: 100%;
-        font-size: 12px;
-        font-style: italic;
-        text-align: center;
-    }
-
-    /* Protected from dark mode (and flickering) */
-    &Container {
-        color: #1c1e21;
-        background: #ffffff;
-    }
-}
-
-@media screen and (max-width: 966px) {
-    .companies {
-        --logoCardSize: 150px;
-        --logoCardGap: 1rem;
-    }
-}
diff --git a/src/shared/ui/section/index.jsx b/src/shared/ui/section/index.jsx
@@ -2,13 +2,20 @@ import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
 
-export function Section({ title, withAltBg, children, rowClass, className }) {
+export function Section({
+    title,
+    withAltBg,
+    children,
+    rowClass,
+    className,
+    containerClass = "container",
+}) {
     return (
         <section
             id={title.toLowerCase()}
             className={clsx(styles.section, withAltBg && styles.sectionAlt, className)}
         >
-            <div className="container">
+            <div className={containerClass}>
                 <h2 className={styles.title}>{title}</h2>
                 <div className={clsx("row", rowClass)}>{children}</div>
             </div>

diff --git a/src/shared/ui/section/styles.module.scss b/src/shared/ui/section/styles.module.scss
@@ -15,6 +15,6 @@
 }
 
 .title {
-    margin-bottom: 60px;
+    margin-bottom: 40px;
     text-align: center;
 }
diff --git a/static/img/companies/red_mad_robot.png b/static/img/companies/red_mad_robot.png
diff --git a/static/img/companies/softcery.png b/static/img/companies/softcery.png