feat: add announcement bar

oclif · Mar 29, 2024 · b561a88 · b561a88
1 parent d0cf7c8
commit b561a88
Show file tree

Hide file tree

Showing 5 changed files with 1,013 additions and 1,961 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -0,0 +1,120 @@
+import type { Config } from "@docusaurus/types";
+
+export default async function createConfigAsync() {
+  return {
+    title: "oclif: The Open CLI Framework",
+    tagline: "Create command line tools your users love",
+    url: "https://oclif.github.io",
+    baseUrl: "/",
+    organizationName: "oclif",
+    projectName: "oclif.github.io",
+    deploymentBranch: "main",
+    scripts: ["https://buttons.github.io/buttons.js"],
+    stylesheets: [
+      "https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto+Mono",
+    ],
+    favicon: "img/oclif_rev.svg",
+    customFields: {
+      disableHeaderTitle: true,
+      fonts: {
+        myFont: ["Roboto", "sans-serif"],
+        myOtherFont: ["-apple-system", "system-ui"],
+      },
+      repoUrl: "https://github.com/oclif/oclif",
+      presets: [
+        [
+          "@docusaurus/preset-classic",
+          {
+            blog: {
+              feedOptions: {
+                type: "all",
+                title: "oclif.io Blog",
+                description: "The oclif.io Blog Feed",
+                copyright: "Copyright © 2023 Salesforce",
+              },
+            },
+          },
+        ],
+      ],
+      blogSidebarCount: "ALL",
+    },
+    onBrokenLinks: "log",
+    onBrokenMarkdownLinks: "log",
+    presets: [
+      [
+        "@docusaurus/preset-classic",
+        {
+          docs: {
+            showLastUpdateAuthor: true,
+            showLastUpdateTime: true,
+            editUrl: "https://github.com/oclif/oclif.github.io/tree/docs/docs/",
+            path: "../docs",
+            sidebarPath: "../website/sidebars.ts",
+          },
+          blog: {
+            path: "blog",
+          },
+          theme: {
+            customCss: "../website/src/css/custom.css",
+          },
+        },
+      ],
+    ],
+    plugins: [],
+    themeConfig: {
+      navbar: {
+        logo: {
+          src: "img/oclif.svg",
+          srcDark: "img/oclif_rev.svg",
+          alt: "oclif",
+          href: "/",
+          target: "_self",
+        },
+        items: [
+          {
+            to: "docs/introduction",
+            label: "Getting Started",
+            position: "right",
+          },
+          {
+            to: "docs/api_reference",
+            label: "API Reference",
+            position: "right",
+          },
+          {
+            to: "blog",
+            label: "Blog",
+            position: "right",
+          },
+          {
+            href: "https://github.com/oclif/oclif",
+            className: "header-github-link",
+            "aria-label": "GitHub repository",
+            position: "right",
+          },
+        ],
+      },
+      announcementBar: {
+        id: "announcementBar-1", // Increment on change (otherwise new announcements won't show up for users who have already dismissed old ones)
+        content: `<b><a target="_blank" href="https://github.com/oclif/core/releases/tag/3.0.0">@oclif/core v3.0</a> is now out! 🥳️</b>`,
+      },
+      footer: {
+        links: [],
+        copyright: "Copyright © 2023 Salesforce",
+        logo: {
+          src: "img/salesforce-logo.svg",
+          alt: "Salesforce",
+          href: "https://developer.salesforce.com",
+          width: 160,
+          height: 51,
+        },
+      },
+      algolia: {
+        apiKey: "6032dd3bbb99cdcfacc285354871966c",
+        indexName: "oclifio",
+        appId: "Q04FC8Q6OZ",
+        contextualSearch: true,
+      },
+    },
+  } satisfies Config;
+}
diff --git a/website/package.json b/website/package.json
@@ -12,9 +12,8 @@
     "docusaurus": "docusaurus"
   },
   "dependencies": {
-    "@docusaurus/core": "^3",
-    "@docusaurus/preset-classic": "^3",
-    "clsx": "^1.1.1",
+    "@docusaurus/core": "^3.2.0",
+    "@docusaurus/preset-classic": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -1,5 +1,5 @@
 :root {
-  --ifm-font-family-base: 'Roboto', sans-serif;
+  --ifm-font-family-base: "Roboto", sans-serif;
 }
 
 .center {
@@ -10,20 +10,20 @@
 }
 
 .code-font {
-  font-family: 'Roboto Mono', monospace;
+  font-family: "Roboto Mono", monospace;
 }
 
 .get-started-example {
-  background-color: #282F39;
+  background-color: #282f39;
   color: #fff;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   text-align: left;
 }
 
 .get-started-example-dark {
   background-color: #fff;
-  color: #282F39;
-  border-radius: .25rem;
+  color: #282f39;
+  border-radius: 0.25rem;
   text-align: left;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .border-radius--25 {
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 
 .opacity--60 {
@@ -59,3 +59,33 @@
   margin: 0 1rem;
 }
 
+.header-github-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-github-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+div[class^="announcementBar_"] {
+  font-size: 20px;
+
+  --site-announcement-bar-stripe-color1: #e8d7ff;
+  --site-announcement-bar-stripe-color2: #ffe9d1;
+
+  background: repeating-linear-gradient(
+    35deg,
+    var(--site-announcement-bar-stripe-color1),
+    var(--site-announcement-bar-stripe-color1) 20px,
+    var(--site-announcement-bar-stripe-color2) 10px,
+    var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
+}