base url

src/app/app.module.ts

@@ -15,7 +15,7 @@ import { AutofocusDirective } from './material/autofocus';
 
 import { I18nPipe } from './utils/i18n.pipe';
 import { MomentPipe } from './utils/moment.pipe';
-import { UrlTextPipe } from './utils/urltext.pipe';
+import { UrlBasePipe, UrlTextPipe } from './utils/urltext.pipe';
 import { AppComponent } from './app.component';
 import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
 import { PageComment } from './pages/comment/comment.page';
@@ -80,6 +80,7 @@ export class XhrInterceptor implements HttpInterceptor {
     AutofocusDirective,
     I18nPipe,
     MomentPipe,
+    UrlBasePipe,
     UrlTextPipe,
     AppComponent,
     PageBookmarks,

src/app/ui/entry/entry.ui.html

@@ -3,6 +3,7 @@
   <mat-icon inline="true">{{'entryType.' + entry.entryType + '.icon' | i18n}}</mat-icon>
   <a class="title" *ngIf="entry.url" [href]="entry.url" target="_blank">{{entry.title}}</a>
   <a class="title" *ngIf="!entry.url" routerLink="/e/{{entry.id}}">{{entry.title}}</a>
+  <span *ngIf="entry.url" class="urlbase">(<a [href]="entry.url">{{entry.url | urlbase}}</a>)</span>
 </div>
 <div mat-line>
   <small>

src/app/ui/entry/entry.ui.scss

@@ -4,6 +4,20 @@ a.title {
   white-space: break-spaces;
 }
 
+span.urlbase {
+  margin-left: 5px;
+  font-size: 0.7em;
+  color: $accent;
+
+  a {
+    color: $accent;
+  }
+
+  a::after {
+    display: none;
+  }
+}
+
 small a {
   color: inherit !important;
   text-decoration: none;
@@ -27,4 +41,4 @@ span.voted {
 small .mat-icon {
   top: 2px;
   margin-right: 0px;
-}
+}

src/app/utils/urltext.pipe.ts

@@ -11,4 +11,24 @@ export class UrlTextPipe implements PipeTransform {
     value = value.replace(this.wwwPattern, '$1<a target="_blank" href="https://$2">$2</a>');
     return value;
   }
+}
+
+@Pipe({ name: 'urlbase' })
+export class UrlBasePipe implements PipeTransform {
+
+  httpPattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;
+  
+  transform(value: string): any {
+    if (!value.match(this.httpPattern)) {
+      return '';
+    }
+
+    const parts = value.split( '/' )
+
+    if (parts.length < 3) {
+      return '';
+    }
+
+    return parts[2];
+  }
 }