feat(gnoweb): user template #4024

alexiscolin · 2025-03-28T07:35:33Z

⚠️ WIP: New User/Team Profile Page Template

Description

This PR introduces a new template for user and team profile pages, accessible via the new u/ handle. This is a significant step in improving the user experience on gno.land by providing dedicated profile pages similar to GitHub's user profiles.

- Design is still WIP - some features and info will be removed or added

Features

Profile Header

User/team avatar
Display name and username
Quick access to contributions section
Appart from username and contributions, other sections are optionals

Main Content Area

Realm content rendering (similar to GitHub's README)
Contributions section with:
- Filterable list of packages (All/Realms/Pures)
- Contributions
- Package size information
- More to come

Sidebar

User/team bio
Social links with icons (GitHub, Twitter, Discord, etc.)
Team memberships (or Users for team page)
Quick navigation links

Technical Details

URL Structure

New u/ handle for user profiles
Example: gno.land/u/username

Template Structure

Added a filter CSS component
Mobile-friendly design
Contribution sorting (WIP)

Screenshots

Gno2D2 · 2025-03-28T07:36:44Z

🛠 PR Checks Summary

🔴 Changes related to gnoweb must be reviewed by its codeowners

Manual Checks (for Reviewers):

IGNORE the bot requirements for this PR (force green CI check)

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🔴 Changes related to gnoweb must be reviewed by its codeowners
🟢 Pending initial approval by a review team member, or review from tech-staff

☑️ Contributor Actions:

Fix any issues flagged by automated checks.
Follow the Contributor Checklist to ensure your PR is ready for review.
- Add new tests, or document why they are unnecessary.
- Provide clear examples/screenshots, if necessary.
- Update documentation, if required.
- Ensure no breaking changes, or include BREAKING CHANGE notes.
- Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: alexiscolin/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/components/layout_index.go)

Then

🔴 Requirement not satisfied
└── 🔴 Or
    ├── 🔴 This user reviewed pull request: alexiscolin
    └── 🔴 This user reviewed pull request: gfanton

Pending initial approval by a review team member, or review from tech-staff

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 Not (🔴 Pull request author is a member of the team: tech-staff)

Then

🟢 Requirement satisfied
└── 🟢 If
    ├── 🟢 Condition
    │   └── 🟢 Or
    │       ├── 🔴 At least 1 user(s) of the organization reviewed the pull request (with state "APPROVED")
    │       ├── 🔴 At least 1 user(s) of the team tech-staff reviewed pull request
    │       └── 🟢 This pull request is a draft
    └── 🟢 Then
        └── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)
If
🟢 Condition met
└── 🟢 On every pull request
Can be checked by

Any user with comment edit permission

codecov · 2025-03-28T07:42:51Z

Codecov Report

Attention: Patch coverage is 2.70270% with 144 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
gno.land/pkg/gnoweb/handler.go	1.04%	94 Missing and 1 partial ⚠️
gno.land/pkg/gnoweb/components/view_user.go	0.00%	47 Missing ⚠️
gno.land/pkg/gnoweb/components/layout_index.go	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

alexiscolin · 2025-03-31T06:13:57Z

@gfanton I think we can start with this layout.

moul · 2025-04-01T08:48:14Z

gno.land/pkg/gnoweb/handler.go

+				Type: components.UserLinkTypeLinkedin,
+				URL:  "https://linkedin.com/" + username,


Should we link to LinkedIn? I need feedback from the marketing team on the reasons why.

Actually, it's really open to discussion right now. I added a list of "most famous" links as example, in order to let people discuss the need.

We can get rid of it (and other) or/and add other ones I may have forgotten (if it makes sense)

moul · 2025-04-01T08:48:37Z

gno.land/pkg/gnoweb/handler.go

+				Type: components.UserLinkTypeLink,
+				URL:  "https://example.com/" + username,


don't forget to remove this.

Sure, this is a bad mockup before the data will be retrieve from the right place

moul · 2025-04-01T08:50:10Z

gno.land/pkg/gnoweb/handler.go

+	contributions := []components.UserContribution{
+		{
+			Title:       "gno-blogpost",
+			Description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",


I think most packages won't have a description. We may need some of them to specify a description, possibly with comments. However, consider that this will be very irregular. I suggest you plan for the following now:

No description

Single-line description

Multi-line description to be stripped

moul · 2025-04-01T08:51:02Z

gno.land/pkg/gnoweb/handler.go

@@ -183,6 +187,103 @@ func (h *WebHandler) GetRealmView(gnourl *weburl.GnoURL) (int, *components.View)
 	})
 }

