From 1b385e6e297fbd95d2733ecd708b78d309325a5a Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 10 Jun 2023 20:43:30 +0530 Subject: [PATCH 1/4] feat: carousel design for the highlights feed --- npm-shrinkwrap.json | 29 ++++++++- package.json | 3 +- src/popup/components/HighlightSlide.tsx | 48 +++++++++++++++ src/popup/pages/home.tsx | 81 ++++++------------------- 4 files changed, 96 insertions(+), 65 deletions(-) create mode 100644 src/popup/components/HighlightSlide.tsx diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index adebdcd0..a1abe8a5 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -15,7 +15,8 @@ "react-chrome-extension-router": "^1.4.0", "react-dom": "^18.0.0", "react-hot-toast": "^2.4.1", - "react-icons": "^4.8.0" + "react-icons": "^4.8.0", + "swiper": "^9.3.2" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", @@ -5995,6 +5996,11 @@ "deprecated": "Please use @jridgewell/sourcemap-codec instead", "dev": true }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -6205,6 +6211,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.3.2.tgz", + "integrity": "sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "dependencies": { + "ssr-window": "^4.0.2" + }, + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tailwindcss": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", diff --git a/package.json b/package.json index 70484b27..cf4a8ea8 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "react-chrome-extension-router": "^1.4.0", "react-dom": "^18.0.0", "react-hot-toast": "^2.4.1", - "react-icons": "^4.8.0" + "react-icons": "^4.8.0", + "swiper": "^9.3.2" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", diff --git a/src/popup/components/HighlightSlide.tsx b/src/popup/components/HighlightSlide.tsx new file mode 100644 index 00000000..223751f2 --- /dev/null +++ b/src/popup/components/HighlightSlide.tsx @@ -0,0 +1,48 @@ + +interface HighlightSlideProps { + highlight: { + url: string; + title: string; + login: string; + highlight: string; + }; +} + +export const HighlightSlide = ({ highlight }: HighlightSlideProps) => { + const { url, title, login, highlight: highlightText } = highlight; + + return ( +
+

+ + {title} + +

+ + +
+
Author:
+ + + {login} + +
+ +

+ {highlightText} +

+ +
); +}; diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx index f9ac0b60..d721b8e4 100644 --- a/src/popup/pages/home.tsx +++ b/src/popup/pages/home.tsx @@ -1,12 +1,12 @@ import { - HiArrowLeft, - HiArrowRight, HiArrowTopRightOnSquare, HiOutlineQuestionMarkCircle, HiPencil, HiUserCircle, } from "react-icons/hi2"; import { FiSettings } from "react-icons/fi"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; import OpenSaucedLogo from "../../assets/opensauced-logo.svg"; import { useAuth } from "../../hooks/useAuth"; import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck"; @@ -22,13 +22,13 @@ import Settings from "./settings"; import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants"; import type { Highlight } from "../../ts/types"; import { useIsGithubPRPageCheck } from "../../hooks/useGithubPRPageCheck"; +import { HighlightSlide } from "../components/HighlightSlide"; const Home = () => { const { user } = useAuth(); const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck(); const { isGithubPRPage, prUrl, prTitle } = useIsGithubPRPageCheck(); const [highlights, setHighlights] = useState([]); - const [currentPage, setCurrentPage] = useState(0); useEffect(() => { const fetchHighlights = async () => { @@ -49,14 +49,6 @@ const Home = () => { void fetchHighlights(); }, []); - const handlePrevious = () => { - setCurrentPage(prevPage => prevPage - 1); - }; - - const handleNext = () => { - setCurrentPage(prevPage => prevPage + 1); - }; - return (
@@ -90,59 +82,22 @@ const Home = () => {

Latest Highlight:

{highlights.length > 0 && ( + + { + highlights.map((highlight, index) => ( + + + + )) + } + + )} -
-

- - {highlights[currentPage]?.title} - -

- - - - -

- {highlights[currentPage]?.highlight} -

- -
-
- - - -
-
-
)}

Tools:

From 3755e66fe3254f4c1038c1363745512ba0aea596 Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 10 Jun 2023 21:09:21 +0530 Subject: [PATCH 2/4] uniform heights --- src/popup/components/HighlightSlide.tsx | 39 +++++++++++++++++++------ 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/src/popup/components/HighlightSlide.tsx b/src/popup/components/HighlightSlide.tsx index 223751f2..31e371ca 100644 --- a/src/popup/components/HighlightSlide.tsx +++ b/src/popup/components/HighlightSlide.tsx @@ -11,11 +11,23 @@ interface HighlightSlideProps { export const HighlightSlide = ({ highlight }: HighlightSlideProps) => { const { url, title, login, highlight: highlightText } = highlight; + const openGraphSearchParameter = url.split("/").slice(3) + .join("/"); + const openGraphUrl = `https://opengraph.githubassets.com/1/${openGraphSearchParameter}`; + return ( -
-

+
+ {/* fixed height, content ellipsis */} +

{

-
-
Author:
+ Author: {login}
-

+

{highlightText}

+ OpenGraph +
); }; From 52182828616a456c525266dc957977f5266763ef Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Tue, 13 Jun 2023 18:24:09 +0530 Subject: [PATCH 3/4] add a11y navigation pagination and remove highlights feed separate link --- src/popup.css | 13 +++++++++++++ src/popup/pages/home.tsx | 26 ++++++++++++++------------ src/utils/fetchOpenSaucedApiData.ts | 2 +- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/popup.css b/src/popup.css index f51b059f..5cc2cc66 100644 --- a/src/popup.css +++ b/src/popup.css @@ -21,3 +21,16 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +:root { + --swiper-theme-color: hsla(19, 100%, 50%, 1); + --swiper-pagination-top: 5px; + --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115); + --swiper-pagination-bullet-size: 6px; + --swiper-navigation-size: 18px; + --swiper-navigation-sides-offset:5px; +} + +.swiper-pagination{ + position: relative; +} \ No newline at end of file diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx index d721b8e4..dc6cbfae 100644 --- a/src/popup/pages/home.tsx +++ b/src/popup/pages/home.tsx @@ -5,8 +5,9 @@ import { HiUserCircle, } from "react-icons/hi2"; import { FiSettings } from "react-icons/fi"; +import { Navigation, Pagination, A11y } from "swiper"; import { Swiper, SwiperSlide } from "swiper/react"; -import "swiper/css"; +import "swiper/css/bundle"; import OpenSaucedLogo from "../../assets/opensauced-logo.svg"; import { useAuth } from "../../hooks/useAuth"; import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck"; @@ -79,10 +80,21 @@ const Home = () => {
-

Latest Highlight:

+ + Highlights feed + + {highlights.length > 0 && ( @@ -102,16 +114,6 @@ const Home = () => {

Tools:

- - - Highlights feed - - => { const response = await cachedFetch( - `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`, + `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}?limit=10`, { method: "GET", expireInSeconds: 300, From 93771b540f4cc776a8551f9dd4a02848d4158fb2 Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Tue, 13 Jun 2023 18:30:48 +0530 Subject: [PATCH 4/4] lint and update package --- npm-shrinkwrap.json | 8 ++++---- package.json | 2 +- src/popup/pages/aiprdescription.tsx | 3 +-- src/popup/pages/home.tsx | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index a1abe8a5..6edbf379 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -16,7 +16,7 @@ "react-dom": "^18.0.0", "react-hot-toast": "^2.4.1", "react-icons": "^4.8.0", - "swiper": "^9.3.2" + "swiper": "^9.4.0" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", @@ -6212,9 +6212,9 @@ } }, "node_modules/swiper": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.3.2.tgz", - "integrity": "sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.0.tgz", + "integrity": "sha512-AKame5qkFnNKCJ8Bfn3YuOi/LoUuAESVdCv/BJH5fKgdAUFRtImZXV3gdYlYovXbasJDV6hHNWdQvdzPB6aebw==", "funding": [ { "type": "patreon", diff --git a/package.json b/package.json index cf4a8ea8..35ee42b6 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "react-dom": "^18.0.0", "react-hot-toast": "^2.4.1", "react-icons": "^4.8.0", - "swiper": "^9.3.2" + "swiper": "^9.4.0" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", diff --git a/src/popup/pages/aiprdescription.tsx b/src/popup/pages/aiprdescription.tsx index 1ebedba4..cf2e0dbc 100644 --- a/src/popup/pages/aiprdescription.tsx +++ b/src/popup/pages/aiprdescription.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useReducer, useState } from "react"; +import React, { useEffect, useReducer } from "react"; import { FaChevronLeft } from "react-icons/fa"; import OpenSaucedLogo from "../../assets/opensauced-logo.svg"; -import { ImSwitch } from "react-icons/im"; import toast, { Toaster } from "react-hot-toast"; import { diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx index dc6cbfae..f0a3cb15 100644 --- a/src/popup/pages/home.tsx +++ b/src/popup/pages/home.tsx @@ -7,7 +7,7 @@ import { import { FiSettings } from "react-icons/fi"; import { Navigation, Pagination, A11y } from "swiper"; import { Swiper, SwiperSlide } from "swiper/react"; -import "swiper/css/bundle"; +import "swiper/swiper-bundle.min.css"; import OpenSaucedLogo from "../../assets/opensauced-logo.svg"; import { useAuth } from "../../hooks/useAuth"; import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";