ocf / ocfstatic Goto Github PK

Currently the staff meeting info on the homepage says the wrong date, and it doesn't say that the meetings are actually in person at the lab. This would be a good first issue for someone to change this!

Far in the future, when #121 and #116 are complete, we can begin to add features like SCRF's dashboard for their accounts. This would be nice to have for users to see what they have access to and manage things. Definitely a long term goal for this project.

On some pages of documentation, the page isn't spaced correctly and the sidebar is pushed out.

To reproduce, try navigating to the HPC docs, and then reduce the width of your window.

I think this has something to do with the code styling of the docs, so a class changing this in Documentation.vue should do the trick.

Should be "Currently Closed".

Required for parity with the old website.

Currently password change is located on Dashboard > Profile.

• Make this more intuitive to access/change location. Why do we need profile? I think it makes sense to just have Account Settings and put the password change there
• Implement password changing (duh)

Add big buttons linking to "Create Account" (exists), "Join Staff", "Staff Hours, Get Help", "Host Your Website", "Contact Us", "How to Print"

These should be prominently displayed on the website's landing page. The purpose is to increase accessibility.

The links should be removed, or moved to another location, and all three sections below it should be moved up.

The above links should send people to pages which are designed with extreme beginners in mind.

Add big buttons linking to "Create Account" (exists), "Join Staff", "Staff Hours, Get Help", "Host Your Website", "Contact Us", "How to Print"

These should be prominently displayed on the website's landing page. The purpose is to increase accessibility.

The links should be removed, or moved to another location, and all three sections below it should be moved up.

The above links should send people to pages which are designed with extreme beginners in mind.

As seen in #210 adding HTML comments inside Vue templates causes hydration to fail, which breaks almost all interactive functionality of the site.

Instead of using HTML comments (<!-- comment -->), we could instead use JS template comments ({{ comment }}) which have the additional benefit of being stripped out of the final build.

Transfer this page from the old website to the new one: https://www.ocf.berkeley.edu/docs/services/lab/

Currently clicking on the lab image on the home page goes to nowhere. (The link location probably just needs to be changed) There's a lab page that exists but there is no info on it atm

On a 2k and 4k screen, the home page especially spaces out way too much, this should be limited. I remember there being a bulma class that makes this easy, but I've forgotten this off the top of my head.

Update by bentref 3/6/2021

This could be a good first issue for someone that has a nice big screen and can test it, not so much for 1080p peasants such as myself. The first step would be to see what the behavior is on a few different large and HiDPi screens and figure out what the desired behavior is.

Note that there is a distinction between large and HiDPI. On a HiDPI but normal-sized 4K computer monitor, it should look essentially the same and not weirded out or too small. On a very large 4K TV, that's a different class of screen and we need to decide whether we want to make it look more normal, or just live with the fact that it will be spaced out since a giant TV isn't a very common use case.

We're using vue. Shall we use react instead?

Open for comments.

Not sure how to implement this given that it is a MD documentation page, but this is definitely something we want to work towards. Lab hours are only shown for the current day on the homepage, so would definitely be good to have an up-to-date weekly hours schedule.

Also--maybe link to this on homepage when you click see more next to hours

