feat: introduce live mode

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 coverage
 lerna-debug.log
+.env

README.md

@@ -253,6 +253,30 @@ slide:
 
 ![](./media/presenter-host.png)
 
+## Live Mode
+
+fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.  
+If you specify a `keyword` and `authentication keys`, fetching from twitter will be enabled.  
+Since comments can be sent to fusuma itself, you can use in the private case.  
+Also, this mode can run with Presenter Mode.
+
+```sh
+# create .env
+$ npx fusuma init -s live
+# edit .env and add .env to .gitignore
+$ npx fusuma live -w '#javascript' # npx fusuma live --help
+# Also, you can
+$ open http://localhost:3000
+```
+
+![](./media/live.png)
+
+### Post a comment
+
+```sh
+$ curl -X POST -H "Content-Type: application/json" -d '{"text":"hello:)"}' localhost:3000/api/comments
+```
+
 ## API
 
 ```js

packages/cli/src/fusuma.js

@@ -12,10 +12,13 @@ async function cli() {
       .description('CLI for easily make slides with Markdown')
 
       .command('init', 'Create a configure file')
+      .option('-s [type]', 'Specified schema type')
       .action((args, options, logger) => {
         resolve({
           type: 'init',
-          options: {}
+          options: {
+            schema: options.s
+          }
         });
       })
 
@@ -39,7 +42,7 @@ async function cli() {
 
       .command('deploy', 'Deploy to GitHub pages')
       .option('-d <directory>', 'Directory to load')
-      .action(async (args, options, logger) => {
+      .action((args, options, logger) => {
         resolve({
           type: 'deploy',
           options: { dir: options.d }
@@ -49,14 +52,30 @@ async function cli() {
       .command('pdf', 'Export as PDF')
       .option('-i <input>', 'Specified Directory')
       .option('-o <output>', 'Specified Filename')
-      .action(async (args, options, logger) => {
+      .action((args, options, logger) => {
         resolve({
           type: 'pdf',
           options: {
             input: options.i,
             output: options.o
           }
         });
+      })
+
+      .command('live', 'Start live mode')
+      .option('-i <interval>', 'Set interval time(ms)', prog.INT, 6000)
+      .option('-w <keyword>', 'Specified searched keyword')
+      .option('-p <port>', 'Server port', prog.INT, 3000)
+      .action((args, options, logger) => {
+        resolve({
+          type: 'live',
+          options: {
+            dir: options.d,
+            port: options.p,
+            keyword: options.w,
+            interval: options.i
+          }
+        });
       });
 
     prog.parse(process.argv);

packages/client/assets/style/commentsList.css

@@ -0,0 +1,58 @@
+@import './variable';
+
+.comments-list {
+  background: #333;
+  height: 100vh;
+  top: 0;
+  right: 0;
+  width: 25%;
+}
+
+.comments-list-title {
+  color: #f5f5f5;
+  height: 40px;
+  padding: 8px 18px;
+  background: #555;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.comments-list-total {
+  font-size: 16px;
+}
+
+.comments-list-ul {
+  display: flex;
+  flex-direction: column-reverse;
+  height: calc(100% - 40px - 8px * 2);
+  overflow-y: auto;
+  list-style: none;
+  margin: 8px 16px 0 16px;
+}
+
+.comments-list-li {
+  margin-left: 0;
+  background: #f5f5f5;
+  border-radius: 6px;
+  display: flex;
+  padding: 8px;
+  overflow: hidden;
+
+  &:not(:first-child) {
+    margin-top: 8px;
+  }
+}
+
+.comments-list-avatar {
+  border-radius: 50%;
+  margin: 0 8px 0 0;
+  height: 42px;
+  width: 42px;
+}
+
+.comments-list-comment {
+  font-size: 20px;
+  word-break: break-all;
+}

packages/client/assets/style/common.css

@@ -50,6 +50,10 @@ pre[class*='language-'] {
   line-height: 1.2;
 }
 
+#root {
+  display: flex;
+}
+
 .fa-hatena:before {
   content: 'B!';
   font-family: Verdana;
@@ -64,3 +68,11 @@ pre[class*='language-'] {
 .token.operator {
   background: inherit;
 }
+
+#webslides {
+  flex: 1;
+}
+
+#webslides-zoomed {
+  position: absolute;
+}

packages/client/package.json

@@ -23,6 +23,7 @@
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-icons": "^3.6.1",
+    "react-pose": "^4.0.8",
     "react-sidebar": "3.0.2",
     "screenfull": "^4.2.0",
     "webslides": "^1.4.2"