@antv/dumi-theme-antv 0.3.0-beta.8 → 0.3.0

package/dist/builtins/Playground/index.d.ts

@@ -9,7 +9,7 @@ export declare type PlaygroundProps = {
      */
     rid?: string;
     /**
-     * 预览区、代码区的宽度占比，默认为 0.62
+     * 预览区、代码区的宽度占比，默认为 0.38
      */
     ratio?: number;
     /**
@@ -17,8 +17,5 @@ export declare type PlaygroundProps = {
      */
     height?: number;
 };
-/**
- * Markdown 标签插件 Playground
- */
-declare const Playground: React.FC<PlaygroundProps>;
-export default Playground;
+declare const _default: React.FC<PlaygroundProps>;
+export default _default;

package/dist/builtins/Playground/index.js

@@ -10,9 +10,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import { useSiteData } from 'dumi';
+import { get } from 'lodash-es';
 import React, { useContext } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ThemeAntVContext } from "../../context";
-import { CodeRunner } from "../../slots/CodeRunner";
+import { CodeRunner } from "dumi/theme/slots/CodeRunner";
 import styles from "./index.module.less";
 
 /**
@@ -21,8 +24,7 @@ import styles from "./index.module.less";
 var Playground = function Playground(_ref) {
   var rid = _ref.rid,
       path = _ref.path,
-      _ref$ratio = _ref.ratio,
-      ratio = _ref$ratio === void 0 ? 0.62 : _ref$ratio,
+      ratio = _ref.ratio,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 400 : _ref$height;
 
@@ -30,26 +32,44 @@ var Playground = function Playground(_ref) {
   var _useContext = useContext(ThemeAntVContext),
       meta = _useContext.meta;
 
-  var exampleTopics = meta.exampleTopics; // '/case/area/demo/area5.ts'
+  var exampleTopics = meta.exampleTopics; // 'case/area/demo/area5.ts'
 
-  var _ref2 = path.match(/\/([\w-]+)\/([\w-]+)\/demo\/([\w-]+)/i),
+  var _ref2 = path.match(/([\w-]+)\/([\w-]+)\/demo\/([\w-]+)/i),
       _ref3 = _slicedToArray(_ref2, 4),
       _ = _ref3[0],
       topic = _ref3[1],
       example = _ref3[2],
       demo = _ref3[3];
 
+  var themeConfig = useSiteData();
+  var defaultSize = get(themeConfig, 'editor.playgroundSize', 0.38);
+  var size = isNaN(Number(ratio)) ? defaultSize : Number(ratio);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container,
     style: {
       height: height
     }
   }, /*#__PURE__*/React.createElement(CodeRunner, {
+    isPlayground: true,
     exampleTopics: exampleTopics,
     topic: topic,
     example: example,
-    demo: demo
+    demo: demo,
+    size: size,
+    replaceId: rid
   }));
 };
 
-export default Playground;
+function ErrorFallback(_ref4) {
+  var error = _ref4.error;
+  console.log(error);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "alert"
+  }, /*#__PURE__*/React.createElement("p", null, "Something went wrong:"), /*#__PURE__*/React.createElement("pre", null, error.message));
+}
+
+export default (function (props) {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: ErrorFallback
+  }, /*#__PURE__*/React.createElement(Playground, props));
+});

package/dist/layouts/DocLayout.js

