[META] Update of Gnoweb for a User-Centric Experience

[alexiscolin]

👋 Disclaimer: The following is a preliminary proposal to guide discussions and development around the future of Gnoweb. Please note that this is subject to change as we gather feedback and refine the vision. Don't take it word for word. Moreover, this issue is intended to serve as a meta-issue, centralizing discussions and linking to dedicated issues for each topic or feature mentioned.

📣 Note: A WIP PR introducing this new codebase is expected to arrive shortly. Also related issues will be linked very soon.

---

The goal of this overhaul is to transform Gnoweb into a universal browser for realms, with no dedicated branding (realm agnostic), focused on providing a seamless user experience rather than catering solely to developers. This new version will prioritize security, usability, and rapid feature delivery, allowing us to iterate quickly with new features added on a weekly basis.

Context

The current version of Gnoweb has several technical and design limitations that slow down development and make adding new features cumbersome. This initiative aims to rethink its architecture, design, and functionalities to meet the following goals:

• Stop using gnoweb as gnoland website.
• Enable easy extension of Markdown to support reusable components and layouts.
• Shift the focus towards end-users, simplifying the navigation and interaction with realms.
• Improve security and performance while ensuring flexibility for future updates.

Organisation

The implementation of these changes will be structured to prioritize a smooth transition towards the mainnet launch. We plan to roll out a version 0 (v0) release that introduces the new design system and UI improvements while maintaining the existing core functionality. This initial release will serve as a foundation, allowing the team to test and refine the new interface before adding more advanced features. The goal is to incrementally build up to the mainnet launch, ensuring stability and usability throughout the process.

v0 Release (Initial Rollout) - ⚠️ WIP

The initial release will focus on integrating the new design and foundational elements, including:

• Updated UI/UX with a neutral, realm-agnostic design.
• Fully functional Table of Contents (ToC) for easier navigation.
• Core features maintained from the current version:
  • Realm reading without HTML, preserving security and simplicity.
  • Source code viewing with syntax highlighting.
  • A functional breadcrumb navigation system.
  • The existing Help page for function exploration and interaction.

Once the v0 released

We will start adding new features (listed bellow) iteratively. This approach will allow the team to dogfood and test new functionalities thoroughly before they are pushed to mainnet. It also provides flexibility to adjust features based on feedback and ensure seamless integration.

To facilitate this development process, we might likely create a dedicated branch on Gno containing the new Gnoweb codebase. This will allow for isolated testing and experimentation without affecting the existing production environment, ensuring that any changes are fully vetted before going live.

Deliverables

This main issue will track all related sub-issues:

— Mainnet —

UI/UX Redesign

Updating the user interface to be more intuitive, modern, and aligned with the user-centric vision. This includes redesigning navigation, search functionality, breadcrumbs, and realm displays. Moreover, Gnoweb will now be positioned as an independent reader of realms, fully distinct from gno.land itself. The site gno.land will be treated as just another realm within Gnoweb, rather than being tightly integrated.

This means that Gnoweb will no longer serve as the main site for gnoland, removing general navigation links, Gnoweb-specific branding, and design patterns that were previously tied to Gno. Instead, the UI will adopt a neutral and flexible style that can display any realm seamlessly and pleasantly, without imposing any predefined aesthetics. The goal is to provide a consistent, frictionless experience for users regardless of the realm being viewed, ensuring that the interface is optimized for diverse content while remaining user-friendly.

Code Refactoring & Optimization

Refactoring the codebase to enhance maintainability and security. Reducing attack vectors by removing unnecessary JavaScript dependencies, simplifing the system, and leverages Go templates for a more secure, efficient architecture.

Design System Overhaul & Markdown Extensions

Refactoring the design system to support an extended Markdown syntax with components (alerts, columns, jumbotrons, etc.), focusing on user-friendly layouts and responsive design. HTML will be disabled by default, with a whitelist of approved attributes to ensure both security and consistency. This approach aims to harmonize content across various readers, as the content is in Markdown to remain platform-agnostic—whether viewed in a mobile app, terminal, or web interface.

The goal is to develop a Markdown format that not only allows for layout enhancements (e.g., columns, alerts) but mau also introduce interactive components (e.g., embedded playgrounds, interactive elements). This will enable rich content while maintaining compatibility across different platforms and ensuring a seamless user experience.

