fix: hashnode stats widget

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2023-11-27 20:46:30 +05:30
parent c5ead93b19
commit fc59fdec9c
Signed by: bravo68web
GPG Key ID: F5671FD7BCB9917A
26 changed files with 4889 additions and 3603 deletions

View File

@ -25,10 +25,17 @@ function about() {
})}
</div>
<div className="content">
<p>{description2}</p>
</div>
<p>{description2}</p>
</div>
<div className="content-2">
<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
<Image
src="/images/header-banner.png"
alt="cool lang and framework banner"
width="1200"
height="270"
quality="100"
className="banner-image-img"
/>
</div>
</div>
</AboutStyle>

View File

@ -4,7 +4,7 @@ export const ArtStyle = styled.div`
padding: 100px 20px;
height: 100vh;
display: flex;
gap:10px;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;

View File

@ -15,7 +15,7 @@ export default styled.div`
color: #92dcf3;
/* padding: 4px; */
}
.date{
.date {
font-weight: bold;
font-size: 1.2rem;
}

View File

@ -29,26 +29,31 @@ export default function DiscordActivity() {
}
}, [status, loading]);
if (!loading && parsedStatus && status.discord_status !== "offline" && parsedStatus.activity) {
if (
!loading &&
parsedStatus &&
status.discord_status !== "offline" &&
parsedStatus.activity
) {
return (
<DicordActivityStyle>
<div className="discord-icons">
<div className="discord-large-icon">
<img
src={parsedStatus.activity.assets.large_image} alt="discord large image"
<img
src={parsedStatus.activity.assets.large_image}
alt="discord large image"
/>
</div>
<div className="discord-small-icon">
<img
src={parsedStatus.activity.assets.small_image} alt="discord small image"
src={parsedStatus.activity.assets.small_image}
alt="discord small image"
/>
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>
{parsedStatus.discord.username}
</b>
<b>{parsedStatus.discord.username}</b>
</div>
<div className="discord-message-activity">
<b>{parsedStatus.activity.details}</b>
@ -60,26 +65,34 @@ export default function DiscordActivity() {
</div>
</DicordActivityStyle>
);
} else if (!loading && parsedStatus && status.discord_status !== "offline") {
} else if (
!loading &&
parsedStatus &&
status.discord_status !== "offline"
) {
return (
<DicordActivityStyle>
<div className="discord-icons">
<div className="discord-large-icon">
<img
src={parsedStatus.discord.avatar_url} alt="discord large image"
src={parsedStatus.discord.avatar_url}
alt="discord large image"
/>
</div>
<div className="discord-small-icon">
<img
src={"/images/" + parsedStatus.discord.discord_status + ".png"} alt="discord small image"
src={
"/images/" +
parsedStatus.discord.discord_status +
".png"
}
alt="discord small image"
/>
</div>
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>
{parsedStatus.discord.username}
</b>
<b>{parsedStatus.discord.username}</b>
</div>
<div className="discord-message-activity">
<b>{parsedStatus.discord.discord_status}</b>
@ -91,8 +104,7 @@ export default function DiscordActivity() {
</div>
</DicordActivityStyle>
);
}
else {
} else {
let restData = {
username: "bravo68web",
public_flags: 64,
@ -112,9 +124,7 @@ export default function DiscordActivity() {
</div>
<div className="discord-messageBox">
<div className="discord-message-application">
<b>
{restData.username}
</b>
<b>{restData.username}</b>
</div>
<div className="discord-message-activity">
<b>is Offline</b>

View File

@ -69,6 +69,6 @@ export const DicordActivityStyle = styled.div`
font-size: 1.1em;
}
.discord-message-files {
font-size: 1.0rem;
font-size: 1rem;
}
`;

View File

@ -20,7 +20,7 @@ export const ExtraStyles = styled.div`
background-color: var(--color4);
color: var(--color3);
padding: 0.5rem 1rem;
border-radius:0.1rem;
border-radius: 0.1rem;
}
.default {
display: flex;
@ -31,7 +31,7 @@ export const ExtraStyles = styled.div`
padding-bottom: 3em;
padding-top: 2em;
gap: 2.5em;
.content {
display: flex;
flex-wrap: wrap;

View File

@ -85,7 +85,7 @@ function Main() {
<a href={hackthebox_url}>
<IconButton>
<SvgIcon fontSize="large">
<path d="m22.5106 6.4566.0008-.0123a.888.888 0 0 0-.2717-.6384c-.0084-.0084-.018-.0155-.0267-.0235-.0186-.0166-.0371-.0333-.0572-.0484-.0193-.0147-.04-.0276-.0607-.0406-.0096-.006-.0182-.0131-.0281-.0188L12.4576.1266a.891.891 0 0 0-.9223.0043L1.933 5.6744c-.0107.0062-.0203.014-.0307.0205-.0073.0047-.015.008-.0223.0128-.007.0047-.013.0106-.02.0155a.8769.8769 0 0 0-.147.1333l-.0026.003a.8872.8872 0 0 0-.2218.5847l.0009.014c-.0002.0088-.0015.0176-.0015.0264v11.0708c0 .3277.1802.6288.469.7836l9.5986 5.5417c.0076.0044.0158.0075.0236.0117a.8754.8754 0 0 0 .166.0687c.0134.004.0266.0083.0401.0117a.8793.8793 0 0 0 .072.0142c.0117.0019.0232.0045.0349.006a.835.835 0 0 0 .2157 0c.0117-.0015.0232-.0041.0348-.006a.9.9 0 0 0 .072-.0142c.0135-.0034.0267-.0077.04-.0117a.895.895 0 0 0 .0646-.0217.9134.9134 0 0 0 .1015-.047c.0078-.0042.016-.0072.0236-.0117l9.5986-5.5417a.8888.8888 0 0 0 .469-.7836V6.4779c0-.0071-.0012-.0142-.0014-.0213zM5.2543 6.0822l6.5367-3.774a.4182.4182 0 0 1 .4182 0l6.5366 3.774a.4182.4182 0 0 1 0 .7243l-6.5367 3.774a.4182.4182 0 0 1-.4182 0l-6.5366-3.774a.4182.4182 0 0 1 0-.7243zm5.6134 14.3449a.4172.4172 0 0 1-.626.3613L3.718 17.0218a.4173.4173 0 0 1-.2086-.3613V9.1279a.4172.4172 0 0 1 .6258-.3613l6.524 3.7666a.4172.4172 0 0 1 .2086.3614v7.5325zm9.623-3.7666a.4173.4173 0 0 1-.2086.3613l-6.5239 3.7666a.4172.4172 0 0 1-.6259-.3613v-7.5325c0-.149.0796-.2868.2087-.3614l6.5239-3.7666a.4172.4172 0 0 1 .6258.3613v7.5326z"/>
<path d="m22.5106 6.4566.0008-.0123a.888.888 0 0 0-.2717-.6384c-.0084-.0084-.018-.0155-.0267-.0235-.0186-.0166-.0371-.0333-.0572-.0484-.0193-.0147-.04-.0276-.0607-.0406-.0096-.006-.0182-.0131-.0281-.0188L12.4576.1266a.891.891 0 0 0-.9223.0043L1.933 5.6744c-.0107.0062-.0203.014-.0307.0205-.0073.0047-.015.008-.0223.0128-.007.0047-.013.0106-.02.0155a.8769.8769 0 0 0-.147.1333l-.0026.003a.8872.8872 0 0 0-.2218.5847l.0009.014c-.0002.0088-.0015.0176-.0015.0264v11.0708c0 .3277.1802.6288.469.7836l9.5986 5.5417c.0076.0044.0158.0075.0236.0117a.8754.8754 0 0 0 .166.0687c.0134.004.0266.0083.0401.0117a.8793.8793 0 0 0 .072.0142c.0117.0019.0232.0045.0349.006a.835.835 0 0 0 .2157 0c.0117-.0015.0232-.0041.0348-.006a.9.9 0 0 0 .072-.0142c.0135-.0034.0267-.0077.04-.0117a.895.895 0 0 0 .0646-.0217.9134.9134 0 0 0 .1015-.047c.0078-.0042.016-.0072.0236-.0117l9.5986-5.5417a.8888.8888 0 0 0 .469-.7836V6.4779c0-.0071-.0012-.0142-.0014-.0213zM5.2543 6.0822l6.5367-3.774a.4182.4182 0 0 1 .4182 0l6.5366 3.774a.4182.4182 0 0 1 0 .7243l-6.5367 3.774a.4182.4182 0 0 1-.4182 0l-6.5366-3.774a.4182.4182 0 0 1 0-.7243zm5.6134 14.3449a.4172.4172 0 0 1-.626.3613L3.718 17.0218a.4173.4173 0 0 1-.2086-.3613V9.1279a.4172.4172 0 0 1 .6258-.3613l6.524 3.7666a.4172.4172 0 0 1 .2086.3614v7.5325zm9.623-3.7666a.4173.4173 0 0 1-.2086.3613l-6.5239 3.7666a.4172.4172 0 0 1-.6259-.3613v-7.5325c0-.149.0796-.2868.2087-.3614l6.5239-3.7666a.4172.4172 0 0 1 .6258.3613v7.5326z" />
</SvgIcon>
</IconButton>
</a>

View File

@ -24,7 +24,7 @@ export default styled.nav`
color: #fff;
border-radius: 5px;
&:hover {
background-color: rgba(0,0,0, 0.5);
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (max-width: 900px) {

View File

@ -13,7 +13,7 @@ function Resume() {
initialDoc: "/resume.pdf",
},
viewer.current
)
);
});
}, []);
return (

View File

@ -14,31 +14,25 @@ function GitHubSkillCard({
}) {
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">Repos :-
<div className="value">
{public_repos}
</div>
</div>
<div className="description">Followers :-
<div className="value">
{followers}
</div>
</div>
<div className="description">Following :-
<div className="value">
{following}
</div>
</div>
<div className="description">Gists :-
<div className="value">
{public_gists}
</div>
<div className="description">
Repos :-
<div className="value">{public_repos}</div>
</div>
<div className="description">
Joined On :-
<div className="value">
{format(created_at, "DD MMM YYYY")}
</div>
Followers :-
<div className="value">{followers}</div>
</div>
<div className="description">
Following :-
<div className="value">{following}</div>
</div>
<div className="description">
Gists :-
<div className="value">{public_gists}</div>
</div>
<div className="description">
Joined On :-
<div className="value">{format(created_at, "DD MMM YYYY")}</div>
</div>
</SkillCard>
);

View File

@ -16,14 +16,17 @@ function HashNodeSkillCard({
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Joined on:
<div className="value">
{format(joinOn, "DD MMM YYYY")}
</div>
Joined on:
<div className="value">{format(joinOn, "DD MMM YYYY")}</div>
</div>
<div className="description">
{" "}
Total Posts :<div className="value">{numPosts}</div>
</div>
<div className="description">
{" "}
Total Followers :<div className="value">{numFollowers}</div>
</div>
<div className="description"> Total Posts : {numPosts}</div>
<div className="description"> Total Followers : {numFollowers}</div>
<div className="description"> Total Reactions : {numReactions}</div>
</SkillCard>
);
}

View File

@ -3,22 +3,15 @@ import SkillCard from "../skillCard";
import SkillCardStyle from "../skillCard.styled";
import { format, parse } from "date-format-parse";
function HTBActivityCard({
title,
image,
url,
data
}) {
function HTBActivityCard({ title, image, url, data }) {
return (
<SkillCard title={title} image={image} url={url}>
{data.slice(0, 6).map((item) => {
return (
<>
<div className="description">
{item?.name} | {item?.object_type}
<div className="value">
{item?.date_diff}
</div>
{item?.name} | {item?.object_type}
<div className="value">{item?.date_diff}</div>
</div>
</>
);

View File

@ -19,58 +19,42 @@ function HTBUserCard({
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Points :-
<div className="value">
{points}
</div>
Points :-
<div className="value">{points}</div>
</div>
<div className="description">
Rank :-
<div className="value">
{rank}
</div>
Rank :-
<div className="value">{rank}</div>
</div>
<div className="description">
System Owns :-
<div className="value">
{system_owns}
</div>
System Owns :-
<div className="value">{system_owns}</div>
</div>
<div className="description">
User Owns :-
<div className="value">
{user_owns}
</div>
User Owns :-
<div className="value">{user_owns}</div>
</div>
<div className="description">
Global Ranking :-
<div className="value">
{ranking}
</div>
Global Ranking :-
<div className="value">{ranking}</div>
</div>
<div className="description">
Respect :-
<div className="value">
{respects}
</div>
Respect :-
<div className="value">{respects}</div>
</div>
<div className="description">
Ownership :-
<div className="value">
{rank_ownership}%
</div>
Ownership :-
<div className="value">{rank_ownership}%</div>
</div>
<div className="description">
Team :-
Team :-
<div className="value">
{team?.name} | #{team?.ranking}
</div>
</div>
<div className="description">
Joined On :-
<div className="value">
{format(joinedOn, "DD MMM YYYY")}
</div>
Joined On :-
<div className="value">{format(joinedOn, "DD MMM YYYY")}</div>
</div>
</SkillCard>
);

View File

@ -18,54 +18,38 @@ function OsuUserSkillCard({
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Accuracy :-
<div className="value">
{Math.floor(accuracy)} %
</div>
Accuracy :-
<div className="value">{Math.floor(accuracy)} %</div>
</div>
<div className="description">
Level :-
<div className="value">
{Math.floor(level)}
</div>
Level :-
<div className="value">{Math.floor(level)}</div>
</div>
<div className="description">
PP :-
<div className="value">
{Math.floor(pp_raw)}
</div>
PP :-
<div className="value">{Math.floor(pp_raw)}</div>
</div>
<div className="description">
Country :-
<div className="value">
{country}
</div>
Country :-
<div className="value">{country}</div>
</div>
<div className="description">
Global Rank :-
<div className="value">
#{pp_rank}
</div>
Global Rank :-
<div className="value">#{pp_rank}</div>
</div>
<div className="description">
Max Combo :-
<div className="value">
{maximum_combo}
</div>
Max Combo :-
<div className="value">{maximum_combo}</div>
</div>
<div className="description">
Total Score :-
<div className="value">
{total_score?.toLocaleString()}
</div>
Total Score :-
<div className="value">{total_score?.toLocaleString()}</div>
</div>
<div className="description">
Joined on :
<div className="value">
{format(join_date, "DD MMM YYYY")}
</div>
Joined on :
<div className="value">{format(join_date, "DD MMM YYYY")}</div>
</div>
</SkillCard>
);

View File

@ -16,34 +16,24 @@ function WakatimeTopLangSkillCard({
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
{topLang1?.name} :-
<div className="value">
{topLang1?.percent}%
</div>
{topLang1?.name} :-
<div className="value">{topLang1?.percent}%</div>
</div>
<div className="description">
{topLang2?.name} :-
<div className="value">
{topLang2?.percent}%
</div>
{topLang2?.name} :-
<div className="value">{topLang2?.percent}%</div>
</div>
<div className="description">
{topLang3?.name} :-
<div className="value">
{topLang3?.percent}%
</div>
{topLang3?.name} :-
<div className="value">{topLang3?.percent}%</div>
</div>
<div className="description">
{topLang4?.name} :-
<div className="value">
{topLang4?.percent}%
</div>
{topLang4?.name} :-
<div className="value">{topLang4?.percent}%</div>
</div>
<div className="description">
{topLang5?.name} :-
<div className="value">
{topLang5?.percent}%
</div>
{topLang5?.name} :-
<div className="value">{topLang5?.percent}%</div>
</div>
</SkillCard>
);

View File

@ -15,28 +15,20 @@ function WakatimeUserSkillCard({
return (
<SkillCard title={title} image={image} url={url}>
<div className="description">
Total Code time :-
<div className="value">
{total_time}
</div>
Total Code time :-
<div className="value">{total_time}</div>
</div>
<div className="description">
Average Daily Code time :-
<div className="value">
{average_weekly_time}
</div>
Average Daily Code time :-
<div className="value">{average_weekly_time}</div>
</div>
<div className="description">
Total Weekly Code time :-
<div className="value">
{total_weekly_time}
</div>
Total Weekly Code time :-
<div className="value">{total_weekly_time}</div>
</div>
<div className="description">
Joined on :-
<div className="value">
{format(joinedOn, "DD MMM YYYY")}
</div>
Joined on :-
<div className="value">{format(joinedOn, "DD MMM YYYY")}</div>
</div>
</SkillCard>
);

View File

@ -79,9 +79,11 @@ function Skills() {
}
created_at={skills?.gh_user?.data?.created_at}
/>
<HTBActivityCard
<HTBActivityCard
title={"HTB Activity"}
url={"https://app.hackthebox.com/profile/1367733"}
url={
"https://app.hackthebox.com/profile/1367733"
}
image={skills?.logo?.htb}
data={skills?.htb_activity?.data}
/>
@ -119,14 +121,20 @@ function Skills() {
/>
<HTBUserCard
title={"HTB User Stats"}
url={"https://app.hackthebox.com/profile/1367733"}
url={
"https://app.hackthebox.com/profile/1367733"
}
image={skills?.logo?.htb}
rank={skills?.htb_profile?.data?.rank}
points={skills?.htb_profile?.data?.points}
rank_ownership={skills?.htb_profile?.data?.rank_ownership}
rank_ownership={
skills?.htb_profile?.data?.rank_ownership
}
ranking={skills?.htb_profile?.data?.ranking}
respects={skills?.htb_profile?.data?.respects}
system_owns={skills?.htb_profile?.data?.system_owns}
system_owns={
skills?.htb_profile?.data?.system_owns
}
team={skills?.htb_profile?.data?.team}
user_owns={skills?.htb_profile?.data?.user_owns}
joinedOn={"2023-10-12T08:49:15.000000Z"}
@ -175,12 +183,12 @@ function Skills() {
url={"https://blog.bravo68web.me/"}
image={skills?.logo?.hashnode}
joinOn={"2021-06-18"}
numPosts={skills?.hn_user?.data?.numPosts}
numFollowers={
skills?.hn_user?.data?.numFollowers
numPosts={
skills?.hn_user?.data?.publications
?.edges[0]?.node.posts.totalDocuments
}
numReactions={
skills?.hn_user?.data?.numReactions
numFollowers={
skills?.hn_user?.data?.followersCount
}
/>
<OsuBestScoresSkillCard

View File

@ -217,14 +217,16 @@ export const projects = [
{
name: "vs-presence-server",
type: "project",
description: "This is a server that allows you to project your vscode presence to a custom rich presence server.",
description:
"This is a server that allows you to project your vscode presence to a custom rich presence server.",
image: "/images/GitHub-Logo.png",
url: "https://github.com/BRAVO68WEB/vsc-presence-server",
},
{
name: "Stockpile",
type: "project",
description: "Redis from Scratch using Nodejs [No External Dependencies] ",
description:
"Redis from Scratch using Nodejs [No External Dependencies] ",
image: "/images/GitHub-Logo.png",
url: "https://github.com/BRAVO68WEB/stockpile",
},
@ -247,7 +249,7 @@ export const projects = [
type: "project",
description: "NodeJS SDK for Stockpile",
image: "/images/GitHub-Logo.png",
url: "https://github.com/BRAVO68WEB/stockpile-node-sdk"
url: "https://github.com/BRAVO68WEB/stockpile-node-sdk",
},
{
name: "emailengine-foss",
@ -259,23 +261,25 @@ export const projects = [
{
name: "typescript-express-hasura-pgsql-template",
type: "project",
description: "A Template for a Typescript Express Server with Hasura and Postgres",
description:
"A Template for a Typescript Express Server with Hasura and Postgres",
image: "/images/GitHub-Logo.png",
url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template"
url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template",
},
{
name: "cat-as-a-service",
type: "project",
description: "Cat as a Service API",
image: "/images/GitHub-Logo.png",
url: "https://github.com/gdsclpu/cat-as-a-service"
url: "https://github.com/gdsclpu/cat-as-a-service",
},
{
name: "SHX",
type: "project",
description: "Shx is a platform ment to store and share files, images, text and URLs with ease.",
description:
"Shx is a platform ment to store and share files, images, text and URLs with ease.",
image: "/images/GitHub-Logo.png",
url: "https://github.com/BRAVO68WEB/shx"
url: "https://github.com/BRAVO68WEB/shx",
},
{
name: "Enterprise Workspace Images [arm64]",

View File

@ -72,7 +72,7 @@ export const APISDK = {
{
endpoint: "/me/hackthebox/activity",
name: "htb_activity",
}
},
],
this.data
);

View File

@ -96,11 +96,11 @@ export default function parse(data) {
act.sort((a, b) => a.prirority_id - b.prirority_id);
if(act.length == 0) {
if (act.length == 0) {
return {
...output,
doing_nothing: true,
}
};
}
output.activity = act[0];

View File

@ -5,12 +5,12 @@ const moduleExports = {
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'itsmebravo.dev',
port: '',
pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
},
{
protocol: "https",
hostname: "itsmebravo.dev",
port: "",
pathname: "/images/**/*.{jpg,jpeg,png,svg,gif,webp}",
},
],
},
};

View File

@ -1,7 +1,6 @@
import Head from "next/head";
import Nav from "components/nav";
import About from "components/about";
import Footer from "components/footer";
export default function Home() {
return (

View File

@ -1,7 +1,6 @@
import Head from "next/head";
import Nav from "components/nav";
import Contact from "components/contact";
import Footer from "components/footer";
export default function Home() {
return (

View File

@ -2,9 +2,9 @@ import Head from "next/head";
import Nav from "components/nav";
// import Main from "components/main";
import BMC from "components/buymeacoffee";
import dynamic from 'next/dynamic';
import dynamic from "next/dynamic";
const Main = dynamic(() => import('components/main'), {
const Main = dynamic(() => import("components/main"), {
ssr: false, // Disable server-side rendering
});

View File

@ -2,9 +2,9 @@ import Head from "next/head";
import Nav from "components/nav";
// import Skills from "components/skills";
import Footer from "components/footer";
import dynamic from 'next/dynamic';
import dynamic from "next/dynamic";
const Skills = dynamic(() => import('components/skills'), {
const Skills = dynamic(() => import("components/skills"), {
ssr: false, // Disable server-side rendering
});
@ -22,4 +22,4 @@ export default function Home() {
<Footer />
</div>
);
}
}

File diff suppressed because it is too large Load Diff