Skip to content

Commit eba4b20

Browse files
StephanGerbethStephanGerbeth
committed
fix(components): added refactored picture, image and youtube. added vimeo as new component
1 parent f357852 commit eba4b20

File tree

29 files changed

+4087
-5482
lines changed

29 files changed

+4087
-5482
lines changed

‎.husky/commit-msg

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4+
export PATH=/usr/local/bin:$PATH # Important for sourcetree osx
5+
46
npx --no-install commitlint --edit $1

‎.husky/pre-commit

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4+
export PATH=/usr/local/bin:$PATH # Important for sourcetree osx
5+
46
npx --no-install lint-staged

‎.husky/pre-push

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4+
export PATH=/usr/local/bin:$PATH # Important for sourcetree osx
5+
46
npx branch-name-lint .branchlintrc

‎.svgorc.yml

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
plugins:
2+
- cleanupAttrs: true
3+
- removeDoctype: true
4+
- removeXMLProcInst: true
5+
- removeComments: true
6+
- removeMetadata: true
7+
- removeTitle: true
8+
- removeDesc: true
9+
- removeUselessDefs: true
10+
- removeXMLNS: true
11+
- removeEditorsNSData: true
12+
- removeEmptyAttrs: true
13+
- removeHiddenElems: false
14+
- removeEmptyText: true
15+
- removeEmptyContainers: true
16+
- removeViewBox: false
17+
- cleanupEnableBackground: true
18+
- minifyStyles: true
19+
- convertStyleToAttrs: true
20+
- convertColors: true
21+
- convertPathData: true
22+
- convertTransform: true
23+
- removeUnknownsAndDefaults: true
24+
- removeNonInheritableGroupAttrs: true
25+
- removeUselessStrokeAndFill: true
26+
- removeUnusedNS: true
27+
- cleanupIDs: true
28+
- cleanupNumericValues: true
29+
- cleanupListOfValues: true
30+
- moveElemsAttrsToGroup: true
31+
- moveGroupAttrsToElems: true
32+
- collapseGroups: false
33+
- mergePaths: true
34+
- convertShapeToPath: true
35+
# WARNING DANGER DANGER
36+
- sortAttrs: false
37+
- removeDimensions: false
38+
- removeAttrs: false
39+
- removeElementsByAttr: false
40+
- addClassesToSVGElement: false
41+
- addAttributesToSVGElement: false
42+
- removeStyleElement: false
43+
- removeScriptElement: false

‎example/assets/spinner/three-circles.svg

+36
Loading

‎example/components/InfoLayer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737

