omi-cli - update md2site template
This commit is contained in:
dntzhang
parent
c0f47dd3d3
commit
690b986f9d
|
|
@ -106,7 +106,7 @@ blockquote::before{
|
|||
blockquote {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
|
|
@ -120,4 +120,9 @@ pre[data-line] {
|
|||
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.content img{
|
||||
max-width: 700px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin-left: 260px;
|
||||
padding: 1px 10px 10px 20px;
|
||||
color: #24292e;
|
||||
overflow: hidden;
|
||||
/* overflow: hidden; */
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import css from './_index.css'
|
||||
import '../my-footer'
|
||||
|
||||
define('my-content', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
static use = [
|
||||
'html'
|
||||
]
|
||||
|
||||
install() {
|
||||
this.store.myContent = this
|
||||
}
|
||||
|
|
@ -30,10 +36,9 @@ define('my-content', class extends WeElement {
|
|||
arr && pre.setAttribute('data-line', arr[1])
|
||||
if (code.className) {
|
||||
pre.className = code.className
|
||||
|
||||
let temp = code.className.match(/language-\w*/g)[0]
|
||||
|
||||
const temp = code.className.match(/language-\w*/g)[0]
|
||||
if (temp) {
|
||||
|
||||
code.innerHTML = Prism.highlight(code.innerText, Prism.languages[temp.split('-')[1]], temp.split('-')[1])
|
||||
}
|
||||
} else {
|
||||
|
|
@ -42,8 +47,41 @@ define('my-content', class extends WeElement {
|
|||
pre.className = 'language-markup'
|
||||
code.innerHTML = Prism.highlight(code.innerText, Prism.languages.markup, 'markup')
|
||||
}
|
||||
// let hllNums = null
|
||||
// if (arr) {
|
||||
// let numArr = arr[0].replace(/[{|}]/g, '').split(',')
|
||||
// hllNums = this._arrToNumber(numArr)
|
||||
// }
|
||||
//codeHlNumArr.push(hllNums)
|
||||
})
|
||||
|
||||
// codesArr.forEach((code, index) => {
|
||||
// let newP = document.createElement('div')
|
||||
// newP.className = '_code-ctn'
|
||||
// let pre = code.parentNode
|
||||
// let ctn = pre.parentNode
|
||||
// if (pre.nodeName === 'PRE') {
|
||||
// ctn.insertBefore(newP, pre)
|
||||
|
||||
// let hl = document.createElement('div')
|
||||
// hl.className = '_hl'
|
||||
// newP.appendChild(hl)
|
||||
// newP.appendChild(pre)
|
||||
// let nums = codeHlNumArr[index]
|
||||
|
||||
// let max = Math.max.apply(null, nums)
|
||||
|
||||
// let inner = ''
|
||||
// for (let i = 0; i <= max; i++) {
|
||||
// if (nums.indexOf(i) == -1) {
|
||||
// inner += '<br />'
|
||||
// } else {
|
||||
// inner += '<div class="_hll"></div>'
|
||||
// }
|
||||
// }
|
||||
// hl.innerHTML = inner
|
||||
// }
|
||||
// })
|
||||
//fix line-highlight
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
|
@ -67,14 +105,13 @@ define('my-content', class extends WeElement {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
class="content" ontouchend={this.touchEnd}
|
||||
dangerouslySetInnerHTML={{ __html: this.store.html }}
|
||||
/>
|
||||
<div class="content">
|
||||
<div
|
||||
ontouchend={this.touchEnd}
|
||||
dangerouslySetInnerHTML={{ __html: this.store.data.html }}
|
||||
/>
|
||||
<my-footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
css() {
|
||||
return css
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ iframe{
|
|||
position: fixed;
|
||||
border: none;
|
||||
z-index: 9999;
|
||||
border-left: 2px solid #24292E;
|
||||
}
|
||||
|
||||
.switch{
|
||||
|
|
@ -14,8 +15,8 @@ iframe{
|
|||
background-color: #AA0000;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
right: 60px;
|
||||
bottom:80px;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
z-index: 10000;
|
||||
|
|
@ -38,6 +39,4 @@ iframe{
|
|||
iframe{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ import css from './_index.css'
|
|||
define('my-demo', class extends WeElement {
|
||||
install() {
|
||||
this.store.myDemo = this
|
||||
this.show = false
|
||||
if(this.checkPc())
|
||||
this.show = true
|
||||
else
|
||||
this.show = false
|
||||
this.demo = this.store.demo
|
||||
}
|
||||
|
||||
|
|
@ -12,32 +15,38 @@ define('my-demo', class extends WeElement {
|
|||
return css
|
||||
}
|
||||
|
||||
onShow = () => {
|
||||
checkPc() {
|
||||
let userAgentInfo = navigator.userAgent
|
||||
let mp = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
|
||||
for (let i = 0; i < mp.length; i++)
|
||||
if (userAgentInfo.indexOf(mp[i]) > 0)
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
onShow = () => {
|
||||
this.show = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
|
||||
this.show = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
if(!this.demo) return
|
||||
return (
|
||||
<div>
|
||||
{this.demo && !this.show && <div class="switch code" onClick={this.onShow}>
|
||||
{ this.show && <iframe style={`height:${window.innerHeight-59}px`} src={this.demo} ></iframe>}
|
||||
|
||||
{!this.show && <div class="switch code" onClick={this.onShow}>
|
||||
<img src={require('./code.png')}></img>
|
||||
</div>}
|
||||
|
||||
{this.demo && this.show && <div class="switch close" onClick={this.onClose}>
|
||||
{this.show && <div class="switch close" onClick={this.onClose}>
|
||||
<img src={require('./close.png')}></img>
|
||||
</div>}
|
||||
|
||||
{this.demo && this.show && <iframe src={this.demo} ></iframe>}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
.ft{
|
||||
position: relative;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.pre{
|
||||
position: absolute;
|
||||
left:15px;
|
||||
}
|
||||
|
||||
.next{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
|
||||
define('my-footer', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
static use = [
|
||||
'position',
|
||||
'menu'
|
||||
]
|
||||
|
||||
render() {
|
||||
const [
|
||||
position,
|
||||
menus
|
||||
] = this.use
|
||||
const pre = this.store.getPre()
|
||||
const next = this.store.getNext()
|
||||
console.log(pre,next)
|
||||
return (
|
||||
<div class='ft'>
|
||||
{pre &&<a href={'#/' + pre.md + `?index=${pre.index}&subIndex=${pre.subIndex}`} class='pre'>← {pre.name}</a>}
|
||||
{next &&<a href={'#/' + next.md + `?index=${next.index}&subIndex=${next.subIndex}`} class='next'>{next.name} →</a>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -7,6 +7,10 @@ import './my-demo'
|
|||
|
||||
define('my-frame', class extends WeElement {
|
||||
|
||||
installed(){
|
||||
this.store.init()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import css from './_index.css'
|
||||
import logo from './omi-logo.svg'
|
||||
import logo from './omi-logo2019.svg'
|
||||
|
||||
define('my-head', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
toggleMenus = evt => {
|
||||
this.store.toogleSidebar()
|
||||
evt.stopPropagation()
|
||||
}
|
||||
|
||||
css() {
|
||||
return css
|
||||
hideSidebar = evt => {
|
||||
this.store.hideSidebar()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="head bord-btm">
|
||||
<div class="head bord-btm" onClick={this.hideSidebar}>
|
||||
<div class="m_menu" onClick={this.toggleMenus}>
|
||||
<img src={require('./menu.png')} alt="" />
|
||||
</div>
|
||||
|
|
@ -22,13 +24,17 @@ define('my-head', class extends WeElement {
|
|||
<img class="logo" src={logo} />
|
||||
</a>
|
||||
<ul class="menu">
|
||||
<li class="github_li">
|
||||
<a href="https://github.com/Tencent/omi">Github</a>
|
||||
{/* <li class="github_li">
|
||||
<a href="https://github.com/Tencent/omi/tree/master/packages/omiu/examples/src/docs">{this.store.lan === 'en'?'Edit Docs':'编辑文档'}</a>
|
||||
</li>
|
||||
|
||||
<li style='color:#aaa;'>|</li> */}
|
||||
<li class="github_li">
|
||||
<a href="https://github.com/Tencent/omi/" target="_blank">Github</a>
|
||||
</li>
|
||||
<li style='color:#aaa;'>|</li>
|
||||
<li class="github_li m_show">
|
||||
{this.store.lan === 'en' ? (
|
||||
<a href="zh-cn.html">中文</a>
|
||||
{this.store.data.lan === 'en' ? (
|
||||
<a href="cn.html">中文</a>
|
||||
) : (
|
||||
<a href="index.html">English</a>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW 2017 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil2 {fill:#171717}
|
||||
.fil1 {fill:#FEFEFE}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="图层_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<rect class="fil0" width="1024" height="1024"/>
|
||||
<rect class="fil0" width="1024" height="1024"/>
|
||||
<g id="_2225049615792">
|
||||
<circle class="fil1" cx="512" cy="512" r="512"/>
|
||||
<polygon class="fil2" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
|
||||
<circle class="fil2" cx="839.36" cy="242.47" r="50"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,29 +1,33 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import css from './_index.css'
|
||||
|
||||
define('my-list', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
static use = [
|
||||
'position'
|
||||
]
|
||||
|
||||
render(props) {
|
||||
const [position] = this.use
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<li class="title">{props.menu.title}</li>
|
||||
{props.menu.list &&
|
||||
props.menu.list.map((item, subIndex) => (
|
||||
<li>
|
||||
props.menu.list.map((item, subIndex) => {
|
||||
const cls = position[0] === props.index && position[1] === subIndex ? { class: 'current' } : null
|
||||
return <li>
|
||||
<a
|
||||
href={
|
||||
'#/' + item.md + `?index=${props.index}&subIndex=${subIndex}`
|
||||
}
|
||||
class={item.selected ? 'current' : ''}
|
||||
{...cls}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
css() {
|
||||
return css
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
-webkit-transition: all .6s ease;
|
||||
transition: all .6s ease;
|
||||
width: 70% !important;
|
||||
z-index: 1000;
|
||||
z-index: 100000;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -30,8 +30,9 @@
|
|||
position:fixed;
|
||||
top:60px;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
border-right: 1px solid #ccc;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.version{
|
||||
height:20px;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import '../my-list'
|
||||
import css from './_index.css'
|
||||
|
||||
define('my-sidebar', class extends WeElement {
|
||||
install() {
|
||||
this.store.mySidebar = this
|
||||
}
|
||||
static css = require('./_index.css')
|
||||
|
||||
css() {
|
||||
return css
|
||||
}
|
||||
static use = [
|
||||
'menus',
|
||||
'sideBarShow',
|
||||
'lan'
|
||||
]
|
||||
|
||||
render() {
|
||||
const [menus, sideBarShow, lan] = this.use
|
||||
|
||||
return (
|
||||
<div class={`list${this.store.sideBarShow ? ' show' : ''}`}>
|
||||
{this.store.menus.map((menu, index) => (
|
||||
<div class={`list${sideBarShow ? ' show' : ''}`}>
|
||||
{menus[lan].map((menu, index) => (
|
||||
<my-list menu={menu} index={index} />
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,54 +3,76 @@ import 'omi-router'
|
|||
|
||||
class Store {
|
||||
constructor(data) {
|
||||
this.lan = data.lan
|
||||
this.menus = config.menus[this.lan]
|
||||
this.md = this.menus[0].list[0].md
|
||||
this.remarkable = new Remarkable({ html: true })
|
||||
this.getMarkDown(this.md, this.lan, m => {
|
||||
this.html = this.remarkable.render(m)
|
||||
this.myContent.update()
|
||||
this.data = {
|
||||
position: [-1, -1],
|
||||
menus: config.menus,
|
||||
lan: data.lan,
|
||||
html: '',
|
||||
sideBarShow: window.innerWidth > 768
|
||||
}
|
||||
let id = 0
|
||||
this.map = {}
|
||||
this.positionMap = {}
|
||||
config.menus[this.data.lan].forEach((menu, index) => {
|
||||
menu.list.forEach((item, subIndex) => {
|
||||
item.id = id++
|
||||
item.position = [index, subIndex]
|
||||
this.map[item.id] = item
|
||||
item.index = index
|
||||
item.subIndex = subIndex
|
||||
this.positionMap[index+'-'+subIndex] = item
|
||||
})
|
||||
})
|
||||
|
||||
this.menus[0].active = true
|
||||
this.menus[0].currentIndex = 0
|
||||
this.menus[0].list[0].selected = true
|
||||
this.demo = this.menus[0].list[0].demo
|
||||
this.initRouter()
|
||||
|
||||
this.preIndex = 0
|
||||
this.preSubIndex = 0
|
||||
}
|
||||
|
||||
this.sideBarShow = window.innerWidth > 768
|
||||
getNext(){
|
||||
const item = this.positionMap[this.data.position.join('-')]
|
||||
if(item){
|
||||
return this.map[item.id+1]
|
||||
}
|
||||
}
|
||||
|
||||
getPre(){
|
||||
const item = this.positionMap[this.data.position.join('-')]
|
||||
if(item){
|
||||
return this.map[item.id-1]
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.remarkable = new Remarkable({ html: true })
|
||||
if (location.hash === "") {
|
||||
this.data.position = [0, 0]
|
||||
this.getMarkDown(this.data.menus[this.data.lan][0].list[0].md, this.data.lan, m => {
|
||||
this.data.html = this.remarkable.render(m)
|
||||
})
|
||||
}
|
||||
this.initRouter()
|
||||
}
|
||||
|
||||
toogleSidebar() {
|
||||
this.sideBarShow = !this.sideBarShow
|
||||
this.mySidebar.update()
|
||||
this.data.sideBarShow = !this.data.sideBarShow
|
||||
}
|
||||
|
||||
hideSidebar(){
|
||||
this.sideBarShow = false
|
||||
this.mySidebar.update()
|
||||
hideSidebar() {
|
||||
this.data.sideBarShow = false
|
||||
}
|
||||
|
||||
initRouter() {
|
||||
this.menus.forEach(item => {
|
||||
const menus = this.data.menus[this.data.lan]
|
||||
menus.forEach(item => {
|
||||
item.list.forEach(subItem => {
|
||||
route('/' + subItem.md, evt => {
|
||||
this.menus[this.preIndex].list[this.preSubIndex].selected = false
|
||||
const item = this.menus[evt.query.index].list[evt.query.subIndex]
|
||||
item.selected = true
|
||||
this.myDemo.show = false
|
||||
this.myDemo.demo = item.demo
|
||||
this.myDemo.update()
|
||||
menus[this.preIndex].list[this.preSubIndex].selected = false
|
||||
this.preIndex = evt.query.index
|
||||
this.preSubIndex = evt.query.subIndex
|
||||
this.sideBarShow = false
|
||||
this.mySidebar.update()
|
||||
this.getMarkDown(subItem.md, this.lan, m => {
|
||||
this.html = this.remarkable.render(m)
|
||||
this.myContent.update()
|
||||
this.data.position = [Number(evt.query.index), Number(evt.query.subIndex)]
|
||||
this.data.sideBarShow = false
|
||||
|
||||
this.getMarkDown(subItem.md, this.data.lan, m => {
|
||||
this.data.html = this.remarkable.render(m)
|
||||
document.body.scrollTop = 0
|
||||
document.documentElement.scrollTop = 0
|
||||
})
|
||||
|
|
@ -66,4 +88,4 @@ class Store {
|
|||
}
|
||||
}
|
||||
|
||||
export default Store
|
||||
export default Store
|
||||
|
|
|
|||
Loading…
Reference in New Issue