Landing page redesign

[mozi-h]

This PR will only try and modernize the landing page of tgstation.org. Live preview Redirect tgstation.org to the redesign automatically via a user script – requires the Tampermonkey browser extension.

Fixes #1

Goals:

• Modern look and feel
• Mobile-friendly
• Auto-join a new round
• Clean up the file mess: Refactor file structure; get rid of deprecated stuff
• backdoor 🚪

To-do

• [x] Include Font awesome via npm & scss replace fa with bt-icons
• [x] Adjust server banner styling
• [x] Favicon
• [x] Maybe: Add an option to get redirected to the old site if preferred. And an opt-out counterpart on the old site just link it like a normal page. Put it in an alert, maybe?
• [x] Clean up debug files and comments

Future PRs

• Toast alerts for server-joining (not everyone has / allows notifications), also better customizability. Perhaps make notifications toggleable in settings panel.

• Refactor server banner JS (no jQuery, general make-over, default to not updating when on mobile / higher interval)

  • add toggle to settings Panel
  • higher interval on mobile devices
  • remove jQuery
  • redesign?

• Get dynamicimages/50buck.php and dynamicimages/getlogo.php into this repo (used in index.html, but only available on the live version for some reason), understand it and possible merge them.

[mozi-h]

Not perfect yet, but I'd say it's very presentable. As site and as code. Note that I did not touch tgdb at all, hoping it just works (I cannot test it). Also, I did not touch the very old spaghetti PHP.

Oh, and @MrStonedOne, dynamicimages/50buck.php, as well as dynamicimages/getlogo.php do not exist in this repository...? I've just referenced the live versions in src/pug/includes/sections/userbanner.pug – not ideal.

[mozi-h]

@MrStonedOne ping for attention cuz this repo and pull doesn't get attention otherwise

[mozi-h]

@optimumtact sorry, but I am just desperately pinging at this point

[optimumtact]

I've mentioned this to him several times, unfortunately there's not really much more I can do.

[mozi-h]

Thanks, that's pretty much what I wanted 👍

[MrStonedOne]

