Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: carousel design for the highlights feed #173

Merged
merged 4 commits into from
Jun 13, 2023
Merged

feat: carousel design for the highlights feed #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b385e6
feat: carousel design for the highlights feed
diivi Jun 10, 2023
3755e66
uniform heights
diivi Jun 10, 2023
5218282
add a11y navigation pagination and remove highlights feed separate link
diivi Jun 13, 2023
93771b5
lint and update package
diivi Jun 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion npm-shrinkwrap.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.4.0"
},
"devDependencies": {
"@crxjs/vite-plugin": "^1.0.14",
Expand Down
13 changes: 13 additions & 0 deletions src/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
69 changes: 69 additions & 0 deletions src/popup/components/HighlightSlide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@

interface HighlightSlideProps {
highlight: {
url: string;
title: string;
login: string;
highlight: string;
};
}

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 (
<div className="border border-white/40 rounded-md p-3 mt-2 bg-white">
{/* fixed height, content ellipsis */}
<h3 className="
text-base font-medium
overflow-hidden
line-clamp-2
h-6
leading-5
"
>
<a
className="text-slate-800 cursor-pointer"
href={url}
rel="noopener noreferrer"
target="_blank"
>
{title}
</a>
</h3>

<div className="flex items-center">
<span className="mr-2 text-slate-500">Author:</span>

<a
className="text-orange cursor-pointer"
href={`https://insights.opensauced.pizza/user/${login}`}
rel="noopener noreferrer"
target="_blank"
>
{login}
</a>
</div>

<p className="
py-2 text-sm text-slate-500
overflow-hidden
line-clamp-3
h-16
leading-5
"
>
{highlightText}
</p>

<img
alt="OpenGraph"
src={openGraphUrl}
/>

</div>);
};
3 changes: 1 addition & 2 deletions src/popup/pages/aiprdescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
105 changes: 31 additions & 74 deletions src/popup/pages/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import {
HiArrowLeft,
HiArrowRight,
HiArrowTopRightOnSquare,
HiOutlineQuestionMarkCircle,
HiPencil,
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/swiper-bundle.min.css";
import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
import { useAuth } from "../../hooks/useAuth";
import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
Expand All @@ -22,13 +23,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<Highlight[]>([]);
const [currentPage, setCurrentPage] = useState(0);

useEffect(() => {
const fetchHighlights = async () => {
Expand All @@ -49,14 +50,6 @@ const Home = () => {
void fetchHighlights();
}, []);

const handlePrevious = () => {
setCurrentPage(prevPage => prevPage - 1);
};

const handleNext = () => {
setCurrentPage(prevPage => prevPage + 1);
};

return (
<div className="p-4 bg-slate-800">
<div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
Expand Down Expand Up @@ -87,76 +80,40 @@ const Home = () => {
</header>

<main className="main-content">
<h3 className="text font-medium text-base leading-10">Latest Highlight:</h3>
<a
className="flex items-center text-white hover:text-orange no-underline gap-2 w-full font-medium text-lg leading-10"
href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
rel="noreferrer"
target="_blank"
>
Highlights feed
<HiArrowTopRightOnSquare />
</a>

{highlights.length > 0 && (
<Swiper
navigation
modules={[Navigation, Pagination, A11y]}
pagination={{ clickable: true }}
slidesPerView={1}
spaceBetween={50}
>
{
highlights.map((highlight, index) => (
<SwiperSlide key={index}>
<HighlightSlide
highlight={highlight}
/>
</SwiperSlide>
))
}
</Swiper>
)}

<div className="border border-white/40 rounded-sm p-3 mt-2">
<h3 className="text-base font-medium">
<a
className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
href={highlights[currentPage]?.url}
rel="noopener noreferrer"
target="_blank"
>
{highlights[currentPage]?.title}
</a>
</h3>


<div className="flex items-center">
<div className="mr-2">Author:</div>

<a
className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
href={`https://insights.opensauced.pizza/user/${highlights[currentPage]?.login}`}
rel="noopener noreferrer"
target="_blank"


>
{highlights[currentPage]?.login}
</a>
</div>

<p className="py-2">
{highlights[currentPage]?.highlight}
</p>

<div className="flex justify-center">
<div className="flex justify-center mt-4">
<button
className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50"
disabled={currentPage === 0}
onClick={handlePrevious}
>
<HiArrowLeft />
</button>

<button
className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50 ml-4"
disabled={currentPage === highlights.length - 1}
onClick={handleNext}
>
<HiArrowRight />
</button>
</div>
</div>
</div>)}

<h3 className="text font-medium text-base leading-10">Tools:</h3>

<div className="tools flex flex-col gap-2">
<a
className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
rel="noreferrer"
target="_blank"
>
<HiArrowTopRightOnSquare />
Highlights feed
</a>

<a
className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
Expand Down
2 changes: 1 addition & 1 deletion src/utils/fetchOpenSaucedApiData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
};
export const getHighlights = async (): Promise<Highlights | undefined> => {
const response = await cachedFetch(
`${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
`${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}?limit=10`,
{
method: "GET",
expireInSeconds: 300,
Expand Down