Update ko (#83)

* chore: add security.md [ci skip]

* docs: add vuejsde conf banner may (vuejs#2208)

* docs: add sponsors block

Author: niceplugin

SECURITY.md

@@ -0,0 +1,5 @@
+# 취약점 보고
+
+취약점을 보고하려면 [email protected]로 이메일을 보내주세요.
+
+새로운 취약점 발견은 드물지만, 애플리케이션의 최대 보안을 위해 항상 최신 버전의 Vue와 공식 동반 라이브러리를 사용하는 것을 권장합니다.

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -1,4 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VPDocAsideSponsors } from 'vitepress/theme'
+import sponsors from './sponsors.json'
+
+// to avoid the never[] type in json
+interface Sponsor {
+  alt: string
+  href: string
+  imgSrcDark: string
+  imgSrcLight: string
+}
+
+const asideSponsors = computed(() => {
+  return [
+    {
+      size: 'mini',
+      items: sponsors.platinum.length ? sponsors.platinum.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })) : [
+        {
+          name: 'Become a sponsor',
+          url: 'https://github.com/sponsors/posva',
+          img: '/your-logo-here.svg'
+        }
+      ],
+    },
+    {
+      size: 'xmini',
+      // TODO: use gold instead once I have some
+      items: sponsors.silver.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })),
+    },
+  ]
+})
+</script>
+
 <template>
+  <VPDocAsideSponsors :data="asideSponsors" />
+
   <a
     class="banner mp"
     href="https://masteringpinia.com/?utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_MP&utm_content=sidebar"
@@ -27,6 +71,19 @@
 </template>
 
 <style scoped>
+.VPDocAsideSponsors {
+  margin-top: 8px !important;
+}
+
+:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
+  max-width: 158px;
+  max-height: 48px;
+}
+:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
+  max-width: 80px;
+  max-height: 32px;
+}
+
 .banner {
   margin: 0.25rem 0;
   padding: 0.4rem 0;

docs/.vitepress/theme/components/VuejsdeConfBanner.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="banner banner-vuejsconf" v-if="isVisible">
+    <a href="https://conf.vuejs.de/?utm_source=vuejs&utm_medium=referral&utm_campaign=banner-placement&utm_content=banner"
+      target="_blank">
+      <picture>
+        <source media="(min-width:1200px)" srcset="/vuejsde-conf/vuejsdeconf_banner_large.png" />
+        <source media="(min-width:920px)" srcset="/vuejsde-conf/vuejsdeconf_banner_medium.png" />
+        <img src="/vuejsde-conf/vuejsdeconf_banner_small.png" alt="" />
+      </picture>
+    </a>
+    <div class="close-btn" @click.stop.prevent="closeBanner">
+      <span class="close">&times;</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+
+const nameStorage = 'VUEJSDECONF-BANNER-MAY-2024'
+
+const resetLayoutTopHeight = () => {
+  document.documentElement.classList.add('banner-dismissed')
+}
+
+const closeBanner = () => {
+  // Hide the banner
+  isVisible.value = false
+  // Save action in the local storage
+  localStorage.setItem(nameStorage, String(true))
+  resetLayoutTopHeight()
+}
+
+onMounted(() => {
+  isVisible.value = !localStorage.getItem(nameStorage)
+
+  if (!isVisible.value) {
+    resetLayoutTopHeight()
+  }
+})
+</script>
+<style>
+html:not(.banner-dismissed) {
+  --vp-layout-top-height: 60px;
+}
+</style>
+<style scoped>
+.banner {
+  position: fixed;
+  z-index: var(--vp-z-index-layout-top);
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--vp-layout-top-height);
+  line-height: 0;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.banner-dismissed .banner {
+  display: none;
+}
+
+a {
+  text-decoration: underline;
+}
+
+.banner-vuejsconf {
+  background: linear-gradient(90deg, #fff 50%, #43b883 50%);
+}
+
+.banner-vuejsconf a {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.banner-vuejsconf .close-btn {
+  top: 10px;
+  right: 10px;
+  z-index: 99;
+  position: absolute;
+  border-radius: 50%;
+  padding: 10px;
+  cursor: pointer;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -7,13 +7,15 @@ import './styles/vars.css'
 import './styles/sponsors.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
+import VuejsdeConfBanner from './components/VuejsdeConfBanner.vue'
 
 const theme: Theme = {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
+      // 'layout-top': () => h(VuejsdeConfBanner)
     })
   },