Update website for 2.0 (#4121)

Co-authored-by: Zihua Li <i@zihua.li>

packages/website/content/guides/how-to-customize-quill.mdx → packages/website/content/docs/customization.mdx

@@ -1,32 +1,29 @@
 ---
-title: How to Customize Quill
+title: Customization
 ---
 
 Quill was designed with customization and extension in mind. This is achieved by implementing a small editor core exposed by a granular, well defined [API](/docs/api). The core is augmented by [modules](/docs/modules), using the same [APIs](/docs/api) you have access to.
 
 In general, common customizations are handled in [configurations](#configurations/), user interfaces by [Themes](#themes) and CSS, functionality by [modules](#modules), and editor contents by [Parchment](#content-and-formatting).
 
-
 ### Configurations
 
 Quill favors Code over Configuration™, but for very common needs, especially where the equivalent code would be lengthy or complex, Quill provides [configuration](/docs/configuration/) options. This would be a good first place to look to determine if you even need to implement any custom functionality.
 
 Two of the most powerful options is `modules` and `theme`. You can drastically change or expand what Quill can and does do by simply adding or removing individual [modules](/docs/modules/) or using a different [theme](/docs/themes/).
 
-
 ### Themes
 
 Quill officially supports a standard toolbar theme [Snow](/docs/themes/#snow) and a floating tooltip theme [Bubble](/docs/themes/#bubble). Since Quill is not confined within an iframe like many legacy editors, many visual modifications can be made with just CSS, using one of the existing themes.
 
 If you would like to drastically change UI interactions, you can omit the `theme` configuration option, which will give you an unstyled Quill editor. You do still need to include a minimal stylesheet that, for example, makes sure spaces render in all browsers and ordered lists are appropriately numbered.
 
 ```html
-<link rel="stylesheet" href="{{site.cdn}}/quill.core.css">
+<link rel="stylesheet" href="{{site.cdn}}/quill.core.css" />
 ```
 
 From there you can implement and attach your own UI elements like custom dropdowns or tooltips. The last section of [Cloning Medium with Parchment](/guides/cloning-medium-with-parchment/#final-polish) provides an example of this in action.
 
-
 ### Modules
 
 Quill is designed with a modular architecture composed of a small editing core, surrounded by modules that augment its functionality. Some of this functionality is quite integral to editing, such as the [History](/docs/modules/history/) module, which manages undo and redo. Because all modules use the same public [API](/docs/api) exposed to the developer, even interchanging core modules is possible, when necessary.
@@ -44,7 +41,7 @@ const quill = new Quill('#editor', {
   },
   theme: 'snow'
 });
-`
+`,
   }}
 />
 
@@ -54,7 +51,6 @@ Nevertheless, staying true to Quill modular design, you can still drastically ch
 
 Finally, you may want to add functionality not provided by existing modules. In this case, it may be convenient to organize this as a Quill module, which the [Building A Custom Module](/guides/building-a-custom-module/) guide covers. Of course, it is certainly valid to just keep this logic separate from Quill, in your application code instead.
 
-
 ### Content and Formatting
 
 Quill allows modification and extension of the contents and formats that it understands through its document model [Parchment](https://github.com/quilljs/parchment/). Content and formats are represented in Parchment as either Blots or Attributors, which roughly correspond to Nodes or Attributes in the DOM.
@@ -72,9 +68,9 @@ Quill.register(SizeStyle, true);
 // Initialize as you would normally
 const quill = new Quill('#editor', {
   modules: {
-    toolbar: true
+    toolbar: true,
   },
-  theme: 'snow'
+  theme: 'snow',
 });
 ```
 
@@ -85,19 +81,23 @@ In addition to choosing the particular Attributor, you can also customize existi
 ```js
 const FontAttributor = Quill.import('attributors/class/font');
 FontAttributor.whitelist = [
-  'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
+  'sofia',
+  'slabo',
+  'roboto',
+  'inconsolata',
+  'ubuntu',
 ];
 Quill.register(FontAttributor, true);
 ```
 
 Note you still need to add styling for these classes into your CSS files.
 
 ```html
-<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
 <style>
-.ql-font-roboto {
-  font-family: 'Roboto', sans-serif;
-}
+  .ql-font-roboto {
+    font-family: 'Roboto', sans-serif;
+  }
 </style>
 ```
 
@@ -127,7 +127,7 @@ quill.setContents(
     .insert('\\n')
 );
 `
-  }}
+}}
 />
 
 #### Extending Blots
