Skip to content

Instantly share code, notes, and snippets.

@Chaitanya-Shahare

Chaitanya-Shahare/gsoc-2024-final-submission.md

Last active October 31, 2024 06:51
Show Gist options
  • Save Chaitanya-Shahare/729343d0ff27e19c0486292ed6c3fcf8 to your computer and use it in GitHub Desktop.
Save Chaitanya-Shahare/729343d0ff27e19c0486292ed6c3fcf8 to your computer and use it in GitHub Desktop.
Download ZIP
Final submission for Google Summer of Code 2024 for LLVM.org Website Redesign Project
Raw
gsoc-2024-final-submission.md

image

LLVM.org Website Redesign Project | The LLVM Compiler Infrastructure | GSoC 2024

Project Goals

The primary objective of this project was to modernize the LLVM.org website by improving its design and usability while making it easier for the community to contribute content. The goals included:

  1. Developing a responsive, accessible, and user-friendly design for LLVM.org.
  2. Building a flexible Hugo theme that allows for straightforward content updates and customization.
  3. Gathering community feedback to incorporate design suggestions and ensure the new site meets user needs.
  4. Documenting the process and configuration options to support future contributors.

Work Completed

RFC Proposal link

  • Drafted and published an RFC (Request for Comments) on the LLVM Discourse forum to introduce the LLVM.org Website Redesign project to the community. This RFC outlined the project goals, proposed design changes, and sought feedback from LLVM contributors and users to align the redesign with community needs. Engaging with community input early in the process helped shape the project's direction and informed design decisions moving forward.

Design and Feedback

  • Initial Design Mockups: Three design mockups were created, drawing inspiration from various sources such as Rust and Swift websites. These were refined based on community feedback and mentor input. designs.
  • Community Feedback Survey: Conducted a survey to gather insights on the design preferences and functional expectations of the LLVM community, resulting in actionable design improvements. form

Development and Implementation

  1. Hugo-based Website Theme

    • Developed a reusable Hugo theme from scratch to make the website modular and scalable, enabling easy replication for other LLVM projects.
    • Separate Repository: Created a dedicated repository (www-template) for the Hugo theme to maintain a clear separation between the theme and website-specific content, ensuring flexibility for future updates.
    • Theme Elements:
      • Responsive Navbar: Built a responsive navigation bar, configurable through hugo.yml, supporting submenus for comprehensive content organization. It dynamically adjusts to desktop and mobile layouts, offering a smooth user experience across devices.
      • Theme Switcher and Footer: Integrated a light/dark mode theme switcher to improve accessibility, along with a fully configurable footer. Both features enhance user experience and customization.
      • Table of Contents: Created a shortcode for automated table of contents, improving navigation on documentation-heavy pages.
      • Extendable Homepage Layout: Developed a homepage with customizable sections (e.g., hero banner, quick links, and feature highlights) to give each site a unique look and feel while using a standardized layout.

  2. Page Creation and Content Management

    • Dedicated Website Repository: Created a repository (www-new) for the LLVM website itself, linking it to the www-template repository to allow seamless theme updates.
    • YAML Data Files for Configurability: Set up data-driven content management through YAML files, enabling easy addition and modification of website sections such as subprojects, Developer Meetings (devmtg), GSoC projects, and Publications.
    • Custom Shortcodes and Markdown Templates: Developed shortcodes and templates to support structured content display, including:
      • Sub Project Cards: Standardized cards to present projects and feature highlights, ensuring consistent design across pages.
      • datamap: Generates entire pages based on YAML data, making page creation efficient and uniform.
      • event_data: Manages and displays metadata for specific events, including dates, locations, and themes.
      • event_posters: Displays event posters within pages, adding visual appeal and relevant context.
      • event_talks: Lists talks within events, organizing speaker information and talk topics.
      • events: Aggregates event details into a unified list, allowing users to browse past and upcoming events.
      • publications: Organizes and displays publications, supporting links to PDFs, authors, or related content.

  3. Testing and Documentation

    • Staging Environment: Deployed a staging version of the website, to allow for comprehensive testing and community feedback.
    • Configuration Documentation: Documented setup instructions for the www-template theme and www-new website repository, detailing steps for:
      • Page Creation: Guidelines for creating new pages, using the datamap shortcode for data-driven page generation.
      • Shortcode Usage: Instructions for using custom shortcodes like table of contents, feedback banner, and project cards.
      • Content Management: Step-by-step guide on modifying content via YAML files, ensuring contributors can add or edit sections with ease.
    • Testing for Responsiveness and Accessibility: Conducted thorough testing on different devices and screen sizes, checking for accessibility features such as proper color contrast, keyboard navigation, and responsive layouts across all pages.

