Merge branch 'release/3.1.0'

marceloglacial · Mar 1, 2023 · 1ff9df7 · 1ff9df7 · vercel · Mar 1, 2023
2 parents 5cfbc02 + 6181b25
commit 1ff9df7
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 218 deletions.
diff --git a/README.md b/README.md
@@ -4,10 +4,9 @@ Brazil-Canada Community Association's website. A headless WordPress application
 
 ## Live Demo
 
-- <a href='https://brinca-2021.herokuapp.com/'>Back-end (WordPress)</a>
+- <a href='https://brinca-cms-strapi.fly.dev/admin/'>Back-end (Strapi)</a>
 - <a href='https://brinca2020.vercel.app/'>Front-end (Next)</a>
 
-
 ## Stack
 
 - Front-end
@@ -16,53 +15,37 @@ Brazil-Canada Community Association's website. A headless WordPress application
   - <a href='https://swr.vercel.app/'>SWR data fetching</a>
   - <a href='https://github.com/css-modules/css-modules'>CSS Modules</a>
 - Back-end
-  - <a href='https://wordpress.org/'>WordPress</a>
-  - <a href='https://wordpress.org/gutenberg/'>Gutenberg Blocks</a>
+  - <a href='https://strapi.io'>Strapi</a>
 - CI/CD
   - <a href='https://vercel.com/'>Vercel</a>
 
 ## How to use
 
 ### 1. Install NPM packages:
 
-`yarn install` 
-
+```shell
+yarn install
+```
 
-### 2. Set local env file 
+### 2. Set local env file
 
 1. Rename `.env.example` to `.env.local`
-2. Change `NEXT_PUBLIC_WORDPRESS_URL` to your local WordPress address. E.G.: `http://localhost:8080`
-
+2. Update env values
 
 ### 3. Run development environment
 
-`yarn run dev`
-
-### 4. Setup WordPress
-
-#### 4.1. REST API
-
-Please be sure your permalink settings is set to `Post name`.
-
-#### 4.2. Front Page
+```
+yarn dev
+```
 
-Please be sure your front page is set on `Settings > Reading > Your homepage displays`
-
-#### 4.3. Must-use plugins:
-
-- <a href='http://joebr.io/'>WP Headless</a>
-- <a href='https://www.yikesplugins.com/'>WP REST API Controller</a>
-- <a href='https://thebatclaud.io/'>WP-REST-API V2 Menus</a>
-- <a href='http://www.danielauener.com/wordpress-rest-api-extensions-for-going-headless-wp/'>WUXT Headless WordPress API Extensions</a>
-
-#### 4.4.Wordpress required Configuration
-
-Make sure <a href='https://thebatclaud.io/'>WP-REST-API V2 Menus</a> is installed.
+## How to Build
 
-- Create a menu called: 'Header'
-- Create a menu called 'Footer'
-- Define a Front page
+```shell
+yarn build
+```
 
-## How to Build
+and
 
-`yarn run build`
+```shell
+yarn start
+```
diff --git a/components/Blocks/Embed/Embed.js b/components/Blocks/Embed/Embed.js
@@ -2,15 +2,13 @@ import Iframe from './components/Iframe';
 import Twitter from './components/Twitter';
 
 const Embed = (props) => {
-  const { innerHTML, attrs } = props;
-  const { url, providerNameSlug: type } = attrs;
-  const caption = innerHTML?.includes('figcaption');
+  const { url, embedType, caption } = props;
   const embeds = {
     soundcloud: <Iframe type={'soundcloud'} url={url} caption={caption} />,
     twitter: <Twitter url={url} caption={caption} />,
     youtube: <Iframe type={'youtube'} url={url} caption={caption} />,
     vimeo: <Iframe type={'vimeo'} url={url} caption={caption} />,
   };
-  return embeds[type] || <p>Embed not found.</p>;
+  return embeds[embedType] || <p>Embed not found.</p>;
 };
 export default Embed;
diff --git a/components/Header/Header.js b/components/Header/Header.js
@@ -1,9 +1,11 @@
 import Logo from 'components/Logo/Logo';
-import MenuSubscribe from './MenuSusbcribe';
 import HeaderNav from './HeaderNav';
 import styles from './Header.module.scss';
+import { useState } from 'react';
+import HeaderNavButton from './HeaderNavButton';
 
 const Header = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div
       className={`container d-flex justify-content-between ${styles.navbarContainer}`}
@@ -12,20 +14,21 @@ const Header = (props) => {
         <Logo />
       </div>
       <div className={`d-flex ${styles.navigation}`}>
-        <input
-          type='checkbox'
-          className={`${styles.navigation__checkbox}`}
-          id='nav__toggle'
-        />
-        <label htmlFor='nav__toggle' className={`${styles.navigation__button}`}>
-          <span className={`${styles.navigation__icon}`}>&nbsp;</span>
-        </label>
-        <div className={`${styles.navigation__background}`}>&nbsp;</div>
-        <nav className={`navbar navbar-expand-lg ${styles.navigation__nav}`}>
-          <div className={`${styles.listsWrap}`}>
-            <HeaderNav {...props} />
-            {/* <MenuSubscribe {...props} /> */}
-          </div>
+        <div
+          className={`${styles.navigationButton} ${
+            isOpen && styles.navigationButtonIsOpen
+          }`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? `Close` : <HeaderNavButton />}
+        </div>
+        <nav
+          className={`navbar navbar-expand-lg ${styles.navigationNav} ${
+            isOpen && styles.navigationNavIsOpen
+          }`}
+          onClick={() => setIsOpen(false)}
+        >
+          <HeaderNav {...props} />
         </nav>
       </div>
     </div>

diff --git a/components/Header/Header.module.scss b/components/Header/Header.module.scss
@@ -82,179 +82,59 @@
   white-space: nowrap;
 }
 