@@ -29,11 +29,10 @@ export default (function () {
 
   if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // 匹配 navs 中的 docs 路由
 
-  var hasDocsRoutes = navs.filter(function (nav) {
-    return nav.slug.startsWith('docs/');
-  });
-  var docsRoutes = hasDocsRoutes.map(function (nav) {
-    return nav.slug.split('/').find(function (item) {
+  var docsRoutes = navs.filter(function (nav) {
+    return nav.slug && nav.slug.startsWith('docs/');
+  }).map(function (nav) {
+    return nav.slug && nav.slug.split('/').find(function (item) {
       return item !== 'docs';
     });
   });

package/dist/layouts/entry/Index.js

@@ -5,14 +5,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React from 'react';
-import { useSiteData } from 'dumi';
-import { Header } from "../../slots/Header";
-import { Detail } from "../../slots/Detail";
-import { Features } from "../../slots/Features";
-import { Cases } from "../../slots/Cases";
-import { Companies } from "../../slots/Companies";
-import { Footer } from "../../slots/Footer";
-import { useT } from "../../slots/hooks";
+import { useLocale, useSiteData, FormattedMessage } from 'dumi';
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { Detail } from 'dumi/theme/slots/Detail';
+import { Features } from "dumi/theme/slots/Features";
+import { Cases } from "dumi/theme/slots/Cases";
+import { Companies } from "dumi/theme/slots/Companies";
+import { Footer } from "dumi/theme/slots/Footer";
+import { size } from 'lodash-es';
 /**
  * Index 路由下的入口
  * - 获取数据
@@ -20,6 +21,8 @@ import { useT } from "../../slots/hooks";
  */
 
 export var Index = function Index() {
+  var locale = useLocale();
+
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
@@ -53,7 +56,6 @@ export var Index = function Index() {
   }, detail);
 
   var featuresProps = {
-    title: title,
     features: features,
     className: className,
     style: style,
@@ -64,8 +66,15 @@ export var Index = function Index() {
     style: style,
     className: className
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Detail, detailProps), /*#__PURE__*/React.createElement(Features, featuresProps), /*#__PURE__*/React.createElement(Cases, casesProps), /*#__PURE__*/React.createElement(Companies, {
-    title: useT("感谢信赖"),
+  var metaTitle = detailProps.title;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: "".concat(metaTitle[locale.id]),
+    titleSuffix: "AntV",
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: isAntVSite ? "2000+ 公司正在使用" : "感谢信赖"
+    }),
     companies: companies
-  }), /*#__PURE__*/React.createElement(Footer, null));
+  }) : null, /*#__PURE__*/React.createElement(Footer, null));
 };

package/dist/layouts/entry/Manual.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ManualContent } from "../../slots/ManualContent";
-import { Header } from "../../slots/Header";
-import { Footer } from "../../slots/Footer";
+import { ManualContent } from "dumi/theme/slots/ManualContent";
+import { Header } from "dumi/theme/slots/Header";
+import { Footer } from "dumi/theme/slots/Footer";
 
 /**
  * Manual 路由下的入口
@@ -10,5 +10,7 @@ export var Manual = function Manual(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
-  }), /*#__PURE__*/React.createElement(ManualContent, null, " ", children, " "), /*#__PURE__*/React.createElement(Footer, null));
+  }), /*#__PURE__*/React.createElement(ManualContent, null, " ", children, " "), /*#__PURE__*/React.createElement(Footer, {
+    isDynamicFooter: true
+  }));
 };

package/dist/pages/404.js

@@ -1,13 +1,16 @@
 import React from 'react';
-import { Header } from "../slots/Header";
-import { NotFound as NotFoundPage } from "../slots/404";
-import { Footer } from "../slots/Footer";
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { NotFound as NotFoundPage } from "dumi/theme/slots/404";
+import { Footer } from "dumi/theme/slots/Footer";
 /**
  * 404 页面
  */
 
 var NotFound = function NotFound() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: "404: Not found"
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(NotFoundPage, null), /*#__PURE__*/React.createElement(Footer, null));
 };

package/dist/pages/Example/index.js

@@ -15,12 +15,14 @@ import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { get } from 'lodash-es';
 import { Layout } from 'antd';
 import { useLocale, useSiteData } from 'dumi';
-import { Header } from "../../slots/Header";
-import { ExampleSider } from "../../slots/ExampleSider";
-import { CodeRunner } from "../../slots/CodeRunner";
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { ExampleSider } from "dumi/theme/slots/ExampleSider";
+import { CodeRunner } from "dumi/theme/slots/CodeRunner";
 import { getDemoInfo } from "../../slots/CodeRunner/utils";
 import { ThemeAntVContext } from "../../context";
 import styles from "./index.module.less";
