From 3454595a2eda53f7990001ec4e0234285ad95f1d Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 19:48:03 -0700 Subject: [PATCH] Update website for 2.0 (#4121) Co-authored-by: Zihua Li --- .../customization.mdx} | 34 +-- .../docs/{ => customization}/registries.mdx | 0 .../docs/{ => customization}/themes.mdx | 0 .../guides/building-a-custom-module.mdx | 0 .../guides/cloning-medium-with-parchment.js | 0 .../guides/cloning-medium-with-parchment.mdx | 0 .../guides/designing-the-delta-format.mdx | 0 .../{guides => docs}/upgrading-to-2-0.mdx | 0 .../content/{guides => docs}/why-quill.mdx | 0 packages/website/next.config.mjs | 42 +++ .../website/src/components/ActiveLink.jsx | 2 +- packages/website/src/components/Header.jsx | 8 - .../website/src/components/Header.module.scss | 7 +- packages/website/src/components/Layout.jsx | 3 - .../website/src/components/PostLayout.jsx | 31 +- .../src/components/PostLayout.module.scss | 35 +-- packages/website/src/data/docs.tsx | 40 ++- packages/website/src/data/guides.tsx | 28 -- packages/website/src/pages/docs/[...id].jsx | 23 +- packages/website/src/pages/guides/[...id].jsx | 52 ---- packages/website/src/pages/index.jsx | 131 ++++----- packages/website/src/pages/styles.scss | 267 ++++++++++-------- packages/website/src/svg/users/airtable.svg | 15 + packages/website/src/svg/users/apollo.svg | 5 + packages/website/src/svg/users/calendly.svg | 9 + packages/website/src/svg/users/figma.svg | 18 ++ packages/website/src/svg/users/front.svg | 15 + packages/website/src/svg/users/gem.svg | 2 + packages/website/src/svg/users/grammarly.svg | 6 + packages/website/src/svg/users/linkedin.svg | 9 + packages/website/src/svg/users/microsoft.svg | 6 + packages/website/src/svg/users/miro.svg | 2 + packages/website/src/svg/users/mode.svg | 6 + packages/website/src/svg/users/salesforce.svg | 20 ++ packages/website/src/svg/users/slab.svg | 19 ++ packages/website/src/svg/users/slack.svg | 14 + packages/website/src/svg/users/typeform.svg | 2 + packages/website/src/svg/users/vox-media.svg | 7 + packages/website/src/svg/users/zoom.svg | 9 + 39 files changed, 516 insertions(+), 351 deletions(-) rename packages/website/content/{guides/how-to-customize-quill.mdx => docs/customization.mdx} (96%) rename packages/website/content/docs/{ => customization}/registries.mdx (100%) rename packages/website/content/docs/{ => customization}/themes.mdx (100%) rename packages/website/content/{ => docs}/guides/building-a-custom-module.mdx (100%) rename packages/website/content/{ => docs}/guides/cloning-medium-with-parchment.js (100%) rename packages/website/content/{ => docs}/guides/cloning-medium-with-parchment.mdx (100%) rename packages/website/content/{ => docs}/guides/designing-the-delta-format.mdx (100%) rename packages/website/content/{guides => docs}/upgrading-to-2-0.mdx (100%) rename packages/website/content/{guides => docs}/why-quill.mdx (100%) delete mode 100644 packages/website/src/data/guides.tsx delete mode 100644 packages/website/src/pages/guides/[...id].jsx create mode 100644 packages/website/src/svg/users/airtable.svg create mode 100644 packages/website/src/svg/users/apollo.svg create mode 100644 packages/website/src/svg/users/calendly.svg create mode 100644 packages/website/src/svg/users/figma.svg create mode 100644 packages/website/src/svg/users/front.svg create mode 100644 packages/website/src/svg/users/gem.svg create mode 100644 packages/website/src/svg/users/grammarly.svg create mode 100644 packages/website/src/svg/users/linkedin.svg create mode 100644 packages/website/src/svg/users/microsoft.svg create mode 100644 packages/website/src/svg/users/miro.svg create mode 100644 packages/website/src/svg/users/mode.svg create mode 100644 packages/website/src/svg/users/salesforce.svg create mode 100644 packages/website/src/svg/users/slab.svg create mode 100644 packages/website/src/svg/users/slack.svg create mode 100644 packages/website/src/svg/users/typeform.svg create mode 100644 packages/website/src/svg/users/vox-media.svg create mode 100644 packages/website/src/svg/users/zoom.svg diff --git a/packages/website/content/guides/how-to-customize-quill.mdx b/packages/website/content/docs/customization.mdx similarity index 96% rename from packages/website/content/guides/how-to-customize-quill.mdx rename to packages/website/content/docs/customization.mdx index 22f77d6c8f..70ff1816d9 100644 --- a/packages/website/content/guides/how-to-customize-quill.mdx +++ b/packages/website/content/docs/customization.mdx @@ -1,19 +1,17 @@ --- -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. @@ -21,12 +19,11 @@ Quill officially supports a standard toolbar theme [Snow](/docs/themes/#snow) an 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 - + ``` 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,7 +81,11 @@ 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); ``` @@ -93,11 +93,11 @@ Quill.register(FontAttributor, true); Note you still need to add styling for these classes into your CSS files. ```html - + ``` @@ -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', }); ``` diff --git a/packages/website/content/docs/registries.mdx b/packages/website/content/docs/customization/registries.mdx similarity index 100% rename from packages/website/content/docs/registries.mdx rename to packages/website/content/docs/customization/registries.mdx diff --git a/packages/website/content/docs/themes.mdx b/packages/website/content/docs/customization/themes.mdx similarity index 100% rename from packages/website/content/docs/themes.mdx rename to packages/website/content/docs/customization/themes.mdx diff --git a/packages/website/content/guides/building-a-custom-module.mdx b/packages/website/content/docs/guides/building-a-custom-module.mdx similarity index 100% rename from packages/website/content/guides/building-a-custom-module.mdx rename to packages/website/content/docs/guides/building-a-custom-module.mdx diff --git a/packages/website/content/guides/cloning-medium-with-parchment.js b/packages/website/content/docs/guides/cloning-medium-with-parchment.js similarity index 100% rename from packages/website/content/guides/cloning-medium-with-parchment.js rename to packages/website/content/docs/guides/cloning-medium-with-parchment.js diff --git a/packages/website/content/guides/cloning-medium-with-parchment.mdx b/packages/website/content/docs/guides/cloning-medium-with-parchment.mdx similarity index 100% rename from packages/website/content/guides/cloning-medium-with-parchment.mdx rename to packages/website/content/docs/guides/cloning-medium-with-parchment.mdx diff --git a/packages/website/content/guides/designing-the-delta-format.mdx b/packages/website/content/docs/guides/designing-the-delta-format.mdx similarity index 100% rename from packages/website/content/guides/designing-the-delta-format.mdx rename to packages/website/content/docs/guides/designing-the-delta-format.mdx diff --git a/packages/website/content/guides/upgrading-to-2-0.mdx b/packages/website/content/docs/upgrading-to-2-0.mdx similarity index 100% rename from packages/website/content/guides/upgrading-to-2-0.mdx rename to packages/website/content/docs/upgrading-to-2-0.mdx diff --git a/packages/website/content/guides/why-quill.mdx b/packages/website/content/docs/why-quill.mdx similarity index 100% rename from packages/website/content/guides/why-quill.mdx rename to packages/website/content/docs/why-quill.mdx diff --git a/packages/website/next.config.mjs b/packages/website/next.config.mjs index c8fba63367..ad1465ac6e 100644 --- a/packages/website/next.config.mjs +++ b/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) => diff --git a/packages/website/src/components/ActiveLink.jsx b/packages/website/src/components/ActiveLink.jsx index 0670a587cf..9be46ce3e5 100644 --- a/packages/website/src/components/ActiveLink.jsx +++ b/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 }) => { diff --git a/packages/website/src/components/Header.jsx b/packages/website/src/components/Header.jsx index dd1bd51727..ab58ba843d 100644 --- a/packages/website/src/components/Header.jsx +++ b/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 - - Guides - { Playground -
-

Trusted By

-
diff --git a/packages/website/src/components/PostLayout.jsx b/packages/website/src/components/PostLayout.jsx index f1ffdc2c5e..ffbcd3794d 100644 --- a/packages/website/src/components/PostLayout.jsx +++ b/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,7 +63,7 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => { Document Navigation
    - {items.map((item) => ( + {docsItems.map((item) => ( ))}
@@ -77,24 +71,23 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => {
- {category} + Documentation {title}
+

{title}

{children}
-
- - Edit this page on GitHub - -
diff --git a/packages/website/src/components/PostLayout.module.scss b/packages/website/src/components/PostLayout.module.scss index 6857d24cb6..fbfb6a30a0 100644 --- a/packages/website/src/components/PostLayout.module.scss +++ b/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); -} diff --git a/packages/website/src/data/docs.tsx b/packages/website/src/data/docs.tsx index 9cd813ad54..9887197de0 100644 --- a/packages/website/src/data/docs.tsx +++ b/packages/website/src/data/docs.tsx @@ -3,10 +3,18 @@ const items = [ title: 'Quickstart', url: '/docs/quickstart', }, + { + title: 'Why Quill', + url: '/docs/why-quill', + }, { title: 'Installation', url: '/docs/installation', }, + { + title: 'Upgrading to 2.0', + url: '/docs/upgrading-to-2-0', + }, { title: 'Configuration', url: '/docs/configuration', @@ -80,12 +88,36 @@ const items = [ ], }, { - title: 'Registries', - url: '/docs/registries', + title: 'Customization', + url: '/docs/customization', + children: [ + { + title: 'Themes', + url: '/docs/customization/themes', + }, + { + title: 'Registries', + url: '/docs/customization/registries', + }, + ], }, { - title: 'Themes', - url: '/docs/themes', + title: 'Guides', + url: '/docs/guides/designing-the-delta-format', + children: [ + { + title: 'Designing the Delta Format', + url: '/docs/guides/designing-the-delta-format', + }, + { + title: 'Building a Custom Module', + url: '/docs/guides/building-a-custom-module', + }, + { + title: 'Cloning Medium with Parchment', + url: '/docs/guides/cloning-medium-with-parchment', + }, + ], }, ]; diff --git a/packages/website/src/data/guides.tsx b/packages/website/src/data/guides.tsx deleted file mode 100644 index 4b6ba0ec07..0000000000 --- a/packages/website/src/data/guides.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const items = [ - { - title: 'Why Quill', - url: '/guides/why-quill', - }, - { - title: 'How to Customize Quill', - url: '/guides/how-to-customize-quill', - }, - { - title: 'Building a Custom Module', - url: '/guides/building-a-custom-module', - }, - { - title: 'Cloning Medium with Parchment', - url: '/guides/cloning-medium-with-parchment', - }, - { - title: 'Designing the Delta Format', - url: '/guides/designing-the-delta-format', - }, - { - title: 'Upgrading to 2.0', - url: '/guides/upgrading-to-2-0', - }, -]; - -export default items; diff --git a/packages/website/src/pages/docs/[...id].jsx b/packages/website/src/pages/docs/[...id].jsx index 92fbdd94f8..47e596ac90 100644 --- a/packages/website/src/pages/docs/[...id].jsx +++ b/packages/website/src/pages/docs/[...id].jsx @@ -15,18 +15,33 @@ export async function getStaticPaths() { } export async function getStaticProps({ params }) { - const filePath = join('content', 'docs', `${params.id.join('/')}.mdx`); + const basePath = join('content', 'docs', `${params.id.join('/')}`); + const filePath = `${basePath}.mdx`; const markdown = await readFile(join(process.cwd(), filePath), 'utf8'); + let data = {}; + try { + const path = params.id.join('/'); + if (path === 'guides/cloning-medium-with-parchment') { + data = await import(`../../../content/docs/${path}`); + } + } catch {} const mdxSource = await serialize( markdown.replace(/\{\{site\.(\w+)\}\}/g, (...args) => { return env[args[1]]; }), { parseFrontmatter: true }, ); - return { props: { mdxSource, filePath, permalink: `/docs/${params.id}` } }; + return { + props: { + mdxSource, + filePath, + permalink: `/docs/${params.id}`, + data: JSON.parse(JSON.stringify(data)), + }, + }; } -export default function Doc({ mdxSource, filePath, permalink }) { +export default function Doc({ mdxSource, filePath, permalink, data }) { return ( - + ); } diff --git a/packages/website/src/pages/guides/[...id].jsx b/packages/website/src/pages/guides/[...id].jsx deleted file mode 100644 index 250d7c3cc0..0000000000 --- a/packages/website/src/pages/guides/[...id].jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { serialize } from 'next-mdx-remote/serialize'; -import guides from '../../data/guides'; -import { readFile } from 'node:fs/promises'; -import { join } from 'node:path'; -import PostLayout from '../../components/PostLayout'; -import env from '../../../env'; -import MDX from '../../components/MDX'; -import flattenData from '../../utils/flattenData'; - -export async function getStaticPaths() { - return { - paths: flattenData(guides).map((d) => d.url), - fallback: false, - }; -} - -export async function getStaticProps({ params }) { - const basePath = join('content', 'guides', `${params.id.join('/')}`); - const filePath = `${basePath}.mdx`; - const markdown = await readFile(join(process.cwd(), filePath), 'utf8'); - let data = {}; - try { - data = await import(`../../../content/guides/${params.id.join('/')}`); - } catch {} - const mdxSource = await serialize( - markdown.replace(/\{\{site\.(\w+)\}\}/g, (...args) => { - return env[args[1]]; - }), - { parseFrontmatter: true }, - ); - return { - props: { - mdxSource, - filePath, - permalink: `/guides/${params.id}`, - data: JSON.parse(JSON.stringify(data)), - }, - }; -} - -export default function Guides({ mdxSource, filePath, permalink, data }) { - return ( - - - - ); -} diff --git a/packages/website/src/pages/index.jsx b/packages/website/src/pages/index.jsx index e184757021..2c0f19a72a 100644 --- a/packages/website/src/pages/index.jsx +++ b/packages/website/src/pages/index.jsx @@ -9,29 +9,54 @@ import classNames from 'classnames'; import Link from 'next/link'; import NoSSR, { withoutSSR } from '../components/NoSSR'; +import LinkedInLogo from '../svg/users/linkedin.svg'; +import MicrosoftLogo from '../svg/users/microsoft.svg'; +import SalesforceLogo from '../svg/users/salesforce.svg'; +import ZoomLogo from '../svg/users/zoom.svg'; +import AirtableLogo from '../svg/users/airtable.svg'; +import FigmaLogo from '../svg/users/figma.svg'; +import MiroLogo from '../svg/users/miro.svg'; +import SlackLogo from '../svg/users/slack.svg'; +import CalendlyLogo from '../svg/users/calendly.svg'; +import FrontLogo from '../svg/users/front.svg'; +import GrammarlyLogo from '../svg/users/grammarly.svg'; +import VoxMediaLogo from '../svg/users/vox-media.svg'; +import ApolloLogo from '../svg/users/apollo.svg'; +import GemLogo from '../svg/users/gem.svg'; +import ModeLogo from '../svg/users/mode.svg'; +import TypeformLogo from '../svg/users/typeform.svg'; +import SlabLogo from '../svg/users/slab.svg'; + + const fonts = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu']; const userBuckets = [ - { - Intuit: 'https://www.intuit.com/', - LinkedIn: 'https://www.linkedin.com/', - Microsoft: 'https://www.microsoft.com/', - Salesforce: 'https://www.salesforce.com/', - Slack: 'https://slack.com/', - }, - { - Asana: 'https://asana.com/', - Airtable: 'https://airtable.com/', - Grammarly: 'https://www.grammarly.com/', - Gusto: 'https://www.gusto.com/', - 'Vox Media': 'https://www.voxmedia.com/', - }, - { - Buffer: 'https://buffer.com/', - Front: 'https://frontapp.com/', - Lever: 'https://www.lever.co/', - Reedsy: 'https://reedsy.com/', - Slab: 'https://slab.com/', - }, + [ + ['LinkedIn', 'https://www.linkedin.com/', LinkedInLogo], + ['Microsoft', 'https://www.microsoft.com/', MicrosoftLogo], + ['Salesforce', 'https://www.salesforce.com/', SalesforceLogo], + ['Zoom', 'https://zoom.us/', ZoomLogo], + ], + [ + ['Airtable', 'https://airtable.com/', AirtableLogo], + ['Figma', 'https://www.figma.com/', FigmaLogo], + ['Miro', 'https://miro.com/', MiroLogo], + ['Slack', 'https://slack.com/', SlackLogo], + ], + [ + ['Calendly', 'https://calendly.com/', CalendlyLogo], + ['Front', 'https://frontapp.com/', FrontLogo], + ['Grammarly', 'https://www.grammarly.com/', GrammarlyLogo], + ['Vox Media', 'https://www.voxmedia.com/', VoxMediaLogo], + ], + [ + ['Apollo', 'https://www.apollo.io/', ApolloLogo], + ['Gem', 'https://www.gem.com/', GemLogo], + ['Mode', 'https://mode.com/', ModeLogo], + ['Typeform', 'https://www.typeform.com/', TypeformLogo], + ], + [ + ['Slab', 'https://slab.com/', SlabLogo], + ], ]; const Content = () => { @@ -76,25 +101,22 @@ const Content = () => { const Users = withoutSSR(() => { const [selectedUsers] = useState(() => userBuckets.map((bucket) => { - const keys = Object.keys(bucket); - const name = keys[Math.floor(Math.random() * keys.length)]; - return { - // @ts-expect-error - href: bucket[name], - title: name, - className: 'user-' + name.toLowerCase().replace(/\s/g, ''), - }; + const index = Math.floor(Math.random() * bucket.length); + return bucket[index]; }), ); return ( - <> - {selectedUsers.map((user) => ( -
  • - + ); }); @@ -193,35 +215,21 @@ const IndexPage = () => {

    Your powerful rich text editor.

    -
      -
    • Trusted by:
      • - -
    + -
    +
    setIsDemoActive(true)}>
    - { - setActiveIndex(0); - setIsDemoActive(true); - }} - > - { - setActiveIndex(1); - setIsDemoActive(true); - }} - > - { - setActiveIndex(2); - setIsDemoActive(true); - }} - > + {[0, 1, 2].map((index) => ( +
    { + setActiveIndex(index); + setIsDemoActive(true); + }} + >
    + ))}
    @@ -239,7 +247,6 @@ const IndexPage = () => { }, theme: 'bubble', }} - onSelectionChange={() => setIsDemoActive(true)} onLoad={handleEditorLoad(0)} > @@ -301,7 +308,6 @@ const IndexPage = () => { }, theme: 'snow', }} - onSelectionChange={() => setIsDemoActive(true)} onLoad={handleEditorLoad(1)} > @@ -339,7 +345,6 @@ const IndexPage = () => { }, theme: 'snow', }} - onSelectionChange={() => setIsDemoActive(true)} onLoad={handleEditorLoad(2)} > diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index cdc1e4ecdd..5947ae7ebc 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -166,28 +166,80 @@ svg .feat-3 { text-align: center; } -.arrow .shaft { - background-color: #000; - border-bottom: 3px solid #fff; - border-top: 3px solid #fff; - display: inline-block; - float: left; - height: 0.33em; - width: 0.66em; + +.arrow { + padding: 0.33em 0.67em; + .shaft { + background-color: #000; + border-bottom: 3px solid #fff; + border-top: 3px solid #fff; + float: left; + height: 0.33em; + width: 0.66em; + } + .tip { + display: inline-block; + border-bottom: 0.17em solid transparent; + border-top: 0.17em solid transparent; + } } -.arrow .tip { + +.prev, .next, .arrow { display: inline-block; - border-bottom: 0.17em solid transparent; - border-top: 0.17em solid transparent; + height: 1em; + line-height: 1em; } -.prev .tip { + +.prev { float: left; - border-right: 0.33em solid #000; + + &:hover .arrow { + padding-left: 0.77em; + padding-right: 0.57em; + } + + .label { + float: left; + } + + .arrow { + float: left; + } + .tip { + float: left; + border-right: 0.33em solid #000; + } } -.next .tip { +.next, .next .label, .next .arrow { float: right; - border-left: 0.33em solid #000; + + &:hover .arrow { + padding-left: 0.57em; + padding-right: 0.77em; + } + + .label { + float: right; + } + + .arrow { + float: right; + } + + .tip { + float: right; + border-left: 0.33em solid #000; + } +} +.prev, .next { + .label { + font-size: 1.25rem; + display: inline-block; + height: 2em; + line-height: 2em; + } } + .row > hr { width: 90%; } @@ -378,22 +430,6 @@ footer .logo path { fill: #fff; } -footer .users.row { - background-image: url(/assets/images/footer.png); - background-position-y: 45px; - background-repeat: no-repeat; - color: #494c59; - height: 120px; - margin: 4.5em auto 0; - width: 450px; -} - -footer .users.row h3 { - font-size: 1rem; - letter-spacing: 0.2rem; - text-transform: uppercase; -} - /*** Home ***/ header.home { @@ -419,7 +455,7 @@ body.home .arrow .shaft { position: relative; } #above-container > .container { - height: 785px; + height: 840px; } #users-container { @@ -446,116 +482,86 @@ body.home .arrow .shaft { border: none; height: 1.33em; } -#users-container ul { +#logo-container { list-style: none; + margin: 4em 0; text-transform: uppercase; } -#users-container li { +#logo-container li { display: inline-block; height: 100%; line-height: 100%; - margin: 0 1em; + margin: 0 1.4em; vertical-align: middle; } -#users-container li:first-child { +#logo-container li:first-child { font-size: 1.08rem; } -#users-container li:not(:first-child) { - width: 10em; +#logo-container li:not(:first-child) { + width: 3em; } -#users-container a { - background-image: url('/assets/images/users.png'); - background-size: 100%; +#logo-container a { display: block; - height: 100px; - width: 150px; -} -#users-container .user-asana { - background-position: 0 0; -} -#users-container .user-front { - background-position: 0 -100%; -} -#users-container .user-voxmedia { - background-position: 0 -200%; -} -#users-container .user-gusto { - background-position: 0 -300%; -} -#users-container .user-linkedin { - background-position: 0 -400%; -} -#users-container .user-intuit { - background-position: 0 -500%; -} -#users-container .user-lever { - background-position: 0 -600%; -} -#users-container .user-buffer { - background-position: 0 -700%; -} -#users-container .user-microsoft { - background-position: 0 -800%; } -#users-container .user-airtable { - background-position: 0 -900%; -} -#users-container .user-reedsy { - background-position: 0 -1000%; -} -#users-container .user-salesforce { - background-position: 0 -1100%; -} -#users-container .user-slab { - background-position: 0 -1200%; -} -#users-container .user-slack { - background-position: 0 -1300%; -} -#users-container .user-grammarly { - background-position: 0 -1400%; +#logo-container svg { + max-height: 3em; + max-width: 3em; } #laptop-container { - background-color: #c8ccd2; - border: 2px solid #000; - bottom: -200px; + background-color: #000; + border: 4px solid #707070; + bottom: -145px; border-bottom: 0px; - border-top-left-radius: 60px; - border-top-right-radius: 60px; + border-top-left-radius: 40px; + border-top-right-radius: 40px; box-shadow: 0 0 40px 2px rgba(28, 31, 47, 0.1); font-size: 1.5rem; - padding: 0 50px; + padding: 20px 20px 0 20px; position: absolute; width: 100%; } #above-container:not(.demo-active) #laptop-container:hover { - bottom: -190px; + bottom: -135px; } #above-container:not(.demo-active) .ql-editor { overflow-y: hidden; } #camera-container { - margin: 17px auto; + background-color: #000; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + left: 50%; + line-height: 26px; + margin-left: -90px; + position: absolute; text-align: center; + width: 180px; + z-index: 1; } #camera-container .camera { - border: 1px solid #000; - border-radius: 4px; cursor: pointer; display: inline-block; + height: 30px; + width: 30px; +} + +#camera-container .camera .dot { + background-color: #707070; + border-radius: 4px; + display: inline-block; height: 8px; - margin: 0 4px; width: 8px; } -#camera-container .camera.active { - background-color: #000; +#camera-container .camera.active .dot { + background-color: #2dc937; } #demo-container { background-color: #fff; - border: 2px solid #000; + border-top-left-radius: 20px; + border-top-right-radius: 20px; opacity: 0.85; overflow: hidden; width: 100%; @@ -579,6 +585,7 @@ body.home .arrow .shaft { #carousel-container { font-size: 1.5rem; margin-left: -100%; + margin-top: 30px; transition: margin 500ms ease-in-out 0s; width: 300%; } @@ -638,10 +645,6 @@ body.home .arrow .shaft { padding: 5% 8% 25px; } -#above-container.demo-active #users-container { - transition: top 500ms ease-in-out 0s; - top: -50px; -} #above-container.demo-active #users-container h1 { display: none; } @@ -1177,7 +1180,7 @@ body:not(.home) .navbar-link:before { font-size: 4rem; } #laptop-container { - padding: 0px 22px; + padding: 22px 22px 0 22px; } #snow-wrapper .toolbar { padding: 2.25%; @@ -1216,10 +1219,7 @@ body:not(.home) .navbar-link:before { padding-top: 0; } #above-container > .container { - height: 575px; - } - #above-container.demo-active #users-container { - top: -25px; + height: 600px; } #users-container { padding-top: 2em; @@ -1244,18 +1244,23 @@ body:not(.home) .navbar-link:before { #users-container h2 { font-size: 3rem; } - #users-container li:not(:first-child) { - width: 6em; + #logo-container { + margin: 2em 0; } - #users-container ul { - margin-bottom: 0; - } - #users-container ul li:first-child { + #logo-container li:first-child { display: block; + margin-bottom: 15px; + } + #logo-container li:not(:first-child) { + margin: 0 1em; + width: 2em; + } + #logo-container ul { + margin-bottom: 0; } - #users-container a { - height: 50px; - width: 75px; + #logo-container svg { + max-height: 2em; + max-width: 2em; } #demo-container { padding-left: 0; @@ -1286,10 +1291,26 @@ body:not(.home) .navbar-link:before { } #above-container:not(.demo-active) #laptop-container:hover { - bottom: -130px; + bottom: -105px; } #laptop-container { - bottom: -135px; + bottom: -110px; + } + #camera-container { + height: 20px; + line-height: 16px; + margin-left: -60px; + width: 120px; + + .camera { + height: 20px; + width: 20px; + + .dot { + height: 6px; + width: 6px; + } + } } #detail-container .action { margin-top: 3em; @@ -1344,10 +1365,6 @@ body:not(.home) .navbar-link:before { font-size: 2.5rem; padding: 0 1.3em; } - footer .users.row { - margin-top: 2.5em; - width: 270px; - } } @media (max-width: 550px) { #bubble-wrapper, diff --git a/packages/website/src/svg/users/airtable.svg b/packages/website/src/svg/users/airtable.svg new file mode 100644 index 0000000000..2761a5eb75 --- /dev/null +++ b/packages/website/src/svg/users/airtable.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/packages/website/src/svg/users/apollo.svg b/packages/website/src/svg/users/apollo.svg new file mode 100644 index 0000000000..7b54e7574c --- /dev/null +++ b/packages/website/src/svg/users/apollo.svg @@ -0,0 +1,5 @@ + + + + diff --git a/packages/website/src/svg/users/calendly.svg b/packages/website/src/svg/users/calendly.svg new file mode 100644 index 0000000000..d4aed46819 --- /dev/null +++ b/packages/website/src/svg/users/calendly.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/packages/website/src/svg/users/figma.svg b/packages/website/src/svg/users/figma.svg new file mode 100644 index 0000000000..7d6536abaa --- /dev/null +++ b/packages/website/src/svg/users/figma.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/packages/website/src/svg/users/front.svg b/packages/website/src/svg/users/front.svg new file mode 100644 index 0000000000..ed2ad6dbbd --- /dev/null +++ b/packages/website/src/svg/users/front.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/packages/website/src/svg/users/gem.svg b/packages/website/src/svg/users/gem.svg new file mode 100644 index 0000000000..6836dc98dc --- /dev/null +++ b/packages/website/src/svg/users/gem.svg @@ -0,0 +1,2 @@ + diff --git a/packages/website/src/svg/users/grammarly.svg b/packages/website/src/svg/users/grammarly.svg new file mode 100644 index 0000000000..cc295a60b1 --- /dev/null +++ b/packages/website/src/svg/users/grammarly.svg @@ -0,0 +1,6 @@ + + + + diff --git a/packages/website/src/svg/users/linkedin.svg b/packages/website/src/svg/users/linkedin.svg new file mode 100644 index 0000000000..17d34ca079 --- /dev/null +++ b/packages/website/src/svg/users/linkedin.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/packages/website/src/svg/users/microsoft.svg b/packages/website/src/svg/users/microsoft.svg new file mode 100644 index 0000000000..1e961eb1a3 --- /dev/null +++ b/packages/website/src/svg/users/microsoft.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/src/svg/users/miro.svg b/packages/website/src/svg/users/miro.svg new file mode 100644 index 0000000000..e854707395 --- /dev/null +++ b/packages/website/src/svg/users/miro.svg @@ -0,0 +1,2 @@ + diff --git a/packages/website/src/svg/users/mode.svg b/packages/website/src/svg/users/mode.svg new file mode 100644 index 0000000000..b5dcb0361f --- /dev/null +++ b/packages/website/src/svg/users/mode.svg @@ -0,0 +1,6 @@ + + + + diff --git a/packages/website/src/svg/users/salesforce.svg b/packages/website/src/svg/users/salesforce.svg new file mode 100644 index 0000000000..af3d2c4c8a --- /dev/null +++ b/packages/website/src/svg/users/salesforce.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + diff --git a/packages/website/src/svg/users/slab.svg b/packages/website/src/svg/users/slab.svg new file mode 100644 index 0000000000..14e436bac5 --- /dev/null +++ b/packages/website/src/svg/users/slab.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/packages/website/src/svg/users/slack.svg b/packages/website/src/svg/users/slack.svg new file mode 100644 index 0000000000..0fb5cac13f --- /dev/null +++ b/packages/website/src/svg/users/slack.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/website/src/svg/users/typeform.svg b/packages/website/src/svg/users/typeform.svg new file mode 100644 index 0000000000..70d099e03a --- /dev/null +++ b/packages/website/src/svg/users/typeform.svg @@ -0,0 +1,2 @@ + diff --git a/packages/website/src/svg/users/vox-media.svg b/packages/website/src/svg/users/vox-media.svg new file mode 100644 index 0000000000..d6f6f56f81 --- /dev/null +++ b/packages/website/src/svg/users/vox-media.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/website/src/svg/users/zoom.svg b/packages/website/src/svg/users/zoom.svg new file mode 100644 index 0000000000..f305ccd89a --- /dev/null +++ b/packages/website/src/svg/users/zoom.svg @@ -0,0 +1,9 @@ + + + +