Need lightweight self-contained HTML error pages

[TimidRobot]

Issue Description

We need lightweight self-contained HTML error pages that use the Creative Commons brand.

• should use Vocabulary
• should be simple and informative
• must be completely self-contained (all assets inlined)
• must be small (must not exceed 1.43MB)
• may provide instructions or next steps

For use on hosts:

• 403 Forbidden
• 404 Not Found
• 503 Service Unavailable

For use on Cloudflare (potentially using custom error tokens):

• Challenges:
  • Basic security
  • Web Application Firewall
  • IP Firewall (Country block, Country challenge, IP (range) block)
• Cloudflare errors:
  • 502 Bad Gateway
  • 504 Gateway Timeout
  • CF 52X
  • 10XX errors
  • Always Online

The higher priority error messages are bolded.

Related Links

• Customizing Cloudflare error pages – Cloudflare Support
• Troubleshooting Cloudflare 5XX errors – Cloudflare Support
• List of HTTP status codes - Wikipedia

[alexiaOkarabi]

Would love to work on this issue, please how do i go about it

[kgodey]

@alexiaOkarabi Please post whatever questions you have about the work here. We've posted the details that we think are relevant to the issue in the issue description but it's possible we've missed something – however we don't know what those are unless you ask us more detailed questions.

[alexiaOkarabi]

@kgodey okay ma. Please would love to know how to run the development environment for the site such that i can see the changes when i make them. Have cloned and read the readme file but cant find where it is written on how to run the dev environment.

[kgodey]

There is no development environment here, we want some static, standalone HTML pages independent of any other project. We put the issue in this repo because this is the repo in which we put all our general issues. it doesn't have to do with the code of this repository.

@TimidRobot, how do you want the code delivered?

[alexiaOkarabi]

@kgodey Okay thanks.

[alexiaOkarabi]

@kgodey I have dis for the 404 error code. it weighs about 520kb.

[alexiaOkarabi]

I have also come up with this for 403 which is 3.3kb.

[TimidRobot]

@alexiaOkarabi please be sure to use CC vo·cab·u·lar·y.

[alexiaOkarabi]

@TimidRobot Okay

[alexiaOkarabi]

@TimidRobot please should I design pages for each of the 10XX errors?

[TimidRobot]

@alexiaOkarabi, no i don't believe so. Just one that uses the Cloudflare custom error tokens.

[alexiaOkarabi]

@TimidRobot Please is something like this okay?

[TimidRobot]

@alexiaOkarabi, yes, something like that.

The images do not, in my opinion, represent a unified design. I recommend you create designs for 3-4 pages and reach out on Slack for feedback (I'm @Timid Robot there). If you'd like I can create a dedicated channel.

[alexiaOkarabi]

@TimidRobot Okay Let me send you the designs I have on slack. Should I send through direct messages or on the general channel

[dhruvkb]

Work done by @techievivek on creativecommons/creativecommons.github.io-source#131 can be used for reference as it has a very minimal design aesthetic. And the SVGs being monochromatic and flat allow reccolouring using CSS which is a huge plus when creating error pages in a design system.

[dhruvkb]

This had come up earlier too at https://github.com/creativecommons/vue-vocabulary/issues/7#issuecomment-558615367.

[kgodey]

I assume this ticket's output should include both developing a component and automation to generate fully self-contained HTML pages from that component. @dhruvkb, if it would make more sense to split the issues up into two separate ones, please go ahead and do so.

[github-actions[bot]]

Stale issue message

[caseynv]

Hi, can I make contributions to this issue for outreachy?

[sushmitaswain1]

Hi, Can I make contributions to this issue?

[brylie]

@caseynv and @sushmitaswain1, I'll assign you both. Please connect on the Creative Commons Community Slack in order to coordinate.

[sushmitaswain1]

Sure Brylie, Will get on with the assignment and let you know on the slack channel

Regards Sushmita

On Sat, Oct 16, 2021, 2:33 PM Brylie Christopher Oxley < @.***> wrote:

@caseynv https://github.com/caseynv and @sushmitaswain1 https://github.com/sushmitaswain1, I'll assign you both. Please connect on the Creative Commons Community Slack https://slack-signup.creativecommons.org/in order to coordinate.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/vocabulary/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQIXIUXUTCUTUQLGPXV75DDUHE5WVANCNFSM4JUDSIYQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.