get intended-ui imported and add splash page

assets/js/app.js

@@ -1,7 +1,8 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.css"
+// import "../css/app.css"
+// const _css = require("../css/app.css");
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -16,6 +17,10 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import topbar from "topbar"
 import {LiveSocket} from "phoenix_live_view"
+import React from "react";
+import ReactDOM from "react-dom";
+import SplashPage from './pages/SplashPage';
+import { GlobalStyle } from '@intended/intended-ui';
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
@@ -34,3 +39,10 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
+ReactDOM.render(<div>
+    <GlobalStyle />
+    <SplashPage />
+  </div>
+  ,
+  document.getElementById("root")
+);

assets/js/pages/SplashPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CenteredContainer, SplashIconHeader, Header1, Header3, Spacer, Button } from '@intended/intended-ui';
+
+const SplashPage = () => {
+  return (
+    <CenteredContainer fullscreen>
+      <CenteredContainer wide>
+        <SplashIconHeader />
+        <Header1>Securely Share Your Secrets</Header1>
+        <Header3>
+          With Intended Link you can easily share messages and files securely
+          and secretly.
+        </Header3>
+        <Spacer />
+        <Button variant="secondary" boldFont onClick={() => {}}>
+          START SHARING
+        </Button>
+      </CenteredContainer>
+    </CenteredContainer>
+  );
+};
+
+export default SplashPage;

assets/package.json

@@ -7,23 +7,32 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "@intended/intended-ui": "0.1.16",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "topbar": "^0.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@types/phoenix": "^1.5.3",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^8.0.2",
+    "source-map-loader": "^3.0.0",
     "terser-webpack-plugin": "^2.3.2",
+    "ts-loader": "8.2.0",
+    "typescript": "^4.5.2",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.2"
   }

assets/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "jsx": "react",
+    "outDir": "./dist/",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "exclude": [
+    "/node_modules/**/*",
+  ]
+}
+

assets/webpack.config.js

@@ -28,11 +28,16 @@ module.exports = (env, options) => {
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(j|t)s.?$/,
           exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader'
-          }
+          use: [
+            {
+              loader: "babel-loader"
+            },
+            {
+              loader: "ts-loader"
+            }
+          ]
         },
         {
           test: /\.[s]?css$/,
@@ -44,6 +49,9 @@ module.exports = (env, options) => {
         }
       ]
     },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }])