magnetar/fe_calckey/frontend/client/src/ui/visitor/kanban.vue

<template>
	<div
		class="rwqkcmrc"
		:style="{
			backgroundImage: transparent
				? 'none'
				: `url(${$instance.backgroundImageUrl})`,
		}"
	>
		<div class="back" :class="{ transparent }"></div>
		<div class="contents">
			<div class="wrapper">
				<h1 v-if="meta" :class="{ full }">
					<MkA to="/" class="link"
						><img
							v-if="meta.logoImageUrl"
							class="logo"
							:src="meta.logoImageUrl"
							alt="logo"
						/><span v-else class="text">{{
							instanceName
						}}</span></MkA
					>
				</h1>
				<template v-if="full">
					<div v-if="meta" class="about">
						<div
							class="desc"
							v-html="meta.description || i18n.ts.introMisskey"
						></div>
					</div>
					<div class="action">
						<button class="_buttonPrimary" @click="signup()">
							{{ i18n.ts.signup }}
						</button>
						<button class="_button" @click="signin()">
							{{ i18n.ts.login }}
						</button>
					</div>
					<div class="announcements panel">
						<header>{{ i18n.ts.announcements }}</header>
						<MkPagination
							v-slot="{ items }"
							:pagination="announcements"
							class="list"
						>
							<section
								v-for="announcement in items"
								:key="announcement.id"
								class="item"
							>
								<div class="title">
									{{ announcement.title }}
								</div>
								<div class="content">
									<Mfm :text="announcement.text" />
									<img
										v-if="announcement.imageUrl"
										:src="announcement.imageUrl"
										alt="announcement image"
									/>
								</div>
							</section>
						</MkPagination>
					</div>
					<div v-if="poweredBy" class="powered-by">
						<b
							><MkA to="/">{{ host }}</MkA></b
						>
						<small
							>Powered by
							<a href="https://calckey.org/" target="_blank"
								>Calckey</a
							></small
						>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";
import { host, instanceName } from "@/config";
import * as os from "@/os";
import MkPagination from "@/components/MkPagination.vue";
import XSigninDialog from "@/components/MkSigninDialog.vue";
import XSignupDialog from "@/components/MkSignupDialog.vue";
import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n";

export default defineComponent({
	components: {
		MkPagination,
		MkButton,
	},

	props: {
		full: {
			type: Boolean,
			required: false,
			default: false,
		},
		transparent: {
			type: Boolean,
			required: false,
			default: false,
		},
		poweredBy: {
			type: Boolean,
			required: false,
			default: false,
		},
	},

	data() {
		return {
			host,
			instanceName,
			pageInfo: null,
			meta: null,
			narrow: window.innerWidth < 1280,
			announcements: {
				endpoint: "announcements",
				limit: 10,
			},
			i18n,
		};
	},

	created() {
		os.api("meta", { detail: true }).then((meta) => {
			this.meta = meta;
		});
	},

	methods: {
		signin() {
			os.popup(
				XSigninDialog,
				{
					autoSet: true,
				},
				{},
				"closed"
			);
		},

		signup() {
			os.popup(
				XSignupDialog,
				{
					autoSet: true,
				},
				{},
				"closed"
			);
		},
	},
});
</script>

<style lang="scss" scoped>
.rwqkcmrc {
	position: relative;
	text-align: center;
	background-position: center;
	background-size: cover;
	// TODO: パララックスにしたい

	> .back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		&.transparent {
			-webkit-backdrop-filter: var(--blur, blur(12px));
			backdrop-filter: var(--blur, blur(12px));
		}
	}

	> .contents {
		position: relative;
		z-index: 1;
		height: inherit;
		overflow: auto;

		> .wrapper {
			max-width: 380px;
			padding: 0 16px;
			box-sizing: border-box;
			margin: 0 auto;

			> .panel {
				-webkit-backdrop-filter: var(--blur, blur(8px));
				backdrop-filter: var(--blur, blur(8px));
				background: rgba(0, 0, 0, 0.5);
				border-radius: var(--radius);

				&,
				* {
					color: #fff !important;
				}
			}

			> h1 {
				display: block;
				margin: 0;
				padding: 32px 0 32px 0;
				color: #fff;

				&.full {
					padding: 64px 0 0 0;

					> .link {
						> ::v-deep(.logo) {
							max-height: 130px;
						}
					}
				}

				> .link {
					display: block;

					> ::v-deep(.logo) {
						vertical-align: bottom;
						max-height: 100px;
					}
				}
			}

			> .about {
				display: block;
				margin: 24px 0;
				text-align: center;
				box-sizing: border-box;
				text-shadow: 0 0 8px black;
				color: #fff;
			}

			> .action {
				> button {
					display: block;
					width: 100%;
					padding: 10px;
					box-sizing: border-box;
					text-align: center;
					border-radius: 999px;

					&._button {
						background: var(--panel);
					}

					&:first-child {
						margin-bottom: 16px;
					}
				}
			}

			> .announcements {
				margin: 32px 0;
				text-align: left;

				> header {
					padding: 12px 16px;
					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
				}

				> .list {
					max-height: 300px;
					overflow: auto;

					> .item {
						padding: 12px 16px;

						& + .item {
							border-top: solid 1px rgba(255, 255, 255, 0.5);
						}

						> .title {
							font-weight: bold;
						}

						> .content {
							> img {
								max-width: 100%;
							}
						}
					}
				}
			}

			> .powered-by {
				padding: 28px;
				font-size: 14px;
				text-align: center;
				border-top: 1px solid rgba(255, 255, 255, 0.5);
				color: #fff;

				> small {
					display: block;
					margin-top: 8px;
					opacity: 0.5;
				}
			}
		}
	}
}
</style>