docs: added tutorial for Cosmoverse 2023

docs/docusaurus.config.js

@@ -104,6 +104,13 @@ const config = {
             docsPluginId: "adrs",
             label: "Architecture Decision Records",
           },
+          {
+            type: "doc",
+            position: "left",
+            docId: "intro",
+            docsPluginId: "tutorials",
+            label: "Tutorials",
+          },
           {
             type: "docsVersionDropdown",
             position: "right",
@@ -212,10 +219,28 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
-        additionalLanguages: ["protobuf", "go-module"],
+        additionalLanguages: ["protobuf", "go-module", "yaml", "toml"],
+        magicComments: [
+          // Remember to extend the default highlight class name as well!
+          {
+            className: 'theme-code-block-highlighted-line',
+            line: 'highlight-next-line',
+            block: {start: 'highlight-start', end: 'highlight-end'},
+          },
+          {
+            className: 'code-block-minus-diff-line',
+            line: 'minus-diff-line',
+            block: {start: 'minus-diff-start', end: 'minus-diff-end'},
+          },
+          {
+            className: 'code-block-plus-diff-line',
+            line: 'plus-diff-line',
+            block: {start: 'plus-diff-start', end: 'plus-diff-end'},
+          },
+        ],
       },
     }),
-  themes: ["@you54f/theme-github-codeblock"],
+  themes: ["@saucelabs/theme-github-codeblock"],
   plugins: [
     [
       "@docusaurus/plugin-content-docs",
@@ -227,6 +252,16 @@ const config = {
         exclude: ["**/*.template.md"],
       },
     ],
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "tutorials",
+        path: "tutorials",
+        routeBasePath: "tutorials",
+        sidebarPath: require.resolve("./sidebars.js"),
+        exclude: ["**/*.template.md"],
+      },
+    ],
     [
       "@docusaurus/plugin-content-docs",
       {

docs/package.json

@@ -21,7 +21,7 @@
     "@docusaurus/preset-classic": "^2.4.3",
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@mdx-js/react": "^1.6.22",
-    "@you54f/theme-github-codeblock": "^0.1.1",
+    "@saucelabs/theme-github-codeblock": "^0.2.3",
     "autoprefixer": "^10.4.14",
     "clsx": "^1.2.1",
     "postcss": "^8.4.23",

docs/src/components/HighlightBox.jsx

@@ -0,0 +1,157 @@
+import React from "react";
+
+import ReadingIcon from "@site/static/img/icons/hi-reading-icon.svg";
+import PrereqIcon from "@site/static/img/icons/hi-prerequisite-icon.svg";
+import TargetIcon from "@site/static/img/icons/hi-target-icon.svg";
+import StarIcon from "@site/static/img/icons/hi-star-icon.svg";
+import TipIcon from "@site/static/img/icons/hi-tip-icon.svg";
+import NoteIcon from "@site/static/img/icons/hi-note-icon.svg";
+import CoffeeIcon from "@site/static/img/icons/hi-coffee-icon.svg";
+import InfoIcon from "@site/static/img/icons/hi-info-icon.svg";
+import WarnIcon from "@site/static/img/icons/hi-warn-icon.svg";
+
+const typeToStyles = {
+  tip: {
+    color1: "#336667",
+    color2: "#00B067",
+    icon: <TipIcon />,
+    darkMode: true,
+  },
+  reading: {
+    color1: "#F46800",
+    color2: "#F24CF4",
+    icon: <ReadingIcon />,
+    darkMode: false,
+  },
+  info: {
+    color1: "#336667",
+    color2: "#00B067",
+    icon: <InfoIcon />,
+    darkMode: true,
+  },
+  warn: {
+    color1: "#00B067",
+    color2: "#FFD303",
+    icon: <WarnIcon />,
+    darkMode: false,
+  },
+  warning: {
+    color1: "#00B067",
+    color2: "#FFD303",
+    icon: <WarnIcon />,
+    darkMode: false,
+  },
+  synopsis: {
+    color1: "#1c1c1c",
+    color2: "#1c1c1c",
+    icon: null,
+    darkMode: true,
+  },
+  prerequisite: {
+    color1: "lightgray",
+    color2: "lightgray",
+    icon: <PrereqIcon />,
+    darkMode: false,
+  },
+  learning: {
+    color1: "#6836D0",
+    color2: "#05BDFC",
+    icon: <TargetIcon />,
+    darkMode: true,
+  },
+  "best-practice": {
+    color1: "#6836D0",
+    color2: "#6836D0",
+    icon: <StarIcon />,
+    darkMode: true,
+  },
+  remember: {
+    color1: "#6D0000",
+    color2: "#F66800",
+    icon: <TipIcon />,
+    darkMode: true,
+  },
+  note: {
+    color1: "#F69900",
+    color2: "#FFCE15",
+    icon: <NoteIcon />,
+    darkMode: false,
+  },
+  docs: {
+    color1: "#6836D0",
+    color2: "#F44CF6",
+    icon: <CoffeeIcon />,
+    darkMode: true,
+  },
+  // add as many types as you like
+};
+
+const gradientStyles = ({ color1, color2 }) => ({
+  background: `linear-gradient(78.06deg, ${color1} 1.14%, ${color2} 98.88%)`,
+  border: 0,
+  borderRadius: 16,
+  padding: "0 30px",
+  display: "flex",
+  width: "100%",
+  // alignItems: "center",
+  justifyContent: "start",
+  marginBottom: 20,
+  fontSize: 21,
+  flexWrap: "wrap",
+  flexDirection: "column",
+});
+
+function HighlightBox({ type, title, children }) {
+  const styles = typeToStyles[type] || typeToStyles.info; // default to 'info' if type doesn't exist
+
+  const codeStyle = {
+    backgroundColor: 'var(--docusaurus-highlighted-code-line-bg)',
+  };
+  const iconStyles = {
+    alignSelf: "center",
+    marginTop: "10px",
+    filter: styles.darkMode ? "brightness(0) invert(1)" : "brightness(0)",
+  };
+  const titleStyle = {
+    marginTop: "10px",
+    marginLeft: "10px",
+    color: styles.darkMode ? "#e6e6e6" : "black",
+  };
+  const childrenStyle = {
+    color: styles.darkMode ? "#e6e6e6" : "black",
+    marginBottom: "10px",
+  };
+
+  const childrenWithStyles = React.Children.map(children, child => {
+    if (child.type === 'a') {
+      return React.cloneElement(child, {
+        style: anchorStyle,
+      });
+    }
+    if (child.type === 'code') {
+      return React.cloneElement(child, {
+        style: codeStyle,
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div style={gradientStyles(styles)} className="highlightBox">
+      <style>
+        {`
+          .highlightBox a {
+            color: ${styles.darkMode ? "blue" : "#85c1e9"} !important;
+          }
+        `}
+      </style>
+      <div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
+        <div style={iconStyles}>{styles.icon}</div>
+        <h3 style={titleStyle}>{title}</h3>
+      </div>
+      <div style={childrenStyle}>{childrenWithStyles}</div>
+    </div>
+  );
+}
+
+export default HighlightBox;

docs/src/components/HighlightTag.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+const tags = {
+  devops: {
+    color: "#54ffe0",
+    label: "DevOps",
+    isBright: true,
+  },
+  "cosmos-sdk": {
+    color: "#F69900",
+    label: "Cosmos SDK",
+    isBright: true,
+  },
+  "ibc-go": {
+    color: "#ff1717",
+    label: "IBC-Go",
+  },
+  cosmjs: {
+    color: "#6836D0",
+    label: "CosmJS",
+  },
+  cosmwasm: {
+    color: "#05BDFC",
+    label: "CosmWasm",
+  },
+  cometbft: {
+    color: "#00B067",
+    label: "CometBFT",
+  },
+  "cosmos-hub": {
+    color: "#f7f199",
+    label: "Cosmos Hub",
+    isBright: true,
+  },
+  concepts: {
+    color: "#AABAFF",
+    label: "Concept",
+    isBright: true,
+  },
+  tutorial: {
+    color: "#F46800",
+    label: "Tutorial",
+  },
+  "guided-coding": {
+    color: "#F24CF4",
+    label: "Guided Coding",
+  },
+};
+
+const HighlightTag = ({ type, version }) => {
+  const styles = tags[type] || tags["ibc-go"]; // default to 'ibc-go' if type doesn't exist
+
+  return (
+    <span
+      style={{
+        backgroundColor: styles.color,
+        borderRadius: "2px",
+        color: styles.isBright ? "black" : "white",
+        padding: "0.3rem",
+        marginBottom: "1rem",
+        marginRight: "0.25rem",
+        display: "inline-block",
+      }}
+    >
+      {styles.label}
+      {version ? ` ${version}` : ""}
+    </span>
+  );
+};
+
+export default HighlightTag;

docs/src/css/custom.css

@@ -367,6 +367,23 @@ html {
       0 -0.1px 0 var(--ifm-font-color-base);
   }
 
+  /* CODE BLOCK */
+  .code-block-minus-diff-line {
+    background-color: #ff000020;
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid #ff000080;
+  }
+
+  .code-block-plus-diff-line {
+    background-color: #00ff0020;
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid #00ff0080;
+  }
+
   /* RELATED ARTICLES */
   &[data-theme="dark"] .pagination-nav > a {
     @apply bg-fg;