@sugarat/theme 0.4.11 → 0.4.13

package/node.d.ts

@@ -1,38 +1,12 @@
-import { Route, DefaultTheme, UserConfig } from 'vitepress';
-import { ElButton } from 'element-plus';
+import { DefaultTheme, UserConfig } from 'vitepress';
 import { RSSOptions } from 'vitepress-plugin-rss';
 import { Repo, Mapping } from '@giscus/vue';
 import { Options } from 'oh-my-live2d';
-import { Ref } from 'vue';
 import { PagefindConfig } from 'vitepress-plugin-pagefind';
+import { AnnouncementOptions } from 'vitepress-plugin-announcement';
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
 
 type RSSPluginOptions = RSSOptions;
-declare namespace BlogPopover {
-    interface Title {
-        type: 'title';
-        content: string;
-        style?: string;
-    }
-    interface Text {
-        type: 'text';
-        content: string;
-        style?: string;
-    }
-    interface Image {
-        type: 'image';
-        src: string;
-        style?: string;
-    }
-    interface Button {
-        type: 'button';
-        link: string;
-        content: string;
-        style?: string;
-        props?: InstanceType<typeof ElButton>['$props'];
-    }
-    type Value = Title | Text | Image | Button;
-}
 type ThemeableImage = string | {
     src: string;
     alt?: string;
@@ -279,50 +253,6 @@ declare namespace Theme {
         showIcon?: boolean;
         html?: string;
     }
-    /**
-     * 公告
-     */
-    interface Popover {
-        title: string;
-        /**
-         * 细粒度的时间控制
-         * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
-         * 配置改变时，会重新触发展示
-         */
-        duration: number;
-        /**
-         * 移动端自动最小化
-         * @default false
-         */
-        mobileMinify?: boolean;
-        body?: BlogPopover.Value[];
-        footer?: BlogPopover.Value[];
-        /**
-         * 手动重新打开
-         * @default true
-         */
-        reopen?: boolean;
-        /**
-         * 是否打开闪烁提示，通常需要和 reopen 搭配使用
-         * @default true
-         */
-        twinkle?: boolean;
-        /**
-         * 设置展示图标，svg
-         * @recommend https://iconbuddy.app/search?q=fire
-         */
-        icon?: string;
-        /**
-         * 设置关闭图标，svg
-         * @recommend https://iconbuddy.app/search?q=fire
-         */
-        closeIcon?: string;
-        /**
-         * 自定义展示策略
-         * @param to 切换到的目标路由
-         */
-        onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
-    }
     interface FriendLink {
         nickname: string;
         des: string;
@@ -428,7 +358,7 @@ declare namespace Theme {
          * el-alert
          */
         alert?: Alert;
-        popover?: Popover;
+        popover?: AnnouncementOptions;
         friend?: FriendLink[] | FriendConfig;
         authorList?: Omit<FriendLink, 'avatar'>[];
         /**

package/node.js

@@ -398,7 +398,8 @@ async function getArticleMeta(filepath, route, timeZone = defaultTimeZoneOffset)
   if (!meta.title) {
     meta.title = (0, import_theme_shared2.getDefaultTitle)(content);
   }
-  const date = await (meta.date && /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`) || (0, import_theme_shared2.getFileLastModifyTime)(filepath));
+  const utcValue = timeZone >= 0 ? `+${timeZone}` : `${timeZone}`;
+  const date = await (meta.date && /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}${utcValue}`) || (0, import_theme_shared2.getFileLastModifyTime)(filepath));
   meta.date = formatDate(date || /* @__PURE__ */ new Date());
   meta.categories = typeof meta.categories === "string" ? [meta.categories] : meta.categories;
   meta.tags = typeof meta.tags === "string" ? [meta.tags] : meta.tags;
@@ -444,8 +445,8 @@ function patchVPConfig(vpConfig, cfg) {
   if (cfg?.comment && "type" in cfg.comment && cfg?.comment?.type === "artalk") {
     const server = cfg.comment?.options?.server;
     if (server) {
-      vpConfig.head.push(["link", { href: `${server}/dist/Artalk.css`, rel: "stylesheet" }]);
-      vpConfig.head.push(["script", { src: `${server}/dist/Artalk.js`, id: "artalk-script" }]);
+      vpConfig.head.push(["link", { href: `${server} /dist/Artalk.css`, rel: "stylesheet" }]);
+      vpConfig.head.push(["script", { src: `${server} /dist/Artalk.js`, id: "artalk-script" }]);
     }
   }
 }
@@ -463,6 +464,7 @@ var import_node_buffer = require("buffer");
 var import_vitepress_plugin_pagefind = require("vitepress-plugin-pagefind");
 var import_vitepress_plugin_rss = require("vitepress-plugin-rss");
 var import_theme_shared3 = require("@sugarat/theme-shared");
+var import_vitepress_plugin_announcement = require("vitepress-plugin-announcement");
 
 // src/utils/node/hot-reload-plugin.ts
 function themeReloadPlugin() {
@@ -540,6 +542,9 @@ function getVitePlugins(cfg = {}) {
     ;
     [cfg?.RSS].flat().forEach((rssConfig) => plugins.push((0, import_vitepress_plugin_rss.RssPlugin)(rssConfig)));
   }
+  if (cfg?.popover) {
+    plugins.push((0, import_vitepress_plugin_announcement.AnnouncementPlugin)(cfg.popover));
+  }
   return plugins;
 }
 function registerVitePlugins(vpCfg, plugins) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -51,8 +51,9 @@
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
     "@sugarat/theme-shared": "0.0.2",
-    "vitepress-plugin-pagefind": "0.4.10",
-    "vitepress-plugin-rss": "0.2.10"
+    "vitepress-plugin-rss": "0.2.10",
+    "vitepress-plugin-announcement": "0.1.1",
+    "vitepress-plugin-pagefind": "0.4.10"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/BlogApp.vue

@@ -11,7 +11,6 @@ import BlogSidebar from './BlogSidebar.vue'
 import BlogImagePreview from './BlogImagePreview.vue'
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
 import BlogAlert from './BlogAlert.vue'
-import BlogPopover from './BlogPopover.vue'
 import BlogFooter from './BlogFooter.vue'
 import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
 import BlogBackToTop from './BlogBackToTop.vue'
@@ -40,7 +39,6 @@ const openTransition = useDarkTransitionConfig()
       <ClientOnly>
         <BlogOml2d />
         <BlogAlert />
-        <BlogPopover />
       </ClientOnly>
     </template>
 

package/src/composables/config/index.ts

@@ -1,45 +1,13 @@
 /* eslint-disable ts/no-namespace */
-import type { ElButton } from 'element-plus'
-import type { DefaultTheme, Route } from 'vitepress'
+import type { DefaultTheme } from 'vitepress'
 import type { RSSOptions } from 'vitepress-plugin-rss'
 import type { Mapping, Repo } from '@giscus/vue'
 import type { Options as Oml2dOptions } from 'oh-my-live2d'
-import type { Ref } from 'vue'
 import type { PagefindConfig } from 'vitepress-plugin-pagefind'
+import type { AnnouncementOptions } from 'vitepress-plugin-announcement'
 
 type RSSPluginOptions = RSSOptions
 
-// TODO: 重构 lint 问题
-export declare namespace BlogPopover {
-  export interface Title {
-    type: 'title'
-    content: string
-    style?: string
-  }
-
-  export interface Text {
-    type: 'text'
-    content: string
-    style?: string
-  }
-
-  export interface Image {
-    type: 'image'
-    src: string
-    style?: string
-  }
-
-  export interface Button {
-    type: 'button'
-    link: string
-    content: string
-    style?: string
-    props?: InstanceType<typeof ElButton>['$props']
-  }
-
-  export type Value = Title | Text | Image | Button
-}
-
 export type ThemeableImage =
   | string
   | { src: string; alt?: string }
@@ -293,50 +261,6 @@ export namespace Theme {
     html?: string
   }
 
-  /**
-   * 公告
-   */
-  export interface Popover {
-    title: string
-    /**
-     * 细粒度的时间控制
-     * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
-     * 配置改变时，会重新触发展示
-     */
-    duration: number
-    /**
-     * 移动端自动最小化
-     * @default false
-     */
-    mobileMinify?: boolean
-    body?: BlogPopover.Value[]
-    footer?: BlogPopover.Value[]
-    /**
-     * 手动重新打开
-     * @default true
-     */
-    reopen?: boolean
-    /**
-     * 是否打开闪烁提示，通常需要和 reopen 搭配使用
-     * @default true
-     */
-    twinkle?: boolean
-    /**
-     * 设置展示图标，svg
-     * @recommend https://iconbuddy.app/search?q=fire
-     */
-    icon?: string
-    /**
-     * 设置关闭图标，svg
-     * @recommend https://iconbuddy.app/search?q=fire
-     */
-    closeIcon?: string
-    /**
-     * 自定义展示策略
-     * @param to 切换到的目标路由
-     */
-    onRouteChanged?: (to: Route, show: Ref<boolean>) => void
-  }
   export interface FriendLink {
     nickname: string
     des: string
@@ -462,7 +386,7 @@ export namespace Theme {
      * el-alert
      */
     alert?: Alert
-    popover?: Popover
+    popover?: AnnouncementOptions
     friend?: FriendLink[] | FriendConfig
     authorList?: Omit<FriendLink, 'avatar'>[]
     /**

package/src/utils/node/theme.ts

@@ -43,17 +43,18 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
   if (!meta.title) {
     meta.title = getDefaultTitle(content)
   }
+  const utcValue = timeZone >= 0 ? `+${timeZone}` : `${timeZone}`
   const date = await (
     (meta.date
-       && new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`))
-     || getFileLastModifyTime(filepath)
+      && new Date(`${new Date(meta.date).toUTCString()}${utcValue}`))
+    || getFileLastModifyTime(filepath)
   )
   // 无法获取时兜底当前时间
   meta.date = formatDate(date || new Date())
 
   // 处理tags和categories,兼容历史文章
   meta.categories
-        = typeof meta.categories === 'string'
+    = typeof meta.categories === 'string'
       ? [meta.categories]
       : meta.categories
   meta.tags = typeof meta.tags === 'string' ? [meta.tags] : meta.tags
@@ -66,12 +67,12 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
   // 获取摘要信息
   // TODO：摘要生成优化
   meta.description
-        = meta.description || getTextSummary(content, 100) || excerpt
+    = meta.description || getTextSummary(content, 100) || excerpt
 
   // 获取封面图
   meta.cover
-        = meta.cover
-        ?? (getFirstImagURLFromMD(fileContent, route))
+    = meta.cover
+    ?? (getFirstImagURLFromMD(fileContent, route))
 
   // 是否发布 默认发布
   if (meta.publish === false) {
@@ -82,9 +83,9 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
 }
 export async function getArticles(cfg: Partial<Theme.BlogConfig>, vpConfig: SiteConfig) {
   const srcDir
-  = cfg?.srcDir || vpConfig.srcDir.replace(vpConfig.root, '').replace(/^\//, '')
-  || process.argv.slice(2)?.[1]
-  || '.'
+    = cfg?.srcDir || vpConfig.srcDir.replace(vpConfig.root, '').replace(/^\//, '')
+    || process.argv.slice(2)?.[1]
+    || '.'
   const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'], absolute: true })
 
   const metaResults = files.reduce((prev, curr) => {
@@ -124,8 +125,8 @@ export function patchVPConfig(vpConfig: any, cfg?: Partial<Theme.BlogConfig>) {
   if (cfg?.comment && 'type' in cfg.comment && cfg?.comment?.type === 'artalk') {
     const server = cfg.comment?.options?.server
     if (server) {
-      vpConfig.head.push(['link', { href: `${server}/dist/Artalk.css`, rel: 'stylesheet' }])
-      vpConfig.head.push(['script', { src: `${server}/dist/Artalk.js`, id: 'artalk-script' }])
+      vpConfig.head.push(['link', { href: `${server} /dist/Artalk.css`, rel: 'stylesheet' }])
+      vpConfig.head.push(['script', { src: `${server} /dist/Artalk.js`, id: 'artalk-script' }])
     }
   }
 }

package/src/utils/node/vitePlugins.ts

@@ -8,6 +8,7 @@ import {
 import { RssPlugin } from 'vitepress-plugin-rss'
 import type { PluginOption } from 'vite'
 import { joinPath } from '@sugarat/theme-shared'
+import { AnnouncementPlugin } from 'vitepress-plugin-announcement'
 import type { Theme } from '../../composables/config/index'
 import { _require } from './mdPlugins'
 import { themeReloadPlugin } from './hot-reload-plugin'
@@ -50,6 +51,10 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   if (cfg?.RSS) {
     ;[cfg?.RSS].flat().forEach(rssConfig => plugins.push(RssPlugin(rssConfig)))
   }
+
+  if (cfg?.popover) {
+    plugins.push(AnnouncementPlugin(cfg.popover))
+  }
   return plugins
 }
 

package/src/components/BlogPopover.vue

@@ -1,290 +0,0 @@
-<script lang="ts" setup>
-import { ElButton, ElIcon } from 'element-plus'
-import { CircleCloseFilled } from '@element-plus/icons-vue'
-import { computed, h, onMounted, ref, watch } from 'vue'
-import type { BlogPopover } from '@sugarat/theme'
-import { parseStringStyle } from '@vue/shared'
-import { useDebounceFn, useWindowSize } from '@vueuse/core'
-import { useRoute, useRouter } from 'vitepress'
-import { useBlogConfig } from '../composables/config/blog'
-import { vOuterHtml } from '../directives'
-
-const { popover: popoverProps } = useBlogConfig()
-
-const show = ref(false)
-
-const bodyContent = computed(() => {
-  return popoverProps?.body || []
-})
-
-const footerContent = computed(() => {
-  return popoverProps?.footer || []
-})
-const storageKey = 'theme-blog-popover'
-const closeFlag = `${storageKey}-close`
-
-// 移动端最小化
-const { width } = useWindowSize()
-const router = useRouter()
-const route = useRoute()
-onMounted(() => {
-  if (!popoverProps?.title) {
-    return
-  }
-
-  // 取旧值
-  const oldValue = localStorage.getItem(storageKey)
-  const newValue = JSON.stringify(popoverProps)
-  localStorage.setItem(storageKey, newValue)
-
-  // 移动端最小化
-  if (width.value < 768 && popoverProps?.mobileMinify) {
-    show.value = false
-    return
-  }
-
-  // >= 0 每次都展示，区别是否自动消失
-  if (Number(popoverProps?.duration ?? '') >= 0) {
-    show.value = true
-    if (popoverProps?.duration) {
-      setTimeout(() => {
-        show.value = false
-      }, popoverProps?.duration)
-    }
-    return
-  }
-
-  if (oldValue !== newValue && popoverProps?.duration === -1) {
-    // 当做新值处理
-    show.value = true
-    localStorage.removeItem(closeFlag)
-    return
-  }
-
-  // 新旧相等，判断是否点击过close，没点击关闭依然展示
-  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
-    show.value = true
-  }
-})
-
-const onAfterRouteChanged = useDebounceFn(() => {
-  popoverProps?.onRouteChanged?.(route, show)
-}, 10)
-
-watch(route, onAfterRouteChanged, { immediate: true })
-
-function handleClose() {
-  show.value = false
-  if (popoverProps?.duration === -1) {
-    localStorage.setItem(closeFlag, `${+new Date()}`)
-  }
-}
-
-function PopoverValue(props: { key: number; item: BlogPopover.Value },
-  { slots }: any) {
-  const { key, item } = props
-  if (item.type === 'title') {
-    return h(
-      'h4',
-      {
-        style: parseStringStyle(item.style || '')
-      },
-      item.content
-    )
-  }
-  if (item.type === 'text') {
-    return h(
-      'p',
-      {
-        style: parseStringStyle(item.style || '')
-      },
-      item.content
-    )
-  }
-  if (item.type === 'image') {
-    return h('img', {
-      src: item.src,
-      style: parseStringStyle(item.style || '')
-    })
-  }
-  if (item.type === 'button') {
-    return h(
-      ElButton,
-      {
-        type: 'primary',
-        onClick: () => {
-          if (/^\s*http(s)?:\/\//.test(item.link)) {
-            window.open(item.link)
-          }
-          else {
-            router.go(item.link)
-          }
-        },
-        style: parseStringStyle(item.style || ''),
-        ...item.props
-      },
-      slots
-    )
-  }
-  return h(
-    'div',
-    {
-      key
-    },
-    ''
-  )
-}
-</script>
-
-<template>
-  <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
-    <div class="header">
-      <div class="title-wrapper">
-        <ElIcon size="20px">
-          <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
-          <svg v-else t="1716085184855" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
-        </ElIcon>
-        <span class="title">{{ popoverProps?.title }}</span>
-      </div>
-      <ElIcon class="close-icon" size="20px" @click="handleClose">
-        <i v-if="popoverProps?.closeIcon" v-outer-html="popoverProps.closeIcon" />
-        <CircleCloseFilled v-else />
-      </ElIcon>
-    </div>
-    <div v-if="bodyContent.length" class="body content">
-      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-      <hr v-if="footerContent.length">
-    </div>
-    <div class="footer content">
-      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-    </div>
-  </div>
-  <div
-    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title" class="theme-blog-popover-close"
-    :class="{ twinkle: !show && (popoverProps?.twinkle ?? true) }"
-    @click="show = true"
-  >
-    <ElIcon>
-      <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
-      <svg v-else t="1716085184855" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
-    </ElIcon>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.theme-blog-popover {
-  width: 258px;
-  position: fixed;
-  top: 80px;
-  right: 20px;
-  z-index: 22;
-  box-sizing: border-box;
-  border: 1px solid var(--vp-c-brand-3);
-  border-radius: 6px;
-  background-color: rgba(var(--bg-gradient-home));
-  box-shadow: var(--box-shadow);
-
-  :deep(.el-button.el-button--primary) {
-    background-color: var(--vp-c-brand-2);
-    border-color: var(--vp-c-brand-2);
-  }
-}
-
-.header {
-  background-color: var(--vp-c-brand-3);
-  color: #fff;
-  padding: 6px 4px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .close-icon {
-    cursor: pointer;
-  }
-}
-
-.title-wrapper {
-  display: flex;
-  align-items: center;
-
-  .title {
-    font-size: 14px;
-    padding-left: 6px;
-  }
-}
-
-.body {
-  box-sizing: border-box;
-  padding: 10px 10px 0;
-
-  hr {
-    border: none;
-    border-bottom: 1px solid #eaecef;
-  }
-}
-
-.footer {
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.body.content,
-.footer.content {
-  text-align: center;
-
-  h4 {
-    text-align: center;
-    font-size: 12px;
-  }
-
-  p {
-    text-align: center;
-    padding: 10px 0;
-    font-size: 14px;
-  }
-
-  img {
-    width: 100%;
-    // TODO: 未来优化，自动预获取图片高度填充
-    height: 100px;
-    object-fit: contain;
-    margin: 0 auto;
-  }
-}
-
-.theme-blog-popover-close {
-  cursor: pointer;
-  opacity: 0.5;
-  position: fixed;
-  z-index: 22;
-  top: 80px;
-  right: 10px;
-  position: fixed;
-  background-color: var(--vp-c-brand-3);
-  padding: 8px;
-  color: #fff;
-  font-size: 12px;
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-}
-.theme-blog-popover-close.twinkle {
-  animation: twinkle 1s ease-in-out infinite;
-}
-
-@keyframes twinkle {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
-</style>