Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce better URL paths / SEO optimization #724

Closed
6 of 8 tasks
ori-near opened this issue Apr 8, 2024 · 8 comments
Closed
6 of 8 tasks

Introduce better URL paths / SEO optimization #724

ori-near opened this issue Apr 8, 2024 · 8 comments
Assignees
@petersalomonsen
Milestone
🗒️ Blog V2

Comments

@ori-near
Copy link
Collaborator

ori-near commented Apr 8, 2024 •
edited by petersalomonsen
Loading

Problem
Currently, we don't have easy URL paths for DevHub content. Examples:

This makes it difficult to share links and optimize for SEO indexing.

User Stories

  1. As a user, I want to have a memorable easy link so I can easily access and share DevHub content. Examples:
  • Blog article: neardevhub.org/blog/article-slug (may need to introduce slug for blogs)
  • Community: neardevhub.org/community/protocol
  • Community About: neardevhub.org/community/protocol/about

  1. As a user, I want to easily share links on social media platform and have the appropriate meta information displayed (e.g. DevHub image, title, description, etc).

  2. As a DevHub user, I want to easily discover DevHub content on Google (e.g. https://developers.google.com/search/docs/crawling-indexing/special-tags).

Acceptance Criteria

Tasks
Beta Give feedback
  5. buttons for sharing in the UI that create links for social media #827
  8. blog urls ( /community/webassemblymusic/blog/welcome-to-my-blog-qwerty ) #828
@ori-near
Copy link
Collaborator Author

ori-near commented Apr 8, 2024

@frol Please fill out this ticket with more technical details.

@ori-near ori-near changed the title Introduce better URL paths Introduce better URL paths / SEO optimization Apr 8, 2024
@frol
Copy link
Collaborator

frol commented Apr 17, 2024 •
edited
Loading

Technical proposal:

  1. Host a serverless web4 app that will serve HTTP traffic for https://devhub.near.page. Check out these examples in Rust: minimal demo, HTML page demo, even more involved demo
  2. For search bots and link previews: The app has to implement a custom routing to do a bit of server-side rendering, so URLs like /communities/<handle>, /proposals will serve HTML with SEO headers
  3. For regular users: The app should render a simple preview of the page (an announcement, discussion, blog post, or proposal, similar to how Telegram does it, open this link on browser) and a BOS Gateway Selector, so the user can choose to be redirected to the relevant DevHub page on near.org or near.social
  4. Introduce more "Share" buttons in the DevHub UI that will use https://devhub.near.page shortlinks

The rationale for using devhub.near.page over neardevhub.org is that we dogfood on using NEAR Web4 tech and we don't need to manage any other external services (we just need to extend our devhub contract).

Alternatives:

  • Use some serverless solution (e.g. we use https://shuttle.rs for kyc-proxy) - it is also a pretty good option, but it won't be on NEAR while we have a near-native solution (web4)
  • Use DevGov validator server to host the web-server - it is a single point of failure, so I don't want to go that route

@petersalomonsen petersalomonsen self-assigned this Apr 26, 2024
@petersalomonsen petersalomonsen mentioned this issue Apr 27, 2024
Merged
@petersalomonsen
Copy link
Collaborator

Some example links:

@petersalomonsen
Copy link
Collaborator

Have a look at NEAR-DevHub/neardevhub-contract#111 which resolves 6 of 8 tasks here.

@ori-near ori-near modified the milestones: blog, 🗒️ Blog V2 May 3, 2024
@ori-near ori-near mentioned this issue May 3, 2024
Closed
frol added a commit to NEAR-DevHub/neardevhub-contract that referenced this issue May 16, 2024
@petersalomonsen @frol
social media links using web4 (#111)
19c15a3 
This PR adds the `web4_get` method to the contract, so that when merged,
there will be a website at https://devhub.near.page

You can preview it at https://devhublink.testnet.page/

<img width="612" alt="image"
src="https://github.com/NEAR-DevHub/neardevhub-contract/assets/9760441/c0457ee5-df36-4549-97c2-a6a1a5fb77b3">

Note that the preview deployment does not have access to content, so it
will not be able to display proper content for preview links, which is
provided by the contract. A test community "webassemblymusic" is created
for the preview deployment, to demonstrate the preview links. You can
test it at https://devhublink.testnet.page/community/webassemblymusic.
You may also call the preview contract to create proposals and other
communities to verify that social media headers are also populated with
the content.

For now the first part of the part is always mapped to the `page`
property, so that e.g. `/proposals` are translated to
`/devhub.near/widget/app?page=proposals`. Also the second part
translates to `handle` for community ( `/community/webassemblymusic` ->
`/devhub.near/widget/app?page=community&handle=webassemblymusic` ), or
to `id` for proposal `/proposal/5` ->
`/devhub.near/widget/app?page=proposal&id=5`

In addition to metadata for social media links, and SEO friendly URLs,
the actual content is viewed as well. This is done using
[near-bos-webcomponent](NEARBuilders/near-bos-webcomponent#10)
which is also used for playwright tests in the DevHub frontend. A PR
have also been created there to support the SEO friendly URL paths
created here.

The `html-escape` crate is added to ensure that descriptions with html
tags are escaped for the generated HTML ( to avoid malicious scripts etc
).

Examples:

- https://devhublink.testnet.page/community/webassemblymusic ( This
community is also created in the testnet contract )
- https://devhublink.testnet.page/community/chain-abstraction ( not
created in the testnet contract, so metadata is missing, but the content
shows )
- https://devhublink.testnet.page/proposal/0 ( Also has a proposal
created in the testnet contract )
- https://devhublink.testnet.page/proposal/3 ( not created in the
testnet contract, so metadata is missing, but the content shows )