The primary barrier to deploying this is setting up some sort of automated build pipeline, as well as figure out a safe way to do dev environments without having to install node on my system (like how /tg/'s CBT in vscode on the game repo does it via portable installs in a subfolder).

Atm my workflow is edit the file in winscp, and hit save, and its uploaded to the webserver, moving that to the proper git deploy workflow it always should have been is something I need to do, but it adds an annoying pre-rec to deploying something this involved.

For now: Could you look at fixing the nav bar not working without javascript and not working with middle click.

The current website has default links as the target on the main buttons, instead of #. so if you middle click the wiki nav button, or click it without javascript, it still works like normal.

Also, if possible, i try to avoid 3rd party javascript dependances since disabling 3rd party javascript except for a whitelist is a common ublock and no script config setting.

Also if you could walk me through steps on deploying this as like a newindex.html page i can put it up on the website with a banner on the main page to build some hype and feedback.

[mozi-h]

Woo, a reply 🎉

On portable Node: what does (/tg/'s) CBT stand for? I can look into making it as local and plug-and-play as possible, using that as a reference. On the git side of things, I am not too familiar (and rusty) with GitHub Actions. But will look into it.

Will adjust the navbar and properly build with local copies of css/js libraries. Speaking of which, I'll uglify built resources whilst I'm at it.

As for the hype page:

• Clone
• npm i
• Maybe adjust alerts in src/pug/config.pug
• npm run build
• see dist, delete tgdb and other redundant PHP (keep dynamicimages)
• I'd recommend dumping the rest into a directory, e.g. tgstation13.org/redesign. Should work.

[optimumtact]

CBT is now known as jukebuild, it's a tool written by stylemistake for building our project (including tgui components).

The point being made is that it bundles a portable node, and that's what MSO would like.

[mozi-h]

I'll research some more after some sleep, but it seems to me like the whole safe building without installing node / npm is way above me. At least doing it automated and neatly – Slapping a portable copy on and putting npm i && npm run build in a file is no magic.

[optimumtact]

using docker to build it is smart, nice.

[mozi-h]

I just watched a 2-hour course on it so that was worth it. Hopefully.

Though the image is 400 MB - pretty chonky. Maybe there's a way to throw out the node image after building I haven't spotted yet? But I doubt it.

You can also stop after the building process with a section modifier set to "building" in our case, which would leave a container with the compiled site without php and webserver, though I'm not sure GitHub Actions could extract that out of the container for auto-building this way. I really don't think shipping a compiled version is a good idea in the first place though (perhaps on a dedicated dist branch?)

Also, that Docker Image only serves as a production solution. Iirc there's a docker vscode extension for developing inside a container so I'll have to look into that to satisfy that requirement too.

I better get an award for this. I signed up to webdev, not DevOps 😆

[mozi-h]

Dockerified: docker build -t tgstation . docker-compose up

[stylemistake]

figure out a safe way to do dev environments without having to install node on my system

Isn't that a bit too much to ask, because porting node bootstrap, juke build and yarn is a big deal, especially for @mozi-h. I did this in tgstation primarily because non-programmers and DM coders are interacting with it, but here it's all webdev. Website developers can be counted on one hand, they can install nodejs once and that's it.

I did however help him to make it easier to deploy it via docker containers, so you can in theory webedit this thing, provided that server can pull new images from here, or the other way around (push).

[MrStonedOne]

Website developers can be counted on one hand, they can install nodejs once and that's it.

If you are going to go from a website that could be deployed with the cp command on linux, to one that needs a complicated build tool chain, ya, you can't just make that jump all at once, especially if you aren't going to be the one to make it.

Deploy is gonna go from a 750ms press save in notepad and let winscp upload it to some minutes long build system requiring multiple scripts and boilerplating and event watching, and ya, mozi (and anybody who wants help them, thanks for that by the way) is responsible for some of the work of transitioning the website infrastructure to use the new thing.

This will end up on the eurobeat docker swarm, because as far as i can tell, thats the only sane way i'm gonna be able to deploy this along side the existing sites.

But lets not pretend invalidating the ability to dev via inspect element isn't a downgrade.

lets not pretend complicating deployment isn't a downgrade

lets not pretend gatekeeping dev work to people who can stay uptodate on the lastest tools and frameworks and buzzwords to describe things already described by other words but now only those in the know can understand you, isn't a downgrade.

lets not pretend invalidating the ability of somebody who knows html to dev the website isn't a downgrade. (you can't dev in html in these frameworks. if you think in html, you end up fighting trying to figure out how to trick the framework into producing the html you want, but if you already know html, you can't think in its declarative language, your mind will always want to revert to html thinking)

I will begrudgingly do what needs to be done to get this deployed to the website, because I don't want to invalidate the work mozi-h put into this, but fuck you for trying to invalidate my concerns, fuck you for trying to pretend like this race to the bottom that is current webdev is anything but problematic. Did it ever occur to you that maybe this is why you can only count webdevs on one hand?

[ZeWaka]

what is byond? how is it related to ss13? why should i get it? i need to host a server in order to play apparently??? i don't have to do this for call of duty, i can just click join on a lobby

you should keep in mind typical user personas when making major changes like this, someone new to the game would have no idea how to play a lack of pictures that actually show the game do little to inform me how the game actually looks

edit: i know these problems exist with the current website, but this would be the perfect time to address these issues

[mozi-h]

@MrStonedOne

Technologies used (tech stack)

All decisions in technologies I made were in an attempt to improve the code to make it:

• more readable
• better maintainable
• contain less boiler plating

Pug

Pug is a lightweight alternative to React and co. for simple code splitting and templating. Instead of one giant HTML file, there now is a neatly split stack of pug files and a simple configuration to adjust certain elements easily. Pug resembles HTML, but instead of <tags>, these are nested and can be typed in CSS selector nature like a.text-primary.bg-danger(href="/wiki") and offering templating functionality such as import, if, each. I'd argue this is not hard to learn if you already know HTML.

I see that it is not widely used and hinders element-picking-debugging to some degree.

Reverting to one HTML file is easily accomplishable, but you lose easy customization for people who just want to build the site themselves (the whole config.json shebang) and you lose the code-splitting (Example: moving the player banners over the intro-text only requires 1 line to be moved). Modifying the navigation would once again require a deep-dive into locating it and then carefully and manually duplicating the current HTML tags. This is less inclusive to newcomers, in my opinion.

SCSS

Customizing bootstrap the way I opted to is a bit of an advanced practice. It may not be strictly necessary, but serves a smaller CSS file whilst keeping everything bootstrap-y (familiar frontend CSS classes) without doing the classic ineffective overwriting of select classes of a default bootstrap CSS (see note). This sacrifices a lower learning curve to better and more reliable maintainability.

What I mean by that is using the default bootstrap.css and overwriting many classes of it manually in styles.css. Even a simple theme colour change requires many singular colour adjustments instead of one variable adjustment.

Git workflow

I see that editing production directly is way faster, but the main additional time needed here does not come from my choice of technologies, but rather that a git workflow as a whole is first implemented now. Before this PR, there was no collaborative activity in this repository. You used this more as a manual backup / publishing tool after the fact.

Node.js

The standard for package managing, developing and building technologies for web projects is Node.js. In my opinion, it is reasonable to assume that possible contributors have it installed and know about the basic commands such as npm i and npm run dev, even if just copying them from the dev / build instructions and not knowing them in-depth. Requesting a more open way for people not in the know is very reasonable and I, in my personal web dev bubble, did not consider this myself.

CI / CD

As host, requesting a better continuous integration and continuous deployment is very understandable, too. As I have little to no prior knowledge, I reached out to stylemistake as developer of jukebuild (which was a referenced technology by you). Stylemistake didn't just nudge me in the right direction but invested time to help me greatly in finding, creating and testing a CI / CD solution.

As a side note, CI / CD produces significant overhead and adds to the tech stack (or as you call them, "frameworks and buzzwords"), making the project more inaccessible as a whole.

Alternatives

Having thought about it, and once again gotten help by stylemistake, there is a nice alternative:

• Use PHP as templating engine. We already have a PHP web server because of tgdb, playerbanner and all that jazz.
• When editing SCSS, just commit the compiled CSS with it.

The result is:

• Copy & Paste™ deployment
• Only editing SCSS requires Node.js shenanigans

This is way more convenient. I'll refactor to this.

Feedback and collaboration

I am not trying to enforce a set of frameworks. I am trying to implement what I think fits the job best. As I saw it, HTML and CSS were not going to cut it for what I had planned. Node.js was needed, and I tried to pick the best tools for the job. Of course, different perspectives, critique and suggesting alternatives are welcome to achieve a better end result.

Whilst stylemistake helped achieve the "safe way to do dev environments without having to install node", he also stated, that this may be overkill.

Responding in such aggressive tone and specifically "fuck you for trying to invalidate my concerns" is blatant insult and not acceptable. Such tone discourages collaboration on your projects and throws a bad image on you as a person: someone you'd not want to work with.

I'd like to ask you nicely to avoid that kind of behaviour. It makes me feel incredibly uncomfortable - even though that hate was not directed at me. Please remember that we are all human beings behind those usernames and funny profile pictures that want to be treated like such, with dignity.

You describe current web dev as a "problematic race to the bottom". If you prefer to spend your time on administrating the game servers and / or don't like web dev in general, there is no shame in letting others who do enjoy it handle it. Please do not vent hatred for a profession onto a person.

I'm looking forward to continue working with you, but in a more appropriate tone.

[mozi-h]

@MrStonedOne Deploying can be done by copying over from src now.

Also, we (external help @ruigouveiamaciel) got the image size down from 413 MB to 143 MB by building apache and php7 on top of alpine via https://github.com/ulsmith/alpine-apache-php7/ By removing unneeded PHP modules, the size could be reduced further. As I am unsure, what modules are needed (tgdb), I left them as-is.

I'd like to work towards getting merged now, so I can have a "clean plate" for new PRs adding to this.

[kopoba]

size of page is doubled from current one from ~600kb to ~1.2mb. I don't like this. But maybe its cost of cool design. Space with shadows looks terrible i think and whole idea doing it with shadows just meh. Also what the idea behind all that node.js stuff? Do we need it just to work with scss? Do we even need scss?

[mozi-h]

@kopoba I intend to get rid of jQuery (safe file size) in a later PR (used for the old server banners). The increase in size is because of bootstrap and the three new images. You can stop the background animation in the settings panel (gear-icon on the top-right). If I were MSO, I'd make the old site available as tgstation13.org/legacy so you hopefully can use that if you want to. The background uses box-shadows, so it can be animated with CSS as it is much cheaper than using JS for animation.

Taken from the README: The landing page has vendors and compiled SCSS shipped via git. You only need Node.js, if you want to modify SCSS (or vendors for some reason).

Taken from my previous comment: Customizing bootstrap [using scss] the way I opted to is a bit of an advanced practice. It may not be strictly necessary, but serves a smaller CSS file whilst keeping everything bootstrap-y (familiar frontend CSS classes) without doing the classic ineffective overwriting of select classes of a default bootstrap CSS*. This sacrifices a lower learning curve to better and more reliable maintainability.

*What I mean by that is using the default bootstrap.css and overwriting many classes of it manually in styles.css. Even a simple theme colour change requires many singular colour adjustments instead of one variable adjustment.

[ruigouveiamaciel]

@MrStonedOne Deploying can be done by copying over from src now.

Also, we (external help) got the image size down from 413 MB to 143 MB by building apache and php7 on top of alpine via https://github.com/ulsmith/alpine-apache-php7/ By removing unneeded PHP modules, the size could be reduced further. As I am unsure, what modules are needed (tgdb), I left them as-is.

I'd like to work towards getting merged now, so I can have a "clean plate" for new PRs adding to this.

Now that I have received the "external helper" title, I approve of this PR. This is the pinnacle of german coding, please merge.

[kopoba]

can you use something like this? https://codepen.io/lzd/pen/oNoqVQO Performance of your shadow stars implementation just horrible. I know that you can turn animation off but i like animations.

[stylemistake]

Maybe this could be used: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Yes, background seems to use a lot of CPU right now.

[Farquaar]

PR Theme: https://youtu.be/Mi57d50pCUw

[mel-byond]

I totally forgot about the screenshots in the carousel being absolute ancient

[mozi-h]

One year since "I'd like to work towards getting merged now". 🎉

[optimumtact]

PR old enough to have a birthday

[ArcaneMusic]

Pr old enough to need dental work done

[Sealed101]

i've just realized that there isn't any tell on the auto-join feature anywhere (though it's very goddamn handy), unless i'm blind. i've just been using it since i've caught wind of the redesign demo, but i can't even remember how i found out about the shift-click stuff. would you look into making this feature more obvious, please?

[mozi-h]

@Sealed101 Currently, it's taught via a dismissible alert. If you delete saved data via the settings pane, it'll pop back up.

[Sealed101]

good to know that it's just a me problem

[casualspacestation14enjoyer]

why hasnt this been merged yet

[optimumtact]

this PR will never be merged because MSO has no interest in updating the website frontpage with anything requiring modern web stacks

[stylemistake]

with anything requiring modern web stacks

This literally uses PHP and static assets that you barely need to compile.

[optimumtact]

yeah i don't think you understand how far in the past he is stuck.

[mozi-h]

Two years since "I'd like to work towards getting merged now". 🎉🎂

[optimumtact]

just set it up on tgstation13.com and start being the new official landing page.

[ShizCalev]

Oh hey this looks pretty cool