Merge pull request #307 from pmarsceill/stylelint-plus-prettier

Fix Stylelint workflow and add prettier
This commit is contained in:
Patrick Marsceill 2020-04-24 15:27:35 -04:00 committed by GitHub
commit 3ff76320ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1582 additions and 733 deletions

View File

@ -1,4 +1,4 @@
on: [push, pull_request]
on: [pull_request]
name: CI
@ -30,19 +30,43 @@ jobs:
--volume="${{ github.workspace }}:/srv/jekyll" \
jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
css:
name: Stylelint
assets:
name: Format and test CSS and JS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Use Node.js 10.x
- uses: actions/checkout@v2
# Using this so the this instead of GITHUB_TOKEN so that this workflow can trigger another
with:
token: ${{ secrets.PAT }}
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
version: 10.x
node-version: '12.x'
- name: Extract branch name
shell: bash
run: echo "##[set-output name=branch;]$(echo ${GITHUB_HEAD_REF#refs/heads/})"
id: extract_branch
- name: npm install, build, and test
- run: npm install
- run: npm run format
- name: Add changed files
run: |
npm install
npm test
echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git"
git config --global user.email $GITHUB_ACTOR@users.noreply.github.com
git config --global user.name $GITHUB_ACTOR
echo "extracted branch is ${{ steps.extract_branch.outputs.branch }}"
git checkout -b ${{ steps.extract_branch.outputs.branch }}
git status
git add .
- name: Are there any updates?
shell: bash
run: echo "##[set-output name=status]$(git status -s)"
id: is_dirty
- name: Commit files
if: steps.is_dirty.outputs.status
run: |
echo ${{ steps.is_dirty.outputs.status }}
git commit -m "🎨 Prettier"
git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }}
- run: npm test

8
.prettierignore Normal file
View File

@ -0,0 +1,8 @@
package.json
package-lock.json
_site
assets/css/dark-mode-preview.scss
assets/css/just-the-docs.scss
assets/js/vendor/lunr.min.js
assets/js/search-data.json
assets/js/just-the-docs.js

8
.prettierrc Normal file
View File

@ -0,0 +1,8 @@
{
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5"
}

View File

@ -1,10 +1,12 @@
{
"ignoreFiles" : [
"ignoreFiles": [
"assets/css/just-the-docs.scss",
"assets/css/dark-mode-preview.scss",
"_sass/vendor/**/*.scss"
],
"extends": [
"stylelint-config-primer"
]
"extends": ["stylelint-config-primer", "stylelint-config-prettier"],
"plugins": ["stylelint-prettier"],
"rules": {
"prettier/prettier": true
}
}

View File

@ -76,9 +76,11 @@ a:not([class]) {
background-size: 1px 1px;
&:hover {
background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
background-image: linear-gradient(
rgba($link-color, 0.45) 0%,
rgba($link-color, 0.45) 100%
);
background-size: 1px 1px;
}
}

View File

@ -30,74 +30,212 @@ figure.highlight {
border-radius: $border-radius;
}
.highlight .c { color: #586e75; } // comment //
.highlight .err { color: #93a1a1; } // error //
.highlight .g { color: #93a1a1; } // generic //
.highlight .k { color: #859900; } // keyword //
.highlight .l { color: #93a1a1; } // literal //
.highlight .n { color: #93a1a1; } // name //
.highlight .o { color: #859900; } // operator //
.highlight .x { color: #cb4b16; } // other //
.highlight .p { color: #93a1a1; } // punctuation //
.highlight .cm { color: #586e75; } // comment.multiline //
.highlight .cp { color: #859900; } // comment.preproc //
.highlight .c1 { color: #586e75; } // comment.single //
.highlight .cs { color: #859900; } // comment.special //
.highlight .gd { color: #2aa198; } // generic.deleted //
.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
.highlight .gr { color: #dc322f; } // generic.error //
.highlight .gh { color: #cb4b16; } // generic.heading //
.highlight .gi { color: #859900; } // generic.inserted //
.highlight .go { color: #93a1a1; } // generic.output //
.highlight .gp { color: #93a1a1; } // generic.prompt //
.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
.highlight .gu { color: #cb4b16; } // generic.subheading //
.highlight .gt { color: #93a1a1; } // generic.traceback //
.highlight .kc { color: #cb4b16; } // keyword.constant //
.highlight .kd { color: #268bd2; } // keyword.declaration //
.highlight .kn { color: #859900; } // keyword.namespace //
.highlight .kp { color: #859900; } // keyword.pseudo //
.highlight .kr { color: #268bd2; } // keyword.reserved //
.highlight .kt { color: #dc322f; } // keyword.type //
.highlight .ld { color: #93a1a1; } // literal.date //
.highlight .m { color: #2aa198; } // literal.number //
.highlight .s { color: #2aa198; } // literal.string //
.highlight .na { color: #555; } // name.attribute //
.highlight .nb { color: #b58900; } // name.builtin //
.highlight .nc { color: #268bd2; } // name.class //
.highlight .no { color: #cb4b16; } // name.constant //
.highlight .nd { color: #268bd2; } // name.decorator //
.highlight .ni { color: #cb4b16; } // name.entity //
.highlight .ne { color: #cb4b16; } // name.exception //
.highlight .nf { color: #268bd2; } // name.function //
.highlight .nl { color: #555; } // name.label //
.highlight .nn { color: #93a1a1; } // name.namespace //
.highlight .nx { color: #555; } // name.other //
.highlight .py { color: #93a1a1; } // name.property //
.highlight .nt { color: #268bd2; } // name.tag //
.highlight .nv { color: #268bd2; } // name.variable //
.highlight .ow { color: #859900; } // operator.word //
.highlight .w { color: #93a1a1; } // text.whitespace //
.highlight .mf { color: #2aa198; } // literal.number.float //
.highlight .mh { color: #2aa198; } // literal.number.hex //
.highlight .mi { color: #2aa198; } // literal.number.integer //
.highlight .mo { color: #2aa198; } // literal.number.oct //
.highlight .sb { color: #586e75; } // literal.string.backtick //
.highlight .sc { color: #2aa198; } // literal.string.char //
.highlight .sd { color: #93a1a1; } // literal.string.doc //
.highlight .s2 { color: #2aa198; } // literal.string.double //
.highlight .se { color: #cb4b16; } // literal.string.escape //
.highlight .sh { color: #93a1a1; } // literal.string.heredoc //
.highlight .si { color: #2aa198; } // literal.string.interpol //
.highlight .sx { color: #2aa198; } // literal.string.other //
.highlight .sr { color: #dc322f; } // literal.string.regex //
.highlight .s1 { color: #2aa198; } // literal.string.single //
.highlight .ss { color: #2aa198; } // literal.string.symbol //
.highlight .bp { color: #268bd2; } // name.builtin.pseudo //
.highlight .vc { color: #268bd2; } // name.variable.class //
.highlight .vg { color: #268bd2; } // name.variable.global //
.highlight .vi { color: #268bd2; } // name.variable.instance //
.highlight .il { color: #2aa198; } // literal.number.integer.long //
.highlight .c {
color: #586e75;
} // comment //
.highlight .err {
color: #93a1a1;
} // error //
.highlight .g {
color: #93a1a1;
} // generic //
.highlight .k {
color: #859900;
} // keyword //
.highlight .l {
color: #93a1a1;
} // literal //
.highlight .n {
color: #93a1a1;
} // name //
.highlight .o {
color: #859900;
} // operator //
.highlight .x {
color: #cb4b16;
} // other //
.highlight .p {
color: #93a1a1;
} // punctuation //
.highlight .cm {
color: #586e75;
} // comment.multiline //
.highlight .cp {
color: #859900;
} // comment.preproc //
.highlight .c1 {
color: #586e75;
} // comment.single //
.highlight .cs {
color: #859900;
} // comment.special //
.highlight .gd {
color: #2aa198;
} // generic.deleted //
.highlight .ge {
font-style: italic;
color: #93a1a1;
} // generic.emph //
.highlight .gr {
color: #dc322f;
} // generic.error //
.highlight .gh {
color: #cb4b16;
} // generic.heading //
.highlight .gi {
color: #859900;
} // generic.inserted //
.highlight .go {
color: #93a1a1;
} // generic.output //
.highlight .gp {
color: #93a1a1;
} // generic.prompt //
.highlight .gs {
font-weight: bold;
color: #93a1a1;
} // generic.strong //
.highlight .gu {
color: #cb4b16;
} // generic.subheading //
.highlight .gt {
color: #93a1a1;
} // generic.traceback //
.highlight .kc {
color: #cb4b16;
} // keyword.constant //
.highlight .kd {
color: #268bd2;
} // keyword.declaration //
.highlight .kn {
color: #859900;
} // keyword.namespace //
.highlight .kp {
color: #859900;
} // keyword.pseudo //
.highlight .kr {
color: #268bd2;
} // keyword.reserved //
.highlight .kt {
color: #dc322f;
} // keyword.type //
.highlight .ld {
color: #93a1a1;
} // literal.date //
.highlight .m {
color: #2aa198;
} // literal.number //
.highlight .s {
color: #2aa198;
} // literal.string //
.highlight .na {
color: #555;
} // name.attribute //
.highlight .nb {
color: #b58900;
} // name.builtin //
.highlight .nc {
color: #268bd2;
} // name.class //
.highlight .no {
color: #cb4b16;
} // name.constant //
.highlight .nd {
color: #268bd2;
} // name.decorator //
.highlight .ni {
color: #cb4b16;
} // name.entity //
.highlight .ne {
color: #cb4b16;
} // name.exception //
.highlight .nf {
color: #268bd2;
} // name.function //
.highlight .nl {
color: #555;
} // name.label //
.highlight .nn {
color: #93a1a1;
} // name.namespace //
.highlight .nx {
color: #555;
} // name.other //
.highlight .py {
color: #93a1a1;
} // name.property //
.highlight .nt {
color: #268bd2;
} // name.tag //
.highlight .nv {
color: #268bd2;
} // name.variable //
.highlight .ow {
color: #859900;
} // operator.word //
.highlight .w {
color: #93a1a1;
} // text.whitespace //
.highlight .mf {
color: #2aa198;
} // literal.number.float //
.highlight .mh {
color: #2aa198;
} // literal.number.hex //
.highlight .mi {
color: #2aa198;
} // literal.number.integer //
.highlight .mo {
color: #2aa198;
} // literal.number.oct //
.highlight .sb {
color: #586e75;
} // literal.string.backtick //
.highlight .sc {
color: #2aa198;
} // literal.string.char //
.highlight .sd {
color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
color: #2aa198;
} // literal.string.double //
.highlight .se {
color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
color: #2aa198;
} // literal.string.other //
.highlight .sr {
color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
color: #2aa198;
} // literal.string.single //
.highlight .ss {
color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
color: #268bd2;
} // name.variable.class //
.highlight .vg {
color: #268bd2;
} // name.variable.global //
.highlight .vi {
color: #268bd2;
} // name.variable.instance //
.highlight .il {
color: #2aa198;
} // literal.number.integer.long //
//
// Code examples (rendered)

View File

@ -1,4 +1,3 @@
$body-background-color: $grey-dk-300;
$sidebar-color: $grey-dk-300;
$border-color: $grey-dk-200;

View File

@ -58,7 +58,9 @@
}
@include mq(lg) {
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
margin-left: calc(
(100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
);
}
}
@ -104,7 +106,6 @@
.navigation,
.site-header,
.site-footer {
width: 100%;
@include mq(lg) {

View File

@ -1,10 +1,9 @@
@function rem($size, $unit:"") {
@function rem($size, $unit: "") {
$remSize: $size / $root-font-size;
@if ($unit == false) {
@return #{$remSize};
}
@else {
} @else {
@return #{$remSize}rem;
}
}

View File

@ -2,7 +2,8 @@
// Typography
//
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4 !default;
@ -82,7 +83,7 @@ $spacers: (
sp-7: $spacing-unit * 2.5,
sp-8: $spacing-unit * 3,
sp-9: $spacing-unit * 3.5,
sp-10: $spacing-unit * 4
sp-10: $spacing-unit * 4,
) !default;
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
@ -125,5 +126,5 @@ $media-queries: (
sm: 500px,
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px
xl: 1400px,
) !default;

View File

@ -15,9 +15,7 @@
@media (min-width: rem($value)) {
@content;
}
}
@else {
} @else {
@warn "No value could be retrieved from `#{$media-query}`. "
+ "Please make sure it is defined in `$media-queries` map.";
}

View File

@ -5,11 +5,21 @@
// Display
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.d-block {
display: block !important;
}
.d-flex {
display: flex !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-none {
display: none !important;
}
@each $media-query in map-keys($media-queries) {
@for $i from 1 through length($spacers) {
@ -18,21 +28,42 @@
$scale: #{$i - 1};
// .d-sm-block, .d-md-none, .d-lg-inline
.d-#{$media-query}-block { display: block !important; }
.d-#{$media-query}-flex { display: flex !important; }
.d-#{$media-query}-inline { display: inline !important; }
.d-#{$media-query}-inline-block { display: inline-block !important; }
.d-#{$media-query}-none { display: none !important; }
.d-#{$media-query}-block {
display: block !important;
}
.d-#{$media-query}-flex {
display: flex !important;
}
.d-#{$media-query}-inline {
display: inline !important;
}
.d-#{$media-query}-inline-block {
display: inline-block !important;
}
.d-#{$media-query}-none {
display: none !important;
}
}
}
}
// Vertical alignment
.v-align-baseline { vertical-align: baseline !important; }
.v-align-bottom { vertical-align: bottom !important; }
.v-align-middle { vertical-align: middle !important; }
.v-align-text-bottom { vertical-align: text-bottom !important; }
.v-align-text-top { vertical-align: text-top !important; }
.v-align-top { vertical-align: top !important; }
.v-align-baseline {
vertical-align: baseline !important;
}
.v-align-bottom {
vertical-align: bottom !important;
}
.v-align-middle {
vertical-align: middle !important;
}
.v-align-text-bottom {
vertical-align: text-bottom !important;
}
.v-align-text-top {
vertical-align: text-top !important;
}
.v-align-top {
vertical-align: top !important;
}

View File

@ -12,11 +12,21 @@
$scale: #{$i - 1};
// .m-0, .m-1, .m-2...
.m-#{$scale} { margin: #{$size} !important; }
.mt-#{$scale} { margin-top: #{$size} !important; }
.mr-#{$scale} { margin-right: #{$size} !important; }
.mb-#{$scale} { margin-bottom: #{$size} !important; }
.ml-#{$scale} { margin-left: #{$size} !important; }
.m-#{$scale} {
margin: #{$size} !important;
}
.mt-#{$scale} {
margin-top: #{$size} !important;
}
.mr-#{$scale} {
margin-right: #{$size} !important;
}
.mb-#{$scale} {
margin-bottom: #{$size} !important;
}
.ml-#{$scale} {
margin-left: #{$size} !important;
}
.mx-#{$scale} {
margin-right: #{$size} !important;
@ -46,11 +56,21 @@
$scale: #{$i - 1};
// .m-sm-0, .m-md-1, .m-lg-2...
.m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
.mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
.mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
.mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
.ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
.m-#{$media-query}-#{$scale} {
margin: #{$size} !important;
}
.mt-#{$media-query}-#{$scale} {
margin-top: #{$size} !important;
}
.mr-#{$media-query}-#{$scale} {
margin-right: #{$size} !important;
}
.mb-#{$media-query}-#{$scale} {
margin-bottom: #{$size} !important;
}
.ml-#{$media-query}-#{$scale} {
margin-left: #{$size} !important;
}
.mx-#{$media-query}-#{$scale} {
margin-right: #{$size} !important;
@ -77,11 +97,21 @@
$scale: #{$i - 1};
// .p-0, .p-1, .p-2...
.p-#{$scale} { padding: #{$size} !important; }
.pt-#{$scale} { padding-top: #{$size} !important; }
.pr-#{$scale} { padding-right: #{$size} !important; }
.pb-#{$scale} { padding-bottom: #{$size} !important; }
.pl-#{$scale} { padding-left: #{$size} !important; }
.p-#{$scale} {
padding: #{$size} !important;
}
.pt-#{$scale} {
padding-top: #{$size} !important;
}
.pr-#{$scale} {
padding-right: #{$size} !important;
}
.pb-#{$scale} {
padding-bottom: #{$size} !important;
}
.pl-#{$scale} {
padding-left: #{$size} !important;
}
.px-#{$scale} {
padding-right: #{$size} !important;
@ -101,11 +131,21 @@
$scale: #{$i - 1};
// .p-sm-0, .p-md-1, .p-lg-2...
.p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
.pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
.pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
.pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
.pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
.p-#{$media-query}-#{$scale} {
padding: #{$size} !important;
}
.pt-#{$media-query}-#{$scale} {
padding-top: #{$size} !important;
}
.pr-#{$media-query}-#{$scale} {
padding-right: #{$size} !important;
}
.pb-#{$media-query}-#{$scale} {
padding-bottom: #{$size} !important;
}
.pl-#{$media-query}-#{$scale} {
padding-left: #{$size} !important;
}
.px-#{$media-query}-#{$scale} {
padding-right: #{$size} !important;

View File

@ -1,22 +1,24 @@
document.addEventListener("DOMContentLoaded", function(){
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
document.addEventListener("DOMContentLoaded", function () {
const toggleDarkMode = document.querySelector(".js-toggle-dark-mode")
const cssFile = document.querySelector('[rel="stylesheet"]')
const originalCssRef = cssFile.getAttribute('href')
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
const updateButtonText = function(toggleDarkMode) {
toggleDarkMode.textContent === buttonCopy[0] ?
toggleDarkMode.textContent = buttonCopy[1] :
toggleDarkMode.textContent = buttonCopy[0]
const originalCssRef = cssFile.getAttribute("href")
const darkModeCssRef = originalCssRef.replace(
"just-the-docs.css",
"dark-mode-preview.css"
)
const buttonCopy = ["Return to the light side", "Preview dark color scheme"]
const updateButtonText = function (toggleDarkMode) {
toggleDarkMode.textContent === buttonCopy[0]
? (toggleDarkMode.textContent = buttonCopy[1])
: (toggleDarkMode.textContent = buttonCopy[0])
}
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
jtd.addEvent(toggleDarkMode, "click", function () {
if (cssFile.getAttribute("href") === originalCssRef) {
cssFile.setAttribute("href", darkModeCssRef)
updateButtonText(toggleDarkMode)
} else {
cssFile.setAttribute('href', originalCssRef)
cssFile.setAttribute("href", originalCssRef)
updateButtonText(toggleDarkMode)
}
})

1746
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,14 +6,18 @@
"license": "MIT",
"bugs": "https://github.com/pmarsceill/just-the-docs/issues",
"devDependencies": {
"stylelint": "^10.0.1",
"@primer/css": "^14.3.0",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-primer": "^9.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-selector-no-utility": "^4.0.0"
},
"dependencies": {
"@primer/css": "^14.3.0"
},
"scripts": {
"test": "stylelint '**/*.scss'"
}
"test": "stylelint '**/*.scss'",
"format": "prettier --write '**/*.{scss,js,json}'",
"stylelint-check": "stylelint-config-prettier-check"
},
"dependencies": {}
}