Skip to content

Commit

Permalink
header周りの整備
Browse files Browse the repository at this point in the history
  • Loading branch information
@omiend
omiend committed Oct 14, 2023
1 parent f54b759 commit daaa1ec
Show file tree
Hide file tree
Showing 6 changed files with 620 additions and 68 deletions.
27 changes: 13 additions & 14 deletions app.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
export default defineAppConfig({
title: "ScalaMatsuri",
year: "2024",
year: '2024',
// NOTE: ヘッダーを定義しています。非公開にする場合は published: false にheader:true, してください。
pages: [
{ path: "/", published: true, header: false, order: 0 },
{ path: "code-of-conduct", published: true, header: true, order: 1 },
{ path: "call-for-proposals", published: true, header: true, order: 20 },
{ path: "proposals", published: true, header: true, order: 21 },
{ path: "programs", published: true, header: true, order: 22 },
{ path: "open-mic-conference", published: true, header: true, order: 23 },
{ path: "sponsorship", published: true, header: true, order: 30 },
{ path: "sponsors", published: true, header: true, order: 31 },
{ path: "cm", published: true, header: true, order: 32 },
{ path: "ticket", published: true, header: true, order: 90 },
{ path: "staff", published: true, header: true, order: 100 },
{ path: "extra-staff", published: true, header: true, order: 101 },
{ path: '/', published: true, header: false, order: 0 },
{ path: 'code-of-conduct', published: true, header: true, order: 1 },
{ path: 'call-for-proposals', published: true, header: true, order: 20 },
{ path: 'proposals', published: true, header: true, order: 21 },
{ path: 'programs', published: true, header: true, order: 22 },
{ path: 'open-mic-conference', published: true, header: true, order: 23 },
{ path: 'sponsorship', published: true, header: true, order: 30 },
{ path: 'sponsors', published: true, header: true, order: 31 },
{ path: 'cm', published: true, header: true, order: 32 },
{ path: 'ticket', published: true, header: true, order: 90 },
{ path: 'staff', published: true, header: true, order: 100 },
{ path: 'extra-staff', published: true, header: true, order: 101 },
],
})
111 changes: 110 additions & 1 deletion app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,117 @@
<i18n lang="yaml">
en:
defaultSiteName: 'ScalaMatsuri {year}'
defaultSiteSubTitle: 'The largest international Scala conference in Asia'
defaultDescription: 'The largest international Scala conference in Asia.'
defaultUrl: 'https://scalamatsuri.org/'
opengraphUri: 'https://scalamatsuri.org/img/favicons/ogp_en.jpg'
twitterAccountId: "'scala_jp'"
ja:
defaultSiteName: 'ScalaMatsuri {year}'
defaultSiteSubTitle: 'アジア最大級の Scala のカンファレンス'
defaultDescription: 'Scala をテーマにアジア最大級のカンファレンスが開催されます。'
defaultUrl: 'https://scalamatsuri.org/'
opengraphUri: 'https://scalamatsuri.org/img/favicons/ogp_ja.jpg'
twitterAccountId: "'scala_jp'"
</i18n>

<template>
<!-- <div v-lazy-container="{ selector: 'img.lazy' }"> -->
<div>
<TheHeader />
<h1>app.vue</h1>
<NuxtPage />
<!-- <lazy-component @show="hasShown"> -->
<!-- <sns v-if="snsFooterHasShown" /> -->
<!-- </lazy-component> -->
<!-- <flow-sns v-if="$mq === 'lg'" /> -->
<TheFooter />
</div>
</template>

