Massive UI Layout Overhaul

[ConnorNelson]

I don't think the current web layout is the best we can do. It's probably not even close.

We need to reconsider our layout. Layout optimization function is minimizing the number of user clicks (and scrolls).

Probably this is going to involve a navigation bar on the left. Especially in the case of a dojo module.

Side bar:

• MODULE NAME
  • CONTENT: Module introductory text; Maybe scoreboard below?
• RESOURCES
  • Lecture
  • CONTENT: YouTube embed, slides embed
  • Lecture
  • CONTENT: YouTube embed, slides embed
  • Lecture
  • CONTENT: YouTube embed, slides embed
  • Text (as makes sense)
  • CONTENT: Markdown
  • Text (as makes sense)
  • CONTENT: Markdown
• PRACTICE (THIS MUST ALWAYS BE VISIBLE ON SCREEN REGARDLESS OF NUMBER OF RESOURCES)
  • CONTENT: Here is where we need some mechanism for seeing the challenges.
  • Challenges have names and descriptions.
  • Challenges have the ability to be started (play button).
  • Challenges also have the ability to be started in "privileged" mode (button with hover text?)
    • "Practice" mode is dead. RIP. Hello "privileged" mode.
  • Challenges have an environment, maybe we embed the workspace / desktop / ssh (instructions), tabbed, browser remembers preference
  • Challenges have a flag submission
    • This can probably be "universalized" in some way?
    • If you submit a flag, we already know what challenge its for...
    • Would be sweet to have a universal hotkey (F?) that just opens the flag submission modal from any screen

If we have a top bar, we don't need to show Desktop / Workspace. Instead we have some button that conveys "Continue where you left off". This will bring them to the correct dojo, correct module, correct challenge, scrolled specifically to the environment. Not sure where we go / what we do if we don't have an active challenge, maybe the browser remembers the last resource or challenge they were looking at.

We also need extensibility for viewing stuff like grades, and admin stuff. Probably this is part of the dojo side bar (not challenge side bar). Probably we also want to be able to return out to the dojo. Maybe the dojo side bar and module side bar are integrated, with different levels of detail expanded.

For example:

• DOJO NAME
  • CONTENT: Dojo intro text; Maybe scoreboard below?
• MODULE 1
  • Clicking this brings you to the module, with the module's view of the side bar expanded, and still visible at top for returning to outer dojo. Do we also show the other unexpanded modules? Probably? But we can't let that get in the way of other stuff.
• MODULE 2
• MODULE 3
• MODULE 4
• PROGRESS
  • See what modules / challenges have been completed at a glance.
  • If dojo does grading, we need to be able to see grades here.
  • Could have a sweet progress bar.
  • Cryptohack.org has a cool progress bar that even just appears at the top right floating.
  • We could do this with module granularity, and dojo granularity. Probably weight all modules equal for dojo granularity.
  • Maybe we don't even need this on the side bar, its just visible. Let the people always see their progress, always!
• ADMIN
  • Should this always be visible, even on module pages? Probably yes if we just make it a small cog button.

Clearly this is all currently a massive blob of thoughts. I think we can make good progress on this task using GPT-4 to help us quickly write HTML/CSS and feel it all out. Only other question would be, do we need to move to something like React or whatever the hipsters use, is there actual super tangible benefits to doing that? If not, HTML/CSS is super cool and hackable.

[ConnorNelson]

We gotta be ready also for sweet search-ability. Search dojos, search modules, search resources, search lecture transcripts. Especially lecture transcripts, I want to be able to CTRL+F a lecture video. Aint nobody got time to watch an hour long unstructured live session.

[ConnorNelson]

Oh and community dojos. We gotta surface community dojos.

[ConnorNelson]

And SEO. I should at a minimum be able to google search "pwn.college bash dojo" and see @zardus's bash dojo.

[ConnorNelson]

And get all our lecture transcripts into our SEO as well.

[zardus]

If this breaks my badges AGAIN I'm going to delete this repository.