Goal: Implement a page with a table of short links ( ocf/ocfweb#485 and ocf/projects#64 ).
I'm just going to yoink @strellic 's code https://gist.github.com/strellic/8e55f273d8e8d9873d5a49fce1866546 and try to port it to Vue I guess.

Perhaps this could be part of your user dashboard, either on the Profile tab or on a new tab.

Of course, it depends on implementing the staff hours calendar.

Currently the staff hours calendar is a placeholder.

Staff hours are configured in ocf/etc/configs/staff_hours.yaml. If we're keeping that same implementation, fetch them from there. On old website, it seems to take a while to update the staff hours--can we improve this?

Currently the site uses an arbitrary pink color that I chose, but the primary and second colors etc. should all be set to the SASS variables we want at src/assets/styles.scss. A good starting point for this is probably the old website redesign files that opstaff generated for us, which can be found here. I think that bulma's default grays do a good job already, so it's really the main colors we have to pick.

Would be really nice to be able to preview content before pushing to prod, I think this is already very possible with Jenkins, just have to figure out how to set it up

Right now we have links to Slack, IRC, Mastodon, etc in the Links section of the homepage. Why not have one for Discord?

Just more links for the Links.vue component on the front page. We should also update the Slack icon to the newer one too.

I hope to have this live at new.ocf.berkeley.edu while we are working on it, but I'm not sure how this should be deployed just yet. The code builds into files we can serve, but I'm not sure from where it should be served.

The documentation in the sidebar is organized in a tree structure, such that you have to click on one category to expand it and view the pages contained within it. Currently, clicking on a category such as Tips and Tricks takes the web browser to the page for that category, which isn't a very useful page. But, taking the web browser to that page resets the scroll, so now you have to scroll all the way down to it again to go to one of the pages contained within that category.

Perhaps we could set it up so that clicking the arrow on the right side of the category expands it, but doesn't actually go to that page? Then you can immediately select the item you actually want to go to.

When Vue 3 gets released and adopted, we should use Suspense to render things like skeletons temporarily while things are getting fetched.

Right now the page is blank and could use something to make it look less plain

Some ideas:

• A grid of tiles of services and documentation we provide, example here. Possible problem: these tiles could be redundant with the content already in the sidebar.
• Information about how to navigate the documentation and search. Could help people find what they're looking for (positive usability impact)
• Put FAQs directly on the documentation page instead of having a separate page for them

This could be a good first issue, you can do a lot of cool layouts using Bulma!

Not to be confused with the about doc, this page is meant to be an updated version of this. This involves adding content to src/pages/About.vue. I have ideas of lots of cool stuff we could put on here, including an OCF History timeline, etc. This should just be as cool of a page as possible, as it describes why new staff should join!

The second line on this page is

[[!meta template="docs/staff_index.html"]]

I'm fairly sure that's not supposed to be there; something is probably supposed to be rendered in its place but it's not happening.

https://new.ocf.berkeley.edu/docs/services/web/wordpress/

This HTML <span class="token number">1</span> renders weird because the number class has some style that's intended for something that is not the product of syntax highlighting. That makes it look like this:

Instead of this:

The officer's page still needs some place for the past officers. It could be a separate page, or could be like a dropdown at the bottom of the officer page. Also, all the officers are hardcoded right in the code. We should probably read the information from a file. On the old website, the contents are read from here, but I feel like since we aren't using Python and Django anymore, we should probably move to a different type of storage. The images for the officers will also need some file/folder setup.

@ben9583 has added schema and YAML data to centralize meeting hours. We have to actually implement this everywhere that we currently have hardcoded meeting dates.

This entails figuring out how to read from the YAML and then copying and pasting that to a few places.

This is linked to #125 (fetching staff hours) since it's the same YAML files

Currently the lab hours are being fetched, but they need to be properly displayed including whether or not the lab is closed.

Additionally, the section immediately below which details how many people are in the lab and the staff in the lab needs to be fetched, but no endpoint currently exists for it. It needs to be added to ocfweb as well.

Currently the stats on the homepage are placeholders. On top of that, the /stats page linked there hasn't been created. We need to make some design decisions about how to put that together. In my (bentref) opinion, the old stats page isn't super helpful. Of course there are a lot more sad zeros (e.g. printing) due to the lab closure, but I think we should maybe think about shifting which stats we focus on and how we present them.

For instance, our mirroring statistics per the old website are pretty cool (we're mirroring many petabytes of data for some well-known projects) but that's not at all on the Summary page. What's on the Summary page instead is virtually all idle/zeros :(

So use the statistics that are already on the old stats page as a starting point (because we know those are what we can track) but there's room for improvement and rearrangement on how to present them in a more aesthetic way that is easier to interpret and represents what we're actually doing.

Just involves adding this. Not a huge priority.

Since Bulma 0.9 new light and dark mode helpers have been added, so adding Dark Mode Support should be possible. I think the best way to do it would probably be to see how an existing site implements it, but I would guess that it should mainly be switching between CSS/SASS variables

Checklist google doc.

I envision this looking like a custom HTML page with a checklist that persists the checked state in localStorage and presents each item as <details>/<summary>. The details can be copied from the existing https://ocf.io/getinvolved

Goal: develop a way inside ocfstatic to automatically point ocf/api requests to localhost:8000 when in development and then point it to https://api.ocf.berkeley.edu when in production. I think requiring developers to manually override the url when they want to test an endpoint on a page adds an extra obstacle that needs be dealt with.

Goes hand in hand with #118.

The HTML associated with the blank space is <a href="#installing-wordpress" aria-hidden="true"><span class="icon icon-link"></span></a>, which makes me think there should be an icon rendering there, but I don't see any CSS that would actually create an icon. Hovering over it makes my pointer become a finger, which I guess is probably intentional.

Definitely would be better to have faq.md as the one source of truth and load it in directly to the /docs page, I just wasn't sure what the best way to do that would be so instead converted it to a component. This works for now but if someone who better understands the project dependencies and Vue wants to take a look, maintaining once source of truth would be optimal.

Originally posted by @raviriley in #254 (comment)

On the homepage it says that meetings are every Monday in the lab. While we wish that were the case, the reality is that they're online, at ocf.io/meet

Hopefully that will have changed by the time this website is deployed, but it might not, and this might be a good first issue just to practice editing a page, committing, pushing, and pull requesting changes.

Since Bulma 0.9 spacing helpers have been added, so my old code where I have been doing spacing myself should use these now and moving forward we should try to take advantage of this as well.

For example, a new spacing helper looks like: <... class="mt-1"> for margin-top of 0.25 rem. Obsolete spacing sets custom margin properties not using this.

This involves adding a button to the modal that comes up when clicking on staff hours, and handing adding that specific event to your Google Calendar.

Currently the staff hours calendar is properly colored according to the site's SASS variables, except for the very faint color that shows when a day is selected. Should be an easy fix by looking into the docs here.

There should be an easy way for people to see upcoming OCF events and add themselves to our calendar (and also mailing list).

Not sure when this happened--I don't remember it being an issue a while ago--but attempting to navigate to different pages doesn't work. The address bar changes but the view does not.

Not an issue when running locally.

A discerning eye may detect that our home layout is currently the default bulma layout (https://bulma.io/documentation/layout/tiles/). I think we could maybe shake it up a little. Some possible changes could include adding embedded google maps to our lab tile, adding embedded blog posts to the staff news section, maybe stats doesn't need that much space (or maybe make stats more robust!)

Please leave feedback and additional suggestions!

Add a page similar to https://www.ocf.berkeley.edu/account/commands/ which allows users to easily run commands from the web instead of having to ssh into tsunami.

• Create UI mockup
• Build frontend
• Build backend

Existing commands:

• paper quota -- how many pages you have remaining this semester
• disk quota -- how much disk space you have used and how much you have left
• makehttp -- set up the web space for your OCF account
• makemysql -- reset your MySQL database password, or create a new MySQL database (copy down the password somewhere secure)

This is hard, we will need ocfweb to support this so that we can put account actions behind this,

https://www.eff.org/fight
https://ssd.eff.org

First task is we need to clarify what out affiliation is and how prominently we want to display it. This seems like something that could go on the About page, in the site-wide footer, or on the homepage. That depends how important the affiliation is.

Should be an aggregate of all the administrative GitHub projects.

could add photos manually, or maybe link to Gravatar/ocf profile