Fix website active nav styles

slab · Dec 7, 2023 · 6c43460 · 6c43460
1 parent 67ce906
commit 6c43460
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 43 deletions.
diff --git a/packages/quill/tsconfig.json b/packages/quill/tsconfig.json
@@ -18,5 +18,5 @@
     "noImplicitAny": true,
     "noUnusedLocals": true
   },
-  "include": ["src/**/*", "*.ts"]
+  "include": ["src/**/*", "*.ts", "*.cts"]
 }
diff --git a/packages/website/gatsby-node.js b/packages/website/gatsby-node.js
@@ -21,11 +21,13 @@ exports.onCreateNode = async ({ node, actions, getNode, reporter, cache }) => {
   const filePath = node.internal.contentFilePath;
   let pageType = "unknown";
   if (filePath.startsWith(path.resolve("content/guides"))) {
-    pageType = "guide";
+    pageType = "guides";
   } else if (filePath.startsWith(path.resolve("content/docs"))) {
     pageType = "docs";
   } else if (filePath.startsWith(path.resolve("content/blog"))) {
     pageType = "blog";
+  } else if (filePath.startsWith(path.resolve("content/playground"))) {
+    pageType = "playground";
   } else if (filePath.startsWith(path.resolve("content/standalone"))) {
     pageType = "standalone";
   }
@@ -88,7 +90,7 @@ exports.createPages = ({ graphql, actions }) => {
   const templates = {
     blog: path.resolve(`src/templates/post.jsx`),
     standalone: path.resolve(`src/templates/standalone.jsx`),
-    guide: docTemplate,
+    guides: docTemplate,
     docs: docTemplate,
   };
   return graphql(

diff --git a/packages/website/src/gatsby-types.d.ts b/packages/website/src/gatsby-types.d.ts
@@ -1401,13 +1401,17 @@ type Query_mdxArgs = {
 type Query_siteArgs = {
   buildTime: InputMaybe<DateQueryOperatorInput>;
   children: InputMaybe<NodeFilterListInput>;
-  graphqlTypegen: InputMaybe<BooleanQueryOperatorInput>;
+  graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
   host: InputMaybe<StringQueryOperatorInput>;
   id: InputMaybe<StringQueryOperatorInput>;
   internal: InputMaybe<InternalFilterInput>;
+  jsxRuntime: InputMaybe<StringQueryOperatorInput>;
   parent: InputMaybe<NodeFilterInput>;
+  pathPrefix: InputMaybe<StringQueryOperatorInput>;
+  polyfill: InputMaybe<BooleanQueryOperatorInput>;
   port: InputMaybe<IntQueryOperatorInput>;
   siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
+  trailingSlash: InputMaybe<StringQueryOperatorInput>;
 };
 
 
@@ -1469,13 +1473,17 @@ type Query_sitePluginArgs = {
 type Site = Node & {
   readonly buildTime: Maybe<Scalars['Date']>;
   readonly children: ReadonlyArray<Node>;
-  readonly graphqlTypegen: Maybe<Scalars['Boolean']>;
+  readonly graphqlTypegen: Maybe<SiteGraphqlTypegen>;
   readonly host: Maybe<Scalars['String']>;
   readonly id: Scalars['ID'];
   readonly internal: Internal;
+  readonly jsxRuntime: Maybe<Scalars['String']>;
   readonly parent: Maybe<Node>;
+  readonly pathPrefix: Maybe<Scalars['String']>;
+  readonly polyfill: Maybe<Scalars['Boolean']>;
   readonly port: Maybe<Scalars['Int']>;
   readonly siteMetadata: Maybe<SiteSiteMetadata>;
+  readonly trailingSlash: Maybe<Scalars['String']>;
 };
 
 
@@ -1786,7 +1794,8 @@ type SiteFieldsEnum =
   | 'children.parent.internal.type'
   | 'children.parent.parent.children'
   | 'children.parent.parent.id'
-  | 'graphqlTypegen'
+  | 'graphqlTypegen.generateOnBuild'
+  | 'graphqlTypegen.typesOutputPath'
   | 'host'
   | 'id'
   | 'internal.content'
@@ -1798,6 +1807,7 @@ type SiteFieldsEnum =
   | 'internal.mediaType'
   | 'internal.owner'
   | 'internal.type'
+  | 'jsxRuntime'
   | 'parent.children'
   | 'parent.children.children'
   | 'parent.children.children.children'
@@ -1839,6 +1849,8 @@ type SiteFieldsEnum =
   | 'parent.parent.internal.type'
   | 'parent.parent.parent.children'
   | 'parent.parent.parent.id'
+  | 'pathPrefix'
+  | 'polyfill'
   | 'port'
   | 'siteMetadata.cdn'
   | 'siteMetadata.description'
@@ -1849,18 +1861,23 @@ type SiteFieldsEnum =
   | 'siteMetadata.shortTitle'
   | 'siteMetadata.title'
   | 'siteMetadata.url'
-  | 'siteMetadata.version';
+  | 'siteMetadata.version'
+  | 'trailingSlash';
 
 type SiteFilterInput = {
   readonly buildTime: InputMaybe<DateQueryOperatorInput>;
   readonly children: InputMaybe<NodeFilterListInput>;
-  readonly graphqlTypegen: InputMaybe<BooleanQueryOperatorInput>;
+  readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
   readonly host: InputMaybe<StringQueryOperatorInput>;
   readonly id: InputMaybe<StringQueryOperatorInput>;
   readonly internal: InputMaybe<InternalFilterInput>;
+  readonly jsxRuntime: InputMaybe<StringQueryOperatorInput>;
   readonly parent: InputMaybe<NodeFilterInput>;
+  readonly pathPrefix: InputMaybe<StringQueryOperatorInput>;
+  readonly polyfill: InputMaybe<BooleanQueryOperatorInput>;
   readonly port: InputMaybe<IntQueryOperatorInput>;
   readonly siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
+  readonly trailingSlash: InputMaybe<StringQueryOperatorInput>;
 };
 
 type SiteFunction = Node & {
@@ -2084,6 +2101,16 @@ type SiteFunctionSortInput = {
   readonly order: InputMaybe<ReadonlyArray<InputMaybe<SortOrderEnum>>>;
 };
 
+type SiteGraphqlTypegen = {
+  readonly generateOnBuild: Maybe<Scalars['Boolean']>;
+  readonly typesOutputPath: Maybe<Scalars['String']>;
+};
+
+type SiteGraphqlTypegenFilterInput = {
+  readonly generateOnBuild: InputMaybe<BooleanQueryOperatorInput>;
+  readonly typesOutputPath: InputMaybe<StringQueryOperatorInput>;
+};
+
 type SiteGroupConnection = {
   readonly distinct: ReadonlyArray<Scalars['String']>;
   readonly edges: ReadonlyArray<SiteEdge>;

diff --git a/packages/website/src/pages/blog/index.jsx b/packages/website/src/pages/blog/index.jsx
@@ -1,13 +1,13 @@
-import { graphql } from 'gatsby';
-import * as styles from './index.module.scss';
-import SEO from '../../components/SEO';
-import Default from '../../components/Default';
+import { graphql } from "gatsby";
+import * as styles from "./index.module.scss";
+import SEO from "../../components/SEO";
+import Default from "../../components/Default";
 
 const Blog = ({ data }) => (
-  <Default>
+  <Default pageType="blog">
     <div id="blog-container" className="container">
       <div className="post-list">
-        {data.allMdx.nodes.map(node => (
+        {data.allMdx.nodes.map((node) => (
           <div className="post-item">
             <h1>
               <a href={node.fields.permalink} title={node.frontmatter.title}>
@@ -19,9 +19,9 @@ const Blog = ({ data }) => (
                 {node.frontmatter.date}
               </time>
               <span>
-                {' - '}
+                {" - "}
                 <a href="https://twitter.com/jhchen" title="Jason Chen">
-                  {'Jason Chen'}
+                  {"Jason Chen"}
                 </a>
               </span>
             </div>

diff --git a/packages/website/src/pages/playground.jsx b/packages/website/src/pages/playground.jsx
@@ -1,31 +1,33 @@
-import classNames from 'classnames';
-import { useState } from 'react';
-import Default from '../components/Default';
-import OpenSource from '../components/OpenSource';
-import SEO from '../components/SEO';
-import slug from '../utils/slug';
+import classNames from "classnames";
+import { useState } from "react";
+import Default from "../components/Default";
+import OpenSource from "../components/OpenSource";
+import SEO from "../components/SEO";
+import slug from "../utils/slug";
 
 const pens = [
-  { title: 'Autosave', hash: 'RRYBEP' },
-  { title: 'Class vs Inline Style', hash: 'jAvpQL' },
-  { title: 'Form Submit', hash: 'kXRjQJ' },
-  { title: 'Snow Toolbar Tooltips', hash: 'ozYEro' },
-  { title: 'Autogrow Height', hash: 'dOqrVm' },
-  { title: 'Custom Fonts', hash: 'gLBYam' },
-  { title: 'Quill Playground', hash: 'KzZqZx' },
-].map(pen => ({ ...pen, slug: slug(pen.title) }));
+  { title: "Autosave", hash: "RRYBEP" },
+  { title: "Class vs Inline Style", hash: "jAvpQL" },
+  { title: "Form Submit", hash: "kXRjQJ" },
+  { title: "Snow Toolbar Tooltips", hash: "ozYEro" },
+  { title: "Autogrow Height", hash: "dOqrVm" },
+  { title: "Custom Fonts", hash: "gLBYam" },
+  { title: "Quill Playground", hash: "KzZqZx" },
+].map((pen) => ({ ...pen, slug: slug(pen.title) }));
 
-const isBrowser = typeof window !== 'undefined';
+const isBrowser = typeof window !== "undefined";
 
 const Playground = () => {
   const [selectedPen, setSelectedPen] = useState(() => {
     if (!isBrowser) return pens.length - 1;
     const { hash } = window.location;
-    const index = hash ? pens.findIndex(pen => pen.slug === hash.slice(1)) : -1;
+    const index = hash
+      ? pens.findIndex((pen) => pen.slug === hash.slice(1))
+      : -1;
     return index === -1 ? pens.length - 1 : index;
   });
   return (
-    <Default>
+    <Default pageType="playground">
       <div className="container">
         <div id="playground-container">
           <h1>Interactive Playground</h1>
@@ -39,15 +41,15 @@ const Playground = () => {
           {pens.map((pen, index) => (
             <div
               key={pen.slug}
-              className={classNames('four', 'columns', {
-                'selected-pen': selectedPen == index,
+              className={classNames("four", "columns", {
+                "selected-pen": selectedPen == index,
               })}
             >
               <a
                 href={`/playground/#${slug(pen.title)}`}
                 title={pen.title}
                 data-id={pen.hash}
-                onClick={e => {
+                onClick={(e) => {
                   setSelectedPen(index);
                 }}
               >

diff --git a/packages/website/src/templates/doc.jsx b/packages/website/src/templates/doc.jsx
@@ -58,9 +58,9 @@ const SidebarItem = ({ item }) => {
 const Doc = ({ data, location, children }) => {
   const { title } = data.mdx.frontmatter;
   const { permalink, pageType } = data.mdx.fields;
-  const category = pageType === "guide" ? "Guides" : "Documentation";
+  const category = pageType === "guides" ? "Guides" : "Documentation";
 
-  const items = pageType === "guide" ? guideItems : docsItems;
+  const items = pageType === "guides" ? guideItems : docsItems;
   const { prev, next } = getPagination(permalink, items);
 
   useEffect(() => {

diff --git a/packages/website/src/templates/post.jsx b/packages/website/src/templates/post.jsx
@@ -1,16 +1,16 @@
-import { graphql } from 'gatsby';
-import Default from '../components/Default';
-import SEO from '../components/SEO';
+import { graphql } from "gatsby";
+import Default from "../components/Default";
+import SEO from "../components/SEO";
 
 const Post = ({ data, children }) => (
-  <Default>
+  <Default pageType="blog">
     <div id="blog-container" className="container">
       <div className="post">
         <h1>{data.mdx?.frontmatter?.title}</h1>
         <div className="post-meta">
           <time>{data.mdx.frontmatter.date}</time>
           <span>
-            {' - '}
+            {" - "}
             <a href="https://twitter.com/jhchen" title="Jason Chen">
               Jason Chen
             </a>