+// GetUserView returns the user profile view for a given GnoURL.
+func (h *WebHandler) GetUserView(gnourl *weburl.GnoURL) (int, *components.View) {
+	username := strings.TrimPrefix(gnourl.Path, "/u/")


It works now, but I believe we will have subpages for users, pagination, etc. I'm not sure if everything will rely on queries, but it's fine to use the current routing mechanism for now.

moul · 2025-04-01T08:53:27Z

gno.land/pkg/gnoweb/components/view_user.go

+}
+
+// FormatRelativeTime formats a time into a relative string (e.g. "1 month ago")
+func FormatRelativeTime(t time.Time) string {


move these helpers into template.go

moul

I like the direction it takes. We'll rely on missing features such as the "package listing" and possibly some additional package metadata through comment extraction. I suggest we maintain this direction while considering a more minimal initial version that we can merge early and then expand.

feat: user template

ba77cac

github-project-automation bot added this to 🧙‍♂️gno.land core team and 💪 Bounties & Worx Mar 28, 2025

github-project-automation bot moved this to Triage in 🧙‍♂️gno.land core team Mar 28, 2025

alexiscolin marked this pull request as draft March 28, 2025 07:35

alexiscolin self-assigned this Mar 28, 2025

github-actions bot added the 📦 ⛰️ gno.land Issues or PRs gno.land package related label Mar 28, 2025

alexiscolin added the 🌍 gnoweb Issues & PRs related to gnoweb and render label Mar 28, 2025

Gno2D2 requested a review from gfanton March 28, 2025 07:36

alexiscolin added 2 commits March 28, 2025 16:36

Merge branch 'master' into feat/gnoweb-userpage

e286ce6

feat: user template

d763d14

alexiscolin added 4 commits March 28, 2025 17:54

Merge branch 'master' into feat/gnoweb-userpage

e0ba55f

feat: add css filter system

4012f16

style: space

311e632

style: long description

8348289

leohhhn self-requested a review March 28, 2025 11:32

alexiscolin added 2 commits March 29, 2025 18:37

feat: package counter and responsive

fb2b27e

chore: remove static

8c03d90

alexiscolin assigned gfanton Mar 29, 2025

style: margin on no realm case

3ce7de9

moul reviewed Apr 1, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gnoweb): user template #4024

feat(gnoweb): user template #4024

alexiscolin commented Mar 28, 2025 •

edited

Loading

Gno2D2 commented Mar 28, 2025 •

edited

Loading

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Then

If

Can be checked by

codecov bot commented Mar 28, 2025 •

edited

Loading

alexiscolin commented Mar 31, 2025

moul Apr 1, 2025

alexiscolin Apr 1, 2025

alexiscolin Apr 1, 2025 •

edited

Loading

moul Apr 1, 2025

alexiscolin Apr 1, 2025

moul Apr 1, 2025

moul Apr 1, 2025

moul Apr 1, 2025

moul left a comment

		Type: components.UserLinkTypeLinkedin,
		URL: "https://linkedin.com/" + username,

		Type: components.UserLinkTypeLink,
		URL: "https://example.com/" + username,

feat(gnoweb): user template #4024

Are you sure you want to change the base?

feat(gnoweb): user template #4024

Conversation

alexiscolin commented Mar 28, 2025 • edited Loading

⚠️ WIP: New User/Team Profile Page Template

Description

Features

Profile Header

Main Content Area

Sidebar

Technical Details

URL Structure

Template Structure

Screenshots

Gno2D2 commented Mar 28, 2025 • edited Loading

🛠 PR Checks Summary

Manual Checks (for Reviewers):

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Then

If

Can be checked by

codecov bot commented Mar 28, 2025 • edited Loading

Codecov Report

alexiscolin commented Mar 31, 2025

moul Apr 1, 2025

Choose a reason for hiding this comment

alexiscolin Apr 1, 2025

Choose a reason for hiding this comment

alexiscolin Apr 1, 2025 • edited Loading

Choose a reason for hiding this comment

moul Apr 1, 2025

Choose a reason for hiding this comment

alexiscolin Apr 1, 2025

Choose a reason for hiding this comment

moul Apr 1, 2025

Choose a reason for hiding this comment

moul Apr 1, 2025

Choose a reason for hiding this comment

moul Apr 1, 2025

Choose a reason for hiding this comment

moul left a comment

Choose a reason for hiding this comment

alexiscolin commented Mar 28, 2025 •

edited

Loading

Gno2D2 commented Mar 28, 2025 •

edited

Loading

codecov bot commented Mar 28, 2025 •

edited

Loading

alexiscolin Apr 1, 2025 •

edited

Loading