Skip to content
This repository was archived by the owner on Sep 26, 2024. It is now read-only.

Commit 197fbe5

Browse files
kelvinsekxdependabot[bot]bdougie
authored
feat: Fix tooltip and add favicon (#63)
* Update index.astro * fix: add av and filter * refactor: PostList and PostGrid toggle and nav bar * restructure code and implement layouts * fix: tooltip * fix: tooltip to list type * restore * linting * linting * linting resolvers * resolve postGrid * Added type to resolve light and dark flicker * build(deps-dev): bump astro from 0.21.13 to 0.22.1 Bumps [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro) from 0.21.13 to 0.22.1. - [Release notes](https://github.com/withastro/astro/releases) - [Changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) - [Commits](https://github.com/withastro/astro/commits/[email protected]/packages/astro) --- updated-dependencies: - dependency-name: astro dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * .. * resolved npm-shrinkwrap.json * resolve tooltip and favi * move eslint windows config to .eslint * update .eslint * update line break * resolve trailing commas * resolve trailing comma * Update .eslintrc.js * npm..p.json changes * delete linebreak** from .eslintrc Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Brian Douglas <[email protected]>
1 parent 455ed97 commit 197fbe5

12 files changed

+174
-142
lines changed

‎.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,7 @@ module.exports = {
4141
'testing-library/no-await-sync-query': 'error',
4242
'testing-library/no-dom-import': 'off',
4343
},
44+
env: {
45+
browser: true,
46+
},
4447
};

‎npm-shrinkwrap.json

+30-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
"tailwindcss": "^3.0.7"
5858
},
5959
"dependencies": {
60-
"open-graph-scraper": "^4.11.0"
60+
"open-graph-scraper": "^4.11.0",
61+
"prop-types": "^15.7.2",
62+
"react": "^17.0.2",
63+
"react-tooltip": "^4.2.21"
6164
}
6265
}

‎public/favicon.ico

-1
This file was deleted.

‎src/components/Avatar.jsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
import ReactTooltip from 'react-tooltip';
4+
5+
import getAvatar from '../lib/getAvatar';
6+
7+
const Avatar = ({contributor, type = false, handleRedirect}) => (
8+
<div
9+
className= {`bg-blue-400 overflow-hidden rounded-full ${!type ? 'w-10 h-10 mr-3' : 'w-7 sm:w-10 h-7 sm:h-10 mb-2'}`}
10+
data-tip={contributor}
11+
data-for={contributor}
12+
>
13+
<img
14+
className='object-cover'
15+
src={getAvatar(contributor)}
16+
alt={contributor}
17+
width={500}
18+
height={500}
19+
onClick={() => handleRedirect(contributor)}
20+
/>
21+
<ReactTooltip id={contributor} type='light' className='flex flex-row items-center md:drop-shadow-[0_15px_15px_rgba(0,0,0,0.45)] !opacity-100'/>
22+
</div>
23+
);
24+
export default Avatar;

‎src/components/HotHead.astro

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
export interface Props {
3+
title: string;
4+
description: string;
5+
}
6+
let social_card = 'https://repository-images.githubusercontent.com/71359796/179eca00-061e-11eb-9b57-856a179db1a1'
7+
8+
const {title, description} = Astro.props;
9+
---
10+
<!-- Gen. Metadata -->
11+
<meta charset="UTF-8">
12+
<meta name="viewport" content="width=device-width">
13+
<link rel="shortcut icon" type="image/jpg" href="https://raw.githubusercontent.com/open-sauced/open-sauced/main/public/favicon.ico" />
14+
15+
<!-- Primary Metas-->
16+
<title>{title}</title>
17+
<meta name="title" content={title}>
18+
<meta name="description" content={description} />
19+
20+
<!-- Open Graph / Facebook -->
21+
<meta property="og:title" content={title} />
22+
<meta property="og:description" content={description} />
23+
<meta property="og:image" content={social_card} />
24+
<meta property="og:url" content="https://hot.opensauced.pizza/" />
25+
<meta property="og:type" content="website" />
26+
27+
<!-- Twitter -->
28+
<meta property="twitter:card" content="summary_large_image" />
29+
<meta property="twitter:title" content={title} />
30+
<meta property="twitter:description" content={description} />
31+
<meta property="twitter:image"
32+
content={social_card} />
33+
34+
<!-- fonts and styles-->
35+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
36+
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
37+
<link rel="stylesheet" href={Astro.resolve('../styles/home.css')}>

