feat: add resume demo & print.css for pdf-saving

fritx · fritx · commit 134bda3a565b · 2020-05-19T23:04:28.000+08:00
diff --git a/public/code/index.yml b/public/code/index.yml
@@ -1,3 +1,4 @@
+- resume.md
 - vditor-charts.md
 - vditor-sequence.md
 - vditor-flow.md
diff --git a/public/code/resume.md b/public/code/resume.md
@@ -0,0 +1,123 @@
+### XX的简历-前端-深圳
+
+<style>
+table, tbody { width: 100% }
+.hide-th table th { display: none }
+.meta-table tr td:nth-child(1), .meta-table tr td:nth-child(3) { font-weight: bold }
+.cols { max-width: 620px; font-size: 0; display: flex; justify-content: space-between }
+.cols-2 * { width: 49% }
+.cols-3 * { width: 31% }
+.cols-4 * { width: 23% }
+</style>
+
+<small>
+
+<div class="hide-th meta-table">
+
+| | | | |
+| :--- | :--- | :--- | :--- |
+| 姓名 | XX / XXXXX XXX | 年限 | 工作X年 / XX岁 |
+| 意向 | 前端 / 深圳 | 微信 | xxxxxx |
+| 手机 | xxx-xxxx-xxxx | 邮箱 | xxxxxxx@163.com |
+| Blog | [blog.fritx.me](https://blog.fritx.me) | GitHub | [fritx](https://github.com/fritx) |
+
+</div>
+
+### 1. 教育经历
+
+<div class="hide-th">
+
+| | | | |
+| :--- | :--- | :--- | :--- |
+| 2011.9 - 2015.7 | XX大学 | 软件工程 | 本科/学士 |
+
+</div>
+
+- **奖项**：校内个人ACM竞赛一等奖、校内软件设计大赛二等奖、全国蓝桥杯竞赛省二等奖
+- **证书**：软件设计师中级、英语CET-6
+
+### 2. 工作经历
+
+<div class="hide-th">
+
+| | | |
+| :--- | :--- | :--- |
+| 2019.8 - 至今 | XXXXXXXXXXXXXX | 社招正式 |
+| 2015.7 - 2019.8 | XXXXXXXXXXXXXX | 社招正式 |
+| 2014.7 - 2015.4 | XXXXXXXXX | 校外实习 |
+| 2013.11 - 2014.7 | XXXXXXXXX | 在校实习 |
+
+</div>
+
+#### XXXXXXXXXXXXXX
+- XXXXXXXXXXXXXXXXXXXXXXXXXXXXX <sup>(ts, react, fusion)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX <sup>(ts, react, fusion)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX <sup>(ts, react, fusion)</sup>
+- XXXXXXXXXXXXXXXXXXX <sup>(ts, react-hooks, fusion)</sup>
+- XXXXXXXXXXXXXXXX <sup>(ts, react-hooks, fusion)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXXXX
+- XXXXXXXXXXXXXXXXXXXXX
+
+#### XXXXXXXXXXXXXX
+- XXXXXXXXXXXXX <sup>(vue, element-ui)</sup>
+- XXXXXXXXXXXXXXXXXXXXX <sup>(vue, element-ui)</sup>
+- XXXXXXXXXXXX <sup>(react, dva, ant-design)</sup>
+- XXXXXXXXXXXXXXXXX <sup>(vue, jsbridge)</sup>
+- XXXXXXXXXXXXXXXX <sup>(vue, element-ui)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXX <sup>(vue, jsbridge)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX <sup>(koa2, mongodb, ioredis, vue)</sup>
+- XXXXXXXXXXXXX <sup>(vue, element-ui)</sup>
+- XXXXXXXXXXXXXXXXXXXXXX <sup>(nwjs, sqlite, react, redux)</sup>
+- XXXXXXXXXXXXXXXXXXXXXXXXXX
+- XXXXXXXXXXXXXXXXXXXXX
+
+### 3. 高赞作品
+
+<div class="hide-th">
+
+| | | |
+| :--- | :--- | :--- |
+| wxbot | 普通个人号 微信机器人/外挂 | **755** stars, 230 forks |
+| vue-threejs | Vue bindings for Three.js | **508** stars, 84 used-by |
+| vue-at | At.js for Vue | 417 stars, **16k/month** downloads |
+| cross-unzip | Cross-platform "native" unzip | **154k/month** downloads |
+| gulp-eol | Replace or append EOL in gulp | **11k/month** downloads |
+
+</div>
+
+### 4. 创意产品
+
+#### Demo集合：Coldemo <sup>[源码](https://github.com/coldemo/gallery.code)</sup> <sup>[体验](https://coldemo.js.org/)</sup>
+- **技术栈**：ts, react-hooks, ant-design, webworker, babel-standalone
+- **功能**：类似codepen的demo集合资源站点，以及相应的实时coding预览功能，同 codepen jsbin jsfiddle
+- **优势**：1. 同一站点，支持跨框架跨语言，如不但涵盖 react vue ts 等前端demo，还涵盖 python markdown ppt 等其他语言，以及计划支持如 regexp sql 等dsl的相应可视化 2. 界面上采用极简的双栏结构，减小认知成本，响应式支持mobile端浏览且体验好 3. 实现上采用最简单直接的umd加载及解析方式，横向易拓展，复杂度可控 4. 版式固定、ROI高，可输入资源、可输出场景多，如demo展示、问题演示、可视化等
+
+<div class="cols cols-3">
+<img src="https://fritx.me/resume/WX20200517-233621@2x.png">
+<img src="https://fritx.me/resume/WX20200517-234821@2x.png">
+<img src="https://fritx.me/resume/WX20200517-234954@2x.png">
+</div>
+
+#### 桌面应用：Nofred
+- **技术栈**：ts, electron-builder, react-hooks, ant-design, resolve-link-target
+- **功能**：一款 electron+node 实现的 类Alfred 的跨平台PC应用(桌面App)。支持Alfred的核心功能，如快捷键换出搜索框，悬浮于屏幕。可输入关键词，匹配任意插件，如 1. open/切换至应用、kill进程/quit应用 2. 文件搜索/计算器/翻译 3. 网址收藏夹/自定义action 等等。包括内置基础插件，及用户自定义插件，可组建插件应用商店
+- **优势**: 插件书写自由，开发便捷，60行以内一个插件
+
+<div class="cols cols-2">
+<img src="https://fritx.me/resume/WechatIMG11.jpeg">
+<img src="https://fritx.me/resume/WechatIMG12.jpeg">
+</div>
+
+#### 微信小程序：内容分享
+- **技术栈**：ts, koa2, ioredis, http-proxy, cheerio, puppeteer
+- **功能**：一块微信小程序，后台支持多大50+主流站点的信息提取，如微信公众号、腾讯视频、抖音、美拍、美图、知乎、淘宝等等。复制页面URL，即可自动识别粘贴板，提示一键进入简化重拍版后的内容页面。持续2年半，累计用户5000+
+- **优势**：1. 支持将抖音、淘宝等优质内容转发指微信 2. 转发展示的内容经过简化重拍版，省略一些加载慢的页面资源 3. 关键标题/描述信息上屏，呈现在分享卡片上，信息传播效果好 4. 后台多层级缓存支持，加载快，可快照 5. 安卓用户还可用作独立App窗口与微信聊天界面并行使用
+
+<div class="cols cols-4">
+<img src="https://fritx.me/resume/WechatIMG14.jpeg">
+<img src="https://fritx.me/resume/WechatIMG9.jpeg">
+<img src="https://fritx.me/resume/WechatIMG5.jpeg">
+<img src="https://fritx.me/resume/WechatIMG7.jpeg">
+</div>
+
+</small>
diff --git a/public/code/resume.md.png b/public/code/resume.md.png
diff --git a/src/gallery/Gallery.tsx b/src/gallery/Gallery.tsx
@@ -1,10 +1,10 @@
 import { Card, Col, Row, Spin } from 'antd';
 import React, { useEffect } from 'react';
+import Helmet from 'react-helmet';
 import { useHistory } from 'react-router';
 import { useApi } from '../hooks/useApi';
 import './page.css';
 import { handleImageError } from './util';
-import Helmet from 'react-helmet';
 
 export let Gallery: React.FC = () => {
   let history = useHistory();
@@ -17,6 +17,7 @@ export let Gallery: React.FC = () => {
     let txt = resp.data;
     let list = txt
       .split(/\n/)
+      .map(s => s.replace(/#.*/, '').trim())
       .filter(Boolean)
       .map(v => v.replace(/^-\s*/, ''));
     return list;
diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx
@@ -26,6 +26,7 @@ import { useModel } from '../hooks/useModel';
 import { useTrigger } from '../hooks/useTrigger';
 import { codeTransform } from './codeTransform';
 import './page.css';
+import './print.css';
 import { MainCol, MainRow, MountNode } from './styled';
 import {
   appendCss,
@@ -212,6 +213,7 @@ export let Playground: React.FC = () => {
           </GentleSpin>
         </MainCol>
         <DragSizing
+          className="editor-area"
           onUpdate={handleSizingUpdate}
           {...(isGreaterThanMedium
             ? {
diff --git a/src/playground/print.css b/src/playground/print.css
@@ -0,0 +1,26 @@
+@media print {
+  html {
+    overflow: visible !important;
+    height: auto;
+  }
+
+  #mountNode {
+    height: auto;
+    overflow-y: visible;
+  }
+
+  .editor-area {
+    display: none;
+  }
+
+  #mdPreview .cols {
+    page-break-before: auto;
+    page-break-after: auto;
+    page-break-inside: avoid;
+  }
+  #mdPreview img {
+    page-break-before: auto;
+    page-break-after: auto;
+    page-break-inside: avoid;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+- resume.md`
`1`	`2`	`- vditor-charts.md`
`2`	`3`	`- vditor-sequence.md`
`3`	`4`	`- vditor-flow.md`