+import { getCurrentTitle } from "./utils";
 var Sider = Layout.Sider,
     Content = Layout.Content;
 
@@ -58,15 +60,24 @@ var Example = function Example() {
       isCollapsed = _useState4[0],
       setIsCollapsed = _useState4[1];
 
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      title = _useState6[0],
+      setTitle = _useState6[1];
+
   useEffect(function () {
     if (topic && example && demo) {
       var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
       setCurrentDemo(targetDemoInfo);
+      setTitle(getCurrentTitle(exampleTopics, topic, example));
     }
   }, [topic, example, hash]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id],
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(Layout, {
     className: styles.container

package/dist/pages/Example/utils.d.ts

@@ -0,0 +1 @@
+export declare function getCurrentTitle(exampleTopics: any, topic: any, example: any): any;

package/dist/pages/Example/utils.js

@@ -0,0 +1,9 @@
+export function getCurrentTitle(exampleTopics, topic, example) {
+  var topicItem = exampleTopics.find(function (item) {
+    return item.id === topic;
+  });
+  var exmapleItem = topicItem.examples.find(function (item) {
+    return item.id === example;
+  });
+  return exmapleItem.title;
+}

package/dist/pages/Examples/components/ExampleTopicMenu/components/LeftMenu/index.js

@@ -14,6 +14,7 @@ import React, { useState } from 'react';
 import { Anchor, Menu } from 'antd';
 import { useLocale } from 'dumi';
 import { createFromIconfontCN } from '@ant-design/icons';
+import { getCategoryId } from "../../../../utils";
 import styles from "../../../../index.module.less";
 var MenuIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
@@ -66,7 +67,7 @@ export var LeftMenu = function LeftMenu(props) {
       return /*#__PURE__*/React.createElement(Menu.Item, {
         key: example.id
       }, /*#__PURE__*/React.createElement(Anchor.Link, {
-        href: "#category-".concat(example.id.replace(/\s/g, '')),
+        href: "#".concat(getCategoryId(topic.id, example.id)),
         title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, example.title[locale.id]))
       }));
     }));

package/dist/pages/Examples/components/GalleryPageContent/DemoCard/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link, useLocale } from 'dumi';
+import cx from 'classnames';
 import { Badge } from 'antd';
+import { ic } from "../../../../../slots/hooks";
 import styles from "../../../index.module.less";
 /**
  * DEMO 的卡片预览
@@ -17,10 +19,13 @@ export var DemoCard = function DemoCard(props) {
   var locale = useLocale();
 
   var renderCardInternal = function renderCardInternal() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png',
-      alt: demo.title[locale.id]
-    })));
+    var img = demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: cx('demo-card-screenshot', styles.screenshot),
+      style: {
+        backgroundImage: "url(\"".concat(img, "\")")
+      }
+    }));
   };
 
   return /*#__PURE__*/React.createElement(Link, {
@@ -29,5 +34,5 @@ export var DemoCard = function DemoCard(props) {
   }, demo.isNew ? /*#__PURE__*/React.createElement(Badge.Ribbon, {
     text: "new",
     className: styles.customRibbon
-  }, renderCardInternal()) : renderCardInternal(), /*#__PURE__*/React.createElement("h4", null, demo.title[locale.id]));
+  }, renderCardInternal()) : renderCardInternal(), /*#__PURE__*/React.createElement("h4", null, ic(demo.title)));
 };

package/dist/pages/Examples/components/GalleryPageContent/index.js

@@ -7,6 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import { useLocale } from 'dumi';
 import { DemoCard } from "./DemoCard";
