diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx deleted file mode 100644 index 350e12d..0000000 --- a/client/components/CoverCard.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; -import { Link } from 'react-router-dom'; - -import Pattern from '../constants/Pattern'; -import slug from '../helpers/slug'; -import CoverLoader from '../loaders/CoverLoader'; -import './coverCard.css'; - -interface CoverCardProps { - pattern: Pattern; -} - -const CoverCard: React.FC = ({ pattern }) => { - return ( - - -

- {pattern} -

- - ); -}; - -export default CoverCard; diff --git a/client/components/Product.tsx b/client/components/Product.tsx index dcee56b..db153d1 100644 --- a/client/components/Product.tsx +++ b/client/components/Product.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import './product.css'; import ProductModel from '../constants/ProductModel'; -import slug from '../helpers/slug'; +import slug from '../../utils/slug'; interface ProductProps { product: ProductModel; diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx index c403b3f..da38ae7 100644 --- a/client/components/RelatedPatterns.tsx +++ b/client/components/RelatedPatterns.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import Pattern from '../constants/Pattern'; -import CoverCard from './CoverCard'; +import CoverCard from '../../components/CoverCard'; import Heading from './Heading'; interface RelatedPatternsProps { diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts deleted file mode 100644 index 0ab51a8..0000000 --- a/client/constants/ProductList.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import ProductModel from './ProductModel'; - -const ProductList: ProductModel[] = [ - { - name: 'Intersection Observer Examples', - url: 'https://intersectionobserver.io', - description: 'Practical, real world examples of Intersection Observer', - themeColor: '#024ca9', - }, - { - name: 'Blur Page', - url: 'https://blur.page', - description: 'A browser extension to hide sensitive information on a web page', - themeColor: '#4e7fb8', - }, - { - name: 'Check Browsers Support', - url: 'https://checkbrowsers.support', - description: 'A browser extension to check browser compatibility without leaving your tab', - themeColor: '#f33446', - }, - { - name: 'Form Validation', - url: 'https://formvalidation.io', - description: 'The best validation library for JavaScript', - themeColor: '#014ba6', - }, - { - name: 'React PDF Viewer', - url: 'https://react-pdf-viewer.dev', - description: 'A React component to view a PDF document', - themeColor: '#fb6303', - }, - { - name: '1 LOC', - url: 'https://1loc.dev', - description: 'Favorite JavaScript utilities in single line of code', - themeColor: '#000200', - }, - { - name: 'Front-end Tips', - url: 'https://getfrontend.tips', - description: 'Super tiny, quick tips, tricks and best practices of front-end development', - themeColor: '#2e2c74', - }, - { - name: 'HTML DOM', - url: 'https://htmldom.dev', - description: 'How to manage HTML DOM with vanilla JavaScript', - themeColor: '#5b5d8a', - }, - { - name: 'Responsive Design Patterns', - url: 'https://responsive.page', - description: 'A collection of patterns to create a responsive web page', - themeColor: '#43246d', - }, - { - name: 'this VS that', - url: 'https://thisthat.dev', - description: 'The differences between _ and _ in the front-end development', - themeColor: '#414293', - }, -]; - -export { ProductList }; diff --git a/client/constants/ProductModel.ts b/client/constants/ProductModel.ts deleted file mode 100644 index fbb1b99..0000000 --- a/client/constants/ProductModel.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -export default interface ProductModel { - name: string; - url: string; - description: string; - themeColor: string; -} diff --git a/client/helpers/random.ts b/client/helpers/random.ts deleted file mode 100644 index d1ca7fe..0000000 --- a/client/helpers/random.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min)); - -export default random; diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts deleted file mode 100644 index af9da8c..0000000 --- a/client/helpers/randomFromArray.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -function randomFromArray(array: T[]): T { - return array[Math.floor(Math.random() * array.length)]; -}; - -export default randomFromArray; diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts deleted file mode 100644 index 41fb445..0000000 --- a/client/helpers/slug.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -const slug = (item: string) => item.toLowerCase().split(' ').join('-'); - -export default slug; diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx index 3c50e9f..a45f0f6 100644 --- a/client/layouts/DetailsLayout.tsx +++ b/client/layouts/DetailsLayout.tsx @@ -11,8 +11,8 @@ import Product from '../components/Product'; import { ProductList } from '../constants/ProductList'; import Pattern from '../constants/Pattern'; import randomItems from '../helpers/randomIterms'; -import slug from '../helpers/slug'; -import CoverLoader from '../loaders/CoverLoader'; +import slug from '../../utils/slug'; +import CoverLoader from '../../components/CoverLoader'; import Layout from './Layout'; interface DetailsLayoutProps { diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx deleted file mode 100644 index 768833e..0000000 --- a/client/layouts/Footer.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; - -import './footer.css'; - -const Footer: React.FC<{}> = () => { - return ( - - ); -}; - -export default Footer; diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx deleted file mode 100644 index 98c10f9..0000000 --- a/client/layouts/Header.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; -import { Link } from 'react-router-dom'; - -import './header.css'; - -const STARS_KEY = 'stars'; - -const Header: React.FC<{}> = () => { - const stars = window.localStorage.getItem(STARS_KEY) || ''; - const [totalStars, setTotalStars] = React.useState(stars); - - React.useEffect(() => { - if (window.location.pathname === '/' || stars === '') { - fetch('https://api.github.com/repos/phuoc-ng/csslayout') - .then(res => res.json()) - .then(data => setTotalStars(data.stargazers_count)) - .catch(console.log); - } - }, []); - - React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]); - - return ( -
-
-
- - - - Patterns - {totalStars}★ -
-
-
- ); -}; - -export default Header; diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx deleted file mode 100644 index 0633eb8..0000000 --- a/client/layouts/Layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; - -import Footer from './Footer'; -import Header from './Header'; - -const Layout: React.FC<{}> = ({ children }) => { - React.useEffect(() => { - window.scrollTo(0, 0); - }, []); - - return ( - <> -
- {children} -