From 652aa06ebfb508b37020bc24eba2cd8d860a1b6a Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Fri, 8 Nov 2019 22:36:04 +0100 Subject: [PATCH] rework & new build system --- .drone.yml | 16 ++++----- .gitignore | 5 ++- docker-compose.prod.yml | 8 ++++- package.json | 36 +++++++++----------- src/App.styl | 42 ------------------------ src/App.tsx | 31 ------------------ src/Components/App.tsx | 35 ++++++++++++++++++++ src/Components/ShowTime.tsx | 26 +++++++++++++++ src/Components/Switcher.tsx | 20 ++++++++++++ src/index.html | 2 ++ src/index.tsx | 7 ---- src/main.styl | 38 ++++++++++++++++++++++ src/main.tsx | 8 +++++ tsconfig.json | 40 +++++++++++------------ webpack.config.js | 65 ------------------------------------- 15 files changed, 181 insertions(+), 198 deletions(-) delete mode 100644 src/App.styl delete mode 100644 src/App.tsx create mode 100644 src/Components/App.tsx create mode 100644 src/Components/ShowTime.tsx create mode 100644 src/Components/Switcher.tsx delete mode 100755 src/index.tsx create mode 100644 src/main.styl create mode 100755 src/main.tsx delete mode 100755 webpack.config.js diff --git a/.drone.yml b/.drone.yml index 07a1c5d..65896df 100644 --- a/.drone.yml +++ b/.drone.yml @@ -3,20 +3,17 @@ name: default steps: - name: build - image: node:11-alpine + image: node:12-alpine pull: always commands: - node -v - npm -v - - npm i - - npm run build:prod + - yarn + - yarn run build - name: deploy image: cupcakearmy/drone-deploy pull: always - # environment: - # PLUGIN_KEY: - # from_secret: ssh_key settings: host: nicco.io user: root @@ -25,12 +22,11 @@ steps: port: 1312 target: /srv/web/rauchmelder sources: - - ./public - - ./docker-compose.yml + - ./dist - ./docker-compose.prod.yml commands: - - docker-compose -f docker-compose.yml -f docker-compose.prod.yml down - - docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d + - docker-compose -f docker-compose.prod.yml down + - docker-compose -f docker-compose.prod.yml up -d when: event: push branch: master \ No newline at end of file diff --git a/.gitignore b/.gitignore index 43c88e0..87df5a8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,9 @@ node_modules package-lock.json -public +pnpm-lock.yaml + +.cache +dist .idea .vscode \ No newline at end of file diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index b15370f..1e16254 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -1,7 +1,13 @@ -version: '3' +version: '3.6' services: home: + image: nginx:alpine + restart: always + ports: + - 80 + volumes: + - ./public:/usr/share/nginx/html:ro networks: - traefik labels: diff --git a/package.json b/package.json index ece7682..152924c 100755 --- a/package.json +++ b/package.json @@ -1,30 +1,24 @@ { "private": true, + "browserslist": [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 Firefox versions" + ], "scripts": { - "build:dev": "webpack -d", - "build:prod": "webpack -p", - "dev": "webpack-dev-server -d" + "dev": "parcel ./src/index.html", + "build": "parcel build ./src/index.html" }, "dependencies": { "moment": "^2.24.0", - "react": "^16.8", - "react-dom": "^16.8", - "react-fittext": "^1.0.0" + "react": "16.9", + "react-dom": "16.9" }, "devDependencies": { - "@types/react": "^16.8", - "@types/react-dom": "^16.8", - "awesome-typescript-loader": "^5", - "css-loader": "^2", - "file-loader": "^3", - "html-webpack-plugin": "^3", - "mini-css-extract-plugin": "^0.5.0", - "style-loader": "^0", - "stylus": "^0", - "stylus-loader": "^3", - "typescript": "^3.3.3", - "webpack": "^4", - "webpack-cli": "^3", - "webpack-dev-server": "^3.1.14" + "@types/react": "16.9", + "@types/react-dom": "16.9", + "stylus": "^0.54.7", + "parcel-bundler": "^1.12.4", + "typescript": "^3.7" } -} +} \ No newline at end of file diff --git a/src/App.styl b/src/App.styl deleted file mode 100644 index 74003ea..0000000 --- a/src/App.styl +++ /dev/null @@ -1,42 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=PT+Sans') - -* - box-sizing border-box - -html -body -#root - margin 0 - padding 0 - width 100vw - height 100vh - overflow hidden - font-family 'PT Sans', sans-serif - font-weight bold - -#app - height: 100% - width: 100% - //background-color #eeffee - background linear-gradient(45deg, #111, #222) - color #fff - display flex - justify-content center - align-items center - text-align center - - @media (min-width: 0px) - #text - font-size 3em - #title - font-size 2em - @media (min-width: 900px) - #text - font-size 4em - #title - font-size 3em - @media (min-width: 1200px) - #text - font-size 5em - #title - font-size 4em diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 4883f74..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import moment from 'moment' -import React, { useEffect, useState } from 'react' -// @ts-ignore - - -const App: React.FC = () => { - - const [refresh, setRefresh] = useState(0) - - const gloryTime = moment('2019-02-12').unix() - const now = Date.now() / 1000 | 0 - const delta = moment.duration(now - gloryTime, 'seconds') - - useEffect(()=> { - setTimeout(()=> setRefresh(refresh + 1), 1000) - }, [refresh]) - - return
-
-
Rauchmelder 💨
-
-
- {delta.humanize()} -
- {delta.asSeconds()} -
-
-
-} - -export default App \ No newline at end of file diff --git a/src/Components/App.tsx b/src/Components/App.tsx new file mode 100644 index 0000000..242b820 --- /dev/null +++ b/src/Components/App.tsx @@ -0,0 +1,35 @@ +import React, { useState, useCallback } from 'react' +import moment from 'moment' + +import ShowTime from './ShowTime' +import Switcher from './Switcher' + +export const Glories = { + Cosi: moment('2019-02-12').unix(), + Georg: moment('2019-11-08').unix() +} + +export type Person = keyof typeof Glories + +const init: Person = window.localStorage.getItem('selected') as Person || 'Cosi' + +const App: React.FC = () => { + + const [person, setPerson] = useState(init) + + const _set = useCallback((p: Person) => { + window.localStorage.setItem('selected', p) + setPerson(p) + }, []) + + return
+ +
+
💨 Rauchmelder 💨
+
+ +
+
+} + +export default App \ No newline at end of file diff --git a/src/Components/ShowTime.tsx b/src/Components/ShowTime.tsx new file mode 100644 index 0000000..b4af7dc --- /dev/null +++ b/src/Components/ShowTime.tsx @@ -0,0 +1,26 @@ +import React, { useEffect, useState } from 'react' +import moment from 'moment' + +type Props = { + glory: number +} + +const ShowTime: React.FC = ({ glory }) => { + const [refresh, setRefresh] = useState(0) + + + const now = Date.now() / 1000 | 0 + const delta = moment.duration(now - glory, 'seconds') + + useEffect(() => { + setTimeout(() => setRefresh(refresh + 1), 1000) + }, [refresh]) + + return
+ {delta.humanize()} +
+ {delta.asSeconds()} +
+} + +export default ShowTime \ No newline at end of file diff --git a/src/Components/Switcher.tsx b/src/Components/Switcher.tsx new file mode 100644 index 0000000..22eb938 --- /dev/null +++ b/src/Components/Switcher.tsx @@ -0,0 +1,20 @@ +import React, { useMemo } from 'react' +import { Glories, Person } from './App' + +type Props = { + onChange: (p: Person) => void, +} + +const Switcher: React.FC = ({ onChange }) => { + return
+ {Object.keys(Glories).map((glory, i) => onChange(glory as Person)} + > + {glory} + + )} +
+} + +export default Switcher \ No newline at end of file diff --git a/src/index.html b/src/index.html index 402f59f..a07e090 100755 --- a/src/index.html +++ b/src/index.html @@ -5,10 +5,12 @@ 💨 +
+ \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100755 index 7f9a95d..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' - -import './App.styl' -import App from './App' - -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/src/main.styl b/src/main.styl new file mode 100644 index 0000000..73db580 --- /dev/null +++ b/src/main.styl @@ -0,0 +1,38 @@ +* + box-sizing border-box + +html, body, #root + margin 0 + padding 0 + width 100% + height 100% + overflow hidden + font-family 'PT Sans', sans-serif + font-weight bold + +#app + height: 100% + width: 100% + background linear-gradient(45deg, #111, #222) + color #fff + display flex + justify-content center + align-items center + text-align center + + #text + font-size 17vmin + #title + font-weight: normal + font-size 12vmin + +#switcher + position: fixed + top: 0 + padding: 1rem + font-size: 2em + + &>span + margin: 1rem + text-decoration: underline + cursor pointer \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100755 index 0000000..9d83dcd --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,8 @@ +import * as React from 'react' +import * as ReactDOM from 'react-dom' + +import './main.styl' +import App from './Components/App' + + +ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4d6e7d8..2333d15 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,60 +1,60 @@ { "compilerOptions": { /* Basic Options */ - "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ - "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ + // "incremental": true, /* Enable incremental compilation */ + "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ + "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ - "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ // "outDir": "./", /* Redirect output structure to the directory. */ - "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /* Enable project compilation */ - "removeComments": true, /* Do not emit comments to output. */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + // "removeComments": true, /* Do not emit comments to output. */ // "noEmit": true, /* Do not emit outputs. */ // "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - /* Strict Type-Checking Options */ - "strict": true, /* Enable all strict type-checking options. */ - "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - "strictNullChecks": true, /* Enable strict null checks. */ - "strictFunctionTypes": true, /* Enable strict checking of function types. */ - "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - /* Module Resolution Options */ - "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ // "types": [], /* Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ + "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ /* Source Map Options */ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - /* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + /* Advanced Options */ + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ } } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100755 index 1d822ae..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,65 +0,0 @@ -const path = require('path') - -const HtmlWebpackPlugin = require('html-webpack-plugin') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') - -module.exports = { - entry: [ - './index.tsx' - ], - output: { - filename: 'bundle.js', - path: path.resolve(__dirname, 'public') - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'] - }, - context: path.resolve(__dirname, 'src'), - devServer: { - contentBase: path.resolve(__dirname, 'public/assets'), - open: true, - }, - plugins: [ - new HtmlWebpackPlugin({ - template: 'index.html' - }), - new MiniCssExtractPlugin({ - filename: 'bundle.css' - }) - ], - stats: { - assets: true, - assetsSort: 'size', - all: false, - errors: true, - colors: true, - performance: true, - timings: true, - }, - module: { - rules: [{ - test: /\.tsx?$/, - loader: 'awesome-typescript-loader', - }, - // { - // test: /\.html$/, - // use: ['html-loader'] - // }, - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader'] - }, { - test: /\.styl$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'], - }, { - test: /\.(jpg|png|gif|svg|woff2?|ttf|eot|svg|otf)$/, - use: [{ - loader: 'file-loader', - options: { - name: '[name].[ext]', - outputPath: './assets/', - }, - }], - }] - } -} \ No newline at end of file