Linkify words in post

theme-component

#47

My users reported the issue…I reproduced the issue with Chrome 66.0.3359.181

Issue shows even with default or empty list.


#48

In which section would this be added?


#49

have you checked the link? here is it again:

As you can see, the code was added to common/head_tag.html file right after line 36.

I am having another issue (unrelated to the one above, since I downgraded back to 2.0 stable):

It seems that the ~ character in URLs breaks links generated by linkify.
I tried to escape it like this: \~. but then the output is /~.

Any ideas?


#50

Yeah where exactly is that file to place it? looking thru /var/ I couldnt see anything and not not that experienced with docker.

Under themes, common in the head section I dont seen any file where I can place it after line 36.


#51

just copy the theme component to your own github repo and make the change there.
then you can install the theme from git. check the link in the first post. it’s all documented


#52

Ah makes sense. Thank you!


#53

I was able to resolve the issue myself.

Solution: urlencode the special character(s) or even the whole URL on a site like https://www.url-encode-decode.com/

So the ~ becomes a %7E in the URL. That way the link will be added in the correct manner.


#54

It seems that linkify is not able to detect phrases e.g. when they are surronded by special characters like brackets (). Anyone have an idea how to fix that?


(Dmitry Demenchuk) #55

I have an experience building such feature, on Drupal (word_link module) websites and then in an SPA (word-link lib) websites.

The way it currently works, I have a spreadhead on Google docs with words and links. Google docs have a possibility to share documents as CSV files.

On a website, you have a js file which requests that Google Docs Spreadsheet, and replaces text with given links using word-link lib.

Benefits of that method are, you get for free a sort of links management page with access settings, so you can let only a few people edit it. And google caches it for you.

As a downside, you may need to write your own CORS proxy for that.

JavaScript code on a client will look like below:

const text = 'foo bar baz';
const words = [
  {
    text: 'foo',
    url: 'https://foo.com'
  }
];

function replace(text, words) {
  return words.reduce(function(text, word) {
    return WordLink.apply(text, word.text, word.url)
  }, text);
}

console.log(replce(text, words)); // "<a href="https://foo.com">foo</a> bar baz"

#56

That is awesome!

How hard/easy is it to implement something similar to linkify?


(Dmitry Demenchuk) #57

By the first look on discourse-linkify-words/head_tag.html at master · discourse/discourse-linkify-words · GitHub It looks like you need to replace middle part of a script.

  1. Attach word-link script, so WordLink module is available in a scope.
  2. Get words to be replaced from settings.linked_words variable.
  3. Apply WordLink to the text like the following:
const linkify = function(element) {
  const newElement = element.cloneNode(true);

  newElement.innerHTML = WordLink.apply(element.innerHTML, word, url);
  
  return newElement;
};

api.decorateCooked(linkify);

I haven’t tested the code, it may require some corrections.


How to develop custom themes
(Daniel Hollas) #58

Hi there! There is a small limitation in this otherwise awesome theme. If the word is preceded or followed by parentheses, it will not be matched.

@sam thinks this is a reasonable thing to fix, providing there is not a catch :slight_smile:


(Sam Saffron) #59

@Southpaw would you be fine with this change? Also… what about ] } etc?


(Southpaw) #60

Yes, this would be an improvement for us, as well.

We do have a very active user who uses square brackets rather than parenthesis, so I’d vote for them, too.

What about end-of-sentence punctuation? I’ve found times when I’ve had to restructure sentences so a period, question mark or exclamation point doesn’t spoil the magic.

Like here, where I wanted to simply ask, “Could you try operating the phone in Safe Mode?”

Still loving this theme, by the way, and thank you for asking!


(Daniel Hollas) #61

Btw: need to add quotation and exclamation marks as well…


(Daniel Hollas) #62

Period should already work. :slight_smile: Just noticed the problem with ? and ! as well, but you were quicker. :slight_smile:


(Southpaw) #63

Ha! You’re right. I’ve been avoiding them out of an over-abundance of caution.


(John Waltrip) #64

I’ve been thinking of creating a glossary in our forum, and this seems like a great way to make it actually useful. I’m wondering how others may have implemented glossaries for their forum? Did you put each word onto it’s own topic? The entire glossary into a single topic? Something else?


(Brahn) #65

Excuse my lack of context but why not just RegExp("(\\b)" + escapedWords + "(\\b)", "ig")


(Sam Saffron) #66

This could work… I guess we don’t want _test_ to be linked.

@danekhollas feel free to send in a PR for the component looks like the consensus is that it makes sense to add more stuff. I guess I support ([{}])?;!