Merge pull request #55 from marcoandre1/release

Release

package.json

@@ -43,6 +43,7 @@
   },
   "homepage": "https://modokemdev.com",
   "dependencies": {
+    "@headlessui/react": "^0.2.0",
     "gh-pages": "^2.2.0",
     "husky": "^4.3.6",
     "lint-staged": "^10.5.3",

src/App.js

@@ -1,21 +1,24 @@
 import React, { Component } from "react";
-import { BrowserRouter, Route } from "react-router-dom";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./store";
 import { ConnectedDashboard } from "./components/Dashboard";
 import { ConnectedNavigation } from "./components/Navigation";
 import { ConnectedFooter } from "./components/Footer";
+import NoMatch from "./components/NoMatch";
 
 class App extends Component {
   constructor() {
     super();
     this.state = {
       isDarkMode: false,
       isMenuOpen: false,
+      isTranslateMenuOpen: false,
     };
     // Binding method
     this.onDarkModeToggle = this.onDarkModeToggle.bind(this);
     this.onMobileMenuClick = this.onMobileMenuClick.bind(this);
+    this.onTranslateToggle = this.onTranslateToggle.bind(this);
   }
 
   componentDidMount() {
@@ -41,11 +44,27 @@ class App extends Component {
     });
   }
 
+  onTranslateToggle() {
+    this.setState({
+      isTranslateMenuOpen: !this.state.isTranslateMenuOpen,
+    });
+  }
+
   onDarkModeToggle() {
     if (document.querySelector("html").classList.contains("dark")) {
       document.querySelector("html").classList.remove("dark");
+      if (localStorage.theme === undefined) {
+        localStorage.setItem("theme", "light");
+      } else {
+        localStorage.theme = "light";
+      }
     } else {
       document.querySelector("html").classList.add("dark");
+      if (localStorage.theme === undefined) {
+        localStorage.setItem("theme", "dark");
+      } else {
+        localStorage.theme = "dark";
+      }
     }
     this.setDarkMode();
   }
@@ -68,15 +87,27 @@ class App extends Component {
                   onDarkModeToggle={this.onDarkModeToggle}
                   isMenuOpen={this.state.isMenuOpen}
                   onMobileMenuClick={this.onMobileMenuClick}
+                  isTranslateMenuOpen={this.state.isTranslateMenuOpen}
+                  onTranslateToggle={this.onTranslateToggle}
                 />
               </header>
               <main>
-                <Route exact path={`/`} render={() => <ConnectedDashboard />} />
-                <Route
-                  exact
-                  path={`/:id`}
-                  render={({ match }) => <ConnectedDashboard match={match} />}
-                />
+                <Switch>
+                  <Route exact path={`/`}>
+                    <Redirect to="/en" />
+                  </Route>
+                  <Route
+                    exact
+                    path={`/:id`}
+                    render={({ match }) => (
+                      <ConnectedDashboard
+                        match={match}
+                        isDarkMode={this.state.isDarkMode}
+                      />
+                    )}
+                  />
+                  <Route exact path="/:id/*" render={() => <NoMatch />} />
+                </Switch>
               </main>
               <ConnectedFooter />
             </Provider>

src/components/BioCard.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export default function BioCard({
+  id,
+  firstTitle,
+  firstContent,
+  secondTite,
+  secontContent,
+}) {
+  return (
+    <div className="pt-6 md:p-8 text-center md:text-left space-y-4">
+      <div className="uppercase tracking-wide text-sm text-indigo-600 dark:text-gray-300 font-bold">
+        {firstTitle}
+      </div>
+      <p className="mt-2 mb-2 text-left text-gray-600 dark:text-gray-400">
+        {firstContent}
+      </p>
+      <div className="uppercase tracking-wide text-sm text-indigo-600 dark:text-gray-300 font-bold">
+        {secondTite}
+      </div>
+      <p className="mt-2 mb-2 text-left text-gray-600 dark:text-gray-400">
+        {secontContent}
+      </p>
+    </div>
+  );
+}

src/components/DarkModeButton.jsx

@@ -7,9 +7,7 @@ const DarkModeButton = ({ isDarkMode, onDarkModeToggle }) => {
       aria-checked={isDarkMode}
       tabIndex="0"
       onClick={onDarkModeToggle}
-      className={`${
-        isDarkMode ? "bg-indigo-600" : "bg-gray-500"
-      } relative inline-block flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
+      className="bg-gray-500 dark:bg-indigo-600 relative inline-block flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline"
     >
       <span
         aria-hidden="true"

src/components/Dashboard.jsx

@@ -1,25 +1,29 @@
 import React from "react";
 import { connect } from "react-redux";
 import { ConnectedTaskList } from "./TaskList";
+import { ConnectedProjects } from "./Projects";
 import { Helmet } from "react-helmet";
 import PageNotFound from "./PageNotFound";
 
-export const Dashboard = ({ id, language, isValidRequest }) => (
+export const Dashboard = ({ id, language, isValidRequest, isDarkMode }) => (
   <div>
     <Helmet>
       <title>{language.htmlTitle}</title>
     </Helmet>
     {isValidRequest && (
       <div>
-        <h2 className="font-bold text-xl text-gray-900 dark:text-white mb-2 mt-2 px-6">
-          {language.title}
-        </h2>
-        <ConnectedTaskList
-          key={language.id}
-          id={language.id}
-          name={language.name}
-          description={language.description}
-        />
+        <div>
+          <h2 className="font-bold text-xl text-gray-900 dark:text-white mb-2 mt-2 px-6">
+            {language.title}
+          </h2>
+          <ConnectedTaskList key={language.id} {...language} />
+        </div>
+        <div className="pt-3">
+          <h2 className="font-bold text-xl text-gray-900 dark:text-white mb-2 mt-2 px-6">
+            {language.subTitle}
+          </h2>
+          <ConnectedProjects isDarkMode={isDarkMode} language={language} />
+        </div>
       </div>
     )}
     {!isValidRequest && (
@@ -36,7 +40,6 @@ function mapStateToProps(state, ownProps) {
   let isValidRequest = true;
 
   if (language === undefined) {
-    // id contains the /asdf
     language = state.pageNotFound.find((notFound) => notFound.id === 404);
     isValidRequest = false;
   }

src/components/Footer.jsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Footer = () => (
   <div className="bg-gray-200 dark:bg-gray-800 text-black dark:text-gray-300 rounded-md mt-6 p-6 flex justify-center">
-    Modokemdev © 2020
+    Modokemdev © 2021
   </div>
 );
 

src/components/GitHubButton.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import GitHubMark from "../images/GitHub-Mark-64px.png";
+import GitHubMarkLight from "../images/GitHub-Mark-Light-64px.png";
+
+export default function GitHubButton({ isDarkMode, repo }) {
+  return (
+    <div className="w-7">
+      <a href={repo}>
+        <img
+          src={isDarkMode ? GitHubMarkLight : GitHubMark}
+          alt="GitHub Mark"
+        />
+      </a>
+    </div>
+  );
+}

src/components/MobileMenuButton.jsx

@@ -6,7 +6,7 @@ const MobileMenuButton = ({ isMenuOpen, onMobileMenuClick }) => {
       <button
         onClick={onMobileMenuClick}
         className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-        aria-expanded="false"
+        aria-expanded={isMenuOpen}
       >
         <span className="sr-only">Open main menu</span>
         <svg

src/components/Navigation.jsx

@@ -4,13 +4,16 @@ import { Link } from "react-router-dom";
 import MobileMenuButton from "./MobileMenuButton";
 import DarkModeButton from "./DarkModeButton";
 import LogoMark from "./LogoMark";
+import TranslateDropDown from "./TranslateDropDown";
 
 const Navigation = ({
   languages,
   isMenuOpen,
   onMobileMenuClick,
   isDarkMode,
   onDarkModeToggle,
+  isTranslateMenuOpen,
+  onTranslateToggle,
 }) => (
   <nav className="bg-gray-200 dark:bg-gray-800 rounded-md mb-6">
     <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
@@ -40,6 +43,11 @@ const Navigation = ({
             isDarkMode={isDarkMode}
             onDarkModeToggle={onDarkModeToggle}
           />
+          <TranslateDropDown
+            isTranslateMenuOpen={isTranslateMenuOpen}
+            onTranslateToggle={onTranslateToggle}
+            languages={languages}
+          />
         </div>
       </div>
     </div>

src/components/NoMatch.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+
+export default function NoMatch() {
+  let location = useLocation();
+
+  return (
+    <div className="flex justify-center">
+      <div class="h-screen -my-24 flex flex-wrap content-center">
+        <div className="max-w-sm rounded overflow-hidden shadow-lg">
+          <div className="px-6 py-4">
+            <h2 className="font-bold text-gray-900 dark:text-white mb-2 flex justify-center">
+              404 | This page could not be found.
+            </h2>
+            <h3 className="font-bold text-gray-600 dark:text-gray-300 flex justify-center">
+              No match for{" "}
+              <code className="bg-gray-200 dark:bg-indigo-600">
+                {location.pathname}
+              </code>
+            </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/PageNotFound.jsx

@@ -3,13 +3,13 @@ import React from "react";
 export default function PageNotFound({ id }) {
   return (
     <div className="flex justify-center">
-      <div class="h-96 my-3 flex flex-wrap content-center">
+      <div class="h-screen -my-24 flex flex-wrap content-center">
         <div className="max-w-sm rounded overflow-hidden shadow-lg">
           <div className="px-6 py-4">
             <h2 className="font-bold text-gray-900 dark:text-white mb-2 flex justify-center">
-              404 | Page not found
+              404 | This page could not be found.
             </h2>
-            <div className="font-bold text-gray-600 dark:text-gray-300">
+            <div className="font-bold text-gray-600 dark:text-gray-300 flex justify-center">
               The path,{" "}
               <span className="bg-gray-200 dark:bg-indigo-600">/{id}</span>, did
               not match any route.

src/components/Project.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import GitHubButton from "./GitHubButton";
+import ProjectImage from "./ProjectImage";
+
+export default function Project({
+  id,
+  bio,
+  name,
+  image,
+  url,
+  repo,
+  isDarkMode,
+  language,
+}) {
+  let description = bio.find((bio) => bio.language === language.id);
+  return (
+    <div className="bg-gray-100 dark:bg-gray-800 rounded overflow-hidden shadow-2xl p-6">
+      <div className="grid grid-cols-4 mb-6">
+        <div className="text-black dark:text-white hover:text-blue-700 dark:hover:text-indigo-300 font-bold text-lg col-span-3">
+          <a href={url}>{`${name}`}</a>
+        </div>
+        <div className="flex justify-end">
+          <GitHubButton isDarkMode={isDarkMode} repo={repo} />
+        </div>
+      </div>
+      <div className="mb-6">
+        <ProjectImage id={image} />
+      </div>
+      <div className="text-gray-600 dark:text-white">{description.text}</div>
+    </div>
+  );
+}

src/components/ProjectImage.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { SimpleImg } from "react-simple-img";
+
+export default function ProjectImage({ id }) {
+  return (
+    <SimpleImg
+      src={id}
+      animationDuration="1"
+      width={200}
+      height={130}
+      applyAspectRatio="true"
+    />
+  );
+}

src/components/ProjectSearchBar.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function ProjectSearchBar({ searchQuery, setSearchQuery }) {
+  return (
+    <div className="mb-6">
+      <input
+        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="username"
+        type="text"
+        placeholder="Search by name"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+    </div>
+  );
+}