diff --git a/.vscode/settings.json b/.vscode/settings.json
index a5f9e023..cbd787ce 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -53,5 +53,8 @@
"webrowse"
],
"reactSnippets.settings.prettierEnabled": true,
- "reactSnippets.settings.importReactOnTop": false
+ "reactSnippets.settings.importReactOnTop": false,
+ "[html]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
}
diff --git a/config/paths.js b/config/paths.js
index 3d008e9f..bf0ae7c6 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -58,6 +58,8 @@ module.exports = {
appPublic: resolveApp("public"),
appHtml: resolveApp("public/index.html"),
appIndexJs: resolveModule(resolveApp, "src/index"),
+ embedAppHtml: resolveApp("public/embed.html"),
+ embedAppIndexJs: resolveModule(resolveApp, "src/embed"),
appPackageJson: resolveApp("package.json"),
appSrc: resolveApp("src"),
appTsConfig: resolveApp("tsconfig.json"),
diff --git a/config/webpack.config.js b/config/webpack.config.js
index b2fc1ad1..c06061c6 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -118,7 +118,7 @@ module.exports = function (webpackEnv) {
: isEnvDevelopment && "cheap-module-source-map",
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
- entry: paths.appIndexJs,
+ entry: { main: paths.appIndexJs, embed: paths.embedAppIndexJs },
output: {
// The build folder.
path: paths.appBuild,
@@ -128,7 +128,7 @@ module.exports = function (webpackEnv) {
// In development, it does not produce real files.
filename: isEnvProduction
? "static/js/[name].[contenthash:8].js"
- : isEnvDevelopment && "static/js/bundle.js",
+ : isEnvDevelopment && "static/js/[name].bundle.js",
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? "static/js/[name].[contenthash:8].chunk.js"
@@ -260,18 +260,6 @@ module.exports = function (webpackEnv) {
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
- // TODO: Merge this config once `image/avif` is in the mime-db
- // https://github.com/jshttp/mime-db
- {
- test: [/\.avif$/],
- type: "asset",
- mimetype: "image/avif",
- parser: {
- dataUrlCondition: {
- maxSize: imageInlineSizeLimit
- }
- }
- },
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
@@ -409,8 +397,37 @@ module.exports = function (webpackEnv) {
Object.assign(
{},
{
+ filename: "index.html",
inject: true,
- template: paths.appHtml
+ template: paths.appHtml,
+ chunks: ["main"]
+ },
+ isEnvProduction
+ ? {
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeRedundantAttributes: true,
+ useShortDoctype: true,
+ removeEmptyAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ keepClosingSlash: true,
+ minifyJS: true,
+ minifyCSS: true,
+ minifyURLs: true
+ }
+ }
+ : undefined
+ )
+ ),
+ new HtmlWebpackPlugin(
+ Object.assign(
+ {},
+ {
+ filename: "embed.html",
+ inject: true,
+ template: paths.embedAppHtml,
+ chunks: ["embed"]
},
isEnvProduction
? {
diff --git a/public/embed.html b/public/embed.html
new file mode 100644
index 00000000..cac3ab27
--- /dev/null
+++ b/public/embed.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ VoceChat Embed
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/embed_demo.html b/public/embed_demo.html
new file mode 100644
index 00000000..16e44a66
--- /dev/null
+++ b/public/embed_demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Vocechat Embed Demo
+
+
+
+
+
+
+
+
+
diff --git a/src/embed.tsx b/src/embed.tsx
new file mode 100644
index 00000000..e2074684
--- /dev/null
+++ b/src/embed.tsx
@@ -0,0 +1,15 @@
+import ReactDOM from "react-dom/client";
+import { Reset } from "styled-reset";
+import Embed from "./embed/index";
+import "./assets/base.css";
+import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
+ <>
+
+
+
+
+);
diff --git a/src/embed/Chat.tsx b/src/embed/Chat.tsx
new file mode 100644
index 00000000..df9d2bfe
--- /dev/null
+++ b/src/embed/Chat.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+const Styled = styled.section`
+ width: 800px;
+ height: 800px;
+`;
+type Props = {};
+
+const Chat = (props: Props) => {
+ return Chat;
+};
+
+export default Chat;
diff --git a/src/embed/index.tsx b/src/embed/index.tsx
new file mode 100644
index 00000000..31082d84
--- /dev/null
+++ b/src/embed/index.tsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import styled from "styled-components";
+const Styled = styled.aside`
+ pointer-events: all;
+`;
+import Chat from "./Chat";
+type Props = {};
+
+function Embed({}: Props) {
+ const [visible, setVisible] = useState(false);
+ const toggleVisible = () => {
+ setVisible((prev) => !prev);
+ };
+ return (
+
+
+ {visible && }
+
+ );
+}
+
+export default Embed;