Skip to content

Commit 080d213

Browse files
morulusmorulus
committed
optimize render
1 parent 5b59e22 commit 080d213

File tree

8 files changed

+65
-80
lines changed

8 files changed

+65
-80
lines changed

‎ghpage/dist/bundle.js

Lines changed: 16 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ghpage/dist/index.html

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,6 @@
66
<title>complex-loader example</title>
77
</head>
88
<body>
9-
<div id="header">complex-loader</div>
10-
<div id="slides">
11-
<div class="side-bar">
12-
<nav>
13-
<a v-bind:href="section.href" v-for="section in sections">
14-
{{ section.text }}
15-
</a>
16-
</nav>
17-
</div>
18-
<div class="slide-left">
19-
<h2>Source</h2>
20-
<div>
21-
<div v-html="markdownSource" class="markdown-body"></div>
22-
</div>
23-
</div>
24-
<div class="slide-right">
25-
<h2>Development</h2>
26-
<div>
27-
<summary>
28-
<p>All model of this page gotten by only one import:</p>
29-
<pre v-highlightjs><code class="javascript">{{ exampleImport }}</code></pre>
30-
<p>The result of import is an object with exhaustive information about the target file. In this particular case - README.md:</p>
31-
<pre v-highlightjs="metadata"><code class="json"></code></pre>
32-
<p>The work of import is ensured by the following rule:</p>
33-
<pre v-highlightjs="webpackConfig"><code class="javascript"></code></pre>
34-
</summary>
35-
</div>
36-
</div>
37-
</div>
9+
<div id="root"></div>
3810
<script type="text/javascript" src="bundle.js"></script></body>
3911
</html>

‎ghpage/public/index.html

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,6 @@
66
<title>complex-loader example</title>
77
</head>
88
<body>
9-
<div id="header">complex-loader</div>
10-
<div id="slides">
11-
<div class="side-bar">
12-
<nav>
13-
<a v-bind:href="section.href" v-for="section in sections">
14-
{{ section.text }}
15-
</a>
16-
</nav>
17-
</div>
18-
<div class="slide-left">
19-
<h2>Source</h2>
20-
<div>
21-
<div v-html="markdownSource" class="markdown-body"></div>
22-
</div>
23-
</div>
24-
<div class="slide-right">
25-
<h2>Development</h2>
26-
<div>
27-
<summary>
28-
<p>All model of this page gotten by only one import:</p>
29-
<pre v-highlightjs><code class="javascript">{{ exampleImport }}</code></pre>
30-
<p>The result of import is an object with exhaustive information about the target file. In this particular case - README.md:</p>
31-
<pre v-highlightjs="metadata"><code class="json"></code></pre>
32-
<p>The work of import is ensured by the following rule:</p>
33-
<pre v-highlightjs="webpackConfig"><code class="javascript"></code></pre>
34-
</summary>
35-
</div>
36-
</div>
37-
</div>
9+
<div id="root"></div>
3810
</body>
3911
</html>

‎ghpage/src/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,6 @@ The loader has not yet been tested in all the nuances. The caching method has no
162162

163163
For now there is few doubtful moments:
164164

165-
- The function for generate loader unique id (`getPlayerUid`) is unreliable. Maybe there is a way to improve it?
166165
- Should I implement in-build nesting? For now you can created nested structures only by defining `complex-loader` again as child loader. But why not make support for nested objects? And how in this case to distinguish the nested object is a shape of the loader?
167166
- Support functional loaders. Now there is opportunity to pass directly the function as a loader, instead of the string. May it be in demand?
168167
- Caching options - it is good or bad? And what underwater rocks awaits us here?

‎ghpage/src/index.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import VueHighlightJS from './directives/highlightjs.js'
33
import 'github-markdown-css/github-markdown.css'
44
import readme from './README.md'
55
import webpackConfig from '../config/markdown.rule.js'
6+
import template from './templates/content.html'
67
import './style.css'
78
import './highlight.css'
89

910
// Tell Vue.js to use vue-highlightjs
1011
Vue.use(VueHighlightJS)
1112

13+
console.log('readme', readme)
14+
1215
new Vue({
13-
el: '#slides',
16+
el: '#root',
1417
data: {
1518
markdownSource: readme.content,
1619
metadata: JSON.stringify(
@@ -28,13 +31,8 @@ new Vue({
2831
.replace(/[\s]+/g, '-'),
2932
text
3033
})),
31-
exampleImport: `import readme from '../../README.md'`
32-
},
33-
})
34-
35-
new Vue({
36-
el: '#header',
37-
data: {
38-
title: readme.heading,
34+
exampleImport: `import readme from './README.md'`,
35+
title: readme.metadata.heading,
3936
},
37+
template
4038
})

‎ghpage/src/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ body, html {
88
box-sizing: border-box;
99
}
1010

11+
#root {
12+
height: 100vh;
13+
overflow: hidden;
14+
}
15+
1116
#slides {
1217
display: flex;
1318
overflow: hidden;

‎ghpage/src/templates/content.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div>
2+
<div id="header">{{ title }}</div>
3+
<div id="slides">
4+
<div class="side-bar">
5+
<nav>
6+
<a v-bind:href="section.href" v-for="section in sections">
7+
{{ section.text }}
8+
</a>
9+
</nav>
10+
</div>
11+
<div class="slide-left">
12+
<h2>Source</h2>
13+
<div>
14+
<div v-html="markdownSource" class="markdown-body"></div>
15+
</div>
16+
</div>
17+
<div class="slide-right">
18+
<h2>Development</h2>
19+
<div>
20+
<summary>
21+
<p>All model of this page gotten by only one import:</p>
22+
<pre v-highlightjs><code class="javascript">{{ exampleImport }}</code></pre>
23+
<p>The result of import is an object with exhaustive information about the target file. In this particular case - README.md:</p>
24+
<pre v-highlightjs="metadata"><code class="json"></code></pre>
25+
<p>The work of import is ensured by the following rule:</p>
26+
<pre v-highlightjs="webpackConfig"><code class="javascript"></code></pre>
27+
</summary>
28+
</div>
29+
</div>
30+
</div>
31+
</div>

‎ghpage/webpack.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ module.exports = {
4646
}
4747
]
4848
},
49+
{
50+
test: /\.html$/,
51+
use: 'raw-loader'
52+
},
4953
{
5054
test: /\.png$/,
5155
exclude: /node_modules/,

0 commit comments

Comments
 (0)