@@ -152,9 +152,9 @@ Quill.register(PlainListItem, true);
 // Initialize as you would normally
 const quill = new Quill('#editor', {
   modules: {
-    toolbar: true
+    toolbar: true,
   },
-  theme: 'snow'
+  theme: 'snow',
 });
 ```
 

packages/website/next.config.mjs

@@ -9,6 +9,48 @@ export default withMDX()({
   },
   env: env,
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  redirects: () => [
+    {
+      source: '/guides/upgrading-to-2-0',
+      destination: '/docs/upgrading-to-2-0',
+      permanent: true,
+    },
+    {
+      source: '/guides/why-quill',
+      destination: '/docs/why-quill',
+      permanent: true,
+    },
+    {
+      source: '/guides/how-to-customize-quill',
+      destination: '/docs/customization',
+      permanent: true,
+    },
+    {
+      source: '/guides/building-a-custom-module',
+      destination: '/docs/guides/building-a-custom-module',
+      permanent: true,
+    },
+    {
+      source: '/guides/cloning-medium-with-parchment',
+      destination: '/docs/guides/cloning-medium-with-parchment',
+      permanent: true,
+    },
+    {
+      source: '/guides/designing-the-delta-format',
+      destination: '/docs/guides/designing-the-delta-format',
+      permanent: true,
+    },
+    {
+      source: '/docs/registries',
+      destination: '/docs/customization/registries',
+      permanent: true,
+    },
+    {
+      source: '/docs/themes',
+      destination: '/docs/customization/themes',
+      permanent: true,
+    },
+  ],
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>

packages/website/src/components/ActiveLink.jsx

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 const ActiveLink = ({
   children,
   activeClassName,
-  className,
+  className = '',
   activePath,
   ...props
 }) => {

packages/website/src/components/Header.jsx

@@ -9,7 +9,6 @@ import { DocSearch } from '@docsearch/react';
 import { useState } from 'react';
 import playground from '../data/playground';
 import docs from '../data/docs';
-import guides from '../data/guides';
 import ActiveLink from './ActiveLink';
 import ClickOutsideHandler from './ClickOutsideHandler';
 
@@ -23,13 +22,6 @@ const MainNav = ({ ...props }) => {
       >
         Documentation
       </ActiveLink>
-      <ActiveLink
-        activeClassName={styles.active}
-        activePath="/guides"
-        href={guides[0].url}
-      >
-        Guides
-      </ActiveLink>
       <ActiveLink
         activeClassName={styles.active}
         activePath="/playground"

packages/website/src/components/Header.module.scss

@@ -36,7 +36,7 @@ $linkBorderRadius: 8px;
         margin: 0 8px;
         color: #323131;
         transition: background 0.2s;
-        padding: 8px 12px 7px;
+        padding: 9px 12px 6px;
         border-radius: $linkBorderRadius;
         line-height: 1;
 
@@ -160,6 +160,11 @@ $linkBorderRadius: 8px;
       sans-serif;
     line-height: 1;
   }
+
+  :global(.DocSearch-Button-Key--pressed) {
+    box-shadow: none;
+    transform: none;
+  }
 }
 
 .versionWrapper {

packages/website/src/components/Layout.jsx

@@ -25,9 +25,6 @@ const Layout = ({ children, title }) => {
               Playground
             </Link>
           </div>
-          <div className="users row">
-            <h3>Trusted By</h3>
-          </div>
         </div>
       </footer>
     </>

packages/website/src/components/PostLayout.jsx

@@ -1,8 +1,6 @@
 import classNames from 'classnames';
 import { usePathname } from 'next/navigation';
 import docsItems from '../data/docs';
-import guideItems from '../data/guides';
-import OctocatIcon from '../svg/octocat.svg';
 import Link from 'next/link';
 import slug from '../utils/slug';
 import Layout from '../components/Layout';
@@ -43,11 +41,7 @@ const SidebarItem = ({ item }) => {
 };
 
 const PostLayout = ({ title, pageType, filePath, permalink, children }) => {
-  const category = pageType === 'guides' ? 'Guides' : 'Documentation';
-
-  const items = pageType === 'guides' ? guideItems : docsItems;
-  const { prev, next } = getPagination(permalink, items);
-
+  const { prev, next } = getPagination(permalink, docsItems);
   const [isNavOpen, setIsNavOpen] = useState(false);
 
   return (
@@ -69,32 +63,31 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => {
               Document Navigation
             </button>
             <ul className="sidebar-list">
-              {items.map((item) => (
+              {docsItems.map((item) => (
                 <SidebarItem key={item.url} item={item} />
               ))}
             </ul>
           </div>
           <div id="docs-container" className="nine columns">
             <div className={classNames('row', styles.breadcrumbRow)}>
               <div className={styles.breadcrumb}>
-                <span>{category}</span>
+                <span>Documentation</span>
                 <span>{title}</span>
               </div>
+              <div className={styles.editOnGitHub}>
+                <a
+                  href={process.env.github + filePath}
+                  target="_blank"
+                  title="Edit on GitHub"
+                >
+                  Edit page on GitHub ↗
+                </a>
+              </div>
             </div>
             <article id="content-container" className={styles.content}>
               <h1 id={slug(title)}>{title}</h1>
               {children}
             </article>
-            <div className={styles.editOnGitHub}>
-              <a
-                className={styles.editLink}
-                href={process.env.github + filePath}
-                target="_blank"
-                title="Edit on GitHub"
-              >
-                Edit this page on GitHub
-              </a>
-            </div>
           </div>
         </div>
 

packages/website/src/components/PostLayout.module.scss

@@ -1,12 +1,16 @@
 .breadcrumbRow {
-  display: flex;
   align-items: center;
+  display: flex;
+  margin-bottom: 32px;
+  justify-content: space-between;
+
+  &:after {
+    content: none;
+  }
 
   .breadcrumb {
     font-size: 1.25rem;
     display: flex;
-    align-items: center;
-    margin-bottom: 32px;
 
     span:not(:last-child) {
       &::after {
@@ -22,24 +26,11 @@
     margin-right: 4px;
   }
 
-  .editLink {
-    margin-left: auto;
-    font-family: 'Sofia Pro', sans-serif;
+  .editOnGitHub {
     font-size: 1.08rem;
-    font-weight: bold;
-    height: 2.5em;
-    letter-spacing: 0.1rem;
-    line-height: 2.5em;
-    text-decoration: underline;
+    max-width: var(--width-readable);
     text-transform: uppercase;
   }
-
-  .editLink svg {
-    float: right;
-    height: 2.5em;
-    margin-left: 1em;
-    width: 2.5em;
-  }
 }
 
 .content {
@@ -55,11 +46,3 @@
     }
   }
 }
-
-.editOnGitHub {
-  margin-top: 60px;
-  padding-top: 20px;
-  border-top: 1px solid #ccc;
-  font-size: 14px;
-  max-width: var(--width-readable);
-}