Add docs and add Divider for custom text style form items.

am009 · May 20, 2024 · de894de · de894de
1 parent bcd2d1d
commit de894de
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -1,28 +1,37 @@
-# Git-latexdiff web
+# Git-latexdiff web ([latexdiff.cn](https://latexdiff.cn))
 
 Keywords: latexdiff latex diff web online pdfdiff
 
 An web interface for [git-latexdiff](https://gitlab.com/git-latexdiff/git-latexdiff) (which is eventually based on [latexdiff](https://github.com/ftilmann/latexdiff)). 
 
-- Easy to Use: The input is two overleaf project zip file.
-- Run your own backend: You can run and use your own backend, no file is sent to any remote server.
-- Ready for paper submission: TODO
+- Easy to Use: The input is two overleaf project zip file. Support multiple tex file project (using `\input` or `\input`)
+- Use it online or offline: You can run offline, no file is sent to any remote server.
+- Ready for paper submission:
+  - Only show new text.
+  - Skip simple tex error: Only show diff text above a length threshold (TODO).
+  - Download the diffed project and modify it!
 
 ## Use it online!
 
-- Run your own API endpoint: You can run your own backend for better data security.
-- Use the provided default API endpoint: All uploaded files will be deleted and not preserved.
+Visit [latexdiff.cn](https://latexdiff.cn) !
+
+- Use the provided default API endpoint: All uploaded files will be deleted and not preserved. No file will be preserved to save some disk space.
+- Run your own API endpoint: You can run your own backend and still use the web interface. No file is uploaded to the internet. See below for details.
 
 (P.S. I'm excited to provide my first public service to the whole internet. Any issue related to the public API endpoint is also welcomed.)
 
-## Run the web backend
+## Use it offline 
+
+### Method 1: Run the web backend
 
 ```
 docker pull am009/latexdiff-web-worker && \
 docker run -p 8000:8000 -v /var/run/docker.sock:/var/run/docker.sock -v /tmp:/tmp --name latexdiff-backend -d am009/latexdiff-web-backend
 ```
 
-## Use as a command line tool
+If your backend uses http, then you also need to use the [http version of the frontend](http://latexdiff.cn).
+
+## Method 2: Use as a command-line tool
 
 Create a folder with the following three files:
 
@@ -49,7 +58,7 @@ Then you will get the following file structure:
     - `new-main-fl.tex`: expanded new project tex.
   - `git`: the git repo containing two commit for `git latexdiff` command.
 
-## Workflow
+## Technical Details
 
 **Worker**
 
@@ -68,17 +77,17 @@ The web app is a simple web interface for the docker.
 - To save storage space and keep user's privacy, everything (files and the docker container) is deleted.
 - If any error occurs, the output, and the command line to reproduce the run is returned to the user.
 
-## Debug worker
+## Debug the worker
 
 You can specify `-e DEBUG=1` to the docker run command, and the pdf diff will be generated to a git latexdiff temp folder (e.g., `git-latexdiff.2026`).
 
 ### Options
 
 Because unknown options for `git latexdiff` will be passed to `latexdiff`, so both tools' options can be specified in `other options`.
 
-[**latexdiff manual**](http://texdoc.net/texmf-dist/doc/support/latexdiff/doc/latexdiff-man.pdf)
+[**latexdiff manual**](http://texdoc.net/texmf-dist/doc/support/latexdiff/doc/latexdiff-man.pdf) is really useful.
 
-**options for latexdiff**
+**latexdiff's options**
 
 ```
 Usage: /usr/bin/latexdiff [options] old.tex new.tex > diff.tex
@@ -338,7 +347,7 @@ the API should be considered less stable than for the other options.
                        (option --only-changes of latexdiff-vc).
 ```
 
-**options for git latexdiff**
+**git-latexdiff's options**
 
 ```
 Usage: git latexdiff [options] OLD [NEW]

diff --git a/TODO.md b/TODO.md
@@ -10,15 +10,10 @@
     - 是否显示删除/删除的样式：颜色/线/脚标
     - 图表样式：框，颜色，图表是否展示删除的。
   - 小于多少词的修改不显示
-  - 是否显示引用
-- 返回整个diff项目的功能：docker exec + 流式传输https://izmailoff.github.io/web/flask-file-streaming/
 - cloudflare验证码保护一下？再说吧
-
-
-- 制作B站视频宣传
-- Youtube视频宣传
-- twitter宣传
-- reddit宣传
-- https://gitlab.com/git-latexdiff/git-latexdiff 的issue里宣传
-- https://github.com/ftilmann/latexdiff 宣传？
-- v2ex宣传，链接放到readme。
+- 前端样式修改：
+  - 更明显地展示源码链接
+  - 进度条默认隐藏，仅显示status。
+  - 增加一个按钮仅生成reproduction命令？
+- 给如何修改下载的diff的project加个教程。
+- Giscuz那边宣传。
diff --git a/advertizement/Intro1.md b/advertizement/Intro1.md
@@ -0,0 +1,34 @@
+
+# First introduction video
+
+- publication: Youtube(Chinese and English version) Bilibili (Chinese version)
+- advertisement：
+  - English: Reddit, twitter
+  - Chinese: 知乎，微博，微信，小红书，CSDN
+  - https://github.com/ftilmann/latexdiff 宣传？
+  - v2ex 宣传，链接放到 readme 。
+
+（网站主界面作为背景，上面标注latexdiff.cn网站地址）
+
+给大家介绍一个在线使用latexdiff展示latex项目修改的pdf软件。上传新旧版本的latex项目的压缩包，然后就可以生成一个展示修改的pdf了。
+
+（展示overleaf的下载压缩包界面截图）
+
+如果使用的是overleaf，可以直接上传overleaf上下载的压缩包。
+
+（网站主界面作为背景）
+
+功能上，我们支持
+
+- 仅显示新增的内容
+- 任意修改颜色，可以添加删除线或者波浪下划线。（其他样式开发中）
+- 新增的图表用边框标注显示
+
+使用场景：
+
+- 当你想要看看哪里有变化
+- 论文的审稿意见为 major/minor revision 时，可以使用这个和上一个版本对比生成一个diff（作为参考）。
+
+如果你不想暴露自己的latex源码，可以自己跑一个diff后端并在网页填入本地的API地址，文件不会被发送到外部。或者使用我们命令行版本的latexdiff，一行docker命令即可在本地运行。
+
+快收藏起来吧，如果对你有用欢迎一键三连！有任何意见欢迎在issue区评论。
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -18,7 +18,7 @@ import Flex from 'antd/es/flex';
 
 import Giscus from './giscus';
 import { useState, useEffect } from 'react';
-import { Form } from 'antd';
+import { Divider, Form } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { ColorFactory } from 'antd/es/color-picker/color';
 import message from 'antd/es/message';
@@ -219,6 +219,53 @@ export default function Home() {
     let c = color.toRgb();
     return [c.r, c.g, c.b];
   }
+  let customStyle = (<div>
+    <Divider>Custom Style Options</Divider>
+    <Form.Item hidden={style !== 'custom'}>
+      <Checkbox defaultChecked onChange={val => setNewTextNull(!val.target.checked)}>Show new text</Checkbox>
+      <Checkbox disabled={!isNewTextVisible()} onChange={val => setNewColorNull(!val.target.checked)} defaultChecked>Change Color</Checkbox>
+      <ColorPicker disabled={!isNewTextVisible() || newColorNull} disabledAlpha value={newTextColor} showText onChange={
+        (color, hex) => {
+          setNewTextColor(color);
+        }
+      } />
+
+      <span>Text style: </span>
+      <Select
+        disabled={!isNewTextVisible()}
+        value={newTextStyle}
+        style={{ width: 120 }}
+        onChange={value => setNewTextStyle(value)}
+        options={[
+          { value: 'none', label: 'none' },
+          { value: 'underline_wave', label: 'underline_wave' },
+          { value: 'strikeout', label: 'strikeout' },
+        ]}
+      />
+    </Form.Item>
+    <Form.Item hidden={style !== 'custom'}>
+      <Checkbox defaultChecked onChange={val => setOldTextNull(!val.target.checked)}>Show removed text</Checkbox>
+      <Checkbox disabled={!isOldTextVisible()} onChange={val => setOldColorNull(!val.target.checked)} defaultChecked>Change Color to</Checkbox>
+      <ColorPicker disabled={!isOldTextVisible() || oldColorNull} disabledAlpha value={oldTextColor} showText onChange={
+        (color: Color, hex) => {
+          setOldTextColor(color);
+        }
+      } />
+      <span>Text style: </span>
+      <Select
+        disabled={!isOldTextVisible()}
+        value={oldTextStyle}
+        style={{ width: 120 }}
+        onChange={value => setOldTextStyle(value)}
+        options={[
+          { value: 'none', label: 'none' },
+          { value: 'underline_wave', label: 'underline_wave' },
+          { value: 'strikeout', label: 'strikeout' },
+        ]}
+      />
+    </Form.Item>
+    <Divider />
+  </div>)
   let form = (
     <div>
       <Form layout="horizontal" onFinish={onFinish} onFinishFailed={onFinishFailed}>
@@ -250,7 +297,6 @@ export default function Home() {
         <Form.Item label="Other git-latexdiff options:">
           <Input value={fields.other_cmdlines} onChange={e => setFields({ ...fields, other_cmdlines: e.target.value })} />
         </Form.Item>
-
         <Form.Item label="Diff text style:">
           <Select
             defaultValue="custom"
@@ -273,49 +319,7 @@ export default function Home() {
             ]}
           />
         </Form.Item>
-        <Form.Item hidden={style !== 'custom'}>
-          <Checkbox defaultChecked onChange={val => setNewTextNull(!val.target.checked)}>Show new text</Checkbox>
-          <Checkbox disabled={!isNewTextVisible()} onChange={val => setNewColorNull(!val.target.checked)} defaultChecked>Change Color</Checkbox>
-          <ColorPicker disabled={!isNewTextVisible() || newColorNull} disabledAlpha value={newTextColor} showText onChange={
-            (color, hex) => {
-              setNewTextColor(color);
-            }
-          } />
-
-          <span>Text style: </span>
-          <Select
-            disabled={!isNewTextVisible()}
-            value={newTextStyle}
-            style={{ width: 120 }}
-            onChange={value => setNewTextStyle(value)}
-            options={[
-              { value: 'none', label: 'none' },
-              { value: 'underline_wave', label: 'underline_wave' },
-              { value: 'strikeout', label: 'strikeout' },
-            ]}
-          />
-        </Form.Item>
-        <Form.Item hidden={style !== 'custom'}>
-          <Checkbox defaultChecked onChange={val => setOldTextNull(!val.target.checked)}>Show removed text</Checkbox>
-          <Checkbox disabled={!isOldTextVisible()} onChange={val => setOldColorNull(!val.target.checked)} defaultChecked>Change Color to</Checkbox>
-          <ColorPicker disabled={!isOldTextVisible() || oldColorNull} disabledAlpha value={oldTextColor} showText onChange={
-            (color: Color, hex) => {
-              setOldTextColor(color);
-            }
-          } />
-          <span>Text style: </span>
-          <Select
-            disabled={!isOldTextVisible()}
-            value={oldTextStyle}
-            style={{ width: 120 }}
-            onChange={value => setOldTextStyle(value)}
-            options={[
-              { value: 'none', label: 'none' },
-              { value: 'underline_wave', label: 'underline_wave' },
-              { value: 'strikeout', label: 'strikeout' },
-            ]}
-          />
-        </Form.Item>
+        {style !== 'custom' ? (<div></div>) : customStyle}
         <Form.Item label="Bibliography">
           <Select
             value={fields.bib}
@@ -399,7 +403,8 @@ export default function Home() {
     }}>
       <Flex align="center" vertical>
         <Title><a href="https://github.com/am009/git-latexdiff-web">git-latexdiff web</a></Title>
-        <Text strong>An online tool based on <a target="_blank" href="https://github.com/ftilmann/latexdiff">latexdiff</a> and <a target="_blank" href="https://gitlab.com/git-latexdiff/git-latexdiff">git-latexdiff</a>.</Text>
+        <Text strong>An online tool based on <a target="_blank" href="https://github.com/ftilmann/latexdiff">latexdiff</a> and <a target="_blank" href="https://gitlab.com/git-latexdiff/git-latexdiff">git-latexdiff</a></Text>
+        <Text strong> <a target="_blank" href="https://github.com/am009/git-latexdiff-web">Source code on Github</a> / <a target="_blank" href="https://github.com/am009/git-latexdiff-web">Use it offline</a></Text>
       </Flex>
       <br />