Skip to content

Commit 53191c7

Browse files
bletobleto
authored
Merge pull request #22 from bleto/docs-image-change
Fix image rendering
2 parents 8898a3b + e0f1f28 commit 53191c7

23 files changed

+2886
-2845
lines changed

‎docs/assets/video/nuxt-install-process.mp4

5.43 MB
Binary file not shown.

‎docs/assets/video/nuxt-server-start.mp4

395 KB
Binary file not shown.

‎docs/components/global/ArticleImage.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<img :src="imgSrc" :alt="alt" class="article-image" />
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
src: {
9+
type: String,
10+
required: true
11+
},
12+
alt: {
13+
type: String,
14+
required: true
15+
}
16+
},
17+
computed: {
18+
imgSrc() {
19+
try {
20+
return require(`./../../static/${this.src}`)
21+
} catch (error) {
22+
return null
23+
}
24+
}
25+
}
26+
}
27+
</script>

‎docs/components/global/ArticleVideo.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<video playsinline controls muted>
3+
<source :src="videoSrc" type="video/mp4" class="article-video" />
4+
</video>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
src: {
11+
type: String,
12+
required: true
13+
},
14+
},
15+
computed: {
16+
videoSrc() {
17+
try {
18+
return require(`./../../assets/${this.src}`)
19+
} catch (error) {
20+
return null
21+
}
22+
}
23+
}
24+
}
25+
</script>

‎docs/content/en/cookbook-about.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ The second module will be called `About`.
99

1010
> All files to be added are located in the `src` directory.
1111
12-
<alert type="info" align="center">
13-
<img src="demo/image/demo-about-module.png" alt="About module"/>
14-
</alert>
12+
<p align="center">
13+
<article-image src="demo/image/demo-about-module.png" alt="About module"/>
14+
</p>
1515

1616
## Initiate file
1717

‎docs/content/en/cookbook-core.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ The `Core` module will supervise every other module.
99

1010
> All files to be added are located in the `src` directory.
1111
12-
<alert type="info" align="center">
13-
<img src="demo/image/demo-core-module.png" alt="Core module"/>
14-
</alert>
12+
<p align="center">
13+
<article-image src="demo/image/demo-core-module.png" alt="Core module"/>
14+
</p>
1515

1616
## Initiate file
1717

‎docs/content/en/cookbook-modules.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ Directory should be located in the **root directory** of the project.
1818

1919
After adding a directory, we **remove all** other directories except `layouts`, `static` and `middleware`.
2020

21-
<alert type="info" align="center">
22-
<img src="demo/image/demo-clean-structure.png" alt="Clean structure"/>
23-
</alert>
21+
<p align="center">
22+
<article-image src="demo/image/demo-clean-structure.png" alt="Clean structure"/>
23+
</p>
2424

2525
## Create modules
2626

@@ -33,9 +33,9 @@ It is useful for keeping order when publishing modules to **npm**.
3333

3434
For this demo we've created two scoped directories : `@example` and `@example2`.
3535

36-
<alert type="info" align="center">
37-
<img src="demo/image/demo-module-scopes.png" alt="Module scopes"/>
38-
</alert>
36+
<p align="center">
37+
<article-image src="demo/image/demo-module-scopes.png" alt="Module scopes"/>
38+
</p>
3939

4040
### Create module directory
4141

@@ -47,9 +47,9 @@ The modules have a `src` directory and files that make it easier to publish the
4747

4848
Create a structure as in the example below.
4949

50-
<alert type="info" align="center">
51-
<img src="demo/image/demo-modules-structure.png" alt="Module structure"/>
52-
</alert>
50+
<p align="center">
51+
<article-image src="demo/image/demo-modules-structure.png" alt="Module structure"/>
52+
</p>
5353

5454
#### `package.json`
5555

‎docs/content/en/cookbook-preparation.md

+8-10
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,21 @@ To build a **demo** we use the ready [CLI NuxtJS][nuxt-cli] library to build app
2323
```bash
2424
npx create-nuxt-app vuems-demo
2525
```
26-
<video playsinline controls muted>
27-
<source src="demo/video/nuxt-install-process.mov" type="video/mp4" />
28-
</video>
26+
27+
<article-video src="video/nuxt-install-process.mp4"></article-video>
2928

3029
### Launch project
3130

32-
<video playsinline controls muted>
33-
<source src="demo/video/nuxt-server-start.mov" type="video/mp4" />
34-
</video>
31+
32+
<article-video src="video/nuxt-server-start.mp4"></article-video>
3533

3634
**Preview**
37-
<img src="demo/image/demo-start.png" alt="Start demo">
35+
<article-image src="demo/image/demo-start.png" alt="Start demo" />
3836

3937
**Project start up structure**
40-
<alert type="info" align="center">
41-
<img src="demo/image/demo-structure-init.png" alt="Init directory structure"/>
42-
</alert>
38+
<p align="center">
39+
<article-image src="demo/image/demo-structure-init.png" alt="Init directory structure"/>
40+
</p>
4341

4442
## Install required libraries
4543

‎docs/content/en/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ features:
1818

1919
<p align="center">
2020
<a href="https://github.com/ergonode/vuems" target="_blank" rel="noopener noreferrer">
21-
<img src="logo-bg.png" alt="VueMS logo with background">
21+
<article-image src="logo-bg.png" alt="VueMS logo with background"/>
2222
</a>
2323
</p>
2424

@@ -47,7 +47,7 @@ This gives us a rigid application built on specific principles.
4747
Structure of these parts is identical to the monolithic application, however each service can operate separately, communicate and interact with one another.<br>
4848
The services can have small mechanisms and very complex structures.
4949

