Add EditorConfig

Indentation also changed to tabs
This commit is contained in:
Nikita Karamov 2021-01-29 22:56:37 +01:00
parent 630db8d4b2
commit a22563ce6d
No known key found for this signature in database
GPG key ID: EA4E7DECEEA050E4
7 changed files with 260 additions and 242 deletions

19
.editorconfig Normal file
View file

@ -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

View file

@ -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);
}

View file

@ -1,28 +1,28 @@
{
"name": "toot",
"version": "0.0.0",
"main": "src/index.pug",
"repository": "git@github.com:NickKaramoff/toot.git",
"author": "Nikita Karamov <nick@karamoff.dev>",
"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 <nick@karamoff.dev>",
"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"
}
}

View file

@ -1,47 +1,46 @@
<!DOCTYPE html>
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")

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M34.453,15.573C35.229,18.393 36,22.488 36,27.641C36,28.194 35.553,28.641 35,28.641C34.447,28.641 34,28.194 34,27.641C34,26.141 33.925,24.742 33.807,23.435C33.678,23.82 33.546,24.198 33.387,24.552C32.54,26.909 31.348,29.733 31.348,31.534C31.348,35.098 29.246,35.641 26.653,35.641C24.062,35.641 21.959,35.098 21.959,31.534C21.959,31.317 21.968,31.116 21.972,30.907C21.501,30.93 21.021,30.946 20.524,30.946C19.7,30.946 18.922,30.903 18.165,30.839C18.169,31.071 18.177,31.294 18.177,31.534C18.177,35.098 16.075,35.641 13.482,35.641C10.89,35.641 8.788,35.098 8.788,31.534C8.788,29.202 7.185,24.661 6.795,21.79C6.763,21.626 6.723,21.472 6.695,21.304C5.974,23.916 5.59,28.074 6.44,29.775C7.613,32.12 8.787,32.12 7.613,33.296C6.439,34.467 2.918,33.296 1.745,30.946C0.571,28.6 -1.51,11.183 1.745,6.3C4.091,2.779 14.655,1.605 19.349,5.126C19.362,5.136 19.371,5.147 19.384,5.157C19.76,5.143 20.132,5.126 20.523,5.126C28.724,5.126 33.589,8.273 34.453,15.573ZM6.5,12.641C7.328,12.641 8,13.313 8,14.141C8,14.969 7.328,15.641 6.5,15.641C5.672,15.641 5,14.969 5,14.141C5,13.313 5.672,12.641 6.5,12.641Z" style="fill:rgb(48,136,212);"/>
<path d="M34.453,15.573C35.229,18.393 36,22.488 36,27.641C36,28.194 35.553,28.641 35,28.641C34.447,28.641 34,28.194 34,27.641C34,26.141 33.925,24.742 33.807,23.435C33.678,23.82 33.546,24.198 33.387,24.552C32.54,26.909 31.348,29.733 31.348,31.534C31.348,35.098 29.246,35.641 26.653,35.641C24.062,35.641 21.959,35.098 21.959,31.534C21.959,31.317 21.968,31.116 21.972,30.907C21.501,30.93 21.021,30.946 20.524,30.946C19.7,30.946 18.922,30.903 18.165,30.839C18.169,31.071 18.177,31.294 18.177,31.534C18.177,35.098 16.075,35.641 13.482,35.641C10.89,35.641 8.788,35.098 8.788,31.534C8.788,29.202 7.185,24.661 6.795,21.79C6.763,21.626 6.723,21.472 6.695,21.304C5.974,23.916 5.59,28.074 6.44,29.775C7.613,32.12 8.787,32.12 7.613,33.296C6.439,34.467 2.918,33.296 1.745,30.946C0.571,28.6 -1.51,11.183 1.745,6.3C4.091,2.779 14.655,1.605 19.349,5.126C19.362,5.136 19.371,5.147 19.384,5.157C19.76,5.143 20.132,5.126 20.523,5.126C28.724,5.126 33.589,8.273 34.453,15.573ZM6.5,12.641C7.328,12.641 8,13.313 8,14.141C8,14.969 7.328,15.641 6.5,15.641C5.672,15.641 5,14.969 5,14.141C5,13.313 5.672,12.641 6.5,12.641Z" style="fill:rgb(48,136,212);"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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;
})

View file

@ -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;
}
}
}