-.navigation {
-  position: relative;
-
-  &__checkbox {
-    display: none;
-  }
-
-  &__button {
-    @media (max-width: 991px) {
-      // margin-top: 0.75rem;
-      height: 2.5rem;
-      width: 2.5rem;
-      border-radius: 50%;
-      position: absolute;
-      top: 0.75rem;
-      right: 0.5rem;
-      background-color: var(--green);
-      z-index: 2000;
-      box-shadow: 0 1rem 3rem rgba(var(--black), 0.1);
-      text-align: center;
-      cursor: pointer;
-    }
-  }
-
-  &__background {
-    @media (max-width: 991px) {
-      height: 1rem;
-      width: 1rem;
-      border-radius: 50%;
-      position: absolute;
-      top: 1.5rem;
-      right: 1.5rem;
-      background-image: radial-gradient(var(--green), var(--green));
-      z-index: 1000;
-      transition: transform 0.3s;
-    }
-  }
-
-  &__nav {
-    @media (max-width: 991px) {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      position: fixed;
-      top: 0;
-      right: 0;
-      z-index: 1500;
-      opacity: 0;
-      width: 0;
-      transition: all 0.3s;
-    }
-  }
-
-  &__list {
-    @media (max-width: 991px) {
-      // none
-    }
+.navigationButton {
+  @media (max-width: 991px) {
+    display: block;
+    position: absolute;
+    z-index: 9999;
+    right: 2rem;
+    top: 2rem;
+    transition: all 0.3s ease-in-out;
   }
-
-  &__subscribe {
-    @media (max-width: 991px) {
-      //  none
-    }
+  &:hover {
+    cursor: pointer;
   }
+  display: none;
+}
 
-  &__item {
-    @media (max-width: 991px) {
-      margin: 0.5rem 0;
-    }
-  }
+.navigationButtonIsOpen {
+  color: var(--white);
+}
 
-  &__link {
-    @media (max-width: 991px) {
-      &:link,
-      &:visited {
-        font-size: 1rem !important;
-        font-weight: normal !important;
-        display: inline-block;
-        padding: 1rem;
+.navigationNav {
+  @media (max-width: 991px) {
+    position: fixed;
+    z-index: 999;
+    right: -100%;
+    top: 0;
+    transition: all 0.3s ease-in-out;
+    display: flex;
+    height: 100vh;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--green);
+
+    .navigationList {
+      display: inline-flex;
+      gap: 1rem;
+      a {
         color: var(--white);
-        text-decoration: none;
-        transition: all 0.3s;
-
-        span {
-          display: inline-block;
-          margin-right: 1.5rem;
-        }
+        text-align: center;
+        display: block;
       }
 
-      &:hover,
-      &:active {
-        background-color: none !important;
-        background: none !important;
-        background-position: 100%;
-        color: var(--white) !important;
+      a:hover {
+        text-decoration: underline;
       }
-    }
-  }
-
-  // FUNCTIONALITY
-  &__checkbox:checked ~ &__background {
-    transform: scale(200);
-  }
-
-  &__checkbox:checked ~ &__nav {
-    opacity: 1;
-    width: 100%;
-  }
 
-  // ICON
-  &__icon {
-    position: relative;
-    margin-top: 1.2rem;
-    &,
-    &::before,
-    &::after {
-      width: 1rem;
-      height: 2px;
-      background-color: var(--white);
-      display: inline-block;
-    }
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      transition: all 0.5s;
-    }
-    &::before {
-      top: -0.3rem;
-    }
-    &::after {
-      top: 0.3rem;
+      a:after {
+        display: none;
+      }
     }
   }
-
-  &__button:hover &__icon::before {
-    top: -0.35rem;
-  }
-  &__button:hover &__icon::after {
-    top: 0.35rem;
-  }
-
-  // hide the line of the middle
-  &__checkbox:checked + &__button &__icon {
-    top: 1rem;
-    right: 1.5rem;
-    position: fixed;
-    background-color: transparent;
-  }
-
-  &__checkbox:checked + &__button &__icon::before {
-    top: 0;
-    transform: rotate(225deg);
-  }
-
-  &__checkbox:checked + &__button &__icon::after {
-    top: 0;
-    transform: rotate(-225deg);
-  }
 }
 
-.listsWrap {
-  display: flex;
-  align-items: center;
-  @media (max-width: 991px) {
-    flex-direction: column;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    list-style: none;
-    text-align: center;
-  }
+.navigationNavIsOpen {
+  right: 0;
 }
diff --git a/components/Header/HeaderNav.js b/components/Header/HeaderNav.js
@@ -19,7 +19,7 @@ const HeaderNav = (props) => {
     return <Alert title={menuContent.message} />;
 
   return (
-    <ul className={`navbar-nav ml-auto ${styles.navigation__list}`}>
+    <ul className={`navbar-nav ml-auto ${styles.navigationList}`}>
       {menuContent.items.map((item) => {
         const { ID, title, slug, url, child_items } = item;
         const hasSubMenu = child_items && isOpen;