v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

1 files changed, 34 insertions, 25 deletions

diff --git a/src/client/app/common/views/components/url.vue b/src/client/components/url.vue
index 3a304ad6e7..082e744001 100644
--- a/src/client/app/common/views/components/url.vue
+++ b/src/client/components/url.vue
@@ -11,14 +11,15 @@
 	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<fa icon="external-link-square-alt" v-if="target === '_blank'"/>
+	<fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
 </component>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
-import { url as local } from '../../../config';
+import { url as local } from '../config';
 
 export default Vue.extend({
 	props: ['url', 'rel'],
@@ -28,8 +29,7 @@ export default Vue.extend({
 			(this.url.substr(local.length) === '/') ||
 			this.url.substr(local.length).startsWith('/@') ||
 			this.url.substr(local.length).startsWith('/notes/') ||
-			this.url.substr(local.length).startsWith('/tags/') ||
-			this.url.substr(local.length).startsWith('/pages/'));
+			this.url.substr(local.length).startsWith('/tags/'));
 		return {
 			local,
 			schema: null,
@@ -41,7 +41,8 @@ export default Vue.extend({
 			self: isSelf,
 			hasRoute: hasRoute,
 			attr: hasRoute ? 'to' : 'href',
-			target: hasRoute ? null : '_blank'
+			target: hasRoute ? null : '_blank',
+			faExternalLinkSquareAlt
 		};
 	},
 	created() {
@@ -56,31 +57,39 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
-.mk-url
-	word-break break-all
+<style lang="scss" scoped>
+.mk-url {
+	word-break: break-all;
 
-	> [data-icon]
-		padding-left 2px
-		font-size .9em
-		font-weight 400
-		font-style normal
+	> .icon {
+		padding-left: 2px;
+		font-size: .9em;
+		font-weight: 400;
+		font-style: normal;
+	}
 
-	> .self
-		font-weight bold
+	> .self {
+		font-weight: bold;
+	}
 
-	> .schema
-		opacity 0.5
+	> .schema {
+		opacity: 0.5;
+	}
 
-	> .hostname
-		font-weight bold
+	> .hostname {
+		font-weight: bold;
+	}
 
-	> .pathname
-		opacity 0.8
+	> .pathname {
+		opacity: 0.8;
+	}
 
-	> .query
-		opacity 0.5
+	> .query {
+		opacity: 0.5;
+	}
 
-	> .hash
-		font-style italic
+	> .hash {
+		font-style: italic;
+	}
+}
 </style>