Skip to content

Commit

Permalink
styles(indentation): switch to tabs and improve .editorconfig to fix #…
Browse files Browse the repository at this point in the history 
…492
  • Loading branch information
@ffoodd
ffoodd committed Dec 10, 2024
1 parent ea1fdc3 commit 2e57eba
Show file tree
Hide file tree
Showing 92 changed files with 5,158 additions and 5,064 deletions.
13 changes: 11 additions & 2 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,21 @@
root = true

[*]
indent_style = space
indent_size = 2
indent_style = tab
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
quote_type = double

[*.{js,css}]
block_comment_start = /**
block_comment = *
block_comment_end = */

[*.js]
quote_type = single

[*.md]
trim_trailing_whitespace = false
Expand Down
54 changes: 27 additions & 27 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
import a11yCSS from './a11y.css.js'

export default function (eleventyConfig) {
eleventyConfig.setUseGitIgnore(false)
eleventyConfig.setUseGitIgnore(false)

eleventyConfig.addPlugin(a11yCSS)
eleventyConfig.addPlugin(a11yCSS)

eleventyConfig.addPassthroughCopy('site/static')
eleventyConfig.addPassthroughCopy({
'css/a11y-en_errors-only.css': 'static/css/a11y-en_errors-only.css',
'css/a11y-en_warnings-only.css': 'static/css/a11y-en_warnings-only.css',
'css/a11y-en_obsoletes-only.css': 'static/css/a11y-en_obsoletes-only.css',
'css/a11y-en_advices-only.css': 'static/css/a11y-en_advices-only.css',
'node_modules/a11y-syntax-highlighting/dist/prism/a11y-light.min.css': 'static/css/a11y-light.min.css'
})
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
eleventyConfig.addShortcode('version', () => `${Date.now()}`)
eleventyConfig.addWatchTarget('site/static/docs.css')
eleventyConfig.addWatchTarget('site/static/docs.js')
eleventyConfig.addPassthroughCopy('site/static')
eleventyConfig.addPassthroughCopy({
'css/a11y-en_errors-only.css': 'static/css/a11y-en_errors-only.css',
'css/a11y-en_warnings-only.css': 'static/css/a11y-en_warnings-only.css',
'css/a11y-en_obsoletes-only.css': 'static/css/a11y-en_obsoletes-only.css',
'css/a11y-en_advices-only.css': 'static/css/a11y-en_advices-only.css',
'node_modules/a11y-syntax-highlighting/dist/prism/a11y-light.min.css': 'static/css/a11y-light.min.css'
})
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
eleventyConfig.addShortcode('version', () => `${Date.now()}`)
eleventyConfig.addWatchTarget('site/static/docs.css')
eleventyConfig.addWatchTarget('site/static/docs.js')

eleventyConfig.setBrowserSyncConfig({
ui: false,
ghostMode: false,
open: true,
browser: 'firefox',
})
eleventyConfig.setBrowserSyncConfig({
ui: false,
ghostMode: false,
open: true,
browser: 'firefox',
})

return {
dir: {
input: 'site',
output: 'docs'
},
markdownTemplateEngine: 'njk'
}
return {
dir: {
input: 'site',
output: 'docs'
},
markdownTemplateEngine: 'njk'
}
}
243 changes: 122 additions & 121 deletions a11y.css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,146 +4,147 @@ import showdown from 'showdown'
import fm from 'front-matter'
import prism from 'prismjs'
import loadLanguages from 'prismjs/components/index.js'

loadLanguages(['scss', 'css-extras'])

const DIRECTORIES = {
sass: {
input: './sass/themes/',
output: './site/_data/sass/'
},
api: {
input: './sass/utils/',
output: './site/_data/sass/'
}
sass: {
input: './sass/themes/',
output: './site/_data/sass/'
},
api: {
input: './sass/utils/',
output: './site/_data/sass/'
}
}

const processSassDocumentation = file => {
const inputFileExtension = path.extname(file)
const inputFilename = path.basename(file, inputFileExtension)
const excludeFiles = ['_all']

// Exclude files that we don't want to process
if (inputFileExtension !== '.scss' || excludeFiles.includes(inputFilename)) {
return
}

const content = fs.readFileSync(file, 'utf8')
const commentBlockRegex = /\/\*doc(.)*?\*\//gs

const comments = Array.from(content.matchAll(commentBlockRegex), data => {
return parseSassComment(data[0])
})

// Avoid crash if output directory does not exists
if (!fs.existsSync(DIRECTORIES.sass.output)) {
fs.mkdirSync(DIRECTORIES.sass.output)
}

// Write Eleventy data files
fs.writeFileSync(
`${DIRECTORIES.sass.output}/${inputFilename.replace('_', '')}.json`,
JSON.stringify(comments, null, 2)
)
const inputFileExtension = path.extname(file)
const inputFilename = path.basename(file, inputFileExtension)
const excludeFiles = ['_all']

// Exclude files that we don't want to process
if (inputFileExtension !== '.scss' || excludeFiles.includes(inputFilename)) {
return
}

const content = fs.readFileSync(file, 'utf8')
const commentBlockRegex = /\/\*doc(.)*?\*\//gs

const comments = Array.from(content.matchAll(commentBlockRegex), data => {
return parseSassComment(data[0])
})

// Avoid crash if output directory does not exists
if (!fs.existsSync(DIRECTORIES.sass.output)) {
fs.mkdirSync(DIRECTORIES.sass.output)
}

// Write Eleventy data files
fs.writeFileSync(
`${DIRECTORIES.sass.output}/${inputFilename.replace('_', '')}.json`,
JSON.stringify(comments, null, 2)
)
}

const processApiDocumentation = file => {
const content = fs.readFileSync(file, 'utf8')
const commentBlockRegex = /\/\*doc(.)*?\*\//gs
const content = fs.readFileSync(file, 'utf8')
const commentBlockRegex = /\/\*doc(.)*?\*\//gs

const comments = Array.from(content.matchAll(commentBlockRegex), data => {
return parseSassComment(data[0])
})
const comments = Array.from(content.matchAll(commentBlockRegex), data => {
return parseSassComment(data[0])
})

// Avoid crash if output directory does not exists
if (!fs.existsSync(DIRECTORIES.api.output)) {
fs.mkdirSync(DIRECTORIES.api.output)
}
// Avoid crash if output directory does not exists
if (!fs.existsSync(DIRECTORIES.api.output)) {
fs.mkdirSync(DIRECTORIES.api.output)
}

return comments
return comments
}

const parseSassComment = comment => {
// Remove CSS comments syntax
comment = comment.replace(/(\/\*doc|\*\/)/g, '').trim()

const content = fm(comment)
let processedContent = new showdown.Converter({
tables: true,
customizedHeaderId: true,
ghCompatibleHeaderId: true
}).makeHtml(content.body)

const headingsRegex = /(<h([2-5]).*>(.*)<\/h[2-5]>)/gim
processedContent = processedContent.replace(headingsRegex, `<h$2>$3</h$2>`)

// HTML code blocks
const markupRegex = /((<pre><code class="html language-html">)(.[\s\S]+?)(\/code><\/pre>))/gm
const htmlRegex = /((?<=<code class="html language-html">)(.[\s\S]+?)(?=<\/code>))/gm
let htmlContent = processedContent.match(htmlRegex)
htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html" data-language="Example">${processedHTML}</code></pre></div>`)

// CSS code blocks
const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
let cssContent = processedContent.match(cssRegex)
cssContent = String(cssContent).replace(/(&gt;)+/g, '>')
let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)

// SCSS code blocks
const scssBlockRegex = /((<pre><code class="scss language-scss">)(.[\s\S]+?)(\/code><\/pre>))/gm
const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
let scssContent = processedContent.match(scssRegex)
scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
scssContent = String(scssContent).replace(/(&gt;)+/g, '>')
let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)

