Skip to content

Commit

Permalink
Setup ENV Variables
Browse files Browse the repository at this point in the history
  • Loading branch information
Akash Singh committed Mar 15, 2024
1 parent c3bff84 commit 8d2c6d0
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 91 deletions.
21 changes: 2 additions & 19 deletions documentation/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,17 +126,6 @@ const siteConfig = {
include: ["**/*.{js}"],
},
],
[
'docusaurus-plugin-dotenv',
{
safe: false, // If false ignore safe-mode, if true load './.env.example', if a string load that file as the sample
systemvars: false, // Set to true if you would rather load all system variables as well (useful for CI purposes)
silent: false, // If true, all warnings will be suppressed
expand: false, // Allows your variables to be "expanded" for reusability within your .env file
defaults: false, // Adds support for dotenv-defaults. If set to true, uses ./.env.defaults
ignoreStub: false
}
],
async function tailwindcss() {
return {
name: "docusaurus-tailwindcss",
Expand Down Expand Up @@ -221,14 +210,6 @@ const siteConfig = {
]
),
],
webpack(config, { isServer, webpack }) {
config.plugins.push(
new webpack.DefinePlugin({
'process.env.REACT_APP_FOLLOWERS_ACCESS_KEY': JSON.stringify(process.env.REACT_APP_FOLLOWERS_ACCESS_KEY),
})
);
return config;
},
themeConfig: {
prism: {
theme: require("prism-react-renderer/themes/github"),
Expand Down Expand Up @@ -378,6 +359,8 @@ const siteConfig = {
},
},
customFields: {
// Put your custom environment here
AccessKey: process.env.REACT_APP_FOLLOWERS_ACCESS_KEY,
/** Footer Fields */
footerDescription: '',
contactTitle: "Contact",
Expand Down
6 changes: 4 additions & 2 deletions documentation/src/context/CommunityStats/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import React, {
useMemo,
useState,
} from "react";
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

interface ICommunityStatsContext {
githubStarCount: number;
Expand All @@ -33,9 +34,10 @@ interface ICommunityStatsContext {
export const CommunityStatsContext = createContext<
ICommunityStatsContext | undefined
>(undefined);
const followersAccessKey = process.env.REACT_APP_FOLLOWERS_ACCESS_KEY || 'default_key';

export const CommunityStatsProvider: FC = ({ children }) => {
const { siteConfig } = useDocusaurusContext();
const followersAccessKey = siteConfig.customFields.AccessKey;
const [loading, setLoading] = useState(true);
const [githubStarCount, setGithubStarCount] = useState(0);
const [githubFollowersCount, setGithubFollowersCount] = useState(0);
Expand Down Expand Up @@ -151,7 +153,7 @@ export const CommunityStatsProvider: FC = ({ children }) => {
);

const fetchTotalLCProblem = await fetch(
`https://alfa-leetcode-api.onrender.com/problems?limit=3100`,
`https://alfa-leetcode-api.onrender.com/problems?limit=4000`,
{
method: "GET",
headers: {
Expand Down
158 changes: 88 additions & 70 deletions documentation/src/prepverse-theme/about-section/leetcode-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,11 +147,20 @@ const LeecodeBadges = ({ className }: { className?: string }) => {
)}
</div>
</a>
<div>
{renderBadgesByCategory("Competition Medals", leetcodeBadgeImg.filter(badge => badge.displayName.includes("Annual Badge") || badge.displayName.includes("Days Badge")))}
{renderBadgesByCategory("Daily Medals", leetcodeBadgeImg.filter(badge => badge.displayName.includes("LeetCoding Challenge")))}
{renderBadgesByCategory("Study Plan Medals", leetcodeBadgeImg.filter(badge => !badge.displayName.includes("Annual Badge") && !badge.displayName.includes("LeetCoding Challenge") && !badge.displayName.includes("Days Badge")))}
</div>
{loading ? (
<Spinner
className={clsx("w-20 h-20")}
wrapperProps={{
className: clsx("flex justify-center items-center h-full mt-4"),
}}
/>
) : (
<div>
{renderBadgesByCategory("Competition Medals", leetcodeBadgeImg.filter(badge => badge.displayName.includes("Annual Badge") || badge.displayName.includes("Days Badge")))}
{renderBadgesByCategory("Daily Medals", leetcodeBadgeImg.filter(badge => badge.displayName.includes("LeetCoding Challenge")))}
{renderBadgesByCategory("Study Plan Medals", leetcodeBadgeImg.filter(badge => !badge.displayName.includes("Annual Badge") && !badge.displayName.includes("LeetCoding Challenge") && !badge.displayName.includes("Days Badge")))}
</div>
)}
</div>
);
};
Expand Down Expand Up @@ -196,82 +205,91 @@ const LeecodeSolved = ({ className }: { className?: string }) => {
)}
</div>
</a>
<div className="flex lg:flex-row sm:flex-col flex-col w-[calc(100%-8px)] mx-auto justify-between">
<div className="lg:w-[calc(100%)] sm:w-full sm:h-[240px] h-[450px]mt-[8px] rounded-lg relative">
<div className="flex sm:flex-row flex-col justify-between">
<div>
<div className="text-[22px] font-bold mt-[40px] dark:text-green-600 text-red-600 ml-[50px]">
Solved Problems
</div>
<div className="text-[60px] font-bold mt-[32px] dark:text-yellow-400 text-orange-600 ml-[50px]">
{solvedProblem}{" "}
<span className="text-gray-500 text-[14px]">
{"/ "}
{totalLCProblem}
</span>
</div>
</div>
<div className="flex flex-col relative mr-[50px] mt-[40px] w-[200px] sm:w-[280px] ml-[50px] sm:ml-0">
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-green-500">
Easy
</div>
<div className="mb-[8px] text-green-500">
{easySolved}
{" / "}
{totalLCEasy}
</div>
{loading ? (
<Spinner
className={clsx("w-20 h-20")}
wrapperProps={{
className: clsx("flex justify-center items-center h-full mt-4"),
}}
/>
) : (
<div className="flex lg:flex-row sm:flex-col flex-col w-[calc(100%-8px)] mx-auto justify-between">
<div className="lg:w-[calc(100%)] sm:w-full sm:h-[240px] h-[450px]mt-[8px] rounded-lg relative">
<div className="flex sm:flex-row flex-col justify-between">
<div>
<div className="text-[22px] font-bold mt-[40px] dark:text-green-600 text-red-600 ml-[50px]">
Solved Problems
</div>
<div className="text-[60px] font-bold mt-[32px] dark:text-yellow-400 text-orange-600 ml-[50px]">
{solvedProblem}{" "}
<span className="text-gray-500 text-[14px]">
{"/ "}
{totalLCProblem}
</span>
</div>
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute easy-line after:h-[8px] after:rounded rounded after:bg-green-500`} style={{ backgroundColor: 'rgba(52, 211, 153, 0.2)' }}
></div>
</div>
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-orange-500">
Medium
</div>
<div className="mb-[8px] text-orange-500">
{mediumSolved}
{" / "}
{totalLCMedium}
<div className="flex flex-col relative mr-[50px] mt-[40px] w-[200px] sm:w-[280px] ml-[50px] sm:ml-0">
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-green-500">
Easy
</div>
<div className="mb-[8px] text-green-500">
{easySolved}
{" / "}
{totalLCEasy}
</div>
</div>
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute easy-line after:h-[8px] after:rounded rounded after:bg-green-500`} style={{ backgroundColor: 'rgba(52, 211, 153, 0.2)' }}
></div>
</div>
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute medium-line after:h-[8px] after:rounded rounded after:bg-orange-500`} style={{ backgroundColor: 'rgba(255, 159, 64, 0.2)' }}
></div>
</div>
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-red-500">
Hard
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-orange-500">
Medium
</div>
<div className="mb-[8px] text-orange-500">
{mediumSolved}
{" / "}
{totalLCMedium}
</div>
</div>
<div className="mb-[8px] text-red-500">
{hardSolved}
{" / "}
{totalLCHard}
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute medium-line after:h-[8px] after:rounded rounded after:bg-orange-500`} style={{ backgroundColor: 'rgba(255, 159, 64, 0.2)' }}
></div>
</div>
<div className="text-[14px] relative">
<div className="flex flex-row justify-between">
<div className="mb-[8px] text-red-500">
Hard
</div>
<div className="mb-[8px] text-red-500">
{hardSolved}
{" / "}
{totalLCHard}
</div>
</div>
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute hard-line after:h-[8px] after:rounded rounded after:bg-red-500`} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)' }}
></div>
<style>
{`.easy-line::after { width: ${((easySolved) / (totalLCEasy)) *
100
}%; }`}
{`.medium-line::after { width: ${((mediumSolved) / (totalLCMedium)) *
100
}%; }`}
{`.hard-line::after { width: ${((hardSolved) / (totalLCHard)) *
100
}%; }`}
</style>
</div>
<div
className={`sm:w-[280px] w-[200px] h-[8px] bg-borders mb-[16px] relative after:absolute hard-line after:h-[8px] after:rounded rounded after:bg-red-500`} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)' }}
></div>
<style>
{`.easy-line::after { width: ${((easySolved) / (totalLCEasy)) *
100
}%; }`}
{`.medium-line::after { width: ${((mediumSolved) / (totalLCMedium)) *
100
}%; }`}
{`.hard-line::after { width: ${((hardSolved) / (totalLCHard)) *
100
}%; }`}
</style>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
};
Expand Down

0 comments on commit 8d2c6d0

Please sign in to comment.