diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/index.html | 175 | ||||
| -rw-r--r-- | web/webpack.config.js | 121 |
2 files changed, 175 insertions, 121 deletions
diff --git a/web/index.html b/web/index.html new file mode 100644 index 000000000..9e05b516b --- /dev/null +++ b/web/index.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html lang="%LANG_ISO_CODE%"> + <head> + <meta charset="utf-8" /> + <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> + <!-- + This viewport works for phones with notches. + It's optimized for gestures by disabling global zoom. + --> + <meta + name="viewport" + content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" + /> + <title>%WEB_TITLE%</title> + <style> + /** + * Extend the react-native-web reset: + * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js + */ + html, + body, + #root { + width: 100%; + /* To smooth any scrolling behavior */ + -webkit-overflow-scrolling: touch; + margin: 0px; + padding: 0px; + /* Allows content to fill the viewport and go beyond the bottom */ + min-height: 100%; + } + #root { + flex-shrink: 0; + flex-basis: auto; + flex-grow: 1; + display: flex; + flex: 1; + } + + html { + scroll-behavior: smooth; + /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ + -webkit-text-size-adjust: 100%; + height: calc(100% + env(safe-area-inset-top)); + } + + body { + display: flex; + /* Allows you to scroll below the viewport; default value is visible */ + overflow-y: auto; + overscroll-behavior-y: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-overflow-style: scrollbar; + } + /* Enable for apps that support dark-theme */ + /*@media (prefers-color-scheme: dark) { + body { + background-color: black; + } + }*/ + + /* Remove focus state on inputs */ + *:focus { + outline: 0; + } + /* Remove default link styling */ + a { + color: inherit; + } + a[role="link"]:hover { + text-decoration: underline; + } + + /* ProseMirror */ + .ProseMirror { + font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + min-height: 140px; + } + .ProseMirror p { + margin: 0; + } + .ProseMirror p.is-editor-empty:first-child::before { + color: #8d8e96; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + } + .ProseMirror .mention { + color: #0085ff; + } + .ProseMirror a { + color: #0085ff; + cursor: pointer; + } + .tippy-content .items { + border-radius: 6px; + background: #F3F3F8; + border: 1px solid #e0d9d9; + padding: 3px 3px; + } + .tippy-content .items .item { + display: block; + background: transparent; + color: #8a8c9a; + border: 0; + font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + padding: 7px 10px 8px; + width: 100%; + text-align: left; + box-sizing: border-box; + letter-spacing: 0.2px; + } + .tippy-content .items .item.is-selected { + background: #fff; + border-radius: 4px; + color: #333; + } + </style> + </head> + + <body> + <!-- + A generic no script element with a reload button and a message. + Feel free to customize this however you'd like. + --> + <noscript> + <form + action="" + style=" + background-color: #fff; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + " + > + <div + style=" + font-size: 18px; + font-family: Helvetica, sans-serif; + line-height: 24px; + margin: 10%; + width: 80%; + " + > + <p>Oh no! It looks like JavaScript is not enabled in your browser.</p> + <p style="margin: 20px 0;"> + <button + type="submit" + style=" + background-color: #4630eb; + border-radius: 100px; + border: none; + box-shadow: none; + color: #fff; + cursor: pointer; + font-weight: bold; + line-height: 20px; + padding: 6px 16px; + " + > + Reload + </button> + </p> + </div> + </form> + </noscript> + <!-- The root element for your Expo app. --> + <div id="root"></div> + </body> +</html> diff --git a/web/webpack.config.js b/web/webpack.config.js deleted file mode 100644 index d74cdd542..000000000 --- a/web/webpack.config.js +++ /dev/null @@ -1,121 +0,0 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const webpackEnv = process.env.NODE_ENV || 'development' - -const appDirectory = path.resolve(__dirname, '../') - -// NOTE: node modules that ship as typescript must be listed here -const uncompiled_deps = [ - '@bam.tech/react-native-image-resizer', - 'react-native-fs', - 'rn-fetch-blob', - 'react-native-root-siblings', - 'react-native-linear-gradient', -] - -const babelLoaderConfiguration = { - test: /\.(js|jsx|ts|tsx)$/, - include: [ - path.resolve(appDirectory, 'index.web.js'), - path.resolve(appDirectory, 'src'), - ...uncompiled_deps.map(dep => - path.resolve(appDirectory, `node_modules/${dep}`), - ), - ], - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true, - presets: ['module:metro-react-native-babel-preset'], - plugins: ['react-native-web'], - }, - }, -} - -const imageLoaderConfiguration = { - test: /\.(gif|jpe?g|png|svg)$/, - use: { - loader: 'url-loader', - options: { - name: '[name].[ext]', - esModule: false, - }, - }, -} - -const reactNativeWebWebviewConfiguration = { - test: /postMock.html$/, - use: { - loader: 'file-loader', - options: { - name: '[name].[ext]', - }, - }, -} - -module.exports = { - mode: webpackEnv, - - entry: [ - // NOTE: load any web API polyfills needed here - path.resolve(appDirectory, 'index.web.js'), - ], - - output: { - filename: 'bundle.web.js', - path: path.resolve(appDirectory, 'dist'), - }, - - plugins: [ - new HtmlWebpackPlugin({ - template: path.join(appDirectory, './public/index.html'), - }), - ], - - module: { - rules: [ - babelLoaderConfiguration, - imageLoaderConfiguration, - reactNativeWebWebviewConfiguration, - ], - }, - - devServer: { - historyApiFallback: { - rewrites: [ - {from: /.*\/bundle.web.js/, to: '/bundle.web.js'}, - { - from: /.*^\/(.*.hot-update.json)$/, - to: function (context) { - return '/' + context.parsedUrl.pathname.split('/').pop() - }, - }, - { - from: /.*^\/(.*.hot-update.js)$/, - to: function (context) { - return '/' + context.parsedUrl.pathname.split('/').pop() - }, - }, - {from: /.*/, to: '/index.html'}, - ], - }, - }, - - resolve: { - alias: { - 'react-native$': 'react-native-web', - 'react-native-linear-gradient': 'react-native-web-linear-gradient', - 'react-native-webview': 'react-native-web-webview', - }, - extensions: [ - '.web.tsx', - '.web.ts', - '.tsx', - '.ts', - '.web.jsx', - '.web.js', - '.jsx', - '.js', - ], - }, -} |