Improvements for Quill website

CHANGELOG.md

@@ -1,3 +1,7 @@
+# [Unreleased]
+
+- Fix syntax label from "Javascript" to "JavaScript".
+
 # v2.0.0-beta.0
 
 In the upcoming 2.0 release, Quill has been significantly modernized. Leveraging the latest browser-supported APIs, Quill now delivers a more efficient and reliable editing experience.

packages/quill/package.json

@@ -17,6 +17,7 @@
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@playwright/test": "1.38.1",
+    "@types/highlight.js": "^9.12.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.0",
     "@types/webpack": "^5.28.5",

packages/quill/src/modules/syntax.ts

@@ -329,7 +329,6 @@ class Syntax extends Module<SyntaxOptions> {
 }
 Syntax.DEFAULTS = {
   hljs: (() => {
-    // @ts-expect-error
     return window.hljs;
   })(),
   interval: 1000,
@@ -342,7 +341,7 @@ Syntax.DEFAULTS = {
     { key: 'diff', label: 'Diff' },
     { key: 'xml', label: 'HTML/XML' },
     { key: 'java', label: 'Java' },
-    { key: 'javascript', label: 'Javascript' },
+    { key: 'javascript', label: 'JavaScript' },
     { key: 'markdown', label: 'Markdown' },
     { key: 'php', label: 'PHP' },
     { key: 'python', label: 'Python' },

packages/quill/test/unit/modules/syntax.spec.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import hljs from 'highlight.js';
 import Delta from 'quill-delta';
 import { afterAll, beforeAll, describe, expect, test } from 'vitest';
@@ -15,7 +14,7 @@ describe('Syntax', () => {
     Quill.register({ 'modules/syntax': Syntax }, true);
     Syntax.register();
     Syntax.DEFAULTS.languages = [
-      { key: 'javascript', label: 'Javascript' },
+      { key: 'javascript', label: 'JavaScript' },
       { key: 'ruby', label: 'Ruby' },
     ];
   });
@@ -166,15 +165,15 @@ describe('Syntax', () => {
         `
           <div class="ql-code-block-container" spellcheck="false">
             <select class="ql-ui" contenteditable="false">
-              <option value="javascript">Javascript</option>
+              <option value="javascript">JavaScript</option>
               <option value="ruby">Ruby</option>
             </select>
             <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
           </div>
           <p><br></p>
           <div class="ql-code-block-container" spellcheck="false">
             <select class="ql-ui" contenteditable="false">
-              <option value="javascript">Javascript</option>
+              <option value="javascript">JavaScript</option>
               <option value="ruby">Ruby</option>
             </select>
             <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
@@ -201,7 +200,7 @@ describe('Syntax', () => {
         `
             <div class="ql-code-block-container" spellcheck="false">
               <select class="ql-ui" contenteditable="false">
-                <option value="javascript">Javascript</option>
+                <option value="javascript">JavaScript</option>
                 <option value="ruby">Ruby</option>
               </select>
               <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>

packages/website/gatsby-node.js

@@ -35,6 +35,11 @@ exports.onCreateNode = async ({ node, actions, getNode, reporter, cache }) => {
   const relativePath = path.relative(path.resolve("content"), filePath);
   const extension = path.extname(filePath);
   const slug = relativePath.replace(extension, "");
+  createNodeField({
+    node,
+    name: `githubPath`,
+    value: path.join(siteMetadata.github, relativePath),
+  });
   createNodeField({
     node,
     name: `pageType`,

packages/website/package.json

@@ -23,6 +23,9 @@
     "react-helmet": "^6.1.0",
     "slugify": "^1.6.5"
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "devDependencies": {
     "gatsby": "4.24.5",
     "gatsby-plugin-feed": "4.24.0",
@@ -33,7 +36,7 @@
     "gatsby-remark-prismjs": "6.24.0",
     "gatsby-source-filesystem": "4.24.0",
     "http-proxy": "^1.18.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.3.0",
     "prismjs": "^1.29.0",
     "sass": "^1.55.0"
   }

packages/website/root-wrapper.js

@@ -1,5 +1,5 @@
 import { MDXProvider } from '@mdx-js/react';
-import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Highlight, themes, defaultProps } from 'prism-react-renderer';
 import CodePen from './src/components/CodePen';
 import Editor from './src/components/Editor';
 import {

packages/website/src/components/GitHub.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import OctocatIcon from "../svg/octocat.svg";
 import * as styles from "./GitHub.module.scss";
 
-const placeholderCount = (33825).toLocaleString();
+const placeholderCount = (37622).toLocaleString();
 
 const GitHub = ({ dark = false }) => {
   const [count, setCount] = useState(placeholderCount);
@@ -21,7 +21,7 @@ const GitHub = ({ dark = false }) => {
   }, []);
 
   return (
-    <span className={classNames(styles.button, { [styles.isDark]: dark })}>
+    <div className={classNames(styles.button, { [styles.isDark]: dark })}>
       <a
         className={styles.action}
         target="_blank"
@@ -39,7 +39,7 @@ const GitHub = ({ dark = false }) => {
       >
         {count}
       </a>
-    </span>
+    </div>
   );
 };
 

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

@@ -1,17 +1,19 @@
 .button {
   background-color: #1d1e30;
   border: 3px solid #1d1e30;
-  display: inline-block;
-  font-family: 'Sofia Pro', sans-serif;
+  display: flex;
+  flex-direction: row;
+  font-family: "Sofia Pro", sans-serif;
   font-weight: bold;
   letter-spacing: 0.15rem;
   text-transform: uppercase;
+  width: min-content;
 }
 
 .action {
   color: #fff;
-  display: inline-block;
-  float: left;
+  display: flex;
+  flex-direction: row;
   font-size: 1.33rem;
   line-height: 32px;
   padding: 10px 22px;
@@ -34,8 +36,6 @@
 
 .count {
   background-color: #fff;
-  display: inline-block;
-  float: left;
   font-size: 1.75rem;
   line-height: 32px;
   padding: 10px 30px;
@@ -58,3 +58,7 @@
   background-color: #1d1e30;
   color: #fff;
 }
+
+body:not(:global(.home)) .button {
+  margin-top: 1.78em;
+}

packages/website/src/components/Heading.jsx

@@ -24,7 +24,7 @@ const Heading = ({ level, children, anchor = 'on' }) => {
     { id },
     <>
       {id && <a className="anchor" href={`#${id}`}></a>}
-      {children}
+      {title}
       {isExperimental && <span className="experimental">experimental</span>}
     </>,
   );