Part of NEAR-DevHub/neardevhub-bos#724


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `web4` module to handle web requests, dynamically
generate HTML content, and encode responses.
- Added a public function for fetching web content based on request
paths, enhancing user interaction with community and proposal pages.

- **Documentation**
	- Enhanced documentation for new web request handling functionality.

- **Dependencies**
	- Added `html-escape` library to support HTML content generation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Vlad Frolov <[email protected]>
@petersalomonsen
Copy link
Collaborator

I believe we can close this as we now have https://devhub.near.page

@ori-near
Copy link
Collaborator Author

I believe we can close this as we now have https://devhub.near.page

Hi @petersalomonsen – it seems like we still don't have short URLs for things like communities:
/community/protocol. When I go to https://devhub.near.page and click on the protocol community, I see this long URL: https://devhub.near.page/devhub.near/widget/app?page=community&handle=protocol

@petersalomonsen petersalomonsen mentioned this issue Jul 18, 2024
Open
@petersalomonsen
Copy link
Collaborator

petersalomonsen commented Jul 18, 2024 •
edited
Loading

I believe we can close this as we now have https://devhub.near.page

Hi @petersalomonsen – it seems like we still don't have short URLs for things like communities: /community/protocol. When I go to https://devhub.near.page and click on the protocol community, I see this long URL: https://devhub.near.page/devhub.near/widget/app?page=community&handle=protocol

Let's create separate issues for these places where it is missing. I've added #882 for this particular case.

Also note that it is unfortunately not possible to have the short URLs in the links within the page, since it will not work on the near.social or near.org gateways. These short URLs only work on devhub.near.page, so as long as we use other gateways, we can only provide short URLs through "share link" buttons.

@petersalomonsen
Copy link
Collaborator

btw @ori-near we do in fact have the short URL https://devhub.near.page/community/protocol

It is just that the "copy link" button does not generate it, so I'll rephrase the new issue according to that.

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

@petersalomonsen petersalomonsen

Labels
None yet
Projects
NEAR DevHub Project
Status: ✅ Done
Milestone
🗒️ Blog V2
Development

No branches or pull requests
3 participants
@frol @petersalomonsen @ori-near