misskey/src/client/app/common/views/components/url-preview.vue

<template>
<iframe v-if="youtubeId" type="text/html" height="250"
	:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
	frameborder="0"/>
<div v-else>
	<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
		<article>
			<header>
				<h1>{{ title }}</h1>
			</header>
			<p>{{ description }}</p>
			<footer>
				<img class="icon" v-if="icon" :src="icon"/>
				<p>{{ sitename }}</p>
			</footer>
		</article>
	</a>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { url as misskeyUrl } from '../../../config';

export default Vue.extend({
	props: ['url'],
	data() {
		return {
			fetching: true,
			title: null,
			description: null,
			thumbnail: null,
			icon: null,
			sitename: null,
			youtubeId: null,
			misskeyUrl
		};
	},
	created() {
		const url = new URL(this.url);

		if (url.hostname == 'www.youtube.com') {
			this.youtubeId = url.searchParams.get('v');
		} else if (url.hostname == 'youtu.be') {
			this.youtubeId = url.pathname;
		} else {
			fetch('/api:url?url=' + this.url).then(res => {
				res.json().then(info => {
					this.title = info.title;
					this.description = info.description;
					this.thumbnail = info.thumbnail;
					this.icon = info.icon;
					this.sitename = info.sitename;

					this.fetching = false;
				});
			});
		}
	}
});
</script>

<style lang="stylus" scoped>
iframe
	width 100%

.mk-url-preview
	display block
	font-size 16px
	border solid 1px #eee
	border-radius 4px
	overflow hidden

	&:hover
		text-decoration none
		border-color #ddd

		> article > header > h1
			text-decoration underline

	> .thumbnail
		position absolute
		width 100px
		height 100%
		background-position center
		background-size cover

		& + article
			left 100px
			width calc(100% - 100px)

	> article
		padding 16px

		> header
			margin-bottom 8px

			> h1
				margin 0
				font-size 1em
				color #555

		> p
			margin 0
			color #777
			font-size 0.8em

		> footer
			margin-top 8px
			height 16px

			> img
				display inline-block
				width 16px
				height 16px
				margin-right 4px
				vertical-align top

			> p
				display inline-block
				margin 0
				color #666
				font-size 0.8em
				line-height 16px
				vertical-align top

	@media (max-width 500px)
		font-size 8px
		border none

		> .thumbnail
			width 70px

			& + article
				left 70px
				width calc(100% - 70px)

		> article
			padding 8px

</style>