feat: credits page improved

morfeojs · Oct 28, 2021 · 46b95ef · 46b95ef
1 parent 746228a
commit 46b95ef
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 5 deletions.
diff --git a/devtool/src/_shared/types.ts b/devtool/src/_shared/types.ts
@@ -28,4 +28,5 @@ export type Author = {
   name: string;
   url: string;
   image?: string;
+  contributions?: string[];
 };
diff --git a/devtool/src/devtool/pages/Credits/PersonCard.tsx b/devtool/src/devtool/pages/Credits/PersonCard.tsx
@@ -16,7 +16,7 @@ function getInitials(name: string) {
 }
 
 export const PersonCard: React.FC<Props> = ({ person }) => {
-  const { name, image, url } = person;
+  const { name, image, url, contributions = [] } = person;
 
   const onClick = useCallback(() => {
     redirect(url);
@@ -38,6 +38,11 @@ export const PersonCard: React.FC<Props> = ({ person }) => {
     <div className={styles.cardContainer} onClick={onClick}>
       {cover}
       <h3 className={clsx('morfeo-typography-h3', styles.name)}>{name}</h3>
+      <div className={styles.contributionsContainer}>
+        {contributions.map(contribution => (
+          <span>{contribution}</span>
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/devtool/src/devtool/pages/Credits/people.ts b/devtool/src/devtool/pages/Credits/people.ts
@@ -9,20 +9,24 @@ export const authors: Author[] = [
     name: 'Mauro Erta',
     url: 'https://github.com/mauroerta',
     image: mauroCoverImage,
+    contributions: ['💻', '📖', '🤔'],
   },
   {
     name: 'Andrea Porceddu',
     url: 'https://github.com/andreaSimonePorceddu',
     image: andreaCoverImage,
+    contributions: ['💻', '📖', '🤔'],
   },
   {
     name: 'Luca Cacciarru',
     url: 'https://github.com/lucacacciarru',
     image: lucaCoverImage,
+    contributions: ['🎨', '🤔'],
   },
   {
     name: 'Gabriele Angius',
     url: 'https://github.com/gabrieleAngius',
     image: gabrieleCoverImage,
+    contributions: ['🎨', '🤔'],
   },
 ];
diff --git a/devtool/src/devtool/pages/Credits/style.module.css b/devtool/src/devtool/pages/Credits/style.module.css
@@ -31,4 +31,12 @@
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
+}
+
+.contributionsContainer {
+  display: flex;
+}
+
+.contributionsContainer span:not(:last-child) {
+  margin-right: var(--spacings-xxs);
 }
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,7 +1,7 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'Morfeo',
-  tagline: 'Framework Agnostic theming system',
+  tagline: 'The theming system\nyou were missing',
   url: 'https://morfeo.dev',
   baseUrl: '/',
   onBrokenLinks: 'throw',

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -15,9 +15,12 @@ function HomepageHeader() {
         <div className={styles.logoContainer}>
           <Logo />
         </div>
-        <p className={clsx('hero__subtitle', styles.subtitle)}>
-          {siteConfig.tagline}
-        </p>
+        <div className={clsx('hero__subtitle', styles.subtitle)}>
+          {siteConfig.tagline.split('\n').map(part => (
+            <p>{part}</p>
+          ))}
+        </div>
+
         <div className={styles.buttons}>
           <Link
             className="button button--primary button--lg"

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -36,3 +36,7 @@
   margin-top: 30px;
   margin-bottom: 30px;
 }
+
+.subtitle  p {
+  margin: 0;
+}