Shorten link in post

General
1

I’m using
PostRepository.createPost({ ... data: { text: "....."} ... })

Text already displays a link as I need.
Then I just want to add more parameter to the link, which is quite long.
So, any trick to shorten the link? I have tried to use <a href=… but it doesn’t work

2

Hello,

Could you please share some code sample so we can help you debug? It seems unrelated to Amity Social Cloud, but maybe we can give it a try together?

Sincerely,
J.

3

I didn’t make myself mostly clear. I apologize for that.

I’m using
PostRepository.createPost({ targetId: communityId, data: data })

and the data is, for example,
text: "https://forum.amity.co/t/shorten-link-in-post\n Shorthen link to post

Does it a way to shorten the https://forum.amity.co/t/shorten-link-in-post
or embed it into something like ‘Shorten-link-in-post’

Best Regards
Tod

4

Oh i see. What you look for is a way to have nice clickable links rather than the url printed fully.

For this, you have a couple of options:

The easiest is to use a markdown parser. You can find many on npm. Your text should look like [Link text](link url) and your parser will do the job.

Be careful that it may have some impact if one of your client does not use a markdown parser, and also that the events in google pubsub will also send data with the markdown format (after all, your post.data.text is just a string)

A second option is to implement your own smart format for transforming your text into something more beautiful. One example would be to save the index range of your raw string, and matching transformation into the metadata of the post.

For example, you could create a post similar to:

{
  data: { text: "click here!" }
  metadata: {
    textTransform: [{
      type: "link",
      from: 6, // start index for "here"
      to: 10, // // end index for "here"
      value: "https://.....",
    }]
  }
}

…and have a function such as:

const linkTransform = ({ text, from, to, value }) => {
  return [
    text.slice(0, from),
    `<a href="${value}">${text.slice(from, to)}</a>`,
    text.slice(to),
  ].join('')
}

const transformFns = {
  link: linkTransform
}

export const transformText = (post) => (
  (post.metadata?. textTransform ?? [])
    .reduce((text, { type, ...args }) => {
      return transformFns[type]?.({ ...args, text }) ?? text
    }, post.data.text ?? '')
)

… which will have the benefit to not have a special format within the data.text property, but will require you to code your own parser.

Also please note that this 2nd approach puts the link in metadata and so, the link will not be inside data.text which has a consequence on our allow/block list feature.

Let me know if you have questions,
J.

1 Like
5

Sorry for missing for a while.

Based on my understanding, the second method is, I have to passing the display text and the URL through the metadata.
Then adding some function in the community side to embed the URL into display text.
Please tell me if I’m misunderstanding something.

Best Regards
Tod.

6

Hi @JustTod ,

The 2nd method you’ll pass only the url in the metadata. the displayed text will remain in the data.text property of the post.