Merge pull request #518 from onflow/nialexsan/announcement-bar

announcement bar

docs/tools/flow-cli/flix.md

@@ -60,7 +60,9 @@ flow flix execute ./multiply.template.json 2 3 --network testnet
 The Flow CLI provides a `flix` command to `package` up generated plain and simple JavaScript. This JavaScript uses FCL (Flow Client Library) to call the cadence the Flow Interaction Templates (FLIX) is based on. 
 
 :::info
+
 Currently, `flix package` command only supports generating FCL (Flow Client Library) specific JavaScript and TypeScirpt, there are plans to support other languages like golang.
+
 :::
 
 
@@ -183,7 +185,9 @@ Example of json prefill file with message metadata
 Queries can be a FLIX `url` or `path` to a local FLIX file. This command leverages [FCL](../clients/fcl-js/) which will execute FLIX cadence code. Package files can be generated in JavaScript or TypeScript. 
 
 :::warning
+
 Currently package doesn't support `id`, `name` flix query.
+
 :::
 
 ### Package Usage
@@ -281,8 +285,10 @@ export async function transferTokens({amount, to}: TransferTokensParams): Promis
 }
 
 ```
-:::Warning
+:::warning
+
 Notice that fcl v1.9.0 is needed to use FLIX v1.1 templates
+
 :::
 
 ## Resources

docusaurus.config.js

@@ -237,6 +237,17 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'support_us',
+        content: `⚠ Upgrade to Cadence 1.0<br />
+          The Crescendo network upgrade, including Cadence 1.0, is coming soon.
+          You most likely need to update all your contracts/transactions/scripts to support this change.<br />
+          Please visit our migration guide here:
+          <a href="https://developers.flow.com/build/cadence-migration-guide">https://developers.flow.com/build/cadence-migration-guide</a>`,
+        backgroundColor: '#F27360',
+        textColor: '#FFFFFF',
+        isCloseable: true,
+      },
       colorMode: {
         defaultMode: 'dark',
       },

src/theme/AnnouncementBar/CloseButton/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import styles from './styles.module.css';
+export default function AnnouncementBarCloseButton(props) {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

src/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,4 @@
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

src/theme/AnnouncementBar/Content/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function AnnouncementBarContent(props) {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

src/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,10 @@
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

src/theme/AnnouncementBar/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+import styles from './styles.module.css';
+export default function AnnouncementBar() {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const {backgroundColor, textColor, isCloseable} = announcementBar;
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+    </div>
+  );
+}

src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,55 @@
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+.announcementBar {
+  display: flex;
+  align-items: center;
+  height: var(--docusaurus-announcement-bar-height);
+  background-color: var(--ifm-color-white);
+  color: var(--ifm-color-black);
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
+}
+
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
+}
+
+.announcementBarClose {
+  flex: 0 0 30px;
+  align-self: stretch;
+}
+
+.announcementBarContent {
+  flex: 1 1 auto;
+}
+
+@media print {
+  .announcementBar {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: auto;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}