<script setup lang="ts">
const { t } = useI18n()
const { year } = useAppConfig()
useHead({
title: t('defaultSiteName', { year: year }),
titleTemplate: `%s | ${t('defaultSiteSubTitle')}`,
meta: [
{ charset: 'UTF-8' },
{ 'http-equiv': 'x-ua-compatible', content: 'ie=edge' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: `${t('defaultSiteName', { year: year })} | ${t('defaultSiteSubTitle')}` },
{ name: 'keywords', content: 'Scala,スカラ,カンファレンス,ScalaMatsuri,2023' },
{ property: 'og:type', content: 'website' },
{ property: 'og:locale', content: 'ja_JP' },
{ property: 'og:url', content: t('defaultUrl') },
{ property: 'og:title', content: `${t('defaultSiteName', { year: year })} | ${t('defaultSiteSubTitle')}` },
{ property: 'og:site_name', content: t('defaultSiteName', { year: year }) },
{ property: 'og:description', content: `${t('defaultDescription')}` },
{ property: 'og:image', content: t('opengraphUri') },
{ property: 'og:image:width', content: '1200' },
{ property: 'og:image:height', content: '630' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:site', content: t('twitterAccountId') },
{ name: 'twitter:creator', content: t('twitterAccountId') },
{ name: 'twitter:url', content: 'https://twitter.com/scala_jp' },
{ name: 'twitter:title', content: `${t('defaultSiteName', { year: year })} | ${t('defaultSiteSubTitle')}` },
{ name: 'twitter:description', content: t('defaultDescription') },
{ name: 'twitter:image', content: t('opengraphUri') },
{ name: 'og:image:secure_url', content: t('opengraphUri'), hid: 'og:image:secure_url' },
{ name: 'application-name', content: 'ScalaMatsuri 2023' },
{ name: 'apple-mobile-web-app-title', content: 'ScalaMatsuri 2023' },
{ name: 'theme-color', content: '#2d88ef' },
{ name: 'msapplication-TileColor', content: '#2d88ef' },
{ name: 'msapplication-TileImage', content: '/img/favicons/mstile-144x144.png' },
{ name: 'google-site-verification', content: 'HliqkO_EksFAabDeL9H8LT1_F3sqTf3x7-aL9JIHaK4' },
{ 'http-equiv': 'x-dns-prefetch-control', content: 'on' },
],
link: [
{ rel: 'dns-prefetch', href: '//maps.googleapis.com' },
{ rel: 'dns-prefetch', href: '//maps.gstatic.com' },
{ rel: 'dns-prefetch', href: '//fonts.googleapis.com' },
{ rel: 'dns-prefetch', href: '//connect.facebook.net' },
{ rel: 'dns-prefetch', href: '//platform.twitter.com' },
{ rel: 'dns-prefetch', href: '//b.st-hatena.com' },
{ rel: 'dns-prefetch', href: '//blog.scalamatsuri.org' },
{ rel: 'icon', type: 'image/x-icon', href: '/img/favicons/favicon.ico' },
{ rel: 'shortcut icon', type: 'image/vnd.microsoft.icon', href: '/img/favicons/favicon.ico' },
{ rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/img/favicons/favicon.ico' },
{ rel: 'icon', type: 'image/png', href: '/img/favicons/android-chrome-192x192.png', sizes: '192x192' },
{ rel: 'icon', type: 'image/png', href: '/img/favicons/favicon-16x16.png', sizes: '16x16' },
{ rel: 'icon', type: 'image/png', href: '/img/favicons/favicon-32x32.png', sizes: '32x32' },
{ rel: 'icon', type: 'image/png', href: '/img/favicons/favicon-48x48.png', sizes: '48x48' },
{ rel: 'icon', type: 'image/png', href: '/img/favicons/favicon-96x96.png', sizes: '96x96' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-57x57.png', sizes: '57x57' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-60x60.png', sizes: '60x60' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-72x72.png', sizes: '72x72' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-76x76.png', sizes: '76x76' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-114x114.png', sizes: '114x114' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-120x120.png', sizes: '120x120' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-144x144.png', sizes: '144x144' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-152x152.png', sizes: '152x152' },
{ rel: 'apple-touch-icon', href: '/img/favicons/apple-touch-icon-180x180.png', sizes: '180x180' },
{ rel: 'manifest', href: '/img/favicons/manifest.json' },
],
})
</script>

<style lang="scss">
// img[lazy='loaded'] {
// opacity: 0;
// animation-name: fadein;
// animation-duration: 0.3s;
// animation-iteration-count: 1;
// animation-fill-mode: forwards;
// animation-direction: normal;
// animation-timing-function: ease-out;
// @keyframes fadein {
// 0% {
// opacity: 0;
// }
// 100% {
// opacity: 1;
// }
// }
// }
</style>
114 changes: 114 additions & 0 deletions components/LangSwitcher.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<template>
<li class="gnav_item">
<div class="selectArea">
<select id="" name="" class="js-select selectArea_select">
<option v-for="locale in _locales" :key="locale.name" value="日本語">
{{ locale.name }}
</option>
</select>
<div class="selectArea_label" :class="{ active: _active }" @click="onClickSelectedLocaleLink">
{{ selectedLocaleName }}
</div>
<ul class="selectArea_list js-selectArea_list">
<li
v-if="_active"
v-for="locale in _locales"
:key="locale.name"
class="selectArea_list_item"
rel="locale.code"
@click="onClickedLocaleLink(switchLocalePath(locale.code))">
{{ locale.name }}
</li>
</ul>
</div>
</li>
</template>

<script setup lang="ts">
import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
const switchLocalePath = useSwitchLocalePath()
const { locale, locales, t } = useI18n()
const _locales = computed<{ code: string; name: string }[]>(() =>
locales.value.map((locale: LocaleObject | string) =>
typeof locale === 'string' ? { code: locale, name: locale } : { code: locale.code, name: locale.name ?? '' }
)
)
const selectedLocaleName = computed(() => _locales.value.filter((l) => l.code === locale.value)[0].name)
const router = useRouter()
const _active = ref(false)
const onClickedLocaleLink = (url: string) => {
_active.value = !_active.value
router.push(url)
}
const onClickSelectedLocaleLink = () => (_active.value = !_active.value)
</script>

<style scoped lang="scss">
.selectArea_select {
position: absolute;
opacity: 0;
pointer-events: none;
}
.selectArea {
position: relative;
border-left: 2px solid #eee;
padding-left: 26px;
}
.selectArea_label {
position: absolute;
cursor: pointer;
position: relative;
padding-left: 28px;
padding-right: 18px;
font-size: 14px;
line-height: 22px;
&:hover {
opacity: 0.3;
}
&:before {
content: '';
background-image: url('~assets/img/common/icon-lang.svg');
width: 20px;
height: 20px;
background-size: 20px 20px;
display: block;
position: absolute;
left: 0;
top: 2px;
}
&:after {
content: '';
background-image: url('~assets/img/common/arrow-bottom.svg');
width: 10px;
height: 6px;
background-size: 10px 6px;
display: block;
position: absolute;
right: 0;
top: 9px;
}
}
.selectArea_list {
position: absolute;
top: 30px;
left: 20px;
background: #ffffff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
border-radius: 10px;
width: 100%;
font-size: 16px;
font-weight: bold;
overflow: hidden;
cursor: pointer;
}
.selectArea_list_item {
padding: 11px 20px;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #eee;
}
}
</style>
60 changes: 60 additions & 0 deletions components/LangSwitcherSp.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<ul class="choose_langage">
<li v-for="locale in _locales" :key="locale.name" class="langage_item active" @click="$emit('on-option-click')">
<nuxt-link :to="switchLocalePath(locale.code)">
{{ locale.name }}
</nuxt-link>
</li>
</ul>
</template>

<script setup lang="ts">
import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
const switchLocalePath = useSwitchLocalePath()
const { locale, locales, t } = useI18n()
const _locales = computed<{ code: string; name: string }[]>(() =>
locales.value.map((locale: LocaleObject | string) =>
typeof locale === 'string' ? { code: locale, name: locale } : { code: locale.code, name: locale.name ?? '' }
)
)
// export default {
// name: 'LangSwitcherSp',
// data() {
// return {
// active: false
// }
// },
// computed: {
// availableLocales() {
// return this.$i18n.locales.filter(locale => locale.code !== this.$i18n.locale)
// }
// },
// methods: {
// onClickedLocaleLink(url) {
// this.active = false
// this.$router.push(url)
// }
// }
// }
</script>

<style scoped lang="scss">
.choose_langage {
display: flex;
justify-content: center;
border-top: 1px solid #eee;
margin-top: 20px;
padding-top: 20px;
font-size: 12px;
font-weight: bold;
> .langage_item {
margin: 0 10px;
}
> .langage_item a {
color: #999;
}
> .langage_item.active a {
color: #bd3844;
}
}
</style>
Loading

0 comments on commit daaa1ec

Please sign in to comment.