menu has listing of options that are relevent to our blurring the lines between the hax app and haxcms options. This means some of these assets will need to either tie into that store or we just replicate the assets here and then when the time comes, actually move them over there to be leveraged as well.

A party selection screen where when you add someone's name, it adds them as a contributor but also renders their little RPG character to match. This can be an additional screen / modal that pops over when editing setting for a site from the main dashboard.

Flow

• site already created
• search on main UI
• click to expand options
• Hit "add collaborators"
• Show a UI much like a "party selection" screen in RPG games

In order to make things transparent around the character, we need to be able to colorize the hat by using an svg layer.

Can you export a 0-10 layer of the hat that will sit behind the default hat in order to provide a color please.

This way we can have things like the following:

This was a request from a student team in class but also is a need given the way it'll look in the app when presented as a message

Make an SVG that cuts out a nice circle version of the character

• Search bar + talk to store
• Basic container for site bars (results of search)
• Make button to trigger new/return user (like the reset button)
• add route/step 0 (new people: does check to see if no site.json return: search bar and recents render)

Need to scale the sides in and make sure it doesn't overflow.
Also toast needs to show up fixed to bottom of viewport as opposed to absolute

An asset for the "log out" button was recently exported but from looking at other comps aka this one:

It appears we probably need to make an 8bit button in a fashion similar to the logout button background that was exported. Not sure if we need additional assets in order to do the border in this manner or what. Also just learned this yesterday -- border supports a background image -- https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

If we used this maybe @dronk6 could implement your svg background assets for a button "border" in order to give other buttons this 8-bit vibe

Auto-generate a list of cards based on the site.json file

Seems buggy on activation at times when in context. May need a focus off event or something to autoclose

• hax might need to send the simple-toast stuff
• the character needs to be able to handle our "resume where you left off?" links. If it has a link / is this message, might not want to auto hide on click (so would need a way of disabling that in the settings that come across)
• ensure message doesn't start out with the "I can hear you" status message from the state change on sound status

Using the test that's available in the replace-tag (either same or a similar one) we should default asset states for a low quality device. Somethings we can do if we get that condition:

• sound off by default
• svg backgrounds off
• animations off
• ensure all calls have the priority lowered -- https://web.dev/priority-hints/
• font handled via https://web.dev/priority-hints/ / JS injection so we don't load it on poor devices

This way you can just click through if you really want to.

username-course-6w

original team brainstorm called for hats to change based on state / thing going on in the app;

• construction hat for doing work / editing a page
• graduate cap / teacher hat if selecting building a course
• ? above head if confused or in a help menu
• other fun ones like bunny ears, cowboy, watermelon
• anything else you can come up with that'd be fun / different

Implement a component with an input tag. As the user types, search the whole site.json's title field to filter out elements. All entities that pass, create site bars card to show them

while wanting to just "make something" it's kinda expected you'll name your creation.

I think you mentioned this but basically just legs in a slightly different position so alternating between it can look like movement

Create an object in HAXCMSAppStore to capture the following information

"site": {
     "structure": "portfolio",
     "type": "Technology",
     "style": "Red"
}

We'll want to use this on the top bar when your logged in.

We need to add a property in the router that is to be displayed in the tab text of the browser, and that will be shown in the scrollable-component HAXCMS-Title-Label

chrome://flags/#enable-portals

while still not a graduated part of chromium, portal provides a really cool UX pattern for moving between SPAs. The portal-launcher tag that I made could be used so that the progressive enhancement is baked right into all links that take you to your new site

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal

portal-launcher used like this

<portal-launcher>
  <a href="https://btopro.com">btopro</a>
  <a href="https://haxtheweb.org">HAX the web</a>
</portal-launcher>

Here's what save / cancel looks like in the context of the new top menu. Will be looking to comps as to how to fully implement them.

needs to be handled internally most likely. Also enter doesn't trigger click but spacebar does

Just has to return similar data so we know it's the same feedback loop

I did some a11y work to ensure you can only tab to what's active + resizing work to keep things focused correctly. Noticed the buttons are not normalized in hover / focus / active state. The 1st ones are but the new ones @liljimmyk99 started adding in need this standardization.

Make a button to match comp.

Need to start hooking into calls to this data source in order to mess with it. This requires evaluation of the site.json data to determine if they should be shown the step...ed items or if they should be given the search options iniitally.

We don't really have a portfolio theme. We have a very poor, partly finished one that can be seen here -- https://btopro.com/

But what we really need is what is an art portfolio look like vs a business vs building it via the "create your own" option.

While I doubt we can get all the way through fully implemented, the 1st step would be to generate comps and white board out what the requirements of art portfolios are more generally. @Taylor-Bracone this is something I want you to focus on moving forward

• need a list of examples to base off of
• UI / wire framing / whiteboard mock ups of possible difference between bases portfolio theme and an 'art' or business portfolio
• Ideas for default content to be produced as part of these sites to help users realize what they can do with a portfolio
• questions that we know we need to ask of an audience / in a discussion group in order to get more insight into needs for the portfolio (who our audience is, what they need, what differentiates these from others, resume page?, etc)
• development of an archetype / core user that we're targeting with this to base our discussions, user stories, and ultimately app around

This would be something good to discuss with students at hax camp, so think of it as trying to develop an idea as much as possible in order to help drive a discussion around user needs gathering at hax camp.

we currently don't have a design for modals in the app

A modal has:

• background scrim / opacity layer
• border on window
• header / title of the pop up
• content area
• buttons for operations

This is its own web component, needs a slot for adding items to left, right and center of the bar. @elizabeth-delor did some mock ups in a few places, https://www.figma.com/file/P2a9LUfwRqCF3yX1DBieeK/Variants-and-Stuff?node-id=0%3A1 included.

needs to support sound toggle, dark mode toggle, the character face (which clicking reveals menu).

Other comps have the menu options / what can be done in that area so time to start working on implementing as its own component

sound on these events / actions

• change random-word
• search open
• search close
• expand results from an item
• click to go to new site
• click to go to existing site
• login opens
• login button click
• successfully logged in
• start new journey
• error sound if not logged in / failed login attempt

Just like Vercel does, render a screenshot using another endpoint (the screenshot one). Heavily cache this

Minor, but now ALL data sends in a data nested property w. A status code, even our jwt which could have implications for haxcms and elms even if minor

Also needs to support ability to hit a button to trigger a university login (like Login w/ your PSU account) which can come in via something like.

<app-hax>
  <div slot="login-providers"><a href="....azure/login">PSU login thing</a></div>
</app-hax>

I'm going to add a help icon / tour so that new users can get a quick run through of the UI by clicking it. We have this in other systems so really just need a button

Some features like "Make a training" or "Business portfolio" will not be ready for launch though they are planned for the future. It would be great if we still included them in the app / on the UI but have like a piece of masking tape / police tape / construction tape / something of that nature, which then says "coming soon" on it. This would drop over top of something and it would be disabled so that they couldn't click the button (or whatever).

If slot does not get passed in, a property should exist to disable to expansion of the card

This might be a type of shirt or showing up to the right of the character or something, but a status icon to represent things like:

• caution / warning
• nice job / confirmation / success
• error / problem
• help / more info
• lightbulb

#41 and #58 contingent but we're at about this point in our testing journey.

items being wired up in haxcms, but things like "site info" or "start new journey" mean nothing when already presented w/ those options

After fixing #73 then this asset should be used in HAXcms top bar implementation.