+import { getCategoryId } from "../../utils";
 import styles from "../../index.module.less";
 /**
  * Examples 首页内容预览组件
@@ -63,7 +64,7 @@ export var GalleryPageContent = function GalleryPageContent(props) {
     return /*#__PURE__*/React.createElement("div", {
       key: i
     }, /*#__PURE__*/React.createElement("h2", {
-      id: "category-".concat(example.id.replace(/\s/g, ''))
+      id: getCategoryId(example.targetTopic.id, example.id)
     }, example.title[locale.id]), /*#__PURE__*/React.createElement("ul", {
       className: styles.galleryList
     }, example.demos.map(function (demo) {

package/dist/pages/Examples/index.js

@@ -14,8 +14,10 @@ import React from 'react';
 import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BackTop, Layout as AntLayout } from 'antd';
-import { Header } from "../../slots/Header";
-import { Footer } from "../../slots/Footer";
+import { useLocale } from 'dumi';
+import { SEO } from "dumi/theme/slots/SEO";
+import { Header } from "dumi/theme/slots/Header";
+import { Footer } from "dumi/theme/slots/Footer";
 import NavigatorBanner from "../../slots/Header/Products/NavigatorBanner";
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Article } from "./components/Article";
@@ -32,6 +34,7 @@ import styles from "./index.module.less";
 
 var Example = function Example() {
   var nav = useNavigate();
+  var locale = useLocale();
   /** 示例页面的元数据信息 */
 
   var metaData = useContext(ThemeAntVContext);
@@ -40,8 +43,12 @@ var Example = function Example() {
   var _usePrevAndNext = usePrevAndNext(),
       _usePrevAndNext2 = _slicedToArray(_usePrevAndNext, 2),
       prev = _usePrevAndNext2[0],
-      next = _usePrevAndNext2[1]; // 为 zh 做兜底
+      next = _usePrevAndNext2[1];
 
+  var title = {
+    zh: '所有图表',
+    en: "Gallery"
+  }; // 为 zh 做兜底
 
   useEffect(function () {
     var p = window.location.pathname;
@@ -50,7 +57,9 @@ var Example = function Example() {
       nav(p.replace('/zh/', '/'));
     }
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id]
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(AntLayout, {
     hasSider: true,

package/dist/pages/Examples/index.module.less

@@ -199,6 +199,11 @@
 
 .layout {
   margin: 24px 0 32px;
+  :global {
+    .ant-layout-content {
+      background-color: #ffffff;
+    }
+  }
 }
 
 .main {
@@ -206,6 +211,7 @@
   width: calc(100% - @toc-width);
   padding-left: 48px;
   padding-right: 24px;
+  padding-bottom: 24px;
   overflow: hidden;
 
   .meta {
@@ -369,6 +375,12 @@
       transition: all 0.3s;
       margin: 12px;
 
+      .screenshot {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
       > div {
         border: 1px solid @border-color-split;
         border-radius: 6px;
@@ -515,6 +527,7 @@
       margin-top: 30px;
       padding-left: 24px;
       padding-right: 24px;
+      margin-bottom: 30px;
     }
   }
 }

package/dist/pages/Examples/utils.d.ts

@@ -0,0 +1 @@
+export declare function getCategoryId(topicId: any, exampleId: any): string;

package/dist/pages/Examples/utils.js

@@ -0,0 +1,3 @@
+export function getCategoryId(topicId, exampleId) {
+  return [topicId, exampleId].join('-').replace(/\s/g, '');
+}

package/dist/plugin/index.js

@@ -33,6 +33,9 @@ var plugin_default = (api) => {
   api.modifyDefaultConfig((memo) => {
     memo.resolve.codeBlockMode = "passive";
     memo.exportStatic.extraRoutePaths = (0, import_examples.getExamplePaths)();
+    memo.mfsu = false;
+    memo.jsMinifier = "terser";
+    memo.favicons = ["https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original"];
     return memo;
   });
   const pages = [
@@ -40,6 +43,14 @@ var plugin_default = (api) => {
       id: "dumi-theme-antv-homepage",
       absPath: "/"
     },
+    {
+      id: "dumi-theme-antv-en-homepage",
+      absPath: "/en/"
+    },
+    {
+      id: "dumi-theme-antv-zh-homepage",
+      absPath: "/zh/"
+    },
     {
       id: "dumi-theme-antv-example-list-zh",
       absPath: "/examples",

package/dist/slots/Article/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Article: React.FC<any>;
+export default Article;

package/dist/slots/Article/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Layout } from 'antd';
+import styles from "./index.module.less";
+
+var Article = function Article(props) {
+  return /*#__PURE__*/React.createElement(Layout.Content, {
+    className: styles.article
+  }, /*#__PURE__*/React.createElement("article", props));
+};
+
+export default Article;

package/dist/slots/Article/index.module.less

@@ -0,0 +1,8 @@
+.article {
+  padding: 0;
+
+  h2 {
+    font-size: 36px;
+    margin-top: 0;
+  }
+}

package/dist/slots/Banner/Notification.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface NotificationProps {
+    index?: number;
+    type: string;
+    title: string;
+    date: string;
+    link: string;
+}
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

package/dist/slots/Banner/Notification.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'dumi';
+import styles from "./Notification.module.less";
+var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
+
+var Notification = function Notification(_ref) {
+  var _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      type = _ref.type,
+      title = _ref.title,
+      date = _ref.date,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link;
+  var children = /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("img", {
+    className: styles.number,
+    src: numberImages[index],
+    alt: index.toString()
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles.description
+  }, type, " \u2027 ", title), /*#__PURE__*/React.createElement("p", {
+    className: styles.date
+  }, date)));
+
+  if (link.startsWith('http')) {
+    return /*#__PURE__*/React.createElement("a", {
+      href: link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: styles.notification
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(Link, {
+    to: link,
+    className: styles.notification
+  }, children);
+};
+
+export default Notification;

package/dist/slots/Banner/Notification.module.less

@@ -0,0 +1,120 @@
+.notification {
+  width: 50%;
+  margin-right: 2%;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .container {
+    height: 44px;
+    display: flex;
+
+    .number {
+      height: 100%;
+      width: 44px;
+    }
+
+    .content {
+      padding-left: 20px;
+      color: rgba(49, 70, 89, 1);
+      text-align: left;
+
+      .description {
+        top: 0;
+        font-size: 1.14em;
+        margin-bottom: 0;
+        transition: all 0.3s;
+      }
+
+      .date {
+        color: rgba(216, 203, 249, 1);
+        bottom: 0;
+        font-size: 1em;
+        margin-top: 4px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &:hover .description {
+    color: rgba(89, 126, 247, 1);
+  }
+}
+
+@media (max-width: 900px) {
+  .notification {
+    position: absolute;
+    width: 100%;
+
+    &:nth-child(1) {
+      animation: showAndHide0 6s infinite;
+    }
+
+    &:nth-child(2) {
+      top: 44px;
+      animation: showAndHide1 6s infinite;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .notification {
+    width: 100%;
+  }
+}
+
+@keyframes showAndHide0 {
+  0% {
+    opacity: 1;
+    top: 0px;
+  }
+
+  33.3% {
+    opacity: 1;
+    top: 0px;
+  }
+
+  50% {
+    opacity: 0;
+    top: -30px;
+  }
+
+  83.3% {
+    opacity: 0;
+    top: 30px;
+  }
+
+  100% {
+    opacity: 1;
+    top: 0px;
+  }
+}
+
+/* Standard syntax */
+@keyframes showAndHide1 {
+  0% {
+    opacity: 0;
+    top: 30px;
+  }
+
+  33.3% {
+    opacity: 0;
+    top: 30px;
+  }
+
+  50% {
+    opacity: 1;
+    top: 0px;
+  }
+
+  83.3% {
+    opacity: 1;
+    top: 0px;
+  }
+
+  100% {
+    opacity: 0;
+    top: -30px;
+  }
+}