Merge pull request #3946 from quilljs/website-nav

slab · Jan 9, 2024 · f3ca6f7 · f3ca6f7
2 parents 4074f5c + 2eaa476
commit f3ca6f7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/packages/website/root-wrapper.js b/packages/website/root-wrapper.js
@@ -1,5 +1,5 @@
 import { MDXProvider } from '@mdx-js/react';
-import { Highlight, themes, defaultProps } from 'prism-react-renderer';
+import { Highlight, themes } from 'prism-react-renderer';
 import CodePen from './src/components/CodePen';
 import Editor from './src/components/Editor';
 import {
@@ -26,8 +26,8 @@ const components = {
     const matches = className.match(/language-(?<lang>.*)/);
     return (
       <Highlight
-        {...defaultProps}
         code={children.props.children}
+        theme={themes.oneDark}
         language={
           matches && matches.groups && matches.groups.lang
             ? matches.groups.lang

diff --git a/packages/website/src/components/Default.jsx b/packages/website/src/components/Default.jsx
@@ -1,9 +1,10 @@
-import classNames from "classnames";
-import { graphql, useStaticQuery } from "gatsby";
-import { useState } from "react";
-import Helmet from "react-helmet";
-import LogoIcon from "../svg/logo.svg";
-import GitHub from "./GitHub";
+import classNames from 'classnames';
+import { graphql, useStaticQuery } from 'gatsby';
+import { useState } from 'react';
+import Helmet from 'react-helmet';
+import LogoIcon from '../svg/logo.svg';
+import GitHub from './GitHub';
+import * as styles from './Default.module.scss';
 
 const Default = ({ children, pageType }) => {
   const [isNavOpen, setIsNavOpen] = useState(false);
@@ -21,10 +22,10 @@ const Default = ({ children, pageType }) => {
   return (
     <>
       <Helmet
-        bodyAttributes={{ class: classNames(pageType, "layout-default") }}
+        bodyAttributes={{ class: classNames(pageType, 'layout-default') }}
       />
       <header className={pageType || undefined}>
-        <nav className={classNames("navbar-drop", { active: isNavOpen })}>
+        <nav className={classNames('navbar-drop', { active: isNavOpen })}>
           <button
             className="navbar-close"
             onClick={() => setIsNavOpen(false)}
@@ -45,30 +46,30 @@ const Default = ({ children, pageType }) => {
                 Playground
               </a>
             </li>
-            <li className="navbar-item">
+            <li className="navbar-item" style={{ display: 'none' }}>
               <a className="navbar-link" href="/blog/">
                 Blog
               </a>
             </li>
-            <li className="navbar-item">
+            <li className={classNames('navbar-item', styles.githubMenuItem)}>
               <GitHub dark />
             </li>
           </ul>
         </nav>
         <nav className="container">
           <ul className="navbar-list">
             <li
-              className={classNames("navbar-item", {
-                active: pageType === "docs",
+              className={classNames('navbar-item', {
+                active: pageType === 'docs',
               })}
             >
               <a className="navbar-link" href="/docs/quickstart/">
                 Documentation
               </a>
             </li>
             <li
-              className={classNames("navbar-item", {
-                active: pageType === "guides",
+              className={classNames('navbar-item', {
+                active: pageType === 'guides',
               })}
             >
               <a className="navbar-link" href="/guides/why-quill/">
@@ -81,18 +82,19 @@ const Default = ({ children, pageType }) => {
               </a>
             </li>
             <li
-              className={classNames("navbar-item", {
-                active: pageType === "playground",
+              className={classNames('navbar-item', {
+                active: pageType === 'playground',
               })}
             >
               <a className="navbar-link" href="/playground/">
                 Playground
               </a>
             </li>
             <li
-              className={classNames("navbar-item", {
-                active: pageType === "blog",
+              className={classNames('navbar-item', {
+                active: pageType === 'blog',
               })}
+              style={{ display: 'none' }}
             >
               <a className="navbar-link" href="/blog/">
                 Blog
@@ -124,7 +126,7 @@ const Default = ({ children, pageType }) => {
             </a>
             <a href="/docs/download/" className="action">
               Download v
-              {data?.site.siteMetadata.version.split(".").slice(0, 2).join(".")}
+              {data?.site.siteMetadata.version.split('.').slice(0, 2).join('.')}
             </a>
           </div>
           <div className="users row">

diff --git a/packages/website/src/components/Default.module.scss b/packages/website/src/components/Default.module.scss
@@ -0,0 +1,5 @@
+.githubMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/website/static/assets/css/styles.css b/packages/website/static/assets/css/styles.css
@@ -309,7 +309,7 @@ header:not(.home) .logo path {
   list-style: none;
   padding: 5em 0 1em;
   position: absolute;
-  transition: margin-bottom 1s ease-out 0s;
+  transition: margin-bottom 0.4s ease-out 0s;
   width: 100%;
   z-index: 10;
 }
@@ -1270,8 +1270,8 @@ body:not(.home) .navbar-link:before {
     display: inline-block;
   }
   .navbar-drop.active {
-    margin-bottom: -25em;
-    transition: margin-bottom 1s ease-out 0s;
+    margin-bottom: -22em;
+    transition: margin-bottom 0.4s ease-out 0s;
   }
   .navbar-list .navbar-item,
   .navbar-list .download-item {