Problem: LinkBlocks format is not supported in articles

[markholdex]

Figma component design

Figma article design

Solution

Whenever a link (not anchor) is encountered by the renderer parser component, it is parsed and should be displayed as a LinkBlock component inside the article body. Example article: https://holdex.io/c/learn/editorial-guidelines (notice in the beginning we have a link that's displayed as text). To view this article on your local machine, change the parameters following this comment instruction.

Test article available on localhost

[sipofnightshade]

I would like to be assigned to this as my first trial week problem. Could you also please provide further clarification on the proposed solution? Specifically, I would appreciate more details on whether you are expecting the implementation of a new component in code or a design update.

[zolotokrylin]

@gregorymcmillan

1. this issue is assigned to you now
2. the design is ready (see the link to Figma in the description)
3. you need to code it

[sipofnightshade]

Do I also need to create a parser for it or was the parsing already done?

[markholdex]

@gregorymcmillan I have updated description. Let us know if it's more clear. Thx!

[sipofnightshade]

I'm facing an issue atm which has been taking up most of my time so far. I can't understand the way the renderer is structured/how it works as there seem to be svelte files and pug files with similar code as well as a template.pug file which I'm also not certain what it's purpose is. I would like to know the following:

• Where exactly I should import and render the richLink component?
• Where can I find a post with rich links so I can test my component?

[zolotokrylin]

Start here @gregorymcmillan

[zolotokrylin]

Split on few independent PRs/commits.

• start with pure UI (no networking and no controllers/parsers).

[zolotokrylin]

@markholdex @gregorymcmillan When you have a moment, please provide the article which contains a rich link element

[wryonik]

I'll be working on this issue. Please assign it to me

[predrag-us]

@wryonik Assigned.

[predrag-us]

@wryonik Please leave your ETA and attach the PR. Thank you!

[surajsharma]

@markholdex @predrag-us

1) the difference between Link and RichLink components are not self-evident from design or description, please elaborate on this, which additional parameters do you wish rich link to support? i am assuming the incoming stream of message blocks does not differentiate between links.

2) Example of rich link design inside the article from description leads to a screenshot, pls help locate a url to test against

[predrag-us]

@surajsharma

1. Not sure I'm following you. As far as I understand ⏤ you don't see the difference between Link and RichLink?
2. Please see the design instead of the image for a better example, you can find it in the description.

[surajsharma]

@predrag-us you mean this?

[surajsharma]

@predrag-us you mean this?

@markholdex could you pls clarify if this LinkBlock in design is the same as rich link in this context?

[markholdex]

@surajsharma yes. Linkblock component is what we call rich link. Any other questions or problem you encountered?

[surajsharma]

@markholdex thanks for clearing this up! no other question for now

[surajsharma]

@markholdex

Whenever a link (not acnhor) is encountered by the renderer parser component

i understand there is a difference between a simple anchor and a rich link, but the incoming blocks from the google doc do not discern between the two. i assume we have to retain both functionalities and not just display every link in the google doc as a rich link.

in this scenario, i cannot simply write a richlink component and replace it in the bodyrenderer. unless i'm mistaken, and we wish to treat all links as rich link, OR only external links (this can be descerned from url alone) are to be treated as rich link etc... pls advise.

[georgeciubotaru]

@surajsharma

We have an example article http://localhost:3000/c/announcements/article-components

Just uncomment the:

You should see red text in the preview

Regarding how to populate the element: See the open-graph-scraper package and implement and API endpoint that you will call in client and will populate the block

[surajsharma]

@georgeciubotaru thanks! but as soon as i

import ogs from 'open-graph-scraper';

i get an error

[georgeciubotaru]

@surajsharma What are you doing with the ogs package?

[surajsharma]

@surajsharma What are you doing with the ogs package?

just installed it and trying to use it for the link to get og data

[georgeciubotaru]

@surajsharma If you check their docs, you will they that they don't support browser usage, check my comment one more time

[surajsharma]

@surajsharma

We have an example article http://localhost:3000/c/announcements/article-components

this link no longer works cc @georgeciubotaru @markholdex

[georgeciubotaru]

@surajsharma Please check on the main branch, for me works

[Isaacprogi]

@markholdex please where exactly is the issue occuring?.What component or page does the issue occur.What is the test article for

[markholdex]

@Isaacprogi this is not a bug to occur on a specific page or component. The Problem has the Enhancement label which means it's a new feature that requires development. The title denotes that this feature is not supported at all in any of our articles.

To solve the Problem, you must provide a solution that will make sure LinkBlocks are supported.

[markholdex]

Test article is for you to use locally to test if your implementation works or not. As the name suggest, it's for testing purposes.

[Isaacprogi]

@markholdex please can i have a before and after image for the problem and where it should be applicable in the test article. Also I am trying to locate the components or page of the "test article" locally but cant seem to. Does it having a different configuration from the normal c route. The route is working but am trying to find component page

[Isaacprogi]

Also where exactly is the link displayed as text here https://holdex.io/c/learn/editorial-guidelines

[georgeciubotaru]

@Isaacprogi You have the local thread available in the description, check it.

Note: Pay attention to the payload you get from API before it is rendered and you will get the point.

[markholdex]

@Isaacprogi please take a close look at the test article and at the component design in Figma.

[Isaacprogi]

@markholdex Okay understood

[Isaacprogi]

@Isaacprogi You have the local thread available in the description, check it.

Note: Pay attention to the payload you get from API before it is rendered and you will get the point.

@georgeciubotaru not clear on this. Please can you point to

[markholdex]

@Isaacprogi You have the local thread available in the description, check it. Note: Pay attention to the payload you get from API before it is rendered and you will get the point.

@georgeciubotaru not clear on this. Please can you point to

@Isaacprogi please check the description of the Problem. You will find instructions to run local environment there.

When you run locally pay attention to the Payload that needs to be parsed.

[Isaacprogi]

@Isaacprogi You have the local thread available in the description, check it. Note: Pay attention to the payload you get from API before it is rendered and you will get the point.

@georgeciubotaru not clear on this. Please can you point to

@Isaacprogi please check the description of the Problem. You will find instructions to run local environment there.

When you run locally pay attention to the Payload that needs to be parsed.

Okay,clear

[Isaacprogi]

@markholdex this is what i have so far What should replace the title and description of the links

[markholdex]

@markholdex this is what i have so far What should replace the title and description of the links

@Isaacprogi Good progress so far. Don't forget to link your active Pull Request with this Issue as stated in our Principles document.

Regarding the Title and description: They should be taken form the OG meta information of the link.

[Isaacprogi]

Okay