diff --git a/pages/index.tsx b/pages/index.tsx index 7ced0cc..e9ab50f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,28 +11,47 @@ import Splash from '@/components/Splash' import Content from '@/components/Content' import People from '@/components/People' -export default function Index({ git }: any) { - const [hex, setHex] = useState('#6644FF') - const [hexText, setHexText] = useState('#6644FF') - const [content, setContent] = useState('') +interface GitData { + latestTag: string + buildId: string +} + +interface Person { + login: string + html_url: string + avatar_url: string +} + +export default function Index({ git }: { git: GitData }) { + const [hex, setHex] = useState('#6644FF') + const [hexText, setHexText] = useState('#6644FF') + const [content, setContent] = useState('') const [showPickerNotice, setShowPickerNotice] = useState(true) - const [palette, setPalette] = useState([shade.random(), shade.random(), shade.random()]) + const [palette, setPalette] = useState>([shade.random(), shade.random(), shade.random()]) - const [contributors, setContributors] = useState>([]) - const [stargazers, setStargazers] = useState>([]) + const [contributors, setContributors] = useState>([]) + const [stargazers, setStargazers] = useState>([]) - // Dynamically change the theme based on the hex. + // Dynamically changes the theme based on the hex. const borderHover = { in: (obj: any) => obj.style.borderColor = hex, out: (obj: any) => obj.style.borderColor = '#d4d4d4' } + // Fetches people from GitHub to later be displayed on the page. + const pullPeople = async (type: 'contributors' | 'stargazers') => { + const res = await axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/' + type) + + // Let's get rid of the repo owner ;) - Filters out by login (GitHub username) and returns the list of people. + return res.data.filter(({ login }: { login: string }) => login != "ThijmenGThN").reverse() + } + useEffect(() => { // Ensure hex starts with a "#". !hex.startsWith('#') && setHex('#' + hex) // Ensures that any given hex color can be seen infront of a white background. - // -->> Implementation by https://github.com/vanling - Thanks! + // -->> Implemented by https://github.com/vanling - Thanks! setHexText(shade.contrast(hex, hex, '#a3a3a3')) // Update the css object. @@ -40,27 +59,9 @@ export default function Index({ git }: any) { }, [hex]) useEffect(() => { - // Fetch and store people within the contributors group. - axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/contributors') - .then((res: any) => { - // Prune repo owner from entries. - res = res.data.filter( - ({ login }: { login: string }) => login != "ThijmenGThN" - ).reverse() - - setContributors(res) - }) - - // Fetch and store people within the stargazers group. - axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/stargazers') - .then((res: any) => { - // Prune repo owner from entries. - res = res.data.filter( - ({ login }: { login: string }) => login != "ThijmenGThN" - ).reverse() - - setStargazers(res) - }) + // Fetch people from GitHub. + pullPeople('contributors').then((people: Array) => setContributors(people)) + pullPeople('stargazers').then((people: Array) => setStargazers(people)) }, []) return ( @@ -84,7 +85,8 @@ export default function Index({ git }: any) {
-

use your own color

@@ -97,6 +99,7 @@ export default function Index({ git }: any) { onMouseOver={({ target }) => borderHover.in(target)} onMouseOut={({ target }) => borderHover.out(target)} > + {/* Display the 3 randomized colors for the pallette on-screen. */} { palette.map((color: string, index: number) => (
-
+
) } diff --git a/source/components/Content.tsx b/source/components/Content.tsx index a04f9d8..bfaeaf7 100644 --- a/source/components/Content.tsx +++ b/source/components/Content.tsx @@ -11,7 +11,7 @@ export default function Content({ content, hex, hexText }: { content: string, he out: (obj: any) => obj.style.borderColor = '#d4d4d4' } - // Write Custom CSS to clipboard of client, also visualize it being copied. + // Write Custom CSS to clipboard of client, also visualizes it being copied. const copy = () => { setCopied(true) navigator.clipboard.writeText(content) @@ -26,7 +26,7 @@ export default function Content({ content, hex, hexText }: { content: string, he onMouseOver={({ target }) => borderHover.in(target)} onMouseOut={({ target }) => borderHover.out(target)} > - {/* ----- Sidebar ----- */} + {/* ----- Toolbar (houses: clipboard) ----- */}