From cdee4dc7f838a651d6a6eb8bd0fea85239649ab8 Mon Sep 17 00:00:00 2001 From: bodie Date: Sun, 27 Aug 2023 23:41:55 +0200 Subject: [PATCH] cleanup, remove unused files --- craco.config.js | 2 +- src/components/AsyncFetch.tsx | 56 ------- src/index.less | 284 ---------------------------------- 3 files changed, 1 insertion(+), 341 deletions(-) delete mode 100644 src/components/AsyncFetch.tsx delete mode 100644 src/index.less diff --git a/craco.config.js b/craco.config.js index 090d2bb..36448ea 100644 --- a/craco.config.js +++ b/craco.config.js @@ -6,7 +6,7 @@ module.exports = { // Prefer 'sass' (dart-sass) over 'node-sass' if both packages are installed. implementation: require('sass'), // Workaround for this bug: https://github.com/webpack-contrib/sass-loader/issues/804 - webpackImporter: false, + // webpackImporter: false, }, }, }, diff --git a/src/components/AsyncFetch.tsx b/src/components/AsyncFetch.tsx deleted file mode 100644 index 91704e1..0000000 --- a/src/components/AsyncFetch.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -interface Data { - title: string; - description: string; -} - -interface AsyncFetchComponentProps { - url: string; -} - -const AsyncFetchComponent: React.FC = ({ url }) => { - const [data, setData] = useState(null); - const [error, setError] = useState(null); - const [loading, setLoading] = useState(true); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(url); - if (!response.ok) { - throw new Error('Failed to fetch data'); - } - const result: Data = await response.json(); // Cast fetched data to Data type - setData(result); - setLoading(false); - } catch (error) { - setError(error as Error); - setLoading(false); - } - }; - fetchData(); - }, [url]); - - if (loading) { - return
Loading...
; - } - - if (error) { - return
Error: {error.message}
; - } - - return ( -
- {/* Render fetched data here */} - {data && ( -
-

{data.title}

-

{data.description}

-
- )} -
- ); -}; - -export default AsyncFetchComponent; diff --git a/src/index.less b/src/index.less deleted file mode 100644 index dacb931..0000000 --- a/src/index.less +++ /dev/null @@ -1,284 +0,0 @@ -@import './fonts/fonts.css'; -@import './styles/section.less'; -@import './styles/chapter.less'; -@import './styles/search.less'; -@import './styles/nav.less'; -@import './styles/footer.less'; -@import './styles/loading.less'; -@import './styles/quiz.less'; - -:root { - --color-primary: #521d3a; - --color-primary-light: #8c3c4f; - --lightness: 120%; - --line-height: 1.5; -} - -html { - font-family: "Source Sans Pro", sans-serif; - - ::-webkit-scrollbar { - display: none; - } - scrollbar-width: none; - - /* TODO: think about scrollbar design - scrollbar-color: var(--color-primary) var(--color-primary-light); - scrollbar-width: thin; - - ::-webkit-scrollbar { - width: 4px; - } - - ::-webkit-scrollbar-track { - background: var(--color-primary-light); - &:hover { - background: brightness(var(--lightness)); - } - } - - ::-webkit-scrollbar-thumb { - background: var(--color-primary); - -webkit-border-radius: 5px; - &:hover { - background: brightness(var(--lightness)); - } - } - */ - -} -body, #root { - margin: 0; - height: 100%; // fixes 100vh on mobile browsers -} - -.App { - min-height: 100vh; // fills available space with footer at the bottom - - display: grid; // grid layout for header, main, footer - grid-template-rows: auto 1fr auto; - grid-template-areas: - 'header' - 'main' - 'footer'; -} - -header { - grid-area: header; -} - -main { - grid-area: main; - @media screen and (min-width: 860px) { - grid-row: 1 / -1; /* grows to fill the remaining space, - keeping the footer at the bottom if content is short - but only for large screens because it moves the start to the headers location - */ - - } -} - -img { - max-width: 100%; -} - -h1, -h2, -h3 { - color: var(--color-primary); - @media screen and (max-width: calc(860px - 1px)) { - scroll-margin-top: 80px; /* offset for fixed header */ - } -} -h4 { - color: var(--color-primary-light); -} - -h1 { - font-weight: 700; - font-size: 70px; - padding-bottom: 0.1em; -} - -h2 { - font-size: 35px; - font-weight: 600; // default: 700 - margin-bottom: -0.15em; -} - -.bg-primary { - background-color: var(--color-primary) !important; -} - -.bg-secondary { - background-color: var(--color-primary-light) !important; -} - -a { - font-weight: 400; - color: var(--color-primary-light); - text-decoration: none; - opacity: 1; -} -a:focus, -a:hover, -a:active, -a.active { - opacity: 0.8; -} - -p { - font-weight: 300; // default: 400 - padding-bottom: 1em; - font-size: 18px; -} - -p, -ul, -li, -a, -span, -div { - // line-height: var(--line-height); - font-size: 15px; -} - -.icon { - align-self:center; // height: 100%; - // margin: 0em 1.5em 0em -1.5em; /* top right bottom left */ - padding-right: 0.5em; - width: 80px; -} - -@media (max-width: calc(660px - 1px)) { - h1 { - font-size: 30px; - } - - h2 { - font-size: 20px; - } - - .content-main { - margin: 10px 10px; - } -} -@media (min-width: 660px) { - h1 { - font-size: 34px; - } - - h2 { - font-size: 28px; - } - - p, - ul, - li, - a, - span, - div, - h2 .btn { - font-size: 16.25px; - } - - .content-main { - margin: 0 5rem 0 3rem; - } - .icon { - align-self:center; // height: 100%; - // margin: 0em 1.5em 0em -1.5em; /* top right bottom left */ - width: 100px; - } -} -@media (min-width: 860px) { - p, - ul, - li, - a, - span, - div, - h2 .btn { - font-size: 17.5px; - } - - h1 { - font-size: 40px; - } - - h2 { - font-size: 30px; - } -} -@media (min-width: 1100px) { - p, - ul, - li, - a, - span, - div, - h2 .btn { - font-size: 18.75px; - } - - .content-main { - margin: 0 9rem 0 6rem; - } - - h1 { - font-size: 50px; - } - - h2 { - font-size: 30px; - } -} -@media (min-width: 1300px) { - p, - ul, - li, - a, - span, - div, - h2 .btn { - font-size: 20px; - } - - h1 { - font-size: 70px; - } - - h2 { - font-size: 40px; - } -} - -li { - font-weight: 300; -} - -table { - td { - border-top: 1px solid var(--color-primary-light); - padding: 5px; - margin: 0; - } - - tr { - font-weight: 300; - } -} - -button { - font-size: 1em; - padding: .5em; - text-align: center; - min-width: 5em; - background-color: var(--color-primary-light); - color: white; - border-radius: 4px; - border: none; - cursor: pointer; - margin: 0.5em 0; -} -