Merge pull request #65 from biolab/feature/60

Feature/60
biolab · Oct 26, 2023 · 241c50c · 241c50c · vercel · Oct 26, 2023
2 parents 56e491a + 4fbde46
commit 241c50c
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 51 deletions.
diff --git a/components/Blog/Blog.styled.tsx b/components/Blog/Blog.styled.tsx
@@ -57,6 +57,10 @@ export const BlogTag = styled.p<{ $big?: boolean }>`
   margin-bottom: 6px;
   text-transform: capitalize;
 
+  span {
+    cursor: pointer;
+  }
+
   ${({ $big }) =>
     $big &&
     css`

diff --git a/components/Blog/BlogList.tsx b/components/Blog/BlogList.tsx
@@ -6,7 +6,13 @@ import BlogTags from "./Tags";
 import * as Styled from "./Blog.styled";
 import formateDate from "@utils/formatDate";
 
-export default function BlogList({ blogs }: { blogs: BlogMetadata[] }) {
+export default function BlogList({
+  blogs,
+  onTagClick,
+}: {
+  blogs: BlogMetadata[];
+  onTagClick: (tag: string) => void;
+}) {
   return (
     <Styled.BlogList>
       {blogs.map(
@@ -25,16 +31,16 @@ export default function BlogList({ blogs }: { blogs: BlogMetadata[] }) {
               </Styled.BlogListImageWrapper>
             )}
 
-            <BlogTags tags={tags} />
-            <Heading2>
+            <BlogTags tags={tags} onTagClick={onTagClick} />
+            <Heading2 $mb6>
               <Link href={`blog/${url}`}>{title}</Link>
             </Heading2>
             <BodyText>{shortExcerpt}</BodyText>
             <BodyText>
               <strong>{author}</strong>, {formateDate(date)}
             </BodyText>
           </Styled.BlogListItem>
-        )
+        ),
       )}
     </Styled.BlogList>
   );