50-
<img src="preview.png" alt="Preview"/>
50+
<article-image src="preview.png" alt="Preview"/>
5151

5252
## Features
5353

‎docs/content/en/middleware.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ Global middleware has access to the full context.
2424

2525
> Example path: `@Core/middleware/privilegeRoutingCheck.global.js`
2626
27-
<alert type="info" align="center">
28-
<img src="examples/global-middleware.png" alt="Module router">
29-
</alert>
27+
<p align="center">
28+
<article-image src="examples/global-middleware.png" alt="Module router"/>
29+
</p>
3030

3131
```javascript [@Core/middleware/privilegeRoutingCheck.global.js]
3232
export default ({

‎docs/content/en/module-config.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -397,11 +397,9 @@ export default {
397397
We recommend that you use the <code>extends</code> directory.
398398
</alert>
399399

400-
<alert type="info" align="center">
401-
<img src="examples/extend-vuex.png"
402-
alt="Extend vuex store"
403-
/>
404-
</alert>
400+
<p align="center">
401+
<article-image src="examples/extend-vuex.png" alt="Extend vuex store" />
402+
</p>
405403

406404
<alert type="warning">
407405
If you create the <code>store</code> directory on the module root and place a <a href="https://vuex.vuejs.org/" target="_blank">Vuex store</a> with an existing name in it, it will be replaced (The order of loading the modules is important).

‎docs/content/en/module-info.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ The most important thing is to keep the main files in the <code>src</code> direc
1414

1515
</alert>
1616

17-
<alert type="info" align="center">
18-
<img src="examples/module-structure.png" alt="Module structure">
19-
</alert>
17+
<p align="center">
18+
<article-image src="examples/module-structure.png" alt="Module structure"/>
19+
</p>
2020

2121
## Types
2222

@@ -114,9 +114,9 @@ If you want to change the default directory structure, you have to change it in
114114
The store directory contains Vuex Store files.<br>
115115
Directory with configuration under store are considered as store modules, with a name such as directory name.
116116

117-
<alert type="info" align="center">
118-
<img src="examples/module-content.png" alt="i18n translations files">
119-
</alert>
117+
<p align="center">
118+
<article-image src="examples/module-content.png" alt="i18n translations files"/>
119+
</p>
120120

121121

122122
[npm]: https://www.npmjs.com/

‎docs/content/en/options.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -172,10 +172,10 @@ If **i18n plugin** is used then set array with translations keys used in the app
172172

173173
<alert type="info">
174174
The translator keys are closely related to the translator file names.
175-
<p align="center">
176-
<img src="examples/i18n-translations.png" alt="i18n translations files">
177-
</p>
178175
</alert>
176+
<p align="center">
177+
<article-image src="examples/i18n-translations.png" alt="i18n translations files"/>
178+
</p>
179179

180180
## `isDev`
181181

‎docs/content/en/router.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ This is an auxiliary method used in the `router.js` file in the `createRouter` m
7171
Each module has its own routing.
7272
It must be added to the `routes.js` file of the `config` directory.
7373

74-
<alert type="info" align="center">
75-
<img src="examples/module-router.png" alt="Module router">
76-
</alert>
74+
<p align="center">
75+
<article-image src="examples/module-router.png" alt="Module router"/>
76+
</p>
7777

7878
```javascript [@Dashboard/config/routes.js]
7979
import {

‎docs/content/en/usage.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,10 @@ Create an `modules` directory to keep the modules in it.
6262

6363
Directory should be located in the **root directory** of the project.
6464

65-
<alert type="info" align="center">
66-
<img src="examples/new_module_structure-desc.png" alt="Module structure">
67-
</alert>
65+
<p align="center">
66+
<article-image src="examples/new_module_structure-desc.png" alt="Module structure"/>
67+
68+
</p>
6869

6970
<alert type="info">
7071
If you want change directory name, look <a href="/options#modulesdir" >here</a>.

‎docs/content/settings.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"title": "Vue Micro Services",
33
"url": "https://vuems.ergonode.com",
44
"logo": {
5-
"light": "logo-long-light.svg",
6-
"dark": "logo-long-dark.svg"
5+
"light": "/logo-long-light.svg",
6+
"dark": "/logo-long-dark.svg"
77
},
88
"github": "ergonode/vuems"
99
}

‎docs/nuxt.config.js

+18-18
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,23 @@
66
import theme from '@nuxt/content-theme-docs';
77

88
export default theme({
9-
target: 'static',
10-
docs: {
11-
primaryColor: '#00BC87',
12-
loading: { color: '#00BC87' },
13-
i18n: {
14-
locales: () => [{
15-
code: 'pl',
16-
iso: 'pl-PL',
17-
file: 'pl-PL.js',
18-
name: 'Polski',
19-
}, {
20-
code: 'en',
21-
iso: 'en-US',
22-
file: 'en-US.js',
23-
name: 'English',
24-
}],
25-
defaultLocale: 'en',
26-
},
9+
components: true,
10+
docs: {
11+
primaryColor: '#00BC87',
12+
loading: { color: '#00BC87' },
13+
i18n: {
14+
locales: () => [{
15+
code: 'pl',
16+
iso: 'pl-PL',
17+
file: 'pl-PL.js',
18+
name: 'Polski',
19+
}, {
20+
code: 'en',
21+
iso: 'en-US',
22+
file: 'en-US.js',
23+
name: 'English',
24+
}],
25+
defaultLocale: 'en',
2726
},
27+
},
2828
});

0 commit comments

Comments
 (0)