From 090e907884c6606d2caa8fc1782151e1b996efc1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 20 Oct 2019 19:59:22 +0200 Subject: [PATCH] postcss config, add typekit async loading --- .eslintrc | 64 +++++++++++++-------------- .gitignore | 6 +-- next.config.js | 2 +- package.json | 16 +++++-- postcss.config.js | 8 ++++ site.config.js | 3 +- src/@types/ipfs.d.ts | 5 +++ src/Layout.module.css | 2 - src/Layout.tsx | 7 +-- src/components/Add.module.css | 2 - src/components/Add.tsx | 31 ++----------- src/components/Dropzone.module.css | 16 +++---- src/components/Footer.module.css | 2 - src/components/Info.module.css | 2 - src/components/Loader.module.css | 12 ++--- src/components/Status.module.css | 2 - src/components/ThemeSwitch.module.css | 19 +++----- src/components/Typekit.tsx | 24 ++++++++++ src/hooks/use-ipfs-api.tsx | 14 +----- src/pages/_app.tsx | 16 +++++++ src/pages/index.module.css | 2 - src/pages/index.tsx | 3 -- src/styles/_variables.css | 4 ++ src/styles/global.css | 1 - src/utils.ts | 33 ++++++++++++++ tsconfig.json | 2 +- 26 files changed, 161 insertions(+), 137 deletions(-) create mode 100644 postcss.config.js create mode 100644 src/@types/ipfs.d.ts create mode 100644 src/components/Typekit.tsx create mode 100644 src/pages/_app.tsx diff --git a/.eslintrc b/.eslintrc index 167cddc..f43528c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,36 +1,34 @@ { - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": 2018, - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - }, - "project": "./tsconfig.json", - "tsconfigRootDir": "./" - }, - "extends": [ - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:jsx-a11y/recommended", - "prettier/@typescript-eslint", - "prettier/react", - "plugin:prettier/recommended", - "plugin:react/recommended" - ], - "plugins": ["@typescript-eslint", "react"], - "rules": { - "react/prop-types": "off", - "@typescript-eslint/explicit-function-return-type": "off" - }, - "env": { - "es6": true, - "browser": true, - "jest": true - }, - "settings": { - "react": { - "version": "detect" + "extends": ["eslint:recommended", "prettier"], + "env": { "es6": true, "browser": true, "node": true }, + "settings": { "react": { "version": "detect" } }, + "overrides": [ + { + "files": ["**/*.ts", "**/*.tsx"], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + }, + "project": "./tsconfig.json", + "tsconfigRootDir": "./" + }, + "extends": [ + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:jsx-a11y/recommended", + "prettier/@typescript-eslint", + "prettier/react", + "plugin:prettier/recommended", + "plugin:react/recommended" + ], + "plugins": ["@typescript-eslint", "react"], + "rules": { + "react/prop-types": "off", + "@typescript-eslint/explicit-function-return-type": "off" + } } - } + ] } diff --git a/.gitignore b/.gitignore index cd28e47..01b9265 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ node_modules npm-debug.log .DS_Store -/.next/ -/out/ -/build +.next +out +build package-lock.json \ No newline at end of file diff --git a/next.config.js b/next.config.js index d4a4e38..03863ac 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,6 @@ const withCSS = require('@zeit/next-css') +// eslint-disable-next-line no-unused-vars const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { return Object.assign({}, nextConfig, { webpack(config, options) { @@ -28,7 +29,6 @@ module.exports = withSvgr( withCSS({ cssModules: true, cssLoaderOptions: { - importLoaders: 1, localIdentName: '[local]___[hash:base64:5]' } }) diff --git a/package.json b/package.json index 0dc7f9a..26c0239 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "@kremalicious/ipfs", "version": "1.0.0", - "description": "Public IPFS Node.", + "description": "A public IPFS node.", "scripts": { "start": "next dev", "build": "next build", "serve": "next start", - "test": "eslint --ignore-path .gitignore 'src/**/*.{ts,tsx}'", - "format": "prettier ./src/**/*.{css,yml,js,jsx,ts,tsx,json} --write" + "test": "eslint --ignore-path .gitignore '**/*.{js,jsx,ts,tsx}'", + "format": "prettier --ignore-path .gitignore '**/*.{css,yml,js,jsx,ts,tsx,json}' --write" }, "author": "Matthias Kretschmann ", "license": "MIT", @@ -29,15 +29,23 @@ "@types/react": "^16.9.9", "@typescript-eslint/eslint-plugin": "^2.4.0", "@typescript-eslint/parser": "^2.4.0", + "cssnano": "^4.1.10", "eslint": "^6.5.1", "eslint-config-prettier": "^6.4.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-react": "^7.16.0", + "postcss-preset-env": "^6.7.0", "prettier": "^1.18.2", "typescript": "^3.6.4" }, "engines": { "node": "10.x" - } + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..7330924 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,8 @@ +module.exports = { + plugins: { + 'postcss-preset-env': { + importFrom: './src/styles/_variables.css' + }, + cssnano: {} + } +} diff --git a/site.config.js b/site.config.js index 24b8121..dff4f38 100644 --- a/site.config.js +++ b/site.config.js @@ -3,5 +3,6 @@ module.exports = { description: 'A public IPFS Gateway', url: 'https://ipfs.kretschmann.io', ipfsGateway: 'https://ipfs.kretschmann.io', - ipfsNodeUri: 'https://ipfs.kretschmann.io:443' + ipfsNodeUri: 'https://ipfs.kretschmann.io:443', + typekitId: 'msu4qap' } diff --git a/src/@types/ipfs.d.ts b/src/@types/ipfs.d.ts new file mode 100644 index 0000000..1162454 --- /dev/null +++ b/src/@types/ipfs.d.ts @@ -0,0 +1,5 @@ +export interface IpfsConfig { + protocol: string + host: string + port: string +} diff --git a/src/Layout.module.css b/src/Layout.module.css index 46d805e..c30cee2 100644 --- a/src/Layout.module.css +++ b/src/Layout.module.css @@ -1,5 +1,3 @@ -@import './styles/_variables.css'; - .app { padding: var(--spacer); display: flex; diff --git a/src/Layout.tsx b/src/Layout.tsx index 0fcf100..139c1aa 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -1,9 +1,8 @@ import React, { ReactNode } from 'react' -import Head from 'next/head' import { NextSeo } from 'next-seo' import Footer from './components/Footer' -import styles from './Layout.module.css' import { title, description, url } from '../site.config' +import styles from './Layout.module.css' export default function Layout({ children, @@ -14,10 +13,6 @@ export default function Layout({ }) { return (
- - - - void, - ipfs: any -) { - const file = [...files][0] - const fileDetails = { path: file.name, content: file } - - const response = await ipfs.add(fileDetails, { - wrapWithDirectory: true, - progress: (length: number) => setFileSizeReceived(formatBytes(length, 0)) - }) - - // CID of wrapping directory is returned last - const cid = `${response[response.length - 1].hash}/${file.name}` - return cid -} - export default function Add() { const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig) const [fileHash, setFileHash] = useState() diff --git a/src/components/Dropzone.module.css b/src/components/Dropzone.module.css index 9c83f56..646e5f8 100644 --- a/src/components/Dropzone.module.css +++ b/src/components/Dropzone.module.css @@ -1,15 +1,5 @@ -@import '../styles/_variables.css'; - -:root { - --border-color: var(--brand-grey-dimmed); -} - -:global(.dark) { - --border-color: var(--brand-grey); -} - .dropzone { - border: 0.4rem dashed var(--border-color); + border: 0.4rem dashed var(--brand-grey-dimmed); border-radius: var(--border-radius); padding: calc(var(--spacer) * 2) var(--spacer); transition: 0.2s ease-out; @@ -18,6 +8,10 @@ color: var(--brand-grey-light); } +:global(.dark) .dropzone { + border-color: var(--brand-grey); +} + .dropzone:hover, .dropzone:focus, .dropzone:active { diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css index 7eb9482..b81c985 100644 --- a/src/components/Footer.module.css +++ b/src/components/Footer.module.css @@ -1,5 +1,3 @@ -@import '../styles/_variables.css'; - .footer { width: 100%; font-size: var(--font-size-mini); diff --git a/src/components/Info.module.css b/src/components/Info.module.css index 4dee194..f63a733 100644 --- a/src/components/Info.module.css +++ b/src/components/Info.module.css @@ -1,5 +1,3 @@ -@import '../styles/_variables.css'; - .info { font-size: var(--font-size-small); opacity: 0.8; diff --git a/src/components/Loader.module.css b/src/components/Loader.module.css index aaf1cc8..d9c1334 100644 --- a/src/components/Loader.module.css +++ b/src/components/Loader.module.css @@ -1,5 +1,3 @@ -@import '../styles/_variables.css'; - .loader { position: relative; text-align: center; @@ -10,17 +8,15 @@ .loader:before, .loader:after { - --size: 1.75rem; - content: ''; box-sizing: border-box; position: absolute; top: 0; left: 50%; - margin-top: calc(var(--size) * -1); - margin-left: calc(var(--size) / -2); - width: var(--size); - height: var(--size); + margin-top: calc(var(--loaderSize) * -1); + margin-left: calc(var(--loaderSize) / -2); + width: var(--loaderSize); + height: var(--loaderSize); border-radius: 50%; background-color: var(--brand-cyan); opacity: 0.6; diff --git a/src/components/Status.module.css b/src/components/Status.module.css index d9cf3ee..1e90c46 100644 --- a/src/components/Status.module.css +++ b/src/components/Status.module.css @@ -1,5 +1,3 @@ -@import '../styles/_variables.css'; - /* default: red square */ .status { width: 0.5rem; diff --git a/src/components/ThemeSwitch.module.css b/src/components/ThemeSwitch.module.css index 8bdfa6a..055fec9 100644 --- a/src/components/ThemeSwitch.module.css +++ b/src/components/ThemeSwitch.module.css @@ -1,10 +1,3 @@ -@import '../styles/_variables.css'; - -:root { - --knob-size: 8px; - --knob-space: 1px; -} - .themeSwitch { position: relative; display: inline-block; @@ -33,8 +26,8 @@ .checkboxFake { display: block; position: relative; - width: calc(var(--knob-size) * 2.5); - height: calc(var(--knob-size) + calc(var(--knob-space) * 4)); + width: calc(var(--switch-knob-size) * 2.5); + height: calc(var(--switch-knob-size) + calc(var(--switch-knob-space) * 4)); border: 1px solid var(--brand-grey-light); border-radius: 15rem; margin-left: calc(var(--spacer) / 3); @@ -44,10 +37,10 @@ .checkboxFake::after { content: ''; position: absolute; - top: var(--knob-space); - left: var(--knob-space); - width: var(--knob-size); - height: var(--knob-size); + top: var(--switch-knob-space); + left: var(--switch-knob-space); + width: var(--switch-knob-size); + height: var(--switch-knob-size); background-color: var(--brand-grey-light); border-radius: 15rem; transition: transform 0.2s var(--easing); diff --git a/src/components/Typekit.tsx b/src/components/Typekit.tsx new file mode 100644 index 0000000..7bb0732 --- /dev/null +++ b/src/components/Typekit.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import Head from 'next/head' +import { typekitId } from '../../site.config' + +const typekitScript = ` + (function(d) { + var config = { + kitId: '${typekitId}', + scriptTimeout: 3000, + async: true + }, + h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) + })(document); +` + +export default function Typekit() { + return typekitId ? ( + + + +