Auto-Generated Table of Contents (ToC)

Adding an auto-generated Table of Contents for each realm page, improving navigation for longer content. This feature will include an option to disable the ToC for realms that require full-width layouts, allowing for a flexible user experience that adapts to different content structures.

Namespaces and URL Structure Improvements

Adding support for new namespaces (e.g., /u/ for user profiles) and improving the URL structure to make navigation more intuitive and user-friendly.

New RPC Endpoints & API Integrations

Introducing new RPC endpoints to support the revamped structure, such as fetching user data, realm metadata, and other new functionalities.

Security Audit & Code Cleanup

Conducting a thorough review of the existing codebase to address security vulnerabilities, streamline code, and ensure maintainability for future iterations.

Add gnoweb Query system

To enhance the user experience, we propose enabling the ability to open the sidebar and populate the help page directly (or any other cmd to gnoweb itself) from a URL. This could be achieved by adding specific query parameters, such as $side=blabla, allowing users to link directly to specific information or commands within Gnoweb. This feature would streamline navigation and provide a more intuitive way for users to access relevant content or functionality directly from a shared link.

Add a 404 template

Improve the rendering by adding a 404 template when realms or packages do not exist. This will replace the 'internal error' text that breaks the UI.

---

— Post Mainnet — ⚠️TBD

Metadata Section Enhancements

Creating a dedicated section on each page to display comprehensive metadata related to the realm, the page, and the underlying blockchain. This would provide detailed insights such as contract creation dates, update history, contributors, transaction logs, and network-specific information like block height and validator details. This feature aims to enhance transparency and offer users an in-depth understanding of the current realm's context.

Auto-Generated Documentation for Realms

Extending the existing "Help" functionality to a fully-fledged, auto-generated documentation system similar to pkg.go.dev. This enhancement would list all available functions within a realm, allowing users to input variables directly into the documentation interface to generate terminal commands. It would also provide an interactive view of function signatures, parameters, and practical usage examples, streamlining the process of understanding and utilizing realm functions.

Enhanced Interaction with Realms

Enhancing direct interaction with realms within Gnoweb by enabling users to execute functions, update states, and seamlessly interact with realms. This integration could display responses and debug outputs directly in the browser, creating a more immersive experience for both users and developers engaging with the realm. A potential solution is to rely on wallet extensions to handle the interaction. By injecting buttons directly into Gnoweb via dedicated scripts provided by the extensions, Gnoweb itself avoids handling JavaScript or managing sensitive interactions, thus maintaining security. This approach leverages the trust users place in their installed wallet extensions to manage secure operations effectively.

Enrich Source Code Features

Upgrading the current code display with rich features beyond basic syntax highlighting. This includes code copy-paste functionality, the ability to create permalinks, advanced search capabilities within the code, and displaying the current state of variables, including nested structures. These enhancements might support debugging and make realm exploration more intuitive by integrating developer tools similar to browser consoles.

Sidebar Navigation & Dev Tools

Introducing a collapsible sidebar that allows users to view source code, documentation, and metadata simultaneously without navigating away from the current realm. This sidebar will also support cross-linking between the realm content and additional resources, facilitating a streamlined workflow. Inline editing and direct interactions with the realm will be possible, enhancing the developer experience.

Global Search Functionality

Implementing a robust search bar that allows users to quickly find and navigate realms, packages, functions, (and documentation?), significantly improving accessibility and discoverability within the platform.

Profile Pic & User Space Enhancements (Teams)

Adding support for user-specific profiles with avatars for realms, similar to GitHub organization profiles. This enhancement would include customizable user spaces, enriched metadata, and activity logs, providing a more personalized experience while exploring realms and packages.

Explore Page & Realm Discovery

Potentially introducing an explore page to showcase featured realms, trending projects, and newly created realms. This will help users discover interesting content, similar to GitHub’s explore feature, fostering a more engaging and community-driven experience.

Starring & Bookmarking Realms

Implementing functionality that would allow users to star or bookmark realms, making it easier to track updates and revisit projects of interest. This may provide a way to follow developments and stay connected with favorite realms, akin to GitHub stars.

---

Current UI work: (⚠️ WIP - iterations in process)