// Sass code blocks
const sassBlockRegex = /((<pre><code class="sass language-sass">)(.[\s\S]+?)(\/code><\/pre>))/gm
const sassRegex = /((?<=<code class="sass language-sass">)(.[\s\S]+?)(?=<\/code>))/gm
const sassContent = processedContent.match(sassRegex)
let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSASS}</code></pre></div>`)

return {
attributes: content.attributes,
body: processedContent
}
// Remove CSS comments syntax
comment = comment.replace(/(\/\*doc|\*\/)/g, '').trim()

const content = fm(comment)
let processedContent = new showdown.Converter({
tables: true,
customizedHeaderId: true,
ghCompatibleHeaderId: true
}).makeHtml(content.body)

const headingsRegex = /(<h([2-5]).*>(.*)<\/h[2-5]>)/gim
processedContent = processedContent.replace(headingsRegex, `<h$2>$3</h$2>`)

// HTML code blocks
const markupRegex = /((<pre><code class="html language-html">)(.[\s\S]+?)(\/code><\/pre>))/gm
const htmlRegex = /((?<=<code class="html language-html">)(.[\s\S]+?)(?=<\/code>))/gm
let htmlContent = processedContent.match(htmlRegex)
htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html" data-language="Example">${processedHTML}</code></pre></div>`)

// CSS code blocks
const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
let cssContent = processedContent.match(cssRegex)
cssContent = String(cssContent).replace(/(&gt;)+/g, '>')
let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)

// SCSS code blocks
const scssBlockRegex = /((<pre><code class="scss language-scss">)(.[\s\S]+?)(\/code><\/pre>))/gm
const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
let scssContent = processedContent.match(scssRegex)
scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
scssContent = String(scssContent).replace(/(&gt;)+/g, '>')
let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)

// Sass code blocks
const sassBlockRegex = /((<pre><code class="sass language-sass">)(.[\s\S]+?)(\/code><\/pre>))/gm
const sassRegex = /((?<=<code class="sass language-sass">)(.[\s\S]+?)(?=<\/code>))/gm
const sassContent = processedContent.match(sassRegex)
let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSASS}</code></pre></div>`)

return {
attributes: content.attributes,
body: processedContent
}
}

const generateJsonDocumentation = () => {
/**
* Remove output directory before creating it again
* @note This is an experimental feature and requires Node v12.10.0 at least
* @see https://nodejs.org/api/fs.html#fs_fs_rmdirsync_path_options
*/
fs.rmSync(DIRECTORIES.sass.output, { recursive: true, force: true })
fs.rmSync(DIRECTORIES.api.output, { recursive: true, force: true })

fs.readdirSync(DIRECTORIES.sass.input).forEach(file => {
processSassDocumentation(DIRECTORIES.sass.input + file)
})

let contentAPI = []
fs.readdirSync(DIRECTORIES.api.input).forEach((file) => {
if (['_all'].includes(path.basename(file, '.scss'))) {
return
}

contentAPI = contentAPI.concat(processApiDocumentation(DIRECTORIES.api.input + file))
})

// Write Eleventy data files
fs.writeFileSync(
`${DIRECTORIES.api.output}/api.json`,
JSON.stringify(contentAPI, null, 2)
)
/**
* Remove output directory before creating it again
* @note This is an experimental feature and requires Node v12.10.0 at least
* @see https://nodejs.org/api/fs.html#fs_fs_rmdirsync_path_options
*/
fs.rmSync(DIRECTORIES.sass.output, {recursive: true, force: true})
fs.rmSync(DIRECTORIES.api.output, {recursive: true, force: true})

fs.readdirSync(DIRECTORIES.sass.input).forEach(file => {
processSassDocumentation(DIRECTORIES.sass.input + file)
})

let contentAPI = []
fs.readdirSync(DIRECTORIES.api.input).forEach((file) => {
if (['_all'].includes(path.basename(file, '.scss'))) {
return
}

contentAPI = contentAPI.concat(processApiDocumentation(DIRECTORIES.api.input + file))
})

// Write Eleventy data files
fs.writeFileSync(
`${DIRECTORIES.api.output}/api.json`,
JSON.stringify(contentAPI, null, 2)
)
}

export default function () {
generateJsonDocumentation()
generateJsonDocumentation()
}
Loading

0 comments on commit 2e57eba

Please sign in to comment.