7 |
setModal(false)}
11 | />
12 |
13 |
19 |
20 |
35 |
51 |
53 | Resources available by
54 | {' '}
55 | {authorRepos[0].repoOwner}
56 |
57 | {authorRepos.map((repo) => (
58 |
59 |
60 |
{repo.repoName}
61 |
62 | {repo.category.map((cat, index) => (
63 |
71 |
73 |
74 | {repo.description}
75 |
76 | {repo.id !== currentRepoId && (
77 |
81 |
88 | )}
89 |
91 |
92 | ))}
93 |
94 |
95 | setModal(false)}>
96 | Close
97 |
98 |
99 |
100 |
101 | );
102 | }
103 |
104 | export default OtherReposByAuthorModal;
105 |
--------------------------------------------------------------------------------
/src/Pages/ResourceREADME/PdfContainer.js:
--------------------------------------------------------------------------------
1 | import React, { createRef, useEffect, useState } from 'react';
2 | import { Download, GitHub } from 'react-feather';
3 | import { savePDF } from '@progress/kendo-react-pdf';
4 |
5 | class DocService {
6 | createPdf = (html, name, setDisable) => {
7 | savePDF(
8 | html,
9 | {
10 | title: 'webdevscom.github.io',
11 | scale: 0.8,
12 | producer: 'WebDevsCom',
13 | subject: 'Learning Resources',
14 | creator: 'Binu kumar',
15 | paperSize: 'Letter',
16 | fileName: name + '.pdf',
17 | margin: 5,
18 | },
19 | () => {
20 | setDisable(false);
21 | }
22 | );
23 | };
24 | }
25 |
26 | const Doc = new DocService();
27 |
28 | export default ({ name, ownerName, children }) => {
29 | const bodyRef = createRef();
30 | const [disable, setDisable] = useState(false);
31 | const createPdf = () => {
32 | setDisable(true);
33 | Doc.createPdf(bodyRef.current, name, setDisable);
34 | };
35 |
36 | useEffect(() => {
37 | if (disable) {
38 | document.querySelector('body').classList.add('overflow-hidden');
39 | } else {
40 | document.querySelector('body').classList.remove('overflow-hidden');
41 | }
42 | }, [disable]);
43 |
44 | return (
45 |
46 |
47 | {disable ? (
48 |
49 | ) : (
50 |
73 | )}
74 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/src/Pages/ResourceREADME/ReadmeUtilsBtn.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Bookmark, MoreVertical } from 'react-feather';
3 | import ReactTooltip from 'react-tooltip';
4 |
5 | function ReadmeUtilsBtn({
6 | isBookMarked,
7 | removeBookmark,
8 | bookmarkIt,
9 | setModal,
10 | }) {
11 | return (
12 | <>
13 |
14 |
(isBookMarked ? removeBookmark() : bookmarkIt())}
19 | data-tip={isBookMarked ? 'Remove from Bookmark' : 'Add to Bookmark'}
20 | >
21 |
27 |
setModal(true)}
32 | data-tip="See more from Repo owners"
33 | >
34 |
36 |
37 | );
38 | }
39 |
40 | export default ReadmeUtilsBtn;
41 |
--------------------------------------------------------------------------------
/src/Pages/ResourceREADME/code-blocks.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import hljs from 'highlight.js/lib/core';
4 | import 'highlight.js/lib';
5 | import 'highlight.js/styles/dracula.css';
6 |
7 | class CodeBlock extends React.PureComponent {
8 | constructor(props) {
9 | super(props);
10 | this.setRef = this.setRef.bind(this);
11 | }
12 |
13 | setRef(el) {
14 | this.codeEl = el;
15 | }
16 |
17 | componentDidMount() {
18 | this.highlightCode();
19 | }
20 |
21 | componentDidUpdate() {
22 | this.highlightCode();
23 | }
24 |
25 | highlightCode() {
26 | if (this.props.language === null) return;
27 | hljs.highlightBlock(this.codeEl);
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
34 | {this.props.value}
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | CodeBlock.defaultProps = {
42 | language: '',
43 | };
44 |
45 | CodeBlock.propTypes = {
46 | value: PropTypes.string.isRequired,
47 | language: PropTypes.string,
48 | };
49 |
50 | export default CodeBlock;
51 |
--------------------------------------------------------------------------------
/src/Pages/ResourceREADME/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import Axios from 'axios';
4 | import Spinner from '../../Components/Spinner';
5 | import resources from '../../data/resourcesData';
6 | import CodeBlock from './code-blocks';
7 | import ReadmeUtilsBtn from './ReadmeUtilsBtn';
8 | import { slug } from 'github-slugger';
9 | import PdfContainer from './PdfContainer';
10 | import Page from '../../Components/Page';
11 | import NoData from '../../Components/NoData';
12 | import OtherReposByAuthorModal from './OtherReposByAuthorModal';
13 |
14 | const ResourceREADME = (props) => {
15 | const [markdown, setMarkdown] = useState('');
16 | const [repoInfo, setRepoInfo] = useState({});
17 | const [loading, setLoading] = useState(true);
18 | const [bookmarks, setBookMarks] = useState([]);
19 | const [isBookMarked, setBookMarked] = useState(false);
20 | const [isModalOpen, setModalOpen] = useState(false);
21 | const [authorRepos, setAuthorRepos] = useState([]);
22 |
23 | useEffect(() => {
24 | setBookMarks(JSON.parse(localStorage.getItem('bookmarks')));
25 | let BookMarked =
26 | bookmarks?.find((bookMarkId) => repoInfo?.id === bookMarkId);
27 | setBookMarked(BookMarked ? true : false);
28 |
29 | // Todo: need to make it better sometime later.
30 | if (loading === false) {
31 | const repos = [];
32 | resources.forEach((resource) => {
33 | if (resource.repoOwnerName === repoInfo?.repoOwnerName) {
34 | repos.push(resource);
35 | }
36 | });
37 |
38 | setAuthorRepos(repos);
39 |
40 | const h1 = document.querySelectorAll('#markdown h1');
41 | for (var i = 0; i < h1.length; i++) {
42 | h1[i].className = 'title is-2';
43 | h1[i].setAttribute('id', slug(h1[i].innerHTML));
44 | }
45 |
46 | const h2 = document.querySelectorAll('#markdown h2');
47 | for (i = 0; i < h2.length; i++) {
48 | h2[i].className = 'title is-3';
49 | h2[i].setAttribute('id', slug(h2[i].innerHTML));
50 | }
51 |
52 | const h3 = document.querySelectorAll('#markdown h3');
53 | for (i = 0; i < h3.length; i++) {
54 | h3[i].className = 'title is-4';
55 | h3[i].setAttribute('id', slug(h3[i].innerHTML));
56 | }
57 |
58 | const strong = document.querySelectorAll('#markdown strong');
59 | for (i = 0; i < strong.length; i++) {
60 | strong[i].setAttribute('id', slug(strong[i].innerHTML));
61 | }
62 |
63 | const table = document.querySelectorAll('#markdown table');
64 | for (i = 0; i < table.length; i++)
65 | table[i].className =
66 | 'table is-hoverable is-dark is-fullwidth is-striped';
67 |
68 | const images = document.querySelectorAll('img');
69 | for (i = 0; i < images.length; i++) {
70 | if (images[i].src.includes(window.location.origin)) {
71 | images[i].setAttribute(
72 | 'src',
73 | `https://raw.githubusercontent.com/${repoInfo.repoOwnerName}/${repoInfo.repoName
74 | }/master${images[i].src
75 | .replace(window.location.origin, '')
76 | .replace(window.location.pathname, '')
77 | .replace('/resources', '')}`
78 | );
79 | }
80 | }
81 |
82 | var el = document.querySelectorAll('#markdown a');
83 | for (i = 0; i < el.length; i++) {
84 | if (
85 | el[i].href.includes('./') ||
86 | (el[i].href.includes('.md') &&
87 | el[i].href.includes(window.location.origin))
88 | ) {
89 | el[i].setAttribute(
90 | 'href',
91 | `https://github.com/${repoInfo.repoOwnerName}/${repoInfo.repoName
92 | }/blob/master${el[i].href
93 | .replace(window.location.origin, '')
94 | .replace(window.location.pathname, '')
95 | .replace('/resources', '')}`
96 | );
97 | el[i].setAttribute('target', '_blank');
98 | } else if (!el[i].href.includes('#')) {
99 | el[i].setAttribute('target', '_blank');
100 | } else if (el[i].href.includes('#')) {
101 | el[i].setAttribute('href', el[i].href.toLowerCase());
102 | }
103 | }
104 | }
105 | // eslint-disable-next-line
106 | }, [loading, repoInfo]);
107 |
108 | const bookmarkIt = () => {
109 | setBookMarked(true);
110 | if (bookmarks === null) {
111 | localStorage.setItem('bookmarks', JSON.stringify([repoInfo.id]));
112 | } else {
113 | bookmarks.push(repoInfo.id);
114 | setBookMarks(bookmarks);
115 | localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
116 | }
117 | };
118 |
119 | const removeBookmark = () => {
120 | setBookMarked(false);
121 | const bookMarks =
122 | bookmarks && bookmarks.filter((bookmarkId) => bookmarkId !== repoInfo.id);
123 | setBookMarks(bookMarks);
124 | localStorage.setItem('bookmarks', JSON.stringify(bookMarks));
125 | };
126 |
127 | useEffect(() => {
128 | setLoading(true);
129 | setModalOpen(false);
130 | const id = props.match.params.id;
131 | const repo = resources.find(
132 | (resource) => String(resource.id) === String(id)
133 | );
134 | setRepoInfo(repo);
135 | if (repo) {
136 | Axios.get(repo.link).then((markdown) => {
137 | setMarkdown(markdown.data);
138 | setLoading(false);
139 | });
140 | }
141 | }, [props.match.params.id]);
142 |
143 | useEffect(() => {
144 | isModalOpen
145 | ? document.querySelector('html').classList.add('is-clipped')
146 | : document.querySelector('html').classList.remove('is-clipped');
147 | }, [isModalOpen]);
148 |
149 | if (!repoInfo)
150 | return
151 |
152 | if (loading) return
;
153 |
154 | return (
155 |
156 |
157 |
158 |
164 |
165 |
166 |
172 |
173 |
174 | {isModalOpen && (
175 |
180 | )}
181 |
183 | );
184 | };
185 |
186 | export default ResourceREADME;
187 |
--------------------------------------------------------------------------------
/src/Pages/Resources/ResourceCard.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useContext } from 'react';
2 | import { Link, withRouter } from 'react-router-dom';
3 | import { Star, GitPullRequest, Eye } from 'react-feather';
4 | import resourceContext from '../../context/resources/resourceContext';
5 |
6 | const ResourceCard = memo(({ resource, history }) => {
7 | const {
8 | id, repoName, repoOwner, repoOwnerName, category: categories, description,
9 | } = resource;
10 |
11 | const ResourceContext = useContext(resourceContext);
12 | const { category, setCategory } = ResourceContext;
13 |
14 | return (
15 |
19 |
28 |
history.push(`/resources/${id}`)}
32 | >
33 |
34 | {repoName}
35 |
36 |
37 |
38 |
39 |
76 |
77 |
history.push(`/resources/${id}`)}
79 | style={{ cursor: 'pointer' }}
80 | className="has-text-justified"
81 | >
82 | {description}
83 |
84 |
85 |
86 |
87 |
88 | {categories.map((cat, index) => (
89 | setCategory(cat.toLowerCase())}
93 | id={cat === category ? 'active-dot' : ''}
94 | className={`category ${cat}`}
95 | />
96 | ))}
97 |
98 |
131 |
132 |
133 |
134 | );
135 | });
136 |
137 | export default withRouter(ResourceCard);
138 |
--------------------------------------------------------------------------------
/src/Pages/Resources/ResourceCards.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useContext } from 'react';
2 | import NoData from '../../Components/NoData';
3 | import resourceContext from '../../context/resources/resourceContext';
4 | import ResourceCard from './ResourceCard';
5 |
6 | const ResourceCards = memo(() => {
7 | const ResourceContext = useContext(resourceContext);
8 | const { category, searchText, resources } = ResourceContext;
9 |
10 | return (
11 |
15 | {
16 | resources.length === 0
17 | && window.location.pathname === '/resources' ? (
18 |
40 | );
41 | });
42 |
43 | export default ResourceCards;
44 |
--------------------------------------------------------------------------------
/src/Pages/Resources/SearchInput.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react';
2 | import { Search, XCircle } from 'react-feather';
3 | import resourceContext from '../../context/resources/resourceContext';
4 |
5 | function SearchInput() {
6 | const ResourceContext = useContext(resourceContext);
7 | const { setSearchText, searchText } = ResourceContext;
8 | const [placeholder, setPlaceholder] = useState('');
9 |
10 | const suggestions = [
11 | 'brad traversy',
12 | 'css',
13 | 'react',
14 | 'angular',
15 | 'bradtraversy',
16 | 'course',
17 | 'university',
18 | 'curated',
19 | ];
20 |
21 | // search placeholder text
22 | useEffect(() => {
23 | let timeout;
24 | const fillPlaceholder = (index, cursorPosition, callback) => {
25 | const text = suggestions[index];
26 | setPlaceholder(text.slice(0, cursorPosition));
27 |
28 | if (cursorPosition < text.length) {
29 | timeout = setTimeout(() => {
30 | fillPlaceholder(index, cursorPosition + 1, callback);
31 | }, 200);
32 | return true;
33 | }
34 | callback();
35 | };
36 |
37 | const clearPlaceholder = (callback) => {
38 | if (placeholder.length > 0) {
39 | timeout = setTimeout(() => {
40 | setPlaceholder('');
41 | clearPlaceholder(callback);
42 | }, 1000);
43 | return true;
44 | }
45 | callback();
46 | };
47 |
48 | const loopThroughSuggestions = (index) => {
49 | fillPlaceholder(index, 0, () => {
50 | timeout = setTimeout(() => {
51 | clearPlaceholder(() => {
52 | loopThroughSuggestions((index + 1) % suggestions.length);
53 | });
54 | }, 2000);
55 | });
56 | };
57 |
58 | loopThroughSuggestions(0);
59 | return () => clearTimeout(timeout);
60 | // eslint-disable-next-line
61 | }, []);
62 |
63 | return (
64 |
68 |
69 |
77 |
79 |
80 |
81 |
setSearchText('')}
85 | style={{ backgroundColor: '#00d1b2' }}
86 | >
87 |
88 |
90 |
91 |
92 |
93 | );
94 | }
95 |
96 | export default SearchInput;
97 |
--------------------------------------------------------------------------------
/src/Pages/Resources/Suggestion.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useMemo } from 'react';
2 | import resourceContext from '../../context/resources/resourceContext';
3 |
4 | function Suggestion() {
5 | const filters = useMemo(() => ([
6 | 'App',
7 | 'Book',
8 | 'computer science',
9 | 'Design',
10 | 'Developer',
11 | 'react',
12 | 'javascript',
13 | 'Programmer',
14 | 'code',
15 | 'Resources',
16 | 'web',
17 | ].sort((a, b) => a.localeCompare(b))), []);
18 |
19 | const categories = useMemo(() => ([
20 | 'All',
21 | 'Web-dev',
22 | 'Mob-dev',
23 | 'data-science',
24 | 'Interview',
25 | 'Frontend',
26 | 'Backend',
27 | 'Language',
28 | 'Project',
29 | 'Course',
30 | 'Podcast',
31 | 'productive',
32 | ].sort((a, b) => a.localeCompare(b))), []);
33 |
34 | const ResourceContext = useContext(resourceContext);
35 | const { setSearchText, category, setCategory } = ResourceContext;
36 |
37 | return (
38 | <>
39 |
40 |
44 | {filters.map((filter, index) => (
45 | setSearchText(filter)}
50 | >
51 | {filter}
52 |
53 | ))}
54 |
55 |
56 |
66 | {categories.map((cat, i) => (
67 | setCategory(cat.toLowerCase())}
78 | >
79 |
83 | ))}
84 |
85 |
86 | );
87 | }
88 |
89 | export default Suggestion;
90 |
--------------------------------------------------------------------------------
/src/Pages/Resources/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Eye, EyeOff } from 'react-feather';
3 | import ResourceCards from './ResourceCards';
4 | import Page from '../../Components/Page';
5 | import Suggestion from './Suggestion';
6 | import SearchInput from './SearchInput';
7 |
8 | function Resources() {
9 | const [showSuggestion, setShowSuggestion] = useState(false);
10 |
11 | return (
12 |
13 |
14 |
15 |
19 | setShowSuggestion((prev) => !prev)}
21 | className="button"
22 | >
23 |
24 | {showSuggestion ?
26 |
27 | {!showSuggestion ? 'View Suggestions' : 'Close Suggestions'}
28 |
29 |
30 |
31 | {(window.innerWidth > 767 || showSuggestion) && (
32 |
33 | )}
34 |
35 |
37 | );
38 | }
39 |
40 | export default Resources;
41 |
--------------------------------------------------------------------------------
/src/assets/no_data.svg:
--------------------------------------------------------------------------------
1 |
empty
--------------------------------------------------------------------------------
/src/context/resources/resourceContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const resourceContext = createContext();
4 |
5 | export default resourceContext;
6 |
--------------------------------------------------------------------------------
/src/context/resources/resourceReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_FILTERED_RESOURCES, SET_PAGE_TITLE } from '../types';
2 |
3 | export default (state, action) => {
4 | switch (action.type) {
5 | case SET_FILTERED_RESOURCES:
6 | return { ...state, ...action.payload };
7 | case SET_PAGE_TITLE:
8 | return { ...state, ...action.payload };
9 | default:
10 | return state;
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/src/context/resources/resourceState.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import React, { useEffect, useMemo, useReducer } from 'react';
3 | import ResourceContext from './resourceContext';
4 | import ResourceReducer from './resourceReducer';
5 | import resources from "../../data/resourcesData"
6 |
7 | import {
8 | SET_FILTERED_RESOURCES, SET_PAGE_TITLE
9 | } from '../types';
10 |
11 | const ResourceState = props => {
12 | const intialState = { resources: [], category: "all", searchText: "", pageTitle: "" };
13 | const [state, dispatch] = useReducer(ResourceReducer, intialState);
14 |
15 | const localStorageResources = useMemo(() => {
16 | const bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
17 | const bookmarkedResources =
18 | bookmarks?.map(
19 | (bookmark) =>
20 | resources.filter((resource) => resource.id === bookmark)[0]
21 | );
22 | return bookmarkedResources || [];
23 | }, [localStorage.getItem('bookmarks')])
24 |
25 | const sortResources = (resources) => {
26 | return resources.sort((a, b) =>
27 | ('' + a.repoName).localeCompare(b.repoName)
28 | );
29 | }
30 |
31 | const isPresent = (value, checkValue) => value.toLowerCase().includes(checkValue);
32 |
33 | // get intial resources based upon route
34 | const getIntialResources = () => {
35 | const { pathname } = window.location;
36 | if (pathname === "/resources")
37 | return sortResources(resources);
38 | else if (pathname === "/bookmarked")
39 | return sortResources(localStorageResources);
40 | }
41 |
42 | // get intial filtered resources based upon searched text or category
43 | const getIntialFilteredResources = () => {
44 | const { category, searchText } = state;
45 | if (category !== "all")
46 | return filterResourcesOnChangeInCategory(category);
47 | else if (searchText.trim() !== "")
48 | return filterResourcesOnChangeInSearchText(searchText);
49 | else
50 | return getIntialResources();
51 | }
52 |
53 | // filter resources based upon searched text
54 | const filterResourcesOnChangeInSearchText = (val) => {
55 | let filteredResources = [];
56 | const resources = getIntialResources();
57 |
58 | const searchInput = val.toLowerCase();
59 | filteredResources =
60 | resources.filter(
61 | ({ repoOwner, repoOwnerName, description, repoName }) => isPresent(repoName, searchInput) || isPresent(repoOwner, searchInput) || isPresent(description, searchInput) || isPresent(repoOwnerName, searchInput)
62 | );
63 |
64 | return filteredResources;
65 | }
66 |
67 | // filter resources according to choosed category
68 | const filterResourcesOnChangeInCategory = (val) => {
69 | let filteredResources = [];
70 | const resources = getIntialResources();
71 |
72 | if (val === "all")
73 | return resources;
74 |
75 | resources.forEach((resource) => {
76 | resource.category.forEach((cat) => {
77 | if (cat === val) {
78 | filteredResources.push(resource);
79 | }
80 | });
81 | });
82 |
83 | return filteredResources;
84 | }
85 |
86 | const setCategory = (val) => {
87 | dispatch({
88 | type: SET_FILTERED_RESOURCES,
89 | payload: {
90 | category: val, searchText: "", resources: filterResourcesOnChangeInCategory(val)
91 | }
92 | })
93 | }
94 |
95 | const setSearchText = (val) => {
96 | dispatch({
97 | type: SET_FILTERED_RESOURCES,
98 | payload: {
99 | category: "all", searchText: val, resources: filterResourcesOnChangeInSearchText(val)
100 | }
101 | })
102 | }
103 |
104 | // used to change title of page
105 | useEffect(() => {
106 | const { category, searchText } = state;
107 | if (window.location.pathname === '/resources') {
108 | dispatch({
109 | type: SET_PAGE_TITLE,
110 | payload: {
111 | pageTitle: `${category}${searchText} Resources`
112 | }
113 | })
114 | } else if (window.location.pathname === '/bookmarked') {
115 | dispatch({
116 | type: SET_PAGE_TITLE,
117 | payload: {
118 | pageTitle: `${category}${searchText} BookMarked Resources`
119 | }
120 | })
121 | }
122 | }, [window.location.pathname, state.category, state.searchText])
123 |
124 | useEffect(() => {
125 | const { pathname } = window.location;
126 | if (pathname !== "/resources" && pathname !== "/bookmarked")
127 | return;
128 | dispatch({
129 | type: SET_FILTERED_RESOURCES,
130 | payload: {
131 | resources: getIntialFilteredResources()
132 | }
133 | })
134 | }, [window.location.pathname])
135 |
136 | return
141 | {props.children}
142 |
143 | }
144 | export default ResourceState;
--------------------------------------------------------------------------------
/src/context/theme/themeContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const themeContext = createContext();
4 |
5 | export default themeContext;
6 |
--------------------------------------------------------------------------------
/src/context/theme/themeReducer.js:
--------------------------------------------------------------------------------
1 | import { TOGGLE_THEME } from '../types';
2 |
3 | export default (state, action) => {
4 | switch (action.type) {
5 | case TOGGLE_THEME:
6 | return { isDarkMode: action.payload };
7 | default:
8 | return state;
9 | }
10 | };
11 |
--------------------------------------------------------------------------------
/src/context/theme/themeState.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useReducer } from 'react';
2 | import ThemeContext from './themeContext';
3 | import ThemeReducer from './themeReducer';
4 |
5 | import {
6 | TOGGLE_THEME,
7 | } from '../types';
8 |
9 | function ThemeState(props) {
10 | const intialState = { isDarkMode: JSON.parse(localStorage.getItem('dark-mode')) };
11 |
12 | const [state, dispatch] = useReducer(ThemeReducer, intialState);
13 |
14 | // Toggle Theme
15 | const toggleTheme = () => {
16 | dispatch({
17 | type: TOGGLE_THEME,
18 | payload: !state.isDarkMode,
19 | });
20 | };
21 |
22 | useEffect(() => {
23 | localStorage.setItem('dark-mode', state.isDarkMode);
24 | if (state.isDarkMode) {
25 | document.querySelector('body').classList.add('dark-mode');
26 | } else {
27 | document.querySelector('body').classList.remove('dark-mode');
28 | }
29 | }, [state.isDarkMode]);
30 |
31 | return (
32 |
37 | {props.children}
38 |
39 | );
40 | }
41 | export default ThemeState;
42 |
--------------------------------------------------------------------------------
/src/context/types.js:
--------------------------------------------------------------------------------
1 | export const TOGGLE_THEME = 'TOGGLE_THEME';
2 | export const SET_FILTERED_RESOURCES = 'SET_FILTERED_RESOURCES';
3 | export const SET_PAGE_TITLE = 'SET_PAGE_TITLE';
4 |
--------------------------------------------------------------------------------
/src/data/contributors.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | id: 1,
4 | name: 'Binu Kumar',
5 | userId: 'Binu42',
6 | avatar: 'https://avatars3.githubusercontent.com/u/45959932?s=400&u=c45629c87cad71dcdc8d2d86808c9c52ec1fc68b&v=4',
7 | },
8 | {
9 | id: 2,
10 | name: 'Prashant Kumar',
11 | userId: 'pkumars397',
12 | avatar: 'https://avatars0.githubusercontent.com/u/45540448?s=400&u=7ee96b166eba6a3552aef0f9496271c5b13adb7a&v=4',
13 | },
14 | {
15 | id: 3,
16 | name: 'Abdul-Razak',
17 | userId: 'VolailleInc',
18 | avatar: 'https://avatars1.githubusercontent.com/u/36109125?s=400&u=61d980bafcbcf617a189054bf3d5c9280340e9f9&v=4',
19 | },
20 | {
21 | id: 4,
22 | name: 'Jaydeep Khatri',
23 | userId: 'jaydeepkhatri',
24 | avatar: 'https://avatars0.githubusercontent.com/u/29619945?v=4',
25 | },
26 | {
27 | id: 5,
28 | name: 'Jordan Mannfeld',
29 | userId: 'jmannfeld',
30 | avatar: 'https://avatars1.githubusercontent.com/u/16351524?s=400&u=262ab7ef3ad8077b69faeb9d0b4ea187f41ab688&v=4',
31 | },
32 | ];
33 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background-color: #f8faff !important;
4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
5 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | width: 100%;
10 | transition: all 0.3s linear;
11 | }
12 |
13 | .overflow-hidden {
14 | height: 100vh;
15 | overflow: hidden;
16 | }
17 |
18 | ::selection {
19 | background-color: #013896;
20 | color: #f1f1f1;
21 | }
22 |
23 | .App {
24 | min-height: 100vh;
25 | display: flex;
26 | flex-direction: column;
27 | }
28 |
29 | .navbar {
30 | transition: all 0.3s ease-in-out;
31 | }
32 |
33 | .is-horizontal-center {
34 | justify-content: center;
35 | }
36 |
37 | .modal .modal-card-body a.disabled {
38 | pointer-events: none;
39 | cursor: default;
40 | }
41 |
42 | .modal .modal-card-body .message {
43 | box-shadow: rgba(19, 15, 235, 0.1) 1px 2px 20px;
44 | }
45 |
46 | /* Navbar */
47 | .box-shadow {
48 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #dadce0;
49 | }
50 |
51 | .dark-mode .box-shadow {
52 | box-shadow: 0 2px 6px 0 #53535348, inset 0 -1px 0 0 #3b3b3b;
53 | }
54 |
55 | .footer {
56 | padding: 5rem 1.5rem 2rem !important;
57 | background-color: #f8faff !important;
58 | margin-top: auto;
59 | }
60 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import 'bulma/css/bulma.min.css';
6 | import { BrowserRouter as Router } from 'react-router-dom';
7 | import ScrollToTop from './Components/ScrollToTop';
8 | import * as serviceWorker from './serviceWorker';
9 |
10 | ReactDOM.render(
11 |
12 |
13 |
16 | ,
17 | document.getElementById('root'),
18 | );
19 |
20 | serviceWorker.register({
21 | onUpdate: (registration) => {
22 | alert('New version is available!, please update?');
23 | if (registration && registration.waiting) {
24 | registration.waiting.postMessage({ type: 'SKIP_WAITING' });
25 | }
26 | window.location.reload();
27 | },
28 | });
29 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost'
15 | // [::1] is the IPv6 localhost address.
16 | || window.location.hostname === '[::1]'
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | || window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
20 | ),
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service '
46 | + 'worker. To learn more, visit https://bit.ly/CRA-PWA',
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then((registration) => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all '
74 | + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch((error) => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then((response) => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404
109 | || (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then((registration) => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.',
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then((registration) => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
18 | 
![{authorRepos[0].repoOwnerName}]({`https://avatars.githubusercontent.com/${authorRepos[0].repoOwnerName}`})
32 | 
56 |