diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..451f8c8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,19 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = tab +insert_final_newline = true +max_line_length = 80 +trim_trailing_whitespace = true + +[*.md] +indent_size = 2 +indent_style = space +max_line_length = off +trim_trailing_whitespace = false + +[*.yml] +indent_size = 2 +indent_style = space diff --git a/gulpfile.js b/gulpfile.js index 4175936..f069552 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,34 +7,34 @@ const terser = require('gulp-terser'); sass.compiler = require('sass'); function html() { - return gulp.src('./src/index.pug') - .pipe(pug()) - .pipe(gulp.dest('./dist/')); + return gulp.src('./src/index.pug') + .pipe(pug()) + .pipe(gulp.dest('./dist/')); } function css() { - return gulp.src('./src/style/*.scss') - .pipe(sass().on('error', sass.logError)) - .pipe(postcss([require('autoprefixer'), require('cssnano')])) - .pipe(gulp.dest('./dist/')); + return gulp.src('./src/style/*.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(postcss([require('autoprefixer'), require('cssnano')])) + .pipe(gulp.dest('./dist/')); } function js() { - return gulp.src('./src/script/index.js') - .pipe(terser({ ecma: 5 })) - .pipe(gulp.dest('./dist/')); + return gulp.src('./src/script/index.js') + .pipe(terser({ ecma: 5 })) + .pipe(gulp.dest('./dist/')); } function static() { - return gulp.src('./src/static/**/*') - .pipe(gulp.dest('./dist/')); + return gulp.src('./src/static/**/*') + .pipe(gulp.dest('./dist/')); } exports.default = gulp.parallel(html, css, js, static); exports.watch = () => { - gulp.watch('./src/index.pug', html); - gulp.watch('./src/style/*.scss', css); - gulp.watch('./src/script/index.js', js); - gulp.watch('./src/static/*', static); + gulp.watch('./src/index.pug', html); + gulp.watch('./src/style/*.scss', css); + gulp.watch('./src/script/index.js', js); + gulp.watch('./src/static/*', static); } diff --git a/package.json b/package.json index 4242285..147806d 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,28 @@ { - "name": "toot", - "version": "0.0.0", - "main": "src/index.pug", - "repository": "git@github.com:NickKaramoff/toot.git", - "author": "Nikita Karamov ", - "license": "MIT", - "private": "true", - "scripts": { - "build": "gulp", - "dev": "gulp watch" - }, - "devDependencies": { - "autoprefixer": "^9.8.6", - "browserslist": "^4.14.4", - "cross-env": "^7.0.2", - "cssnano": "^4.1.10", - "gulp": "^4.0.2", - "gulp-postcss": "^8.0.0", - "gulp-pug": "^4.0.1", - "gulp-sass": "^4.1.0", - "gulp-terser": "^1.4.0", - "npm-run-all": "^4.1.5", - "postcss": "^7.0.34", - "pug": "^3.0.0", - "sass": "^1.26.11" - } + "name": "toot", + "version": "0.0.0", + "main": "src/index.pug", + "repository": "git@github.com:NickKaramoff/toot.git", + "author": "Nikita Karamov ", + "license": "MIT", + "private": "true", + "scripts": { + "build": "gulp", + "dev": "gulp watch" + }, + "devDependencies": { + "autoprefixer": "^9.8.6", + "browserslist": "^4.14.4", + "cross-env": "^7.0.2", + "cssnano": "^4.1.10", + "gulp": "^4.0.2", + "gulp-postcss": "^8.0.0", + "gulp-pug": "^4.0.1", + "gulp-sass": "^4.1.0", + "gulp-terser": "^1.4.0", + "npm-run-all": "^4.1.5", + "postcss": "^7.0.34", + "pug": "^3.0.0", + "sass": "^1.26.11" + } } diff --git a/src/index.pug b/src/index.pug index 1079848..4fcc808 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,47 +1,46 @@ html(lang="en") - head - meta(charset="UTF-8") - meta(name="viewport", content="width=device-width, initial-scale=1.0") - title toot + head + meta(charset="UTF-8") + meta(name="viewport", content="width=device-width, initial-scale=1.0") + title toot - link(rel="stylesheet", href="main.css") - link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap") + link(rel="stylesheet", href="main.css") + link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap") - link(rel='apple-touch-icon' sizes='180x180' href='./icons/apple-touch-icon.png') - link(rel='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png') - link(rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png') - link(rel='manifest' href='./icons/site.webmanifest') - link(rel='mask-icon' href='./icons/safari-pinned-tab.svg' color='#3088d4') - link(rel='shortcut icon' href='./icons/favicon.ico') - meta(name='msapplication-TileColor' content='#1f232b') - meta(name='msapplication-config' content='./icons/browserconfig.xml') - meta(name='theme-color' content='#1f232b') - body - header - h1 🐘 toot - p - | Quickly post on any Mastodon instance - main - form#form - section - label(for="text") Post text - textarea#text(rows=6, name="text", required) - section - datalist#instances_list - label(for="choose_instance") Choose your Mastodon instance - input#instance(type="url", name="instance", placeholder="https://", list="instances_list", required) + link(rel='apple-touch-icon' sizes='180x180' href='./icons/apple-touch-icon.png') + link(rel='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png') + link(rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png') + link(rel='manifest' href='./icons/site.webmanifest') + link(rel='mask-icon' href='./icons/safari-pinned-tab.svg' color='#3088d4') + link(rel='shortcut icon' href='./icons/favicon.ico') + meta(name='msapplication-TileColor' content='#1f232b') + meta(name='msapplication-config' content='./icons/browserconfig.xml') + meta(name='theme-color' content='#1f232b') + body + header + h1 🐘 toot + p Quickly post on any Mastodon instance + main + form#form + section + label(for="text") Post text + textarea#text(rows=6, name="text", required) + section + datalist#instances_list + label(for="choose_instance") Choose your Mastodon instance + input#instance(type="url", name="instance", placeholder="https://", list="instances_list", required) - section.remember - input#remember(type="checkbox", name="remember") - label(for="remember") Remember my instance on this device + section.remember + input#remember(type="checkbox", name="remember") + label(for="remember") Remember my instance on this device - section.submit - input(type="submit", value="Toot!") - footer - section - a(href="https://joinmastodon.org/") What is Mastodon? - section - a(href="https://github.com/NickKaramoff/toot") This project on GitHub + section.submit + input(type="submit", value="Toot!") + footer + section + a(href="https://joinmastodon.org/") What is Mastodon? + section + a(href="https://github.com/NickKaramoff/toot") This project on GitHub - script(src="index.js") + script(src="index.js") diff --git a/src/logo.svg b/src/logo.svg index 0a02291..c41ed9b 100644 --- a/src/logo.svg +++ b/src/logo.svg @@ -1,5 +1,5 @@ - + diff --git a/src/script/index.js b/src/script/index.js index ec77246..99c01aa 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -1,11 +1,11 @@ function normalizeUrl(url) { - if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) { - url = "https://" + url; - } - if (url.charAt(url.length - 1) !== '/'){ - url = url + "/"; - } - return url; + if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) { + url = "https://" + url; + } + if (url.charAt(url.length - 1) !== '/'){ + url = url + "/"; + } + return url; } const instance = document.getElementById('instance'); @@ -16,68 +16,68 @@ var prefillInstance = window.localStorage.getItem('mastodon_instance'); var paramPairs = window.location.search.substr(1).split('&'); var paramPairsLength = paramPairs.length; for (var i = 0; i < paramPairsLength; i++) { - var paramPair = paramPairs[i].split('='); - if (paramPair[0] === 'text') { - document.getElementById('text').value = decodeURIComponent(paramPair[1]); - } else if (paramPair[0] === 'instance') { - prefillInstance = decodeURIComponent(paramPair[1]); - } + var paramPair = paramPairs[i].split('='); + if (paramPair[0] === 'text') { + document.getElementById('text').value = decodeURIComponent(paramPair[1]); + } else if (paramPair[0] === 'instance') { + prefillInstance = decodeURIComponent(paramPair[1]); + } } delete i delete paramPair function instances_loading_error() { - console.error('Failed to fetch servers list from joinmastodon.'); + console.error('Failed to fetch servers list from joinmastodon.'); } function instances_loaded() { - if (this.status !== 200) { - instances_loading_error(); - return; - } + if (this.status !== 200) { + instances_loading_error(); + return; + } - const servers = JSON.parse(this.responseText); + const servers = JSON.parse(this.responseText); - const chosen_instance = instance.value; - const domains = servers.map(obj => obj.domain); - if (chosen_instance && domains.indexOf(chosen_instance) === -1) { - domains.push(chosen_instance); - } - domains.sort(); + const chosen_instance = instance.value; + const domains = servers.map(obj => obj.domain); + if (chosen_instance && domains.indexOf(chosen_instance) === -1) { + domains.push(chosen_instance); + } + domains.sort(); - for (const domain of domains) { - const opt = document.createElement('option'); - opt.value = normalizeUrl(domain); - instances_list.appendChild(opt); - } + for (const domain of domains) { + const opt = document.createElement('option'); + opt.value = normalizeUrl(domain); + instances_list.appendChild(opt); + } } if (prefillInstance != null) { - instance.value = normalizeUrl(prefillInstance); + instance.value = normalizeUrl(prefillInstance); } instance.addEventListener('focus', function (e) { - if (instances_list.children.length === 0) { - const req = new XMLHttpRequest(); - req.addEventListener('load', instances_loaded); - req.addEventListener('error', instances_loading_error); - req.open('GET', 'https://api.joinmastodon.org/servers'); - req.send(); - } + if (instances_list.children.length === 0) { + const req = new XMLHttpRequest(); + req.addEventListener('load', instances_loaded); + req.addEventListener('error', instances_loading_error); + req.open('GET', 'https://api.joinmastodon.org/servers'); + req.send(); + } }) document .getElementById('form') .addEventListener('submit', function (e) { - e.preventDefault(); - var text = e.target.elements['text'].value; - var instance = normalizeUrl(e.target.elements['instance'].value); - var remember = e.target.elements['remember'].checked; + e.preventDefault(); + var text = e.target.elements['text'].value; + var instance = normalizeUrl(e.target.elements['instance'].value); + var remember = e.target.elements['remember'].checked; - if (remember) { - window.localStorage.setItem('mastodon_instance', instance); - } + if (remember) { + window.localStorage.setItem('mastodon_instance', instance); + } - var shareUrl = instance + "share?text=" + encodeURIComponent(text); - window.location.href = shareUrl; + var shareUrl = instance + "share?text=" + encodeURIComponent(text); + window.location.href = shareUrl; }) diff --git a/src/style/main.scss b/src/style/main.scss index 556d920..aeba8b2 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -2,150 +2,150 @@ @import "variables"; * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } html, body { - background-color: $bg; - color: $text; - font-family: $text-font; - font-size: 16px; - font-weight: 400; - line-height: 1; + background-color: $bg; + color: $text; + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 1; - height: 100%; - width: 100%; + height: 100%; + width: 100%; } body { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } header { - text-align: center; - padding-top: 2rem; + text-align: center; + padding-top: 2rem; - h1 { - color: $title; - font-family: $title-font; - font-weight: 600; - font-size: 26px; - line-height: 1.5; - margin: 0 0 8px; - } + h1 { + color: $title; + font-family: $title-font; + font-weight: 600; + font-size: 26px; + line-height: 1.5; + margin: 0 0 8px; + } - p { - margin: 0 0 26px; - } + p { + margin: 0 0 26px; + } } main { - width: 100%; - max-width: 600px; - margin: 0 auto; - padding: 0 0.75rem; + width: 100%; + max-width: 600px; + margin: 0 auto; + padding: 0 0.75rem; - form { - section { - margin-bottom: 1rem; + form { + section { + margin-bottom: 1rem; - &.remember, - &.submit { - text-align: center; - } + &.remember, + &.submit { + text-align: center; + } - &.submit { - margin-top: 2rem; - } - } + &.submit { + margin-top: 2rem; + } + } - label { - font-size: 14px; - margin-bottom: 8px; - display: inline-block; - } + label { + font-size: 14px; + margin-bottom: 8px; + display: inline-block; + } - textarea, - input { - font-size: 1rem; - border-radius: 4px; + textarea, + input { + font-size: 1rem; + border-radius: 4px; - &[type=checkbox] { - margin-right: 8px; - } + &[type=checkbox] { + margin-right: 8px; + } - &[type=submit] { - display: inline-block; - text-align: center; - background-color: $button-bg; - color: $button-text; - font-weight: 500; - font-family: inherit; - padding: 4px 16px; - line-height: 36px; - border: 0; - cursor: pointer; - - &:hover { - background-color: $button-hover-bg; - } - } + &[type=submit] { + display: inline-block; + text-align: center; + background-color: $button-bg; + color: $button-text; + font-weight: 500; + font-family: inherit; + padding: 4px 16px; + line-height: 36px; + border: 0; + cursor: pointer; - transition: background-color 300ms ease, border 300ms ease; - } + &:hover { + background-color: $button-hover-bg; + } + } - textarea, - input[type=url] { - color: inherit; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background-color: $input-bg; - border: 1px solid color.scale($input-bg, $lightness: -25%); - padding: 10px; + transition: background-color 300ms ease, border 300ms ease; + } - &:focus, - &:active { - border: 1px solid $button-bg; - background-color: color.scale($input-bg, $lightness: +5%); - } + textarea, + input[type=url] { + color: inherit; + width: 100%; + outline: 0; + font-family: inherit; + resize: vertical; + background-color: $input-bg; + border: 1px solid color.scale($input-bg, $lightness: -25%); + padding: 10px; - &::placeholder { - color: inherit; - opacity: 0.3; - } - } - } + &:focus, + &:active { + border: 1px solid $button-bg; + background-color: color.scale($input-bg, $lightness: +5%); + } + + &::placeholder { + color: inherit; + opacity: 0.3; + } + } + } } footer { - background-color: $footer-bg; - padding: 0.5rem 0; - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - flex-wrap: wrap; + background-color: $footer-bg; + padding: 0.5rem 0; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; - section { - margin: .5rem 1rem; + section { + margin: .5rem 1rem; - a { - color: inherit; + a { + color: inherit; - &:hover { - color: $title; - } + &:hover { + color: $title; + } - transition: color 300ms ease; - } - } + transition: color 300ms ease; + } + } }