Merge pull request #348 from open-sauced/beta

v2.25.0-beta.7 -> main

CHANGELOG.md

@@ -5,6 +5,69 @@
 
 > All notable changes to this project will be documented in this file
 
+## [2.25.0-beta.7](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.6...v2.25.0-beta.7) (2022-09-28)
+
+
+### 🍕 Features
+
+* replace existing footer with brand unified one ([#347](https://github.com/open-sauced/hot-sauce/issues/347)) ([27bde34](https://github.com/open-sauced/hot-sauce/commit/27bde344b20e0a7e5789d8ad21f8b7b270212032)), closes [#345](https://github.com/open-sauced/hot-sauce/issues/345)
+
+## [2.25.0-beta.6](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.5...v2.25.0-beta.6) (2022-09-27)
+
+
+### 🧑‍💻 Code Refactoring
+
+* dry in cmd k handling ([#344](https://github.com/open-sauced/hot-sauce/issues/344)) ([7b03ed6](https://github.com/open-sauced/hot-sauce/commit/7b03ed6ee64c4cf4fb06abedcf663f3bd0757dd3)), closes [#342](https://github.com/open-sauced/hot-sauce/issues/342)
+
+## [2.25.0-beta.5](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.4...v2.25.0-beta.5) (2022-09-27)
+
+
+### 🐛 Bug Fixes
+
+* remove anti-pattern from ListRepositories ([#346](https://github.com/open-sauced/hot-sauce/issues/346)) ([80e9594](https://github.com/open-sauced/hot-sauce/commit/80e95944064ba38cc95763be2f64d6bc497a214f)), closes [#316](https://github.com/open-sauced/hot-sauce/issues/316)
+
+## [2.25.0-beta.4](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.3...v2.25.0-beta.4) (2022-09-22)
+
+
+### 🐛 Bug Fixes
+
+* enables cmd+k and crtl+k from the right side of the keyboard ([#341](https://github.com/open-sauced/hot-sauce/issues/341)) ([91c3bb4](https://github.com/open-sauced/hot-sauce/commit/91c3bb49c7c0d8ef245ed3e65488c99f13b5fe61)), closes [#339](https://github.com/open-sauced/hot-sauce/issues/339)
+
+## [2.25.0-beta.3](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.2...v2.25.0-beta.3) (2022-09-13)
+
+
+### 🐛 Bug Fixes
+
+* remove anti-pattern from RepoSubmission ([#330](https://github.com/open-sauced/hot-sauce/issues/330)) ([e313a8d](https://github.com/open-sauced/hot-sauce/commit/e313a8db4b267716a1f206600479baf0e1653519)), closes [#317](https://github.com/open-sauced/hot-sauce/issues/317)
+
+## [2.25.0-beta.2](https://github.com/open-sauced/hot-sauce/compare/v2.25.0-beta.1...v2.25.0-beta.2) (2022-09-08)
+
+
+### 🍕 Features
+
+* added version number and ascii art addition - bdougie edit ([#332](https://github.com/open-sauced/hot-sauce/issues/332)) ([07a40aa](https://github.com/open-sauced/hot-sauce/commit/07a40aa963d672f5a2e5f2e2b2dbc25f32d974cb)), closes [#106](https://github.com/open-sauced/hot-sauce/issues/106) [#322](https://github.com/open-sauced/hot-sauce/issues/322)
+
+## [2.25.0-beta.1](https://github.com/open-sauced/hot-sauce/compare/v2.24.3-beta.2...v2.25.0-beta.1) (2022-09-08)
+
+
+### 🍕 Features
+
+* Added white borders to Stacked Avatars Component ([#328](https://github.com/open-sauced/hot-sauce/issues/328)) ([8dda541](https://github.com/open-sauced/hot-sauce/commit/8dda541e996325d645c64bdc0e16ff69753970e9)), closes [#286](https://github.com/open-sauced/hot-sauce/issues/286)
+
+### [2.24.3-beta.2](https://github.com/open-sauced/hot-sauce/compare/v2.24.3-beta.1...v2.24.3-beta.2) (2022-09-08)
+
+
+### 🐛 Bug Fixes
+
+* correct tailwind antipattern in primary nav ([#329](https://github.com/open-sauced/hot-sauce/issues/329)) ([b301293](https://github.com/open-sauced/hot-sauce/commit/b301293d4b02d6c1d7c0cce7f965f0ba0ea801aa)), closes [#314](https://github.com/open-sauced/hot-sauce/issues/314)
+
+### [2.24.3-beta.1](https://github.com/open-sauced/hot-sauce/compare/v2.24.2...v2.24.3-beta.1) (2022-08-30)
+
+
+### 🐛 Bug Fixes
+
+* correct tailwind antipattern ([#326](https://github.com/open-sauced/hot-sauce/issues/326)) ([a6f2c8f](https://github.com/open-sauced/hot-sauce/commit/a6f2c8f655c594bdbe008ca5f01131c641dc18ae)), closes [#318](https://github.com/open-sauced/hot-sauce/issues/318)
+
 ### [2.24.2](https://github.com/open-sauced/hot-sauce/compare/v2.24.1...v2.24.2) (2022-08-24)
 
 

index.html

@@ -34,6 +34,7 @@
       content="Open Sauced is a platform to gain insights on open source contributors and their contributions."
     />
     <meta property="twitter:image" content="/social-card.png" />
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

package.json

@@ -2,7 +2,7 @@
   "name": "@open-sauced/hot",
   "description": "🍕The site that recommends the hottest sauce.",
   "keywords": [],
-  "version": "2.24.2",
+  "version": "2.25.0-beta.7",
   "author": "TED Vortex <[email protected]>",
   "private": true,
   "license": "MIT",

src/App.tsx

@@ -9,6 +9,21 @@ import GradBackground from "./components/GradBackground";
 import Hero from "./components/Hero";
 import apiFetcher from "./hooks/useSWR";
 
+import getAppVersion from "./lib/appVersion";
+
+console.log(
+  `%c
+ ██████╗ ██████╗ ███████╗███╗   ██╗    ███████╗ █████╗ ██╗   ██╗ ██████╗███████╗██████╗
+██╔═══██╗██╔══██╗██╔════╝████╗  ██║    ██╔════╝██╔══██╗██║   ██║██╔════╝██╔════╝██╔══██╗
+██║   ██║██████╔╝█████╗  ██╔██╗ ██║    ███████╗███████║██║   ██║██║     █████╗  ██║  ██║
+██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║    ╚════██║██╔══██║██║   ██║██║     ██╔══╝  ██║  ██║
+╚██████╔╝██║     ███████╗██║ ╚████║    ███████║██║  ██║╚██████╔╝╚██████╗███████╗██████╔╝
+ ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝    ╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝╚══════╝╚═════╝%c v${getAppVersion()}`,
+  "color:#f6d82b",
+  "color:green;font-weight:bold",
+);
+
+
 const App = (): JSX.Element => {
   initiatePostHog();
 

src/components/Footer.tsx

@@ -1,82 +1,161 @@
-import { FaDev, FaDiscord, FaGithub, FaTwitter, FaYoutube } from "react-icons/fa";
+import { FaDev, FaDiscord } from "react-icons/fa";
+import OpenSaucedLogo from "../assets/openSauced-icon.png";
+
+// icons
+import
+{
+  AiOutlineTwitter,
+  AiOutlineGithub,
+  AiFillInstagram,
+  AiFillYoutube,
+} from "react-icons/ai";
+
+
+const footerContext = [
+  {
+    privacy: { url: "https://app.termly.io/document/privacy-policy/5e303854-d262-468a-80ec-54b645d01c2e", text: "Privacy" },
+    terms: { url: "https://app.termly.io/document/terms-of-use-for-saas/03e4e1c1-53ad-4fc4-b415-5c3f0e8c25ef", text: "Terms" },
+    status: { url: "https://api.opensauced.pizza/docs#/Health%20check%20service/healthStatusWeb", text: "Status" },
+  },
+  {
+    hot: { url: "https://hot.opensauced.pizza", text: "hot.opensauced.pizza" },
+    openSauced: { url: "https://opensauced.pizza", text: "opensauced.pizza" },
+  },
+  {
+    socials: [
+      { url: "https://twitter.com/saucedopen", icon: <AiOutlineTwitter className="text-2xl hover:text-light-slate-10 text-light-slate-9" /> },
+      { url: "https://github.com/open-sauced", icon: <AiOutlineGithub className="text-2xl hover:text-light-slate-10  text-light-slate-9" /> },
+      { url: "https://www.instagram.com/opensauced/", icon: <AiFillInstagram className="text-2xl hover:text-light-slate-10  text-light-slate-9" /> },
+      { url: "https://www.youtube.com/opensauced", icon: <AiFillYoutube className="text-2xl hover:text-light-slate-10  text-light-slate-9" /> },
+      { url: "https://discord.com/invite/U2peSNf23P", icon: <FaDiscord className="text-2xl hover:text-light-slate-10  text-light-slate-9" /> },
+      { url: "https://dev.to/opensauced/", icon: <FaDev className="text-2xl hover:text-light-slate-10  text-light-slate-9" /> },
+    ],
+  },
+];
 
 const Footer = (): JSX.Element => (
   <div>
-    <div className="bg-darkestGrey py-14 md:py-16">
-      <nav className="container">
-        <ul className="flex sm:flex-row text-xl font-righteous text-accent font-bold justify-center items-center cursor-pointer">
-          <li className="p-2 sm:mr-5">
+    <footer className="px-6 md:px-16 h-24 w-full bg-light-slate-2 transition">
+      <div className=" font-medium lg:border-t lg:py-8 lg:items-center lg:justify-between lg:gap-x-4 flex flex-col gap-y-4 lg:flex-row py-2 w-full">
+        <div className="text-center lg:text-left justify-center gap-1 flex items-center">
+          <div className="w-6 h-6 relative !min-w-[24px] min-h-[24px]">
+            <img
+              alt="brand logo"
+              src={OpenSaucedLogo}
+            />
+          </div>
+
+          <span className="lg:hidden font-bold text-light-slate-12 ">OpenSauced</span>
+
+          <p className="hidden !text-light-slate-9 lg:inline-block">
+            © 2022
+            {" "}
+
+            <span className="hidden lg:inline-block">OpenSauced</span>
+          </p>
+        </div>
+
+        <div className="flex lg:mr-auto lg:text-sm text-light-slate-11 justify-center gap-x-4">
+          <a
+            className="px-2 hover:text-light-slate-12 "
+            href={footerContext[1].hot?.url}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {footerContext[1].hot?.text}
+          </a>
+
+          <a
+            className="px-2 hover:text-light-slate-12"
+            href={footerContext[1].openSauced?.url}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {footerContext[1].openSauced?.text}
+          </a>
+        </div>
+
+        <div className="flex justify-center gap-x-4 ">
+          <div className=" hidden lg:flex items-center border-r pr-4   gap-x-4 text-light-slate-11 text-sm">
+            <a
+              className="px-2 hover:text-light-slate-12"
+              href={footerContext[0].terms?.url}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {footerContext[0].terms?.text}
+            </a>
+
             <a
-              aria-label="Hot Open Sauced on GitHub"
-              href="https://github.com/open-sauced/hot"
+              className="px-2 hover:text-light-slate-12"
+              href={footerContext[0].privacy?.url}
               rel="noreferrer"
               target="_blank"
             >
-              <FaGithub
-                aria-hidden="true"
-                className="text-offWhite hover:text-accent"
-              />
+              {footerContext[0].privacy?.text}
             </a>
-          </li>
 
-          <li className="p-2 sm:mr-5">
             <a
-              aria-label="@saucedopen on Twitter"
-              href="https://twitter.com/saucedopen"
+              className="px-2 hover:text-light-slate-12"
+              href={footerContext[0].status?.url}
               rel="noreferrer"
               target="_blank"
             >
-              <FaTwitter
-                aria-hidden="true"
-                className="text-offWhite hover:text-accent"
-              />
+              {footerContext[0].status?.text}
             </a>
-          </li>
+          </div>
+
+          {footerContext[2].socials?.map(({ url, icon }, index) => (
+            <a
+              key={index}
+              href={url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {icon}
+            </a>
+          ))}
+        </div>
+
+        <div className="flex md:justify-center lg:hidden lg:border-none lg:order-2 border-t py-3 pb-4 mt-2 text-sm justify-between">
+          <p className="text-light-slate-9">
+            © 2022
+            {" "}
+
+            <span className="hidden md:inline-block">Open sauced</span>
+          </p>
 
-          <li className="p-2 sm:mr-5">
+          <div className="flex items-center gap-x-3 text-light-slate-11 text-sm">
             <a
-              aria-label="Open Sauced on Discord"
-              href="https://discord.com/invite/U2peSNf23P"
+              className="px-2"
+              href={footerContext[0].terms?.url}
               rel="noreferrer"
               target="_blank"
             >
-              <FaDiscord
-                aria-hidden="true"
-                className="text-offWhite hover:text-accent"
-              />
+              {footerContext[0].terms?.text}
             </a>
-          </li>
 
-          <li className="p-2 sm:mr-5">
             <a
-              aria-label="Open Sauced on Discord"
-              href="https://www.youtube.com/opensauced"
+              className="px-2"
+              href={footerContext[0].privacy?.url}
               rel="noreferrer"
               target="_blank"
             >
-              <FaYoutube
-                aria-hidden="true"
-                className="text-offWhite hover:text-accent"
-              />
+              {footerContext[0].privacy?.text}
             </a>
-          </li>
 
-          <li className="p-2 sm:mr-5">
             <a
-              aria-label="Open Sauced on dev.to"
-              href="https://www.dev.to/opensauced"
+              className="px-2"
+              href={footerContext[0].status?.url}
               rel="noreferrer"
               target="_blank"
             >
-              <FaDev
-                aria-hidden="true"
-                className="text-offWhite hover:text-accent"
-              />
+              {footerContext[0].status?.text}
             </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
+          </div>
+        </div>
+      </div>
+    </footer>
   </div>
 );
 

src/components/Hero.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { MutableRefObject, useRef, useState } from "react";
 import { useDebounce, useDidUpdate, useKeys } from "rooks";
 import { FaRegDotCircle } from "react-icons/fa";
 import { AiOutlineStar } from "react-icons/ai";
@@ -33,9 +33,17 @@ const Hero = () => {
     e.preventDefault();
   };
 
-  useKeys(["ControlLeft", "KeyK"], handleCmdK, { target: containerRef });
+  const useKey = (superKey: string, key: string, target: MutableRefObject<Document>) => {
+    useKeys([superKey, key], handleCmdK, { target });
+  };
+
+  useKey("ControlLeft", "KeyK", containerRef);
+
+  useKey("ControlRight", "KeyK", containerRef);
+
+  useKey("MetaRight", "KeyK", containerRef);
 
-  useKeys(["MetaLeft", "KeyK"], handleCmdK, { target: containerRef });
+  useKey("MetaLeft", "KeyK", containerRef);
 
   useDidUpdate(async () => {
     const results = await fetchRecommendations("stars", 3, null, searchTerm);

src/components/ListRepositories.tsx

@@ -10,13 +10,13 @@ export declare interface ListRepositoriesProps {
 }
 
 const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData }: ListRepositoriesProps): JSX.Element => (
-  <div className="mx-auto max-w-7xl px-[16px] mt-[40px]">
-    <div className="flex flex-col gap-y-[20px]">
-      <div className="flex items-center gap-x-[10px]">
-        <BsFillCalendar2Fill className="w-[26px] h-[26px] text-white" />
+  <div className="mx-auto max-w-7xl px-4 mt-10">
+    <div className="flex flex-col gap-y-5">
+      <div className="flex items-center gap-x-2.5">
+        <BsFillCalendar2Fill className="w-8 h-8 text-white" />
 
         {activeLink &&
-          <h1 className="text-[24px] text-white font-semibold">
+          <h1 className="text-2xl text-white font-semibold">
             {`${camelCaseToTitleCase(activeLink)} Repositories`}
           </h1>}
       </div>
@@ -37,7 +37,7 @@ const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData }:
         limit <= 100 &&
           <div className="flex justify-center">
             <button
-              className="bg-white text-gray-700 mt-[15px] mb-[15px] text-[15px] border-gray-400 border-[1px] font-normal py-1 px-4 rounded-[5px] "
+              className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
               onClick={() => handleLoadingMore()}
             >
               Load More