Browse Source

Fix IDN URL display (#16)

* Extract URL display into new component URLField

* Adjust CSS

* Remove unused import
main
Marian Steinbach 4 years ago committed by GitHub
parent
commit
7f31b74821
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      .gitignore
  2. 4
      src/SiteDetailsPage.css
  3. 4
      src/SiteDetailsPage.js
  4. 2
      src/SitesSearch.css
  5. 19
      src/SitesSearch.js
  6. 63
      src/URLField.js

3
.gitignore vendored

@ -20,6 +20,9 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
# cache
/proxy-cache
# secret key we never want to share
/secrets
/test-certs

4
src/SiteDetailsPage.css

@ -15,6 +15,10 @@
font-family: 'Arvo', sans-serif;
}
.SiteDetailsPage .URLField {
font-size: 120%;
}
.SiteDetailsPage {
margin-bottom: 3rem;
}

4
src/SiteDetailsPage.js

@ -2,9 +2,9 @@ import React, { Component } from 'react';
import LocationLabel from './LocationLabel';
import ScoreField from './ScoreField';
import { TypeField, StateField } from './LocationLabel';
import URLField from './URLField';
import './SiteDetailsPage.css';
import axios from 'axios';
import punycode from 'punycode';
class SiteDetailsPage extends Component {
@ -116,7 +116,7 @@ class SiteDetailsPage extends Component {
state={this.state.site.meta.state} />
</h1>
<p><SiteIcon site={this.state.site} /> <a href={ this.state.url } rel='noopener noreferrer' target='_blank'>{ punycode.toUnicode(this.state.url) }</a></p>
<p><SiteIcon site={this.state.site} /> <URLField url={ this.state.url } showScheme={true} showPath={true} /></p>
<hr />

2
src/SitesSearch.css

@ -25,7 +25,7 @@ a.SitesSearch:hover {
color: #666;
}
.URLField {
.SiteSearch .URLField {
display: block;
font-size: 90%;
color: #999;

19
src/SitesSearch.js

@ -6,9 +6,9 @@ import React, { Component } from 'react';
import { Link } from "react-router-dom";
import LocationLabel from './LocationLabel';
import ScoreField from './ScoreField';
import URLField from './URLField';
import './SitesSearch.css';
import history from './history';
import punycode from 'punycode';
class SitesSearch extends Component {
@ -41,7 +41,7 @@ class SitesSearch extends Component {
<div className='SitesSearch row'>
<div className='col-9 col-sm-10 col-md-10'>
<LocationLabel level={element.meta.level} type={element.meta.type} district={element.meta.district} city={element.meta.city} state={element.meta.state} truncate={true} />
<URLField inputURL={element.input_url} canonicalURLs={element.resulting_urls} />
<URLField url={element.input_url} link={false} />
</div>
<div className='col-3 col-sm-2 col-md-2 d-flex'>
<ScoreField score={element.score} maxScore={13} />
@ -195,20 +195,5 @@ class SearchFieldPlaceholder extends Component {
}
}
class URLField extends Component {
displayURL(url) {
var match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i);
if (match != null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
return match[2];
}
return null;
}
render() {
var labelURL = this.displayURL(punycode.toUnicode(this.props.inputURL));
return <span className='URLField text-truncate'>{ labelURL }</span>;
}
}
export default SitesSearch;

63
src/URLField.js

@ -0,0 +1,63 @@
/**
* The URLField is used to display a site URL.
*
* IDN domains (punycode notation) are converted to Unicode for displaying.
*
* Props configuration:
*
* - link boolean: If true, the URL is actually linked with the URL target (default = true).
* - showScheme: If true, the schema of the URL will be visible. (default = false)
* - showPath: If true, the Path part is displayed. Otherwise only the domain will be shown. (default = false)
*/
import React, { Component } from 'react';
import punycode from 'punycode';
class URLField extends Component {
parseURL(url) {
let parts = url.split("://", 2);
let scheme = parts[0];
let rest = parts[1];
parts = rest.split("/");
let domain = parts[0];
let path = null;
if (parts.length > 1) {
path = "/" + parts[1];
}
if (parts.length > 3) {
path = parts[3]
}
return {
scheme: scheme,
domain: domain,
path: path,
};
}
render() {
let parsed = this.parseURL(this.props.url);
let labelURL = '';
if (this.props.showScheme === true) {
labelURL += parsed.scheme + "://";
}
labelURL += punycode.toUnicode(parsed.domain);
if (this.props.schowPath) {
labelURL += parsed.path;
}
if (this.props.link !== null && this.props.link !== false) {
return <span className='URLField text-truncate'><a href={this.props.url} target="_blank" rel="noopener noreferrer">{ labelURL }</a></span>;
}
return <span className='URLField text-truncate'>{ labelURL }</span>;
}
}
export default URLField;
Loading…
Cancel
Save