Skip to content

Commit c21ab91

Browse files
TheAlexLichterTheAlexLichter
committed
feat: init
0 parents  commit c21ab91

15 files changed

+10176
-0
lines changed

‎.editorconfig

+13
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

‎.eslintrc.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
root: true,
3+
parserOptions: {
4+
parser: 'babel-eslint',
5+
sourceType: 'module'
6+
},
7+
extends: [
8+
'@nuxtjs'
9+
]
10+
}

‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
*.iml
3+
.idea
4+
*.log*
5+
.nuxt
6+
.vscode
7+
.DS_STORE
8+
coverage
9+
dist

‎.travis.yml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
language: node_js
2+
node_js:
3+
- "8"
4+
- "10"
5+
- "11"
6+
cache:
7+
yarn: true
8+
directories:
9+
- node_modules
10+
install:
11+
- yarn
12+
script:
13+
- yarn test
14+
after_success:
15+
- yarn coverage

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) Alexander Lichter <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Nuxt Webfontloader - Efficient web font loading has never been easier!
2+
3+
[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-webfontloader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)
4+
[![npm](https://img.shields.io/npm/dt/nuxt-webfontloader.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)
5+
[![Build Status](https://travis-ci.com/Developmint/nuxt-webfontloader.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-webfontloader)
6+
[![codecov](https://codecov.io/gh/Developmint/nuxt-webfontloader/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-webfontloader)
7+
[![Dependencies](https://david-dm.org/Developmint/nuxt-webfontloader/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-webfontloader)
8+
[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)
9+
[![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)
10+
11+
>
12+
13+
[📖 **Release Notes**](./CHANGELOG.md)
14+
15+
## Features
16+
17+
* Full support of SVGs as components. Import them like your Vue SFCs
18+
* Built on top of Google's/Typekit's [webfontloader](https://www.npmjs.com/package/webfontloader)
19+
* Nuxt 2 (and only Nuxt 2) support
20+
* Fully tested!
21+
22+
## Setup
23+
24+
- Add `nuxt-webfontloader` as a dependency using yarn or npm to your project
25+
- Add `nuxt-webfontloader` to `modules` section of `nuxt.config.js`
26+
27+
```js
28+
{
29+
modules: [
30+
'nuxt-webfontloader',
31+
],
32+
}
33+
```
34+
35+
- Include your webfontloader options in the `nuxt.config.js`, for example:
36+
37+
```js
38+
export default {
39+
webfontloader: {
40+
google: {
41+
families: ['Lato:400,700'] //Loads Lato font with weights 400 and 700
42+
}
43+
},
44+
}
45+
46+
```
47+
48+
- Remove old stylesheets from your app template or `nuxt.config.js` head part:
49+
50+
```js
51+
export default {
52+
head:{
53+
link: [
54+
// You don't need that line anymore!
55+
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Lato:400,700' }
56+
]
57+
}
58+
}
59+
```
60+
61+
## Development
62+
63+
- Clone this repository
64+
- Install dependencies using `yarn install` or `npm install`
65+
- Start development server using `npm run dev`
66+
67+
## License
68+
69+
[MIT License](./LICENSE)
70+
71+
Copyright (c) Alexander Lichter

‎commitlint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ['@commitlint/config-conventional'] }

‎lib/module.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { resolve } from 'path'
2+
3+
export default function nuxtWebfontloader() {
4+
const { webfontloader: options } = this.options
5+
6+
if (!options || !Object.keys(options).length) {
7+
return
8+
}
9+
this.addPlugin({
10+
src: resolve(__dirname, 'plugin.template.js'),
11+
ssr: false,
12+
fileName: 'webfontloader.js',
13+
options
14+
})
15+
}
16+
17+
module.exports.meta = require('../package.json')

‎lib/plugin.template.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
import WebFont from 'webfontloader'
3+
4+
const options = <%= serialize(options) %>
5+
6+
WebFont.load(options)

‎package.json

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
{
2+
"name": "nuxt-webfontloader",
3+
"version": "1.0.0",
4+
"description": "Efficient web font loading has never been easier!",
5+
"license": "MIT",
6+
"contributors": [
7+
{
8+
"name": "Alexander Lichter <[email protected]>"
9+
}
10+
],
11+
"main": "lib/module.js",
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/Developmint/nuxt-webfontloader"
15+
},
16+
"bugs": {
17+
"url": "https://github.com/Developmint/nuxt-webfontloader/issues"
18+
},
19+
"publishConfig": {
20+
"access": "public"
21+
},
22+
"scripts": {
23+
"dev": "nuxt -c test/fixture/configs/default.js",
24+
"lint": "eslint lib test",
25+
"test": "yarn run lint && jest",
26+
"release": "standard-version && git push --follow-tags && npm publish",
27+
"commitlint": "commitlint -e $GIT_PARAMS",
28+
"coverage": "codecov"
29+
},
30+
"eslintIgnore": [
31+
"lib/**/*.template.js"
32+
],
33+
"files": [
34+
"lib"
35+
],
36+
"keywords": [
37+
"nuxtjs",
38+
"nuxt",
39+
"nuxt-module",
40+
"font",
41+
"webfont",
42+
"webfontloader"
43+
],
44+
"engines": {
45+
"node": ">=8.0.0",
46+
"npm": ">=5.0.0"
47+
},
48+
"jest": {
49+
"testEnvironment": "node",
50+
"collectCoverage": true,
51+
"coveragePathIgnorePatterns": [
52+
"/node_modules/",
53+
"/test/fixture"
54+
],
55+
"forceExit": true
56+
},
57+
"dependencies": {
58+
"webfontloader": "^1.6.28"
59+
},
60+
"devDependencies": {
61+
"@commitlint/cli": "^7.2.1",
62+
"@commitlint/config-conventional": "^7.1.2",
63+
"@nuxtjs/eslint-config": "^0.0.1",
64+
"babel-eslint": "^10.0.1",
65+
"codecov": "^3.1.0",
66+
"eslint": "^5.8.0",
67+
"eslint-config-standard": "^12.0.0",
68+
"eslint-plugin-import": "^2.14.0",
69+
"eslint-plugin-jest": "^22.0.0",
70+
"eslint-plugin-node": "^8.0.0",
71+
"eslint-plugin-promise": "^4.0.1",
72+
"eslint-plugin-standard": "^4.0.0",
73+
"eslint-plugin-vue": "^5.0.0-beta.3",
74+
"get-port": "^4.0.0",
75+
"husky": "^1.1.3",
76+
"jest": "^23.6.0",
77+
"jsdom": "^13.0.0",
78+
"nuxt-edge": "^2.4.0-25716240.4adbf29",
79+
"standard-version": "^4.4.0"
80+
},
81+
"husky": {
82+
"hooks": {
83+
"pre-commit": "yarn run lint",
84+
"commit-msg": "yarn run commitlint"
85+
}
86+
}
87+
}

‎renovate.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": [
3+
"@nuxtjs"
4+
]
5+
}

‎test/fixture/configs/default.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const { resolve } = require('path')
2+
3+
module.exports = {
4+
rootDir: resolve(__dirname, '../../../'),
5+
srcDir: resolve(__dirname, '../'),
6+
render: {
7+
resourceHints: false
8+
},
9+
modules: ['@@'],
10+
webfontloader: {
11+
google: {
12+
families: ['Lato:400,700']
13+
}
14+
},
15+
build: {
16+
filenames: {
17+
app: '[name].js',
18+
chunk: '[name].js'
19+
}
20+
}
21+
}

‎test/fixture/pages/index.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<h1 style="font-family: Roboto,serif">Hey!</h1>
3+
</template>
4+
5+
<script>
6+
export default {
7+
loading: false
8+
}
9+
</script>

‎test/module.test.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const getPort = require('get-port')
2+
const { Nuxt, Builder } = require('nuxt-edge')
3+
4+
jest.setTimeout(60 * 1000)
5+
6+
let nuxt, port
7+
8+
const url = route => 'http://localhost:' + port + route
9+
10+
describe('nuxt-webfontloader', () => {
11+
test('loads fonts properly', async () => {
12+
nuxt = await setupNuxt(require('./fixture/configs/default'))
13+
14+
const window = await nuxt.server.renderAndGetWindow(url('/'))
15+
await new Promise(resolve => setTimeout(resolve, 2500))
16+
17+
const htmlClasses = Array.from(window.document.documentElement.classList)
18+
expect(htmlClasses).toEqual(expect.arrayContaining(['wf-loading', 'wf-lato-n4-loading', 'wf-lato-n7-loading']))
19+
})
20+
21+
afterEach(async () => {
22+
if (nuxt) {
23+
await nuxt.close()
24+
}
25+
})
26+
})
27+
28+
const setupNuxt = async (config) => {
29+
const nuxt = new Nuxt(config)
30+
await new Builder(nuxt).build()
31+
port = await getPort()
32+
await nuxt.listen(port)
33+
34+
return nuxt
35+
}

0 commit comments

Comments
 (0)