‎src/components/LayoutToggle.jsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React, { useState } from "react";
1+
import React, { useState } from 'react';
22

33
function LayoutToggle({ gridState, setGridState }) {
4-
const position = !!gridState ? "left-0" : "right-0";
4+
const position = !!gridState ? 'left-0' : 'right-0';
55

66
return (
7-
<div className=" bg-darkestGrey pt-4 md:pt-4 pb-5">
8-
<div className="container flex justify-center ">
9-
<div className="bg-saucyRed w-20 h-8 rounded-xl flex items-center cursor-pointer relative text-grey text-md ">
10-
<div className={"absolute bottom-0.1 w-10 h-10 rounded-xl bg-gray-100 " + position}></div>
11-
<div onClick={() => setGridState(true)} className=" z-10 flex-1 flex justify-center ">
12-
{" "}
13-
<i className="fas fa-th-large transition "></i>{" "}
7+
<div className='bg-darkestGrey pt-4 md:pt-4 pb-5'>
8+
<div className='container flex justify-center '>
9+
<div className='bg-saucyRed w-20 h-8 rounded-xl flex items-center cursor-pointer relative text-grey text-md '>
10+
<div className={'absolute bottom-0.1 w-10 h-10 rounded-xl bg-gray-100 ' + position}></div>
11+
<div onClick={() => setGridState(true)} className=' z-10 flex-1 flex justify-center '>
12+
{' '}
13+
<i className='fas fa-th-large transition '></i>{' '}
1414
</div>
15-
<div onClick={() => setGridState(false)} className=" z-10 flex-1 flex justify-center ">
16-
{" "}
17-
<i className="fas fa-th-list "></i>{" "}
15+
<div onClick={() => setGridState(false)} className=' z-10 flex-1 flex justify-center '>
16+
{' '}
17+
<i className='fas fa-th-list '></i>{' '}
1818
</div>
1919
</div>
2020
</div>

‎src/components/PostGrid.jsx

+7-28
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1+
/* eslint-disable */
12
import React from "react";
23

3-
import getAvatar from "../lib/getAvatar";
4+
import truncate from "../lib/truncate";
5+
import humanizeNumber from "../lib/humanizeNumber";
46

5-
function PostGrid({ data }) {
6-
const [repoOwner, repoName] = data.repo_name.split("/");
7-
8-
const repoLink = `https://github.com/${data.repo_name}`;
9-
const handleClick = (option) => {
10-
option === "issues" ? window.open(`${repoLink}/issues`) : window.open(repoLink);
11-
};
7+
import HotAvatar from "./Avatar.jsx";
128

9+
function PostGrid({ data }) {
1310
const handleRedirect = (contributor) => {
1411
window.open(`https://github.com/${contributor}`);
1512
};
@@ -20,26 +17,8 @@ function PostGrid({ data }) {
2017
<div className=" w-full flex justify-between items-center mb-3">
2118
{/* Avator Container */}
2219
<div className="flex w-full">
23-
<div className="bg-blue-400 w-10 h-10 overflow-hidden rounded-full mr-3">
24-
<img
25-
className="object-cover"
26-
src={getAvatar(data?.contributors[0])}
27-
alt="Avatar 01"
28-
width={500}
29-
height={500}
30-
onClick={() => handleRedirect(data?.contributors[0])}
31-
/>
32-
</div>
33-
<div className="bg-blue-400 w-10 h-10 overflow-hidden rounded-full mr-3 ">
34-
<img
35-
className="object-cover"
36-
src={getAvatar(data?.contributors[1])}
37-
alt="Avatar 02"
38-
width={500}
39-
height={500}
40-
onClick={() => handleRedirect(data?.contributors[1])}
41-
/>
42-
</div>
20+
<HotAvatar contributor={data?.contributors[0]} handleRedirect={handleRedirect} />
21+
<HotAvatar contributor={data?.contributors[1]} handleRedirect={handleRedirect} />
4322
</div>
4423
{/* Upvote container */}
4524
<div className="flex">

‎src/components/PostList.jsx

+14-29
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,29 @@
1-
import React from "react";
2-
import humanizeNumber from "../lib/humanizeNumber";
3-
import getAvatar from "../lib/getAvatar";
1+
/* eslint-disable */
2+
import React from 'react';
3+
4+
import humanizeNumber from '../lib/humanizeNumber';
5+
import HotAvatar from './Avatar.jsx';
46

57
function PostList({ data }) {
8+
69
const repoLink = `https://github.com/${data.repo_name}`;
710
const handleClick = (option) => {
8-
option === "issues" ? window.open(`${repoLink}/issues`) : window.open(repoLink);
11+
if (option === 'issues') return window.open(`${repoLink}/issues`);
12+
return window.open(repoLink);
913
};
1014
const handleRedirect = (contributor) => {
1115
window.open(`https://github.com/${contributor}`);
1216
};
1317

1418
return (
15-
<div className=" bg-offWhite rounded-xl p-6 font-roboto w-full cursor-pointer">
19+
<div className=' bg-offWhite rounded-xl p-6 font-roboto w-full cursor-pointer'>
1620
{/* Flex container */}
17-
<div className="flex">
21+
<div className='flex'>
1822
{/* Avatar Container */}
19-
<div className=" flex flex-col justify-center items-center">
20-
{/* Avatar */}
21-
<div className="bg-blue-400 w-7 sm:w-10 h-7 sm:h-10 overflow-hidden rounded-full mb-2 ">
22-
<img
23-
className="object-cover"
24-
src={getAvatar(data?.contributors[0])}
25-
alt="Avatar 01"
26-
width={500}
27-
height={500}
28-
onClick={() => handleRedirect(data?.contributors[0])}
29-
/>
30-
</div>
23+
<div className='flex flex-col justify-center items-center'>
3124
{/* Avatar */}
32-
<div className="bg-blue-400 w-7 sm:w-10 h-7 sm:h-10 overflow-hidden rounded-full ">
33-
<img
34-
className="object-cover"
35-
src={getAvatar(data?.contributors[1])}
36-
alt="Avatar 02"
37-
width={500}
38-
height={500}
39-
onClick={() => handleRedirect(data?.contributors[1])}
40-
/>
41-
</div>
25+
<HotAvatar contributor={data?.contributors[0]} type={'list'} handleRedirect = {handleRedirect} />
26+
<HotAvatar contributor={data?.contributors[1]} type={'list'} handleRedirect = {handleRedirect}/>
4227
</div>
4328

4429
{/* Content */}
@@ -71,7 +56,6 @@ function PostList({ data }) {
7156
{/* Issues */}
7257
<div
7358
className=" flex justify-start text-xs sm:text-xl text-grey transition-all duration-200 w-16 sm:w-24 "
74-
// style={{ minWidth: "70px" }}
7559
onClick={() => handleClick("issues")}
7660
>
7761
<div className="cursor-pointer flex justify-start items-center hover:text-saucyRed transition-all duration-200">
@@ -98,4 +82,5 @@ function PostList({ data }) {
9882
);
9983
}
10084

85+
10186
export default PostList;

‎src/components/PostsWrap.jsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { useState } from "react";
2-
import LayoutToggle from "./LayoutToggle";
3-
import PostGrid from "./PostGrid.jsx";
4-
import PostList from "./PostList.jsx";
5-
import postData from "../data/hot.json";
6-
import Modal from "../components/Modal";
7-
import SecondaryNav from "./SecondaryNav";
8-
import GridDisplay from "./GridDisplay";
9-
import ListDisplay from "./ListDisplay";
1+
import React, { useState } from 'react';
2+
import LayoutToggle from './LayoutToggle.jsx';
3+
4+
import postData from '../data/hot.json';
5+
import Modal from './Modal.jsx';
6+
import SecondaryNav from './SecondaryNav.jsx';
7+
import GridDisplay from './GridDisplay.jsx';
8+
import ListDisplay from './ListDisplay.jsx';
109

1110
const PostsWrap = () => {
1211
const [isGrid, setIsGrid] = useState(true);
13-
const [activeLink, setActiveLink] = useState("popular");
12+
const [activeLink, setActiveLink] = useState('popular');
1413
const fetchedData = [...postData];
1514

1615
return (

0 commit comments

Comments
 (0)