pbrucla / pbrucla.github.io Goto Github PK

• Implement default page template in default.html.
• Reference https://github.com/bliutech/cyber.bliu.tech/blob/main/_layouts/default.html for a general idea to properly allow Jekyll templating to occur.
• Implement default include for head.html. Reference https://github.com/bliutech/cyber.bliu.tech/blob/main/_includes/head.html for general idea.

• add code block styling support http://jwarby.github.io/jekyll-pygments-themes/languages/java.html
• add mermaid support https://mermaid-js.github.io/mermaid/#/
• add mathjax support https://docs.mathjax.org/en/latest/input/tex/html.html

update CI/CD to include

• GitHub Action for Jekyll builds and deployment to GitHub pages
• content build validation on pull requests
• potential research area: https://techroads.org/building-a-caddy-container-stack-for-easy-https-with-docker-and-ghost/

• implement CTFs page for team. Reference Figma for details https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1
• dynamically add data using _data/ctfs.yml
• style using SCSS

• update head.html to contain rich SEO similar to https://acmcyber.com/
• add rich open graph SEO tags for rich embeds https://ogp.me/
• add robots.txt + sitemap.xml

Currently, the script to update the YML file to see which CTFs we have competed in recently to add to the /ctfs page is run via only when an update to the main branch has occurred. Making this run as a CRON Job would make more sense to allow for the page to update regularly for static rendering.

The amount of write-ups we currently have is getting a lot bigger and I anticipate it will grow a lot larger as the years progress for our team. A nice feature to add would be to do paging for the number of blog post shown on each page so that we can allow users to not have to scroll down a really long page of blog content.

Currently <blockquote>s are not supported for blog posts. Look into specific styling for that.

We want to be able to search for a specific post on the Blog page or filter down by category. Exact categories TBD, but will likely include: binary, cryptography, network, osint, pwn, rev, web, miscellaneous

A highly demanded feature by one of our teammates involves adding canonical links to blog posts to appropriately allow better SEO for their blog. 💀 This would be nice to add as an optional field to any post to populate the page head/metadata with the canonical link. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#canonical

• reference Figma to implement loading page. https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1
• Implement first basic layout using SCSS and then add animation

Adjust SEO to include Open Graph meta descriptions conditional to each blog post.

Website doesn't seem to properly render LaTeX, even though it works locally.
Example here

• implement team members page. See Figma for design reference. https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1
• dynamically add team members using _data/members.yml
• stylize using SCSS

PBR needs a team website to be the central location for all of our team's content. Ideally, this will developed in a static site generator like Jekyll. The following is a list of potential content to be shared on this site.

• contact information (CTFTime, email, Discord)
• team members (simple profiles)
• write ups (contain a feed of write ups for CTFs PBR attends)
• Home + About pages (include information about the team and how to join PBR if you are a UCLA student)

Something we did not consider when designing / implementing this website was what the mobile view should look like. This would be a nice feature to have on the next iteration.

Implement an image slider on the home page to show all of the different team photos that we have. Here is a potential reference. https://dev.to/code_mystery/automatic-image-slider-using-html-css-javascript-nf8

Footer position attempts to align with the text aligned to the second to last row. This is close to the bottom and more spacing should probably be added to address this issue.

• implement layout for post template. Reference https://github.com/bliutech/cyber.bliu.tech/blob/main/_layouts/post.html for a general idea
• add styling using SCSS
• add different colors for different tag categories

Due to a min-height, images are incorrectly cropped on some of the blog pages. Removing the min-height would probably be the easiest fix but need to ensure that styling remains robust.

From Incident Response writeup.

Desktop View:

Mobile View:

• remove unnecessary boilerplate files
• add structure folders for starter template for Jekyll site
• add starter files for each page structure
• add linking SCSS file to allow for modular construction

Implement footer based on Figma design (https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1)

• add footer content
• add contact information
• stylize it using SCSS

• Implement home page layout. Refer to Figma for details. https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1
• add filler text
• stylize using SCSS

Currently it appears we have actions running twice for CI/CD to deploy to GitHub Pages. This may because we are triggering out own action + whatever default GitHub Pages action there is. Potentially, this could be solved by adding .nojekyll. Some investigation needed. https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

Implement the navigation bar shown in the Figma design (https://www.figma.com/file/m9sfSZsTvvUwLczBbxYLNo/PBR-Team-Site?node-id=0%3A1&t=toCxXkHwDwIl8NxG-1).

• add the page layouts (https://www.w3schools.com/css/css_navbar.asp)
• stylize using SCSS
• ensure that links to all pages work properly

Reference https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp. Scrollbar is currently appearing to the opening animation. Remove for convenience.

!!!