From 258b06aca78c66074d3b09a416ba08e23008aab6 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Tue, 16 Apr 2024 16:59:32 -0400 Subject: [PATCH 01/12] update user logos --- packages/website/src/pages/index.jsx | 95 +++++++++++-------- packages/website/src/pages/styles.scss | 89 +++++------------ 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 ++ 19 files changed, 246 insertions(+), 102 deletions(-) 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/src/pages/index.jsx b/packages/website/src/pages/index.jsx index e184757021..f68186cd2f 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,10 +215,7 @@ const IndexPage = () => {

    Your powerful rich text editor.

    - +
    diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index cdc1e4ecdd..3e7d04afd5 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -446,74 +446,30 @@ 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 { @@ -1244,18 +1200,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; 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 @@ + + + + From 9286da313fe8aac1f01d82287c4a5d2aed5efd64 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Tue, 16 Apr 2024 17:10:24 -0400 Subject: [PATCH 02/12] remove users from footer --- packages/website/src/components/Layout.jsx | 3 --- packages/website/src/pages/styles.scss | 20 -------------------- 2 files changed, 23 deletions(-) diff --git a/packages/website/src/components/Layout.jsx b/packages/website/src/components/Layout.jsx index 31f206b6c4..eafdacc238 100644 --- a/packages/website/src/components/Layout.jsx +++ b/packages/website/src/components/Layout.jsx @@ -25,9 +25,6 @@ const Layout = ({ children, title }) => { Playground
    -
    -

    Trusted By

    -
    diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index 3e7d04afd5..3d484c7392 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -378,22 +378,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 { @@ -1305,10 +1289,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, From 2c23197e0f785db3c4ef177ed78cea5f6ffceebf Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 17:06:18 -0400 Subject: [PATCH 03/12] combine guides into docs --- .../customization.mdx} | 48 ++++++++--------- .../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 +++++++++++++++ packages/website/src/components/Header.jsx | 8 --- .../website/src/components/PostLayout.jsx | 11 ++-- 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 ------------------- 16 files changed, 124 insertions(+), 128 deletions(-) rename packages/website/content/{guides/how-to-customize-quill.mdx => docs/customization.mdx} (94%) 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 diff --git a/packages/website/content/guides/how-to-customize-quill.mdx b/packages/website/content/docs/customization.mdx similarity index 94% rename from packages/website/content/guides/how-to-customize-quill.mdx rename to packages/website/content/docs/customization.mdx index 22f77d6c8f..80babbf3ac 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 - + ``` @@ -114,20 +114,20 @@ Quill.register(Bold, true); // Initialize as you would normally const quill = new Quill('#editor', { - modules: { - toolbar: true - }, - theme: 'snow' +modules: { +toolbar: true +}, +theme: 'snow' }); const Delta = Quill.import('delta'); quill.setContents( - new Delta() - .insert('Rendered with !', { bold: true }) - .insert('\\n') +new Delta() +.insert('Rendered with !', { bold: true }) +.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/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 - { }; 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 +64,7 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => { Document Navigation
      - {items.map((item) => ( + {docsItems.map((item) => ( ))}
    @@ -77,7 +72,7 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => {
    - {category} + Documentation {title}
    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 ( - - - - ); -} From dbba3a55bb2c634b0935ef43c0f9cf954925ecb5 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 17:41:13 -0400 Subject: [PATCH 04/12] move and style link to edit on github --- .../website/src/components/PostLayout.jsx | 20 +++++------ .../src/components/PostLayout.module.scss | 35 +++++-------------- 2 files changed, 18 insertions(+), 37 deletions(-) diff --git a/packages/website/src/components/PostLayout.jsx b/packages/website/src/components/PostLayout.jsx index 79f0e8ebb1..ffbcd3794d 100644 --- a/packages/website/src/components/PostLayout.jsx +++ b/packages/website/src/components/PostLayout.jsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import { usePathname } from 'next/navigation'; import docsItems from '../data/docs'; -import OctocatIcon from '../svg/octocat.svg'; import Link from 'next/link'; import slug from '../utils/slug'; import Layout from '../components/Layout'; @@ -75,21 +74,20 @@ const PostLayout = ({ title, pageType, filePath, permalink, children }) => { Documentation {title}
    +

    {title}

    {children}
    - 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); -} From 20eecec82b0d85654eeb073ef0bed01e9f64143d Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 17:45:12 -0400 Subject: [PATCH 05/12] fix undefined classname --- packages/website/src/components/ActiveLink.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 }) => { From f602347048b3ef869a31012deea7a70b641a3cde Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 17:49:45 -0400 Subject: [PATCH 06/12] visually align text --- packages/website/src/components/Header.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/Header.module.scss b/packages/website/src/components/Header.module.scss index 0a51f77d98..d07c6cf134 100644 --- a/packages/website/src/components/Header.module.scss +++ b/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; From cacc006c35730bb116fbc4b9a202e69093ac1f1f Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 17:57:15 -0400 Subject: [PATCH 07/12] remove docsearch keypress styles --- packages/website/src/components/Header.module.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/website/src/components/Header.module.scss b/packages/website/src/components/Header.module.scss index d07c6cf134..31741c746e 100644 --- a/packages/website/src/components/Header.module.scss +++ b/packages/website/src/components/Header.module.scss @@ -160,6 +160,11 @@ $linkBorderRadius: 8px; sans-serif; line-height: 1; } + + :global(.DocSearch-Button-Key--pressed) { + box-shadow: none; + transform: none; + } } .versionWrapper { From 080b8bd31ba9f1af5fc03396816f5769050d37aa Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 18:26:54 -0400 Subject: [PATCH 08/12] upgrade macbook update laptop appearance to latest model's --- packages/website/src/pages/index.jsx | 31 +++++++-------------- packages/website/src/pages/styles.scss | 38 ++++++++++++++++++-------- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/packages/website/src/pages/index.jsx b/packages/website/src/pages/index.jsx index f68186cd2f..a9e641f3df 100644 --- a/packages/website/src/pages/index.jsx +++ b/packages/website/src/pages/index.jsx @@ -220,27 +220,16 @@ const IndexPage = () => {
    - { - setActiveIndex(0); - setIsDemoActive(true); - }} - > - { - setActiveIndex(1); - setIsDemoActive(true); - }} - > - { - setActiveIndex(2); - setIsDemoActive(true); - }} - > + {[0, 1, 2].map((index) => ( +
    { + setActiveIndex(index); + setIsDemoActive(true); + }} + >
    + ))}
    diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index 3d484c7392..9912390517 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -457,15 +457,15 @@ body.home .arrow .shaft { } #laptop-container { - background-color: #c8ccd2; - border: 2px solid #000; + background-color: #000; + border: 4px solid #707070; bottom: -200px; 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%; } @@ -476,26 +476,39 @@ body.home .arrow .shaft { overflow-y: hidden; } #camera-container { - margin: 17px auto; + background-color: #000; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + left: 50%; + 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%; @@ -519,6 +532,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%; } From 98857156d1cf6b37b9012649bc1602674aa1b021 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 18:42:43 -0400 Subject: [PATCH 09/12] fix arrow styles --- packages/website/src/pages/styles.scss | 82 +++++++++++++++++++++----- 1 file changed, 67 insertions(+), 15 deletions(-) diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index 9912390517..e8ff0466ec 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%; } From 1fb8769392a32822ed61b8c7cbcdd4ff35bce8fb Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 19:05:27 -0400 Subject: [PATCH 10/12] leave more space when activating demo --- packages/website/src/pages/index.jsx | 5 +---- packages/website/src/pages/styles.scss | 10 +++------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/website/src/pages/index.jsx b/packages/website/src/pages/index.jsx index a9e641f3df..2c0f19a72a 100644 --- a/packages/website/src/pages/index.jsx +++ b/packages/website/src/pages/index.jsx @@ -218,7 +218,7 @@ const IndexPage = () => {
    -
    +
    setIsDemoActive(true)}>
    {[0, 1, 2].map((index) => (
    { }, theme: 'bubble', }} - onSelectionChange={() => setIsDemoActive(true)} onLoad={handleEditorLoad(0)} > @@ -309,7 +308,6 @@ const IndexPage = () => { }, theme: 'snow', }} - onSelectionChange={() => setIsDemoActive(true)} onLoad={handleEditorLoad(1)} > @@ -347,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 e8ff0466ec..f78012f3ef 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -455,7 +455,7 @@ body.home .arrow .shaft { position: relative; } #above-container > .container { - height: 785px; + height: 840px; } #users-container { @@ -511,7 +511,7 @@ body.home .arrow .shaft { #laptop-container { background-color: #000; border: 4px solid #707070; - bottom: -200px; + bottom: -145px; border-bottom: 0px; border-top-left-radius: 40px; border-top-right-radius: 40px; @@ -522,7 +522,7 @@ body.home .arrow .shaft { width: 100%; } #above-container:not(.demo-active) #laptop-container:hover { - bottom: -190px; + bottom: -135px; } #above-container:not(.demo-active) .ql-editor { overflow-y: hidden; @@ -644,10 +644,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; } From 654e7472a006927db0375bfab4b2e9541513d6db Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 17 Apr 2024 19:21:45 -0400 Subject: [PATCH 11/12] fixes for responsive sizes --- packages/website/src/pages/styles.scss | 28 +++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/website/src/pages/styles.scss b/packages/website/src/pages/styles.scss index f78012f3ef..5947ae7ebc 100644 --- a/packages/website/src/pages/styles.scss +++ b/packages/website/src/pages/styles.scss @@ -532,6 +532,7 @@ body.home .arrow .shaft { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; left: 50%; + line-height: 26px; margin-left: -90px; position: absolute; text-align: center; @@ -1179,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%; @@ -1218,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; @@ -1293,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; From 18e4ef149ab026b9c34ff2faddedea420456eb5f Mon Sep 17 00:00:00 2001 From: Zihua Li Date: Thu, 18 Apr 2024 10:41:58 +0800 Subject: [PATCH 12/12] Tweak code sample styles --- packages/website/content/docs/customization.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/website/content/docs/customization.mdx b/packages/website/content/docs/customization.mdx index 80babbf3ac..70ff1816d9 100644 --- a/packages/website/content/docs/customization.mdx +++ b/packages/website/content/docs/customization.mdx @@ -114,17 +114,17 @@ Quill.register(Bold, true); // Initialize as you would normally const quill = new Quill('#editor', { -modules: { -toolbar: true -}, -theme: 'snow' + modules: { + toolbar: true + }, + theme: 'snow' }); const Delta = Quill.import('delta'); quill.setContents( -new Delta() -.insert('Rendered with !', { bold: true }) -.insert('\\n') + new Delta() + .insert('Rendered with !', { bold: true }) + .insert('\\n') ); ` }}