[frontend] Restructure Frontend Sources (#634)

* 🐸restructure frontend stuff, include admin and future user panel in main repo, properly deduplicate bundles for css+js across uses

* rename bundled to dist, caught by gitignore

* re-include status.css for profile template

* default to localhost

* serve frontend panels

* add todo message for abstraction

* refactor oauth registration flow

* oauth restructure

* update footer template

* change panel routes

* remove superfluous css imports

* write bundle to disk from test server, use forked budo-express

* wrap all page content in container

for robustness with addons etc injection other elements in body

* update documentation, goreleaser, Dockerfile

* update template meta tags

* add AGPL-3.0+ license header everywhere

* only attach update listener on EventEmitter

* cleaner config for various frontend bundles

* fix bundler script paths

* Merge commit 'd191931932b9293ce1be44ed08a1e69b9fcc1e25'

* fix up dockerfile, goreleaser

* go mod tidy

* add uglifyify

* move status hide/show js to frontend bundle

* fix stylesheet color( func regressions

* update contributing docs for new build path

* update goreleaser + docker building

* resolve dependency paths properly

* update package name

* use api errorhandler

Co-authored-by: tsmethurst <tobi.smethurst@protonmail.com>

4 files changed, 664 insertions, 0 deletions

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
new file mode 100644
index 000000000..ca18e22ed
--- /dev/null
+++ b/web/source/css/_colors.css
@@ -0,0 +1,35 @@
+/*
+   GoToSocial
+   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/*
+	This stylesheets defines (color) variables to be used by other stylesheets on the page
+	postcss-custom-prop-vars will transpile these to css --variables
+*/
+
+$bg: #525c66;
+$fg: #fafaff;
+$fg_dark: #b0b0b5;
+
+$bg_darker3: color-mod($bg lightness(-3%));
+$bg_darker5: color-mod($bg lightness(-5%));
+
+$bg_lighter3: color-mod($bg lightness(+3%));
+
+$acc1: #de8957; // sloth light orange
+$acc2: #c76d33; // sloth dark orange
+$blue: #5897df;
diff --git a/web/source/css/base.css b/web/source/css/base.css
new file mode 100644
index 000000000..e8b8818df
--- /dev/null
+++ b/web/source/css/base.css
@@ -0,0 +1,253 @@
+/*
+   GoToSocial
+   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+html, body {
+	padding: 0;
+	margin: 0;
+	background: $bg_darker5;
+	color: $fg;
+	font-family: sans-serif;
+}
+
+body {
+	line-height: 1.5em;
+	min-height: 100vh;
+	position: relative;
+}
+
+.page {
+	position: absolute;
+	display: grid;
+	min-height: 100%;
+	min-width: 100%;
+
+	grid-template-rows: auto 1fr auto;
+}
+
+main {
+	background: $bg;
+	display: grid;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	grid-template-columns: 1fr 50% 1fr;
+	grid-template-columns: auto min(92%, 90ch) auto;
+
+	.left {
+		grid-column: 1;
+	}
+
+	.right {
+		grid-column: 3;
+	}
+
+	&.lightgray {
+		background: $bg;
+	}
+
+	& > * {
+		align-self: start;
+		grid-column: 2;
+	}
+}
+
+header {
+	background: $bg_darker5;
+	padding: 2rem 0;
+	padding-bottom: 0;
+	display: flex;
+	flex-wrap: wrap;
+
+	img {
+		height: 4rem;
+		padding-left: 2rem;
+		padding-bottom: 2rem;
+	}
+
+	div {
+		height: 100%;
+		margin: 0 2rem;
+		margin-top: -2rem;
+		flex-grow: 1;
+		align-self: center;
+		display: flex;
+
+		h1 {
+			align-self: center;
+			color: $fg;
+		}
+	}
+}
+
+h1 {
+	/* color: $acc1; */
+	margin: 0;
+	line-height: 2.4rem;
+}
+
+a {
+	color: $acc1;
+}
+
+.button, button {
+	border-radius: 0.2rem;
+	background: $acc1;
+	color: $fg;
+	text-decoration: none;
+	font-size: 1.2rem;
+	font-weight: bold;
+	padding: 0.5rem;
+	border: none;
+	cursor: pointer;
+
+	&:hover {
+		background: $acc2;
+	}
+}
+
+.count {
+	background: $bg_darker5;
+	border-radius: 0.3rem;
+	padding: 0.2rem;
+}
+
+.nounderline {
+	text-decoration: none;
+}
+
+.accent {
+	color: $acc1;
+}
+
+.logo {
+	justify-self: center;
+	img {
+		height: 30vh;
+	}
+}
+
+section.apps {
+	align-self: start;
+
+	.applist {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 0.5rem;
+		align-content: start;
+
+		.entry {
+			display: grid;
+			grid-template-columns: 30% 1fr;
+			gap: 0.5rem;
+			padding: 0.5rem;
+			background: $bg_darker5;
+			border-radius: 0.5rem;
+
+			.logo {
+				align-self: center;
+				width: 100%;
+				object-fit: contain;
+				flex: 1 1 auto;
+			}
+
+			.logo.redraw {
+				fill: $fg;
+				stroke: $fg;
+			}
+
+			div {
+				padding: 1rem 0;
+				h3 {
+					margin-top: 0;
+				}
+			}
+		}
+	}
+}
+
+section.login {
+	form {
+		display: inline-grid;
+		grid-template-columns: auto 100%;
+		grid-gap: 0.7rem;
+
+		button {
+			place-self: center;
+			grid-column: 2;
+		}
+	}
+}
+
+section.error {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+  span {
+    font-size: 2em;
+  }
+  pre {
+    border: 1px solid #ff000080;
+    margin-left: 1em;
+    padding: 0 0.7em;
+    border-radius: 0.5em;
+    background-color: #ff000010;
+    font-size: 1.3em;
+    white-space: pre-wrap;
+  }
+}
+
+input, select, textarea {
+	border: 1px solid $fg;
+	color: $fg;
+	background: $bg;
+	width: 100%;
+}
+
+footer {
+	align-self: end;
+
+	padding: 2rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+
+	a {
+		font-weight: bold;
+	}
+}
+
+@media screen and (orientation: portrait) {
+	main {
+		grid-template-columns: 1fr 92% 1fr;
+	}
+
+	header {
+		text-align: center;
+	}
+
+	footer {
+		margin-top: 2rem;
+		grid-template-columns: 1fr;
+
+		div {
+			margin: 0.3rem 0;
+		}
+	}
+
+	section.apps .applist {
+		grid-template-columns: 1fr;
+	}
+}
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
new file mode 100644
index 000000000..10b4db12a
--- /dev/null
+++ b/web/source/css/profile.css
@@ -0,0 +1,131 @@
+/*
+   GoToSocial
+   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+main {
+  background: transparent;
+}
+
+.headerimage {
+  img {
+    width: 100%;
+    height: 15em;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+}
+
+.profile {
+  position: relative;
+  background: $bg_darker3;
+  padding: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 0.5rem;
+  margin-bottom: 0.2rem;
+
+  .basic {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 25em;
+    gap: 0.5rem;
+
+    a {
+      position: relative;
+      z-index: 1;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .avatar-container {
+      position: relative;
+      width: 100%;
+      max-width: 25em;
+
+      .avatar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+
+        img {
+          object-fit: cover;
+          border-radius: 10px;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .avatar-container:before {
+      content: "";
+      float: left;
+      padding-top: 100%;
+    }
+
+
+    .displayname {
+      font-weight: bold;
+      font-size: 1.6rem;
+      align-self: start;
+    }
+  }
+
+  .detailed {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 25em;
+
+    h2 {
+      margin-top: 0;
+    }
+
+    .bio {
+      margin: 0;
+
+      a {
+        color: $acc1;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.accountstats {
+  position: relative;
+  background: $bg_darker3;
+  padding: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: 0.5rem;
+  margin-bottom: 0.2rem;
+
+  .entry {
+    background: $bg_lighter3;
+    padding: 0.5rem;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
+
+footer + div {
+  /* something weird from the devstack.. */
+  display: none;
+}
diff --git a/web/source/css/status.css b/web/source/css/status.css
new file mode 100644
index 000000000..bfedb2c4e
--- /dev/null
+++ b/web/source/css/status.css
@@ -0,0 +1,245 @@
+/*
+   GoToSocial
+   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+main {
+	background: transparent;
+	grid-auto-rows: auto;
+}
+
+.thread {
+	display: flex;
+	flex-direction: column;
+}
+
+.toot {
+	position: relative;
+	background: $bg_darker3;
+	padding: 2rem;
+	/* padding-bottom: 0; */
+	display: grid;
+	grid-template-columns: 3.2rem auto 1fr;
+	column-gap: 0.5rem;
+	margin-bottom: 0.2rem;
+
+	a {
+		position: relative;
+		z-index: 1;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.avatar {
+		grid-row: span 2;
+
+		img {
+			height: 3.2rem;
+			width: 3.2rem;
+			object-fit: cover;
+		}
+	}
+
+	.displayname {
+		font-weight: bold;
+		font-size: 1.2rem;
+		align-self: start;
+	}
+
+	.username {
+		color: $fg_dark;
+		justify-self: start;
+	}
+
+	input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+	.spoiler {
+		label {
+			background: $acc1;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+
+	.text {
+		margin: 0;
+		grid-column: span 2;
+
+		a {
+			color: $acc1;
+			text-decoration: underline;
+		}
+	}
+
+	.media {
+		margin-top: 0.6rem;
+		border-radius: 0.2rem;
+		grid-column: span 3;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		grid-auto-rows: 10rem;
+		overflow: hidden;
+		gap: 0.3rem;
+
+		a {
+			position: relative;
+		}
+
+		.no-image-desc {
+			display: flex;
+			position: absolute;
+			bottom: 0.1rem;
+			right: 0.4rem;
+			color: white;
+			background: $blue;
+			padding: 0.2rem 0.4rem;
+			border-radius: 100%;
+			z-index: 3;
+
+			i.fa {
+				display: block;
+				line-height: 1.3rem;
+			}
+
+			span {
+				margin-left: 0.3rem;
+				display: none;
+			}
+
+			&:hover {
+				span {
+					display: block;
+				}
+				border-radius: 0.2rem;
+			}
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&.single a {
+			grid-column: span 2;
+		}
+
+		&.odd a:first-child, &.double a {
+			grid-row: span 2;
+		}
+	}
+
+	.info {
+		display: none;
+
+		div {
+			position: relative;
+			padding-right: 1.3rem;
+		}
+
+		.stats {
+			display: flex;
+		}
+
+		color: #b0b0b5;
+		grid-column: span 3;
+		margin-top: 0.5rem;
+		flex-wrap: wrap;
+
+		div.stats::after {
+			display: none;
+		}
+
+		div::after {
+			$size: 0.25rem;
+			display: block;
+			background: $fg_dark;
+			height: $size;
+			width: $size;
+			content: "";
+			position: absolute;
+			top: calc((1.5rem - $size) / 2);
+			right: 0.55rem;
+			border-radius: 1rem;
+		}
+
+		div:last-child {
+			&::after {
+				display: none;
+			}
+			margin-right: 0;
+		}
+	}
+
+	.toot-link {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		text-indent: 100%;
+		white-space: nowrap;
+
+		position: absolute;
+		z-index: 0;
+	}
+
+	$border-radius: 0.3rem;
+	&:first-child {
+		/* top left, top right */
+		border-radius: $border-radius $border-radius 0 0;
+	}
+
+	&:last-child {
+		/* bottom left, bottom right */
+		border-radius: 0 0 $border-radius $border-radius;
+		padding-bottom: 1.5rem;
+	}
+
+	&.expanded {
+		background: $bg;
+		padding-bottom: 1.5rem;
+
+		.displayname {
+			grid-column: span 2;
+		}
+
+		.text {
+			grid-column: span 3;
+			grid-row: span 1;
+			margin-top: 0.3rem;
+		}
+
+		.info {
+			display: flex;
+		}
+
+		.media {
+			grid-auto-rows: 1fr;
+			max-height: 120rem;
+		}
+	}
+}
+
+footer + div { /* something weird from the devstack.. */
+	display: none;
+}
\ No newline at end of file