diff --git a/website/gulpfile.js b/website/gulpfile.js index 4948b74c..908a91a6 100644 --- a/website/gulpfile.js +++ b/website/gulpfile.js @@ -94,6 +94,10 @@ getPaths = () => { mrare: { all: "js/mrare/**/*.js", index: "js/mrare/index.js", + }, + custom: { + all: "js/custom/**/*.js", + index: "js/custom/index.js", } }, scss: { @@ -305,6 +309,59 @@ gulp.task('mrarejs', async (done) => { done(); }); +gulp.task('customjs', async (done) => { + gulp.src(paths.js.custom.all) + .pipe(eslint()) + .pipe(eslint.format()); + + let fileDest = 'custom.js'; + const banner = `/*! + * Copyright 2020 responsively.app + */`; + const external = []; + const plugins = [ + rollupCommonjs(), + rollupResolve({ + browser: true, + }), + rollupBabel(babelConfig), + rollupUglify({ + output: { + comments: "/^!/" + } + }), + ]; + const globals = {}; + + const bundle = await rollup.rollup({ + input: paths.js.custom.index, + external, + plugins, + onwarn: function (warning) { + // Skip certain warnings + if (warning.code === 'THIS_IS_UNDEFINED') { + return; + } + // console.warn everything else + console.warn(warning.message); + } + }); + + await bundle.write({ + file: path.resolve(__dirname, `./${paths.dist.js}${path.sep}${fileDest}`), + banner, + globals, + format: 'umd', + name: 'custom', + sourcemap: true, + sourcemapFile: path.resolve(__dirname, `./${paths.dist.js}${path.sep}${fileDest}.map`), + }); + // Reload Browsersync clients + reload(); + done(); +}); + + // Assets gulp.task('copy-assets', function () { return gulp.src(paths.assets.all, { @@ -379,6 +436,11 @@ gulp.task('watch', function (done) { cwd: './' }, gulp.series('mrarejs')); + // Rebuild custom js if files change + gulp.watch([paths.js.custom.all], { + cwd: './' + }, gulp.series('customjs')); + // Rebuild mrare js if files change const assetsWatcher = gulp.watch([paths.assets.all, ...paths.assets.allFolders], { cwd: './' @@ -399,6 +461,6 @@ gulp.task('watch', function (done) { }); -gulp.task('default', gulp.series('clean:dist', 'copy-assets', gulp.series('html', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs'), gulp.series('serve', 'watch'))); +gulp.task('default', gulp.series('clean:dist', 'copy-assets', gulp.series('html', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs', 'customjs'), gulp.series('serve', 'watch'))); -gulp.task('build', gulp.series('clean:dist', 'copy-assets', gulp.series('html-minify', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs'))); +gulp.task('build', gulp.series('clean:dist', 'copy-assets', gulp.series('html-minify', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs', 'customjs'))); diff --git a/website/js/custom/contributors.js b/website/js/custom/contributors.js new file mode 100644 index 00000000..91b36641 --- /dev/null +++ b/website/js/custom/contributors.js @@ -0,0 +1,37 @@ +const populateContributors = () => { + function profileHtmlString(to, title, style) { + return ` `; + } + + function generateProfile(c) { + const to = `https://github.com/${c.login}`; + const title = `${c.contributions} contributions from ${c.login}`; + const style = `background-image: url('${c.avatar_url}&s=96');`; + return profileHtmlString(to, title, style); + } + + function generateFooterRow(json) { + let html = ''; + document.getElementById( + 'github-contributors__thanks', + ).innerText = `Thanks to all of our ${json.length} contributors! 🎉👏`; + json.forEach((contributor) => { + html += generateProfile(contributor); + }); + document.getElementById('github-contributors__users').innerHTML = html; + } + + function getContr() { + fetch( + 'https://api.github.com/repos/responsively-org/responsively-app/contributors', + ) + .then((response) => response.text()) + .then((text) => JSON.parse(text)) + .then((json) => generateFooterRow(json)) + .catch(() => { }); + } + + getContr(); +}; + +export default populateContributors; diff --git a/website/js/custom/index.js b/website/js/custom/index.js new file mode 100644 index 00000000..58fca91a --- /dev/null +++ b/website/js/custom/index.js @@ -0,0 +1,5 @@ +import populateContributors from './contributors'; + +export default { + populateContributors, +}; diff --git a/website/js/mrare/contributors.js b/website/js/mrare/contributors.js deleted file mode 100644 index b1c03a42..00000000 --- a/website/js/mrare/contributors.js +++ /dev/null @@ -1,40 +0,0 @@ -var json = ''; -var html = ''; - -function profileHtmlString(to, title, style) { - return ` `; -} - -function generateProfile(c) { - var to = `https://github.com/${c.login}`; - var title = `${c.contributions} contributions from ${c.login}`; - var style = `background-image: url('${c.avatar_url}&s=64');`; - html += profileHtmlString(to, title, style); -} - -function getContributorAmount() { - return json.length; -} - -function generateFooterRow() { - document.getElementById('github-contributors__thanks').innerText = `Thanks to all of our ${getContributorAmount()} contributors!`; - for (var i = 0; i < json.length; i++) { - generateProfile(json[i]); - } - document.getElementById('github-contributors__users').innerHTML = html; -} - -async function getContr() { - fetch('https://api.github.com/repos/responsively-org/responsively-app/contributors', { - method: 'GET', - headers: { - 'User-Agent': 'responsively-app/website', - }, - }) - .then((response) => response.text()) - .then((text) => json = JSON.parse(text)) - .then((json) => generateFooterRow()) - .catch((err) => console.error(err)); -} - -getContr(); diff --git a/website/pages/assets/css/custom.css b/website/pages/assets/css/custom.css index a31b8a8e..bc165742 100755 --- a/website/pages/assets/css/custom.css +++ b/website/pages/assets/css/custom.css @@ -39,17 +39,23 @@ html { width: 300px; } +#github-contributors__thanks { + padding: 0 2rem; + max-width: 40rem; + margin: auto; +} + #github-contributors__users { padding: 0 2rem; max-width: 40rem; - margin: 1rem auto; + margin: 2rem auto; } .github-contributors__avatar { overflow: hidden; border-radius: 50%; - width: 2rem; - height: 2rem; + width: 48px; + height: 48px; margin: .1rem .2rem; display: inline-block; background-color: hsla(0, 0%, 100%, .1); diff --git a/website/pages/download.html b/website/pages/download.html index 5c899cab..95ee6018 100644 --- a/website/pages/download.html +++ b/website/pages/download.html @@ -306,6 +306,15 @@ +
+
+

+
+
+
+
+ +