Skip to content

Commit 701a082

Browse files
codymikolcodymikol
authored
chore: fix maintainers images being squished (#576)
seemed disrespectful 🤷 Fixes N/A
1 parent 09d976c commit 701a082

File tree

1 file changed

+71
-50
lines changed

1 file changed

+71
-50
lines changed

‎README.md

Lines changed: 71 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ yarn `yarn add -D karma-webpack`
2424
<h2 align="center">Usage</h2>
2525

2626
**karma.conf.js**
27+
2728
```js
2829
module.exports = (config) => {
2930
config.set({
3031
// ... normal karma configuration
3132

3233
// make sure to include webpack as a framework
3334
frameworks: ['mocha', 'webpack'],
34-
35+
3536
plugins: [
3637
'karma-webpack',
3738
'karma-mocha',
@@ -40,12 +41,12 @@ module.exports = (config) => {
4041
files: [
4142
// all files ending in ".test.js"
4243
// !!! use watched: false as we use webpacks watch
43-
{ pattern: 'test/**/*.test.js', watched: false }
44+
{pattern: 'test/**/*.test.js', watched: false}
4445
],
4546

4647
preprocessors: {
4748
// add webpack as preprocessor
48-
'test/**/*.test.js': [ 'webpack' ]
49+
'test/**/*.test.js': ['webpack']
4950
},
5051

5152
webpack: {
@@ -95,25 +96,30 @@ const defaultWebpackOptions = {
9596

9697
### How it works
9798

98-
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
99+
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles
100+
and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during
101+
autoWatch=true.
99102

100-
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
103+
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of
104+
this one build process.
101105

102106
### Webpack typescript support
103107

104-
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
108+
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript
109+
it works out of the box.
105110

106111
If you have a different need you can override by settig `webpack.transformPath`
107112

108113
```js
109114
// this is the by default applied transformPath
110115
webpack: {
111116
transformPath: (filepath) => {
112-
// force *.js files by default
113-
const info = path.parse(filepath);
114-
return `${path.join(info.dir, info.name)}.js`;
115-
},
116-
},
117+
// force *.js files by default
118+
const info = path.parse(filepath);
119+
return `${path.join(info.dir, info.name)}.js`;
120+
},
121+
}
122+
,
117123
```
118124

119125
### `Source Maps`
@@ -127,98 +133,113 @@ npm i -D karma-sourcemap-loader
127133
And then add it to your preprocessors.
128134

129135
**karma.conf.js**
136+
130137
```js
131138
preprocessors: {
132-
'test/test_index.js': [ 'webpack', 'sourcemap' ]
139+
'test/test_index.js'
140+
:
141+
['webpack', 'sourcemap']
133142
}
134143
```
135144

136145
And tell `webpack` to generate sourcemaps.
137146

138147
**webpack.config.js**
148+
139149
```js
140150
webpack: {
141151
// ...
142152
devtool: 'inline-source-map'
143153
}
144154
```
145155

156+
<style>
157+
158+
.maintainer-container {
159+
display: flex;
160+
flex-direction: row;
161+
flex-wrap: wrap;
162+
}
163+
164+
.maintainer {
165+
display: flex;
166+
flex-direction: column;
167+
padding: 8px;
168+
}
169+
170+
.maintainer > a {
171+
padding-top: 8px;
172+
}
173+
174+
</style>
175+
146176
<h2 align="center">Current Maintainers</h2>
147177

148-
<table>
149-
<tbody>
150-
<tr>
151-
<td>
152-
<img width="150" height="150"
153-
src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
154-
<br>
155-
<a href="http://codymikol.com">Cody Mikol</a>
156-
</td>
157-
</tr>
158-
<tbody>
159-
</table>
178+
<div class="maintainer-container">
179+
<div class="maintainer">
180+
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
181+
<a href="http://codymikol.com">Cody Mikol</a>
182+
</div>
183+
</div>
184+
160185

161186
<h2 align="center">Previous Maintainers</h2>
162187

163-
Previous maintainers of the `karma-webpack` plugin that have done such amazing work to get it to where it is today.
188+
Previous maintainers of the `karma-webpack` plugin that have done such amazing work to get it to where it is today. 🎉🎉🎉
164189

165-
<table class="maintainers">
166-
<tbody>
167-
<tr>
168-
<td align="center">
190+
<div class="maintainer-container">
191+
<div class="maintainer">
169192
<img width="150" height="150"
170193
src="https://avatars0.githubusercontent.com/u/7922109?v=4&s=150">
171-
<br>
172194
<a href="https://github.com/ryanclark">Ryan Clark</a>
173-
</td>
174-
<td align="center">
195+
</div>
196+
<div class="maintainer">
175197
<img width="150" height="150"
176198
src="https://avatars3.githubusercontent.com/u/2045543?v=4&s=150">
177-
<br>
178199
<a href="https://github.com/AprilArcus">April Arcus</a>
179-
</td>
180-
<td align="center">
200+
</div>
201+
<div class="maintainer">
181202
<img width="150" height="150"
182203
src="https://avatars.githubusercontent.com/u/4650931?v=3&s=150">
183-
</br>
184204
<a href="https://github.com/MikaAK">Mika Kalathil</a>
185-
</td>
186-
<td align="center">
205+
</div>
206+
<div class="maintainer">
187207
<img width="150" height="150"
188208
src="https://avatars.githubusercontent.com/u/8420490?v=3&s=150">
189209
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
190-
</td>
191-
<td align="center">
210+
</div>
211+
<div class="maintainer">
192212
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/1919664?v=3&s=150">
193213
<a href="https://github.com/goldhand">Will Farley</a>
194-
</td>
195-
<td align="center">
214+
</div>
215+
<div class="maintainer">
196216
<img width="150" height="150"
197217
src="https://avatars.githubusercontent.com/u/1307954?v=3&s=150">
198218
<a href="https://github.com/DanielaValero">Daniela Valero</a>
199-
</td>
219+
</div>
200220
</tr>
201221
<tr>
202-
<td align="center">
222+
<div class="maintainer">
203223
<img width="150" height="150"
204224
src="https://avatars.githubusercontent.com/u/122108?v=3&s=150">
205225
<a href="https://github.com/jon301">Jonathan Trang</a>
206-
</td>
207-
<td align="center">
226+
</div>
227+
<div class="maintainer">
208228
<img width="150" height="150"
209229
src="https://avatars.githubusercontent.com/u/3285723?v=3&s=150">
210230
<a href="https://github.com/carlos-">Carlos Morales</a>
211-
</td>
212-
</tr>
213-
<tbody>
214-
</table>
231+
</div>
232+
</div>
215233

216234

217235
[npm]: https://img.shields.io/npm/v/karma-webpack.svg
236+
218237
[npm-url]: https://npmjs.com/package/karma-webpack
219238

220239
[node]: https://img.shields.io/node/v/karma-webpack.svg
240+
221241
[node-url]: https://nodejs.org
222242

223243
[cover]: https://codecov.io/gh/webpack-contrib/karma-webpack/branch/master/graph/badge.svg
244+
224245
[cover-url]: https://codecov.io/gh/webpack-contrib/karma-webpack

0 commit comments

Comments
 (0)