Having a way to preview articles and news posts

[Walavouchey]

A WYSIWYG editor / previewer either in osu-web or as an external tool/website.

This is becoming increasingly important with infoboxes, the new flag syntax and whatever else may get added in the future, but also with things like images and (especially) tables causing annoyances when it's hard to predict how they'll look.

Setting up an osu-web instance is a tall ask for most wiki writers/translators (I tried once but had some problems).

[Walavouchey]

thanks to @RoanH's effort there's now a discord-bot-controlled preview website that supports switching to any one osu-wiki branch at a time. it's quite convenient (switches branches in 10 seconds or so) and i would recommend any regular wiki contributor (e.g. tournament article writers or anyone writing news posts) to ping me or @TicClick to get access to the (separate) discord server it's been put in (active maintainers and the news team already do).

rn it's partly open sourced at https://git.roanh.dev/roan/osuwikipreview (in java) but uses some private bot codebase/library, so the next step may perhaps be to write a more complete and portable program with it as reference. to my understanding, most of the core functionality is just a lot of plumbing to get the osu-web deploy to behave, but since we have this solution already, expanding is in the least of my priorities for now.

i suppose being invite-only for access doesn't quite solve the "contributor-friendly" part, but while inviting the bot to osu!dev with say verified people able to use it could work fine, it might be questionable whether @peppy would agree with that due to the above.

[RoanH]

For some extra information, I'm still actively working working on this. The current implementation works, though I think it's doing some things in the least efficient way possible, so I wouldn't necessarily call it a 'good' reference. The current implementation also does indeed still my private Discord bot framework, but this framework is built on top of JDA. Completely removing my own framework isn't very hard, but it makes the Discord side of things harder to work on while there's still a lot of work to be done on other parts.

My current focus is on:

• Switching away from a dev instance.
• Either running multiple osu! web instances or saving snapshots of pages (so more than one person can use it at the same time). Hopefully the later since that would be a major step towards automatically generating previews for PRs.
• Making and documenting some complete setup procedure, though with the current method it won't really be super user friendly yet, though beating a Discord invite in simplicity is going to be hard regardless.

That being said, other suggestions are welcome.

[peppy]

not a huge fan of this direction.

make a docker image a user can run on their PC or something like that.

everything is already setup to do a basically one line docket deploy, you'd just need to change some setup for the wiki branch redirection and that's it.

[RoanH]

While that is true (and note that the end result here is a docker image people can run locally), as far as I can tell most people that are not developers (or not familiar with docker) who try to run a local osu-web instance do not seem to succeed at doing so (particularly on Windows). The main intent here is to have an alternative available that is much easier/faster to use (also for one time contributors and potentially in CI by automatically generating previews for PRs).

[peppy]

Call me traditional but I'd rather rely on code based CI checks, and strengthening those if there's things they aren't catching.

But you're welcome to continue your efforts. Just won't be something I can get behind. If this is seen as something we need it would be best to implement in osu-web itself, rather than a third party system that requires someone else to keep the lights on.

[RoanH]

I don't really disagree with that, ideal would be to edit and preview wiki pages and news posts on the site itself (and ideally also a way to preview open PRs by others without having to copy paste the content). But that is not something I personally can work on right now, so for the time being a docker image and at least one accessible preview site ran by a 3rd party anyone can use is the best I can offer.

As for CI, checking as much as possible with code based checks is ideal. But automatically checking visual content, intent and formatting is not something that can be automated easily. We (skinship) have had to amend news posts after publication a number of times for things like wrong images and incorrect youtube links. Mistakes like this are hard to spot without visuals.

[Walavouchey]

I'd rather rely on code based CI checks, and strengthening those if there's things they aren't catching.

Let me provide some context. There are a number of things that CI doesn't check currently, and are only caught after a page goes live:

• Wrong flag icons or wrong flag syntax
• Awkward infobox positioning or syntax errors
• Weird table alignment, text wrap within cells, and random quirks
• Random minor rules and quirks about markdown (that might not be obvious to new wiki writers)
• Incorrect news post embed syntax or wrong embed type

I've reviewed a lot of news posts, and some need to be reviewed in a more timely manner than others. For that I've been keeping a checklist of the most common errors, that I go through before proofreading. Being able to quickly test things enabled me and 0x84f to recently revise the news styling criteria page to be more helpful and provide templates.

It may be possible to add rules and warnings for each and every issue, and I do plan on adding more in the future (some being more infeasible than others), but being able to visually inspect news posts and long articles with lots of failure points is a necessity.

I agree, it may not be the best long-term direction, but I can finally call this predicament solved. I'll keep using this system RoanH has provided extensively, and in the event it topples over I'd quickly be up for hosting it myself.

[FreezyLemon]

Is there a reference for the custom syntax supported by the wiki? I might be interested in implementing a local-first solution to this, if it's not unnecessary with the tooling available now.

[TicClick]

to my knowledge, there isn't -- you may either ask someone from the osu-web team for a complete list of features, or inspect ASC/Formatting for anything that stands out.

which, as far as I remember, is:

• infoboxes
• flags
• custom object identifiers
• footnotes[^1]

[^1]: which aren't completely out of Markdown -- some Markdown flavours have these as a pluggable extension

[sr229]

I already have some ideas how to approach this, but I'll take some time for it. While peppy's approach will work for developers, it will not work for wiki contributors. We need a lightweight previewer to check for proper visual correctness, since there are things we cannot properly automate as @Walavouchey explained.

[Walavouchey]

@sr229 note that what we have already functions correctly, i.e. makes osu-web instances. any solution that doesn't take osu-web as a dependency will incur a high maintenance burden

[cl8n]

• run osu-web with its provided docker container
• join roan's discord server to use osu-web-as-a-service
• use the vscode extension recommended from this repo

with three options now covering different use cases I think that's good enough to close this issue