From bced6a1df54a5c134f8b2a99b77fe801c1ec113b Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 27 Sep 2021 20:32:58 +0700 Subject: [PATCH] Add layout --- .babelrc | 14 ------ .gitignore | 3 +- .prettierignore | 3 ++ bin/generateScreenshot.ts | 2 +- components/FooterBlock.tsx | 32 ++++++++++++++ components/HeaderBlock.tsx | 37 ++++++++++++++++ layouts/Layout.tsx | 25 +++++++++++ next-env.d.ts | 6 +++ next.config.js | 9 ++++ package.json | 88 +++++++++++++++++++------------------- pages/_app.tsx | 17 ++++++++ pages/_document.tsx | 44 +++++++++++++++++++ pages/index.tsx | 13 ++++++ prettier.config.js | 5 +++ styles/_reset.scss | 30 +++++++++++++ styles/blocks/_footer.scss | 11 +++++ styles/blocks/_header.scss | 23 ++++++++++ styles/blocks/_layout.scss | 13 ++++++ styles/index.scss | 6 +++ tsconfig.json | 40 ++++++++++++----- webpack.config.js | 78 --------------------------------- 21 files changed, 351 insertions(+), 148 deletions(-) delete mode 100644 .babelrc create mode 100644 .prettierignore create mode 100644 components/FooterBlock.tsx create mode 100644 components/HeaderBlock.tsx create mode 100644 layouts/Layout.tsx create mode 100644 next-env.d.ts create mode 100644 next.config.js create mode 100644 pages/_app.tsx create mode 100644 pages/_document.tsx create mode 100644 pages/index.tsx create mode 100644 prettier.config.js create mode 100644 styles/_reset.scss create mode 100644 styles/blocks/_footer.scss create mode 100644 styles/blocks/_header.scss create mode 100644 styles/blocks/_layout.scss create mode 100644 styles/index.scss delete mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index f9a34ac..0000000 --- a/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "plugins": [ - "@loadable/babel-plugin", - ["prismjs", { - "languages": ["css", "html", "javascript", "jsx", "tsx"], - // "theme": "okaidia", - "css": true - }] - ], - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ] -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index aa7cfbd..35b0cc8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store .netlify -dist +.next node_modules +out package-lock.json tslint.log \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3988b82 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +.netlify +.next +node_modules diff --git a/bin/generateScreenshot.ts b/bin/generateScreenshot.ts index b39e2ef..d3bc33f 100644 --- a/bin/generateScreenshot.ts +++ b/bin/generateScreenshot.ts @@ -18,7 +18,7 @@ const main = () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); - await page.goto(`http://localhost:1234/patterns/${pattern}`); + await page.goto(`http://localhost:3000/patterns/${pattern}`); await page.waitForSelector('.demo__live'); const element = await page.$('.demo__live'); diff --git a/components/FooterBlock.tsx b/components/FooterBlock.tsx new file mode 100644 index 0000000..3ce0374 --- /dev/null +++ b/components/FooterBlock.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { Footer, FooterGroup, FooterLink } from '@1milligram/design'; + +export const FooterBlock = () => ( + +); diff --git a/components/HeaderBlock.tsx b/components/HeaderBlock.tsx new file mode 100644 index 0000000..eefb31e --- /dev/null +++ b/components/HeaderBlock.tsx @@ -0,0 +1,37 @@ +import Link from 'next/link'; +import * as React from 'react'; +import { Logo } from '@1milligram/design'; + +export const HeaderBlock = () => { + const [totalStars, setTotalStars] = React.useState(0); + + React.useEffect(() => { + fetch('https://api.github.com/repos/1milligram/csslayout') + .then((res) => res.json()) + .then((data) => setTotalStars(data.stargazers_count)) + .catch(console.log); + }, []); + + const HeaderLogo = React.forwardRef>( + (props, ref) => ( + + + + ) + ); + + return ( +
+
+
+ + + + + GitHub {totalStars}★ + +
+
+
+ ); +}; diff --git a/layouts/Layout.tsx b/layouts/Layout.tsx new file mode 100644 index 0000000..f7eb32b --- /dev/null +++ b/layouts/Layout.tsx @@ -0,0 +1,25 @@ +import Head from 'next/head'; +import * as React from 'react'; +import { FooterBlock } from '../components/FooterBlock'; +import { HeaderBlock } from '../components/HeaderBlock'; + +interface LayoutProps { + title: string; +} + +export const Layout: React.FC = ({ children, title }) => ( + <> + + {title} - CSS Layout + + + + + + + + + {children} + + +); diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..9bc3dd4 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..38454c3 --- /dev/null +++ b/next.config.js @@ -0,0 +1,9 @@ +const withMDX = require('@next/mdx')({ + extension: /\.mdx?$/, +}); + +module.exports = withMDX({ + // `true` will transform `/about` to `/about/index.html` + trailingSlash: true, + pageExtensions: ['js', 'jsx', 'tsx', 'mdx'], +}); diff --git a/package.json b/package.json index 8e773f0..a882596 100644 --- a/package.json +++ b/package.json @@ -1,61 +1,61 @@ { "name": "csslayout", + "description": "A collection of popular layouts and patterns made with CSS", + "author": { + "name": "Nguyen Huu Phuoc", + "email": "me@phuoc.ng", + "url": "https://twitter.com/nghuuphuoc" + }, + "homepage": "https://csslayout.io", + "keywords": [ + "CSS grid", + "CSS flexbox", + "CSS layout", + "CSS patterns" + ], + "repository": { + "type": "git", + "url": "https://github.com/1milligram/csslayout" + }, + "bugs": { + "url": "https://github.com/1milligram/csslayout/issues" + }, + "license": "MIT", "scripts": { - "copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist", - "dev": "npm run copy && webpack --mode=development", - "dev-server": "npm run copy && NODE_ENV=development webpack serve", - "build": "npm run copy && webpack --mode=production && npm run export", - "export": "react-snap", - "deploy": "npm run build && netlify deploy --dir=dist --prod", - "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p", + "build": "next build", + "dev": "next dev", + "format": "prettier --write \"**/*.+(css|html|json|js|jsx|mdx|scss|ts|tsx)\"", + "preexport": "npm run build", + "export": "next export", + "deploy": "npm run export && netlify deploy --prod --dir=out", "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'", "screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts" }, "dependencies": { "@loadable/component": "^5.14.1", - "prismjs": "^1.23.0", + "@1milligram/design": "^0.4.0", + "@1milligram/frame": "^1.0.0", + "@mdx-js/loader": "^1.6.22", + "@mdx-js/react": "^1.6.22", + "@next/mdx": "^11.1.2", + "next": "^11.1.2", + "prism-react-renderer": "^1.2.1", "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-helmet": "^6.1.0", - "react-router-dom": "^5.2.0" + "react-dom": "^17.0.2" }, "devDependencies": { - "@babel/core": "^7.13.13", - "@babel/preset-env": "^7.13.12", - "@babel/preset-react": "^7.13.13", - "@loadable/babel-plugin": "^5.13.2", + "@types/linkifyjs": "^2.1.4", "@types/loadable__component": "^5.13.3", - "@types/prismjs": "^1.16.4", - "@types/react": "^17.0.3", - "@types/react-dom": "^17.0.3", - "@types/react-helmet": "^6.1.0", - "@types/react-router-dom": "^5.1.7", - "babel-loader": "^8.2.2", - "babel-plugin-prismjs": "^2.0.1", - "cpx2": "^3.0.0", - "css-loader": "^5.2.0", - "html-webpack-plugin": "^5.3.1", - "mini-css-extract-plugin": "^1.4.0", - "puppeteer": "^1.20.0", - "react-snap": "^1.23.0", - "rimraf": "^3.0.2", - "source-map-loader": "^2.0.1", - "style-loader": "^2.0.0", + "@types/react": "^17.0.20", + "@types/react-dom": "^17.0.9", + "puppeteer": "^10.4.0", + "prettier": "^2.4.0", + "sass": "^1.39.2", + "serve": "^12.0.1", + "typescript": "^4.4.3", "ts-loader": "^8.1.0", "ts-node": "^9.1.1", "tslint": "^6.1.3", - "tslint-react": "^5.0.0", - "typescript": "^4.2.3", - "webpack": "^5.28.0", - "webpack-bundle-analyzer": "^4.4.0", - "webpack-cli": "^4.6.0", - "webpack-dev-server": "^3.11.2" - }, - "reactSnap": { - "source": "dist", - "minifyHtml": { - "collapseWhitespace": false, - "removeComments": false - } + "tslint-react": "^5.0.0" } } diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..ac0d1af --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,17 @@ +import Head from 'next/head'; + +// Design +import '@1milligram/design/lib/styles/index.css'; +import '@1milligram/frame/lib/styles/index.css'; +import '../styles/index.scss'; + +export default function MyApp({ Component, pageProps }) { + return ( + <> + + + + + + ); +} diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..9c938d9 --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,44 @@ +import Document, { Html, Head, Main, NextScript } from 'next/document'; + +class MyDocument extends Document { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + ); + } +} + +export default MyDocument; diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..374624c --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; + +import { Layout } from '../layouts/Layout'; + +const HomePage = () => { + return ( + + + + ); +}; + +export default HomePage; diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..c39f321 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,5 @@ +module.exports = { + printWidth: 120, + singleQuote: true, + tabWidth: 4, +}; diff --git a/styles/_reset.scss b/styles/_reset.scss new file mode 100644 index 0000000..34a0d52 --- /dev/null +++ b/styles/_reset.scss @@ -0,0 +1,30 @@ +body { + -webkit-font-smoothing: antialiased; + color: #333; + font-family: 'Inter', sans-serif; + line-height: 1.5; + margin: 0; +} +* { + box-sizing: border-box; +} +a { + text-decoration: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} +img { + max-width: 100%; +} +ol, +ul { + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/styles/blocks/_footer.scss b/styles/blocks/_footer.scss new file mode 100644 index 0000000..f23f0bc --- /dev/null +++ b/styles/blocks/_footer.scss @@ -0,0 +1,11 @@ +/* Footer */ +.block-footer { + border-top: 1px solid #e1e1e1; + padding-top: 4rem; +} +.block-footer__copyright { + color: #afafaf; + margin: 2rem 0 4rem 0; + padding: 1rem 0; + text-align: center; +} diff --git a/styles/blocks/_header.scss b/styles/blocks/_header.scss new file mode 100644 index 0000000..24656eb --- /dev/null +++ b/styles/blocks/_header.scss @@ -0,0 +1,23 @@ +.block-header { + background: #fff; + border-bottom: 1px solid #e4e4e4; + position: sticky; + top: 0; + z-index: 9999; +} +.block-header__inner { + align-items: center; + display: flex; + height: 3rem; + justify-content: space-between; +} +.block-header__cta { + align-items: center; + background-color: var(--mgd-color-primary); + border-radius: 9999px; + color: #fff; + display: flex; + font-weight: 600; + height: 2rem; + padding: 0 1.5rem; +} diff --git a/styles/blocks/_layout.scss b/styles/blocks/_layout.scss new file mode 100644 index 0000000..0171c00 --- /dev/null +++ b/styles/blocks/_layout.scss @@ -0,0 +1,13 @@ +.block-container { + margin-left: auto; + margin-right: auto; + max-width: 64rem; +} +.block-hero { + text-align: center; +} +.block-hero__heading--secondary { + color: #808080; + font-size: 1.25rem; + font-weight: 600; +} diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..c86272a --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,6 @@ +@import './reset'; + +// Blocks +@import 'blocks/footer'; +@import 'blocks/header'; +@import 'blocks/layout'; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 495fd53..041f562 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,32 @@ { - "compilerOptions": { - "outDir": "./dist/", - "esModuleInterop": true, - "sourceMap": true, - "noImplicitAny": true, - "module": "esnext", - "moduleResolution": "node", - "target": "esnext", - "jsx": "react" - } + "compilerOptions": { + "outDir": "./dist/", + "esModuleInterop": true, + "sourceMap": true, + "noImplicitAny": true, + "module": "esnext", + "moduleResolution": "node", + "target": "esnext", + "jsx": "preserve", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "resolveJsonModule": true, + "isolatedModules": true + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] } diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index c4f4cb7..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -const path = require('path'); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; -const HtmlWebPackPlugin = require("html-webpack-plugin"); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -const plugins = [ - new HtmlWebPackPlugin({ - template: './client/index.html', - filename: './index.html', - }), - new MiniCssExtractPlugin({ - filename: '[name].[contenthash].css', - ignoreOrder: false, // Enable to remove warnings about conflicting order - }), -]; - -if (process.env.NODE_ENV === "analyse") { - plugins.push(new BundleAnalyzerPlugin()); -} - -module.exports = { - mode: process.env.NODE_ENV, - entry: { - client: './client/index.tsx', - }, - output: { - path: path.join(__dirname, 'dist'), - filename: '[name].[contenthash].js', - // If user browser enables ad blocking, then the pattern likes `Cookie banner` can't be loaded - // In order to fix that, we remove the `[name]` from the bundled output - chunkFilename: '[contenthash].js', - // It's very important - // All the chunk generated by webpack then will be loaded such as - // - // The script is accessible from any page that exported by a 3rd party such as react-snap - publicPath: '/', - }, - module: { - rules: [ - { - test: /\.css$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - }, - 'css-loader', - ], - }, - { - test: /\.ts(x?)$/, - exclude: /node_modules/, - // The order of loaders are very important - // It will make the @loadable/component work - use: ['babel-loader', 'ts-loader'], - }, - { - enforce: "pre", - test: /\.js$/, - loader: 'source-map-loader', - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - devtool: process.env.NODE_ENV === 'production' ? false : 'source-map', - devServer: { - contentBase: path.join(__dirname, 'dist'), - historyApiFallback: true, - port: 1234, - }, - plugins, -}; \ No newline at end of file