From e95983f5dfe8fba7852a6ac1a42c2048e83db03d Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Thu, 4 May 2017 22:52:08 +0900 Subject: [PATCH] Decode IDNA in PreviewCard (#2781) --- .../features/status/components/card.js | 18 +++++++++++------- app/javascript/styles/components.scss | 6 ++++++ app/services/fetch_link_card_service.rb | 1 + package.json | 1 + yarn.lock | 4 ++++ 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 9e7d4f8842..ebd120e749 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -1,11 +1,15 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import punycode from 'punycode' -const hostStyle = { - display: 'block', - marginTop: '5px', - fontSize: '13px' -}; +const IDNA_PREFIX = 'xn--'; + +const decodeIDNA = domain => { + return domain + .split('.') + .map(part => part.indexOf(IDNA_PREFIX) === 0 ? punycode.decode(part.slice(IDNA_PREFIX.length)) : part) + .join('.'); +} const getHostname = url => { const parser = document.createElement('a'); @@ -30,7 +34,7 @@ class Card extends React.PureComponent { } if (provider.length < 1) { - provider = getHostname(card.get('url')) + provider = decodeIDNA(getHostname(card.get('url'))); } return ( @@ -40,7 +44,7 @@ class Card extends React.PureComponent {
{card.get('title')}

{(card.get('description') || '').substring(0, 50)}

- {provider} + {provider}
); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 3c91e730b1..93a3d70462 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1818,6 +1818,12 @@ button.icon-button.active i.fa-retweet { color: $color3; } +.status-card__host { + display: block; + margin-top: 5px; + font-size: 13px; +} + .status-card__image { flex: 0 0 100px; background: lighten($color1, 8%); diff --git a/app/services/fetch_link_card_service.rb b/app/services/fetch_link_card_service.rb index 416c5fdadf..524b66626c 100644 --- a/app/services/fetch_link_card_service.rb +++ b/app/services/fetch_link_card_service.rb @@ -11,6 +11,7 @@ class FetchLinkCardService < BaseService return if url.nil? + url = Addressable::URI.parse(url).normalize.to_s card = PreviewCard.where(status: status).first_or_initialize(status: status, url: url) attempt_opengraph(card, url) unless attempt_oembed(card, url) end diff --git a/package.json b/package.json index a19c61ee2c..efe4971387 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "postcss-smart-import": "^0.6.12", "precss": "^1.4.0", "prop-types": "^15.5.8", + "punycode": "^2.1.0", "rails-erb-loader": "^5.0.0", "react": "^15.5.4", "react-addons-perf": "^15.4.2", diff --git a/yarn.lock b/yarn.lock index 58e373de92..ba0430c663 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5343,6 +5343,10 @@ punycode@^1.2.4, punycode@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" +punycode@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d" + q@^1.1.2: version "1.4.1" resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"