diff --git a/components/Blog/FeaturedBlog.tsx b/components/Blog/FeaturedBlog.tsx
@@ -9,9 +9,11 @@ import formateDate from "@utils/formatDate";
 export default function FeaturedBlog({
   blog,
   show,
+  onTagClick,
 }: {
   blog: BlogMetadata;
   show: boolean;
+  onTagClick: (tag: string) => void;
 }) {
   const { title, url, date, thumbImage, shortExcerpt, author, tags } = blog;
 
@@ -34,7 +36,7 @@ export default function FeaturedBlog({
       </Styled.FBImageWrapper>
 
       <Styled.FBContentWrapper>
-        <BlogTags tags={tags} big={true} />
+        <BlogTags tags={tags} big={true} onTagClick={onTagClick} />
         <Heading1>
           <Link href={`blog/${url}`}>{title}</Link>
         </Heading1>

diff --git a/components/Blog/Tags.tsx b/components/Blog/Tags.tsx
@@ -3,14 +3,21 @@ import * as Styled from "./Blog.styled";
 export default function BlogTags({
   tags,
   big,
+  onTagClick,
 }: {
   tags: string[];
   big?: boolean;
+  onTagClick?: (tag: string) => void;
 }) {
   return (
     <Styled.BlogTag $big={big}>
       {tags.map((tag: string, index: number) => (
-        <span key={tag}>
+        <span
+          onClick={() => {
+            onTagClick?.(tag);
+          }}
+          key={tag}
+        >
           <span>{tag}</span>
           {index !== tags.length - 1 && ", "}
         </span>

diff --git a/components/Home/UsersSection.tsx b/components/Home/UsersSection.tsx
@@ -87,8 +87,7 @@ const SliderWrapper = styled.div`
 
 const Slide = styled.div`
   background: #ffffff;
-  border: 1px solid #d9d9d9;
-  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
+  border: 1px solid ${(props) => props.theme.borderColor};
   border-radius: 6px;
   padding: 60px;
 
@@ -207,7 +206,7 @@ export default function UsersSection({
                       </div>
                     </User>
                   </Slide>
-                )
+                ),
               )}
             </div>
             {loaded && instanceRef.current && (
@@ -235,7 +234,7 @@ export default function UsersSection({
               <Dots>
                 {[
                   ...Array(
-                    instanceRef.current.track.details.slides.length
+                    instanceRef.current.track.details.slides.length,
                   ).keys(),
                 ].map((idx) => {
                   return (

diff --git a/components/Navbar/Navbar.styled.tsx b/components/Navbar/Navbar.styled.tsx
@@ -93,7 +93,7 @@ export const MenuList = styled.ul`
 
 export const SearchWrapper = styled.form`
   position: relative;
-  width: 160px;
+  width: 142px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -142,6 +142,7 @@ export const SearchButton = styled.button`
   border: 1px solid #474747;
   border-radius: 0px 5px 5px 0px;
   background-color: ${({ theme }) => theme.gray};
+
   @media ${device.M} {
     margin-left: 0;
   }

diff --git a/components/TagsList/Tag.tsx b/components/TagsList/Tag.tsx
@@ -8,6 +8,7 @@ const Tag = styled.button<{ $active?: boolean }>`
   border: 1px solid ${({ theme }) => theme.purple};
   color: ${({ theme }) => theme.purple};
   cursor: pointer;
+  text-transform: capitalize;
 
   ${({ $active, theme }) =>
     $active &&

diff --git a/components/TagsList/useTags.tsx b/components/TagsList/useTags.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import React from "react";
 
-export default function useTags<T>(data: T[], tagProp: string) {
+export default function useTags<T>(data: T[], tagProp: string, tags: string[]) {
   const router = useRouter();
 
   const selectedTag = React.useMemo(() => {
@@ -28,7 +28,7 @@ export default function useTags<T>(data: T[], tagProp: string) {
             },
           },
           undefined,
-          { shallow: true }
+          { shallow: true },
         );
 
         return;
@@ -42,25 +42,31 @@ export default function useTags<T>(data: T[], tagProp: string) {
           },
         },
         undefined,
-        { shallow: true }
+        { shallow: true },
       );
     },
-    [router, selectedTag]
+    [router, selectedTag],
   );
 
   const filteredData = React.useMemo(
     () =>
       selectedTag
-        ? data.filter((example: any) =>
-            (example[tagProp] as string)?.includes(selectedTag)
+        ? data.filter(
+            (example: any) =>
+              (example[tagProp] as string)?.includes(selectedTag),
           )
         : data,
-    [data, selectedTag, tagProp]
+    [data, selectedTag, tagProp],
   );
 
+  const allTags = React.useMemo(() => {
+    return [...new Set([...tags, ...(selectedTag ? [selectedTag] : [])])];
+  }, [selectedTag, tags]);
+
   return {
     filteredData,
     selectedTag,
     onTagClick,
+    allTags,
   };
 }
diff --git a/components/UiKit/MainLayout.tsx b/components/UiKit/MainLayout.tsx
@@ -1,13 +1,19 @@
 import { NextSeo } from "next-seo";
 import { OpenGraph } from "next-seo/lib/types";
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Adapt from "./Adapt";
 import { Heading1 } from "./Typography";
 
-const H1 = styled(Heading1)`
+const H1 = styled(Heading1)<{ $leftAlign?: boolean }>`
   margin-bottom: 50px !important;
   text-align: center;
+
+  ${(props) =>
+    props.$leftAlign &&
+    css`
+      text-align: left;
+    `}
 `;
 
 const MainLayout = ({
@@ -17,13 +23,15 @@ const MainLayout = ({
   openGraph,
   $width650,
   $width714,
+  titleLeft,
 }: {
-  children: React.ReactNode | React.ReactNode[];
+  children?: React.ReactNode | React.ReactNode[];
   title?: string;
   justSEO?: boolean;
   openGraph?: OpenGraph;
   $width650?: boolean;
   $width714?: boolean;
+  titleLeft?: boolean;
 }) => {
   const seo = React.useMemo(
     () => (
@@ -35,7 +43,7 @@ const MainLayout = ({
         }}
       />
     ),
-    [openGraph, title]
+    [openGraph, title],
   );
 
   if (justSEO) {
@@ -50,7 +58,7 @@ const MainLayout = ({
     <>
       {seo}
       <Adapt $mt $mb $width650={$width650} $width714={$width714}>
-        {title && <H1> {title}</H1>}
+        {title && <H1 $leftAlign={titleLeft}> {title}</H1>}
         {children}
       </Adapt>
     </>

diff --git a/components/UiKit/Typography.tsx b/components/UiKit/Typography.tsx
@@ -21,13 +21,18 @@ export const Heading1 = styled.h1`
   ${LinkInsideH};
 `;
 
-export const Heading2 = styled.h2`
+export const Heading2 = styled.h2<{ $mb6?: boolean }>`
   font-size: 22px;
   line-height: 1.18;
   font-weight: 600;
   margin-bottom: 16px;
   color: ${({ theme }) => theme.blackLight1};
 
+  ${(props) =>
+    props.$mb6 &&
+    css`
+      margin-bottom: 6px;
+    `}
   ${LinkInsideH};
 `;
 

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,6 +1,6 @@
-import { useRouter } from "next/router";
+import MainLayout from "@components/UiKit/MainLayout";
 import React from "react";
 
 export default function Custom404() {
-  return <h1>404 - Page Not Found</h1>;
+  return <MainLayout title="Page Not Found"></MainLayout>;
 }
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -39,7 +39,11 @@ export default function Blog({
   blogs: BlogMetadata[];
   tags: string[];
 }) {
-  const { filteredData, selectedTag, onTagClick } = useTags(blogs, "tags");
+  const { filteredData, selectedTag, allTags, onTagClick } = useTags(
+    blogs,
+    "tags",
+    tags,
+  );
 
   const {
     itemsOnPage: blogsOnPage,
@@ -55,9 +59,17 @@ export default function Blog({
 
   return (
     <MainLayout title="Blog">
-      <TagsList tags={tags} selectedTag={selectedTag} onTagClick={onTagClick} />
-      <FeaturedBlog blog={blogs[0]} show={page === 0 && !selectedTag} />
-      <BlogList blogs={blogsOnPage} />
+      <TagsList
+        tags={allTags}
+        selectedTag={selectedTag}
+        onTagClick={onTagClick}
+      />
+      <FeaturedBlog
+        blog={blogs[0]}
+        show={page === 0 && !selectedTag}
+        onTagClick={onTagClick}
+      />
+      <BlogList blogs={blogsOnPage} onTagClick={onTagClick} />
       <Pagination noOfPages={noOfPages} page={page} setPage={setPage} />
     </MainLayout>
   );

diff --git a/pages/download/index.tsx b/pages/download/index.tsx
@@ -56,11 +56,8 @@ const StDownloadWrapper = styled.div`
   }
 `;
 
-const StSmall = styled.p<{ $mt?: boolean }>`
-  font-size: 16px;
-  color: ${({ theme }) => theme.blackLight2};
-
-  ${(props) => props.$mt && "margin-top: 28px;"}
+const StDisclaimer = styled.p`
+  margin-top: 28px;
 
   b {
     font-weight: 600;
@@ -143,7 +140,7 @@ export default function Download() {
                 text={`Orange3-${config.version}-Miniconda-x86_64.exe (64 bit)`}
               />
 
-              <StSmall>Can be used without administrative priviledges.</StSmall>
+              <p>Can be used without administrative priviledges.</p>
 
               <h3>Portable Orange</h3>
 
@@ -152,10 +149,10 @@ export default function Download() {
                 text={`Orange3-${config.version}.zip`}
               />
 
-              <StSmall>
+              <p>
                 No installation needed. Just extract the archive and open the
                 shortcut in the extracted folder.
-              </StSmall>
+              </p>
             </div>
 
             <div>
@@ -174,13 +171,13 @@ export default function Download() {
                 text={`Orange3-${config.version}-Python3.8.8.dmg`}
               />
 
-              <StSmall $mt>
+              <StDisclaimer>
                 <b>Not sure which installer to select?</b> Click the Apple logo
                 in the top-left corner of your screen, select About This Mac,
                 and check the Chip or Processor field. If you see Apple, select
                 the Orange for Apple Silicon installer. If you see Intel, select
                 the Orange for Intel.
-              </StSmall>
+              </StDisclaimer>
             </div>
 
             <div>