3838
<script>
3939
40-
import BaseButton from '@/components/atoms/BaseButton';
4140
import SpeedkitLayer from 'nuxt-speedkit/components/SpeedkitLayer';
4241
import { getStyleDescription } from 'nuxt-speedkit/utils/description';
42+
import BaseButton from '@/components/atoms/BaseButton';
4343
4444
export default {
4545
components: {

‎example/modules/svg.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
const fs = require('fs');
3+
const yaml = require('js-yaml');
4+
5+
// eslint-disable-next-line security/detect-non-literal-fs-filename
6+
const svgoConfig = Object.assign({}, yaml.load(fs.readFileSync(process.cwd() + '/.svgorc.yml', 'utf8')));
7+
8+
module.exports = function () {
9+
this.extendBuild((config) => {
10+
config.module.rules = config.module.rules.map((rule) => {
11+
if (rule.test && rule.test.toString().includes('svg')) {
12+
const source = rule.test.source.replace(/svg\|?/, '');
13+
// eslint-disable-next-line security/detect-non-literal-regexp
14+
return { ...rule, test: new RegExp(source, rule.test.flags) };
15+
} else {
16+
return rule;
17+
}
18+
});
19+
20+
config.module.rules.push({
21+
test: /\.svg$/,
22+
oneOf: [
23+
{
24+
resourceQuery: /vue-template/,
25+
use: [
26+
{
27+
loader: 'babel-loader',
28+
options: {
29+
presets: [
30+
'@babel/preset-env'
31+
]
32+
}
33+
},
34+
{
35+
loader: 'vue-svg-loader',
36+
options: { svgo: svgoConfig }
37+
}
38+
]
39+
},
40+
{
41+
use: [
42+
{
43+
loader: 'url-loader',
44+
options: {
45+
46+
}
47+
}
48+
]
49+
}
50+
]
51+
});
52+
});
53+
};

‎example/nuxt.config.js

+23-2
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,30 @@ module.exports = {
8888
trailingSlash: undefined
8989
},
9090

91-
// nuxt/image options https://image.nuxtjs.org/setup#configure
92-
image: {},
91+
image: {
92+
// The screen sizes predefined by `@nuxt/image`:
93+
screens: {
94+
default: 320,
95+
xxs: 480,
96+
xs: 576,
97+
sm: 768,
98+
md: 996,
99+
lg: 1200,
100+
xl: 1367,
101+
xxl: 1600,
102+
'4k': 1921
103+
},
104+
domains: ['picsum.photos', 'img.youtube.com', 'i.vimeocdn.com'],
105+
alias: {
106+
picsum: 'https://picsum.photos',
107+
youtube: 'https://img.youtube.com',
108+
vimeo: 'https://i.vimeocdn.com'
109+
}
110+
// staticFilename: '[publicPath]/images/[name]-[hash][ext]'
111+
},
93112

94113
buildModules: [
114+
'@nuxt/image',
95115
'@nuxtjs/eslint-module',
96116
'@nuxtjs/stylelint-module'
97117
],
@@ -256,6 +276,7 @@ module.exports = {
256276
},
257277

258278
modules: [
279+
'@/modules/svg',
259280
resolve(__dirname, '..') // nuxt-speedkit
260281
],
261282

‎example/pages/test.vue

+28-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
11
<template>
2-
<div>Test</div>
2+
<main>
3+
<default-picture :sources="picture" :loading-spinner="loadingSpinner" />
4+
<default-youtube url="https://www.youtube.com/watch?v=c2cxzy-Dar4" :loading-spinner="loadingSpinner" />
5+
<default-vimeo url="https://vimeo.com/381669797" :loading-spinner="loadingSpinner" />
6+
</main>
37
</template>
48

59
<script>
10+
import LoadingSpinner from 'nuxt-speedkit/components/image/classes/LoadingSpinner';
11+
import ImageSource from 'nuxt-speedkit/components/image/classes/ImageSource';
12+
import ImageSourceList from 'nuxt-speedkit/components/picture/classes/ImageSourceList';
13+
614
export default {
15+
components: {
16+
DefaultVimeo: () => import('nuxt-speedkit/components/iframe/mutation/vimeo'),
17+
DefaultYoutube: () => import('nuxt-speedkit/components/iframe/mutation/youtube'),
18+
DefaultPicture: () => import('nuxt-speedkit/components/picture')
19+
},
20+
21+
data () {
22+
return {
23+
loadingSpinner: new LoadingSpinner({
24+
dataUri: require('@/assets/spinner/three-circles.svg').default,
25+
size: '100px',
26+
backgroundColor: 'grey'
27+
}),
28+
picture: new ImageSourceList([
29+
new ImageSource({ src: '/picsum/id/234/4096/2304.jpg', sizes: { sm: '100vw', md: '100vw', lg: '100vw', xl: '100vw', xxl: '100vw' }, media: '(min-width: 768px)' }),
30+
new ImageSource({ src: '/picsum/id/235/2304/4096.jpg', sizes: { default: '100vw', xxs: '100vw', xs: '100vw' }, media: 'all' })
731
32+
], { retina: true })
33+
};
34+
}
835
};
936
</script>

‎example/pages/tests/speedkit-picture/components/Critical.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<script>
1313
14-
import OrganismPreviewContainer from '@/components/organisms/PreviewContainer';
1514
import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
15+
import OrganismPreviewContainer from '@/components/organisms/PreviewContainer';
1616
1717
export default {
1818

‎example/pages/tests/speedkit-picture/components/Lazy.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<script>
1313
14-
import OrganismPreviewContainer from '@/components/organisms/PreviewContainer';
1514
import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
15+
import OrganismPreviewContainer from '@/components/organisms/PreviewContainer';
1616
1717
export default {
1818

‎lib/components/button/index.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<button v-bind="$attrs" v-on="$listeners">
3+
<slot name="default" />
4+
</button>
5+
</template>
6+
7+
<script>
8+
export default {
9+
10+
};
11+
</script>
12+
13+
<style lang="postcss" scoped>
14+
button {
15+
padding: 0;
16+
margin: 0;
17+
overflow: visible;
18+
font: inherit;
19+
20+
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
21+
line-height: normal;
22+
23+
/* inherit font & color from ancestor */
24+
color: inherit;
25+
background: transparent;
26+
border: none;
27+
28+
/* Corrects font smoothing for webkit */
29+
-webkit-font-smoothing: inherit;
30+
-moz-osx-font-smoothing: inherit;
31+
32+
/* Corrects inability to style clickable `input` types in iOS */
33+
-webkit-appearance: none;
34+
35+
&::-moz-focus-inner {
36+
padding: 0;
37+
border: 0;
38+
}
39+
}
40+
</style>

‎lib/components/iframe/index.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
<template>
3+
<figure class="iframe">
4+
<iframe v-show="show" v-bind="$attrs" frameborder="0" @load="onLoad" @click="onClick" />
5+
<slot name="placeholder" />
6+
</figure>
7+
</template>
8+
9+
<script>
10+
export default {
11+
inheritAttrs: false,
12+
13+
props: {
14+
show: {
15+
type: Boolean,
16+
default: false
17+
}
18+
},
19+
20+
methods: {
21+
onLoad (e) {
22+
if (e.target.src) {
23+
this.$emit('load', e);
24+
}
25+
},
26+
27+
onClick (e) {
28+
this.$emit('click', e);
29+
}
30+
}
31+
};
32+
</script>
33+
34+
<style lang="postcss" scoped>
35+
/* empty */
36+
</style>

0 commit comments

Comments
 (0)