Skip to content

Commit 706b3c1

Browse files
FflorielFfloriel
committed
Merge remote-tracking branch 'upstream/master'
2 parents 89109a8 + a68f374 commit 706b3c1

File tree

23 files changed

+480
-18
lines changed

23 files changed

+480
-18
lines changed

‎.circleci/config.yml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,7 @@ jobs:
1919
command: npm test -- --coverage
2020
- run:
2121
name: coverage
22-
command: cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
22+
command: |
23+
if [ "${CIRCLE_BRANCH}" == "master" ]; then
24+
cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
25+
fi

‎examples/with-nuxt/.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_size = 2
6+
indent_style = space
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎examples/with-nuxt/.eslintrc.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
node: true
6+
},
7+
parserOptions: {
8+
parser: 'babel-eslint'
9+
},
10+
extends: [
11+
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12+
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13+
'plugin:vue/essential'
14+
],
15+
// required to lint *.vue files
16+
plugins: [
17+
'vue'
18+
],
19+
// add your custom rules here
20+
rules: {}
21+
}

‎examples/with-nuxt/.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# dependencies
2+
node_modules
3+
4+
# logs
5+
npm-debug.log
6+
7+
# Nuxt build
8+
.nuxt
9+
10+
# Nuxt generate
11+
dist

‎examples/with-nuxt/README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# with-nuxt
2+
3+
> Nuxt.js project
4+
5+
## Created with nuxtjs starter template
6+
7+
This example shows how to set up Purgecss with nuxtjs starter template.
8+
Once you initialzed your project with
9+
```
10+
vue init nuxt-community/starter-template <project-name>
11+
```
12+
install the webpack plugin for purgecss:
13+
```
14+
npm i --save-dev glob-all purgecss-webpack-plugin
15+
```
16+
17+
You need to modify the file `nuxt.config.js` by adding he following code:
18+
19+
line 1
20+
21+
```js
22+
const PurgecssPlugin = require('purgecss-webpack-plugin')
23+
const glob = require('glob-all')
24+
const path = require('path')
25+
```
26+
27+
line 44
28+
29+
```js
30+
if (!isDev) {
31+
// Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
32+
// for more information about purgecss.
33+
config.plugins.push(
34+
new PurgecssPlugin({
35+
paths: glob.sync([
36+
path.join(__dirname, './pages/**/*.vue'),
37+
path.join(__dirname, './layouts/**/*.vue'),
38+
path.join(__dirname, './components/**/*.vue')
39+
]),
40+
whitelist: ['html', 'body']
41+
})
42+
)
43+
}
44+
```
45+
46+
## Results
47+
48+
This example is importing the tachyons css framework.\
49+
Without purgecss, the css file size is **88.2 kB**.\
50+
Using purgecss, the css file is **1.56 kB**

‎examples/with-nuxt/assets/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# ASSETS
2+
3+
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4+
5+
More information about the usage of this directory in the documentation:
6+
https://nuxtjs.org/guide/assets#webpacked
7+
8+
**This directory is not required, you can delete it if you don't want to use it.**

‎examples/with-nuxt/components/AppLogo.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="VueToNuxtLogo">
3+
<div class="Triangle Triangle--two"/>
4+
<div class="Triangle Triangle--one"/>
5+
<div class="Triangle Triangle--three"/>
6+
<div class="Triangle Triangle--four"/>
7+
</div>
8+
</template>
9+
10+
<style>
11+
.VueToNuxtLogo {
12+
display: inline-block;
13+
animation: turn 2s linear forwards 1s;
14+
transform: rotateX(180deg);
15+
position: relative;
16+
overflow: hidden;
17+
height: 180px;
18+
width: 245px;
19+
}
20+
21+
.Triangle {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: 0;
26+
height: 0;
27+
}
28+
29+
.Triangle--one {
30+
border-left: 105px solid transparent;
31+
border-right: 105px solid transparent;
32+
border-bottom: 180px solid #41B883;
33+
}
34+
35+
.Triangle--two {
36+
top: 30px;
37+
left: 35px;
38+
animation: goright 0.5s linear forwards 3.5s;
39+
border-left: 87.5px solid transparent;
40+
border-right: 87.5px solid transparent;
41+
border-bottom: 150px solid #3B8070;
42+
}
43+
44+
.Triangle--three {
45+
top: 60px;
46+
left: 35px;
47+
animation: goright 0.5s linear forwards 3.5s;
48+
border-left: 70px solid transparent;
49+
border-right: 70px solid transparent;
50+
border-bottom: 120px solid #35495E;
51+
}
52+
53+
.Triangle--four {
54+
top: 120px;
55+
left: 70px;
56+
animation: godown 0.5s linear forwards 3s;
57+
border-left: 35px solid transparent;
58+
border-right: 35px solid transparent;
59+
border-bottom: 60px solid #fff;
60+
}
61+
62+
@keyframes turn {
63+
100% {
64+
transform: rotateX(0deg);
65+
}
66+
}
67+
68+
@keyframes godown {
69+
100% {
70+
top: 180px;
71+
}
72+
}
73+
74+
@keyframes goright {
75+
100% {
76+
left: 70px;
77+
}
78+
}
79+
</style>

‎examples/with-nuxt/components/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# COMPONENTS
2+
3+
The components directory contains your Vue.js Components.
4+
Nuxt.js doesn't supercharge these components.
5+
6+
**This directory is not required, you can delete it if you don't want to use it.**

‎examples/with-nuxt/layouts/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# LAYOUTS
2+
3+
This directory contains your Application Layouts.
4+
5+
More information about the usage of this directory in the documentation:
6+
https://nuxtjs.org/guide/views#layouts
7+
8+
**This directory is not required, you can delete it if you don't want to use it.**

‎examples/with-nuxt/layouts/default.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<nuxt/>
4+
</div>
5+
</template>
6+
7+
<style>
8+
html {
9+
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10+
font-size: 16px;
11+
word-spacing: 1px;
12+
-ms-text-size-adjust: 100%;
13+
-webkit-text-size-adjust: 100%;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-font-smoothing: antialiased;
16+
box-sizing: border-box;
17+
}
18+
19+
*, *:before, *:after {
20+
box-sizing: border-box;
21+
margin: 0;
22+
}
23+
24+
.button--green {
25+
display: inline-block;
26+
border-radius: 4px;
27+
border: 1px solid #3b8070;
28+
color: #3b8070;
29+
text-decoration: none;
30+
padding: 10px 30px;
31+
}
32+
33+
.button--green:hover {
34+
color: #fff;
35+
background-color: #3b8070;
36+
}
37+
38+
.button--grey {
39+
display: inline-block;
40+
border-radius: 4px;
41+
border: 1px solid #35495e;
42+
color: #35495e;
43+
text-decoration: none;
44+
padding: 10px 30px;
45+
margin-left: 15px;
46+
}
47+
48+
.button--grey:hover {
49+
color: #fff;
50+
background-color: #35495e;
51+
}
52+
</style>

0 commit comments

Comments
 (0)