Current State of the Project

The new website has been deployed at www-new.llvm.org and is fully functional. It includes the following core pages and functionalities:

  • Homepage: Modern, responsive, with configurable sections.
  • Subprojects section: Showcases LLVM’s various subprojects with detailed descriptions and relevant links.
  • Features Page: Highlights all the features of LLVM.
  • Developer Meeting Page: Contains a structured format for event details, making it easy to add new events.
  • GSoC and LLVM Projects Pages: Highlight ongoing and past projects, including details of GSoC initiatives.
  • Publications Pages: Contains all the publications related to LLVM.
  • Feedback Button: A community feedback button is live to continually gather user insights.

Commit History

Below is a list of commits, each linked to the relevant GitHub commit for easier review and context.

llvm/www-template

  • 887689d Add Custom 404 page
  • 9a1a242 Fix subprojects CSS
  • 631c893 Add smooth scroll for toc links
  • 6e384b5 Fix toc in datamap.html
  • a229096 Remove date from single page
  • e365d8e Add multiple buttons for banner
  • 1b9344d Add banner partial, configuration & docs
  • e100332 Update README with documentation
  • 3acced6 Home page content can be modified
  • ecedb40 Add configuration for logo
  • 5c6c161 Add configuration to Footer partial
  • 67b667f Fix table of contents with data file
  • 71fafc9 Add datamap shortcode for yml files
  • 9a16d7f Minor fixes
  • d66d6c3 Add Table of contents partial
  • 024e155 Fix website title styles
  • ad958c4 Add basic markdown styles
  • bf5553a Navbar submenu responsive
  • 3aab8d8 Add Hover Menu to navbar
  • dce2c90 Add basic markdown styles
  • 0d9d5cb Add config for hero section
  • dc7e90e Update .gitignore & deleted resources
  • d5392ce Add README.md file
  • baf2f00 Fix dates in upcoming events
  • 6c306ec Hero section links are configurable
  • 6d6e928 Subproject description truncated
  • d0b0d3f Add datafiles for upcoming_events, developer_resources & subprojects
  • 39dc89c Navbar menu is configurable
  • 1067f91 Add hamburger menu for navbar
  • 50f1806 Fix alignment of hamburger menu
  • 88ac70c Add socials icons in getting involved
  • 991f779 Add icons for quick links
  • 2b9bc89 Add quick links in hero section
  • f0344fe Add subprojects section
  • 08242f1 Add Dev. resource & upcoming events section to home page
  • 9a3091d Add homepage structure
  • 91025f4 Add sun icon for theme toggle
  • 2673d5c Add theme toggle functionality
  • 38d12bb Add navbar
  • 757dd26 Add footer
  • 94cecbe Add CSS variables for dark & light theme
  • 5c48afc Added SCSS & CSS resets
  • e44a2c8 Initial Commit

llvm/www-new

Future Work and Next Steps

The project lays a solid foundation, and the following improvements are recommended:

  1. Deploying on llvm.org: Moving the website from www-new subdomain to llvm.org.
  2. Developer Meetings Data: Add all the developer meetings data & create pages for each meeting.
  3. CI for Link Validation: Implement CI to check for broken links and large files automatically.
  4. Enhanced Content Integration: Collaborate with content creators to migrate and enhance content across pages, such as adding publications and developer meeting archives.
  5. Community Onboarding: Provide additional onboarding documentation to encourage contributions from the LLVM community.
  6. Ongoing Content and Design Refinements: Continue gathering feedback to make iterative improvements to the design and content organization.

Challenges and Key Learnings

This project offered numerous technical and collaborative challenges, including:

  • Responsive Design Adjustments: Adapting the design across devices while maintaining usability required meticulous work with CSS.
  • Community Feedback Loop: Incorporating community feedback was key to aligning the design with user expectations but also required iterative changes.
  • Configurable Page Layouts: Creating configurable page layouts and templates highlighted the importance of balancing customization with usability.

This project reinforced the value of community-driven development, modular design principles, and rigorous documentation to support future maintainability.

Along with technical learning I also got some personal takeaways from this project as well. I understood the importance of being proactive, communicating well & being organized.

This GSoC project has established a modernized website that is responsive, community-driven, and primed for future enhancements. The work done and documentation provided will support LLVM’s ongoing efforts to make the website a valuable resource for developers, contributors, and users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment