feat: Add Community page & Docusaurus 2 config

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
2023-01-24 23:53:15 -05:00
parent 2cc2155bcf
commit db485e2061
7 changed files with 612 additions and 142 deletions
@@ -13,6 +13,10 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
+// @ts-check
+
+/** @type {import('@docusaurus/types').Config} */
 module.exports = {
  title: 'Backstage Software Catalog and Developer Platform',
  tagline: 'An open platform for building developer portals',
@@ -40,6 +44,7 @@ module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
      {
        docs: {
          showLastUpdateAuthor: true,
@@ -60,138 +65,140 @@ module.exports = {
      },
    ],
  ],
-  plugins: [],
-  themeConfig: {
-    navbar: {
-      title: 'Backstage Software Catalog and Developer Platform',
-      items: [
-        {
-          href: 'https://github.com/backstage/backstage',
-          label: 'GitHub',
-          position: 'left',
-        },
-        {
-          to: 'docs/overview/what-is-backstage',
-          label: 'Docs',
-          position: 'left',
-        },
-        {
-          to: '/plugins',
-          label: 'Plugins',
-          position: 'left',
-        },
-        {
-          to: '/blog',
-          label: 'Blog',
-          position: 'left',
-        },
-        {
-          to: 'docs/releases/v1.8.0',
-          label: 'Releases',
-          position: 'left',
-        },
-        {
-          to: '/demos',
-          label: 'Demos',
-          position: 'left',
-        },
-        {
-          to: '/community',
-          label: 'Community',
-          position: 'left',
-        },
-      ],
+  plugins: ['docusaurus-plugin-sass'],
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    {
+      navbar: {
+        title: 'Backstage Software Catalog and Developer Platform',
+        items: [
+          {
+            href: 'https://github.com/backstage/backstage',
+            label: 'GitHub',
+            position: 'left',
+          },
+          {
+            to: 'docs/overview/what-is-backstage',
+            label: 'Docs',
+            position: 'left',
+          },
+          {
+            to: '/plugins',
+            label: 'Plugins',
+            position: 'left',
+          },
+          {
+            to: '/blog',
+            label: 'Blog',
+            position: 'left',
+          },
+          {
+            to: 'docs/releases/v1.8.0',
+            label: 'Releases',
+            position: 'left',
+          },
+          {
+            to: '/demos',
+            label: 'Demos',
+            position: 'left',
+          },
+          {
+            to: '/community',
+            label: 'Community',
+            position: 'left',
+          },
+        ],
+      },
+      image: 'img/sharing-opengraph.png',
+      footer: {
+        links: [
+          {
+            items: [
+              {
+                html: '<a href="/"><h2 class="footerLogo"></h2></a>',
+              },
+            ],
+          },
+          {
+            title: 'Docs',
+            items: [
+              {
+                label: 'What is Backstage?',
+                to: 'docs/overview/what-is-backstage',
+              },
+              {
+                label: 'Getting started',
+                to: 'docs/getting-started/',
+              },
+              {
+                label: 'Software Catalog',
+                to: 'docs/features/software-catalog/software-catalog-overview',
+              },
+              {
+                label: 'Create a Plugin',
+                to: 'docs/plugins/create-a-plugin',
+              },
+              {
+                label: 'Designing for Backstage',
+                to: 'docs/dls/design',
+              },
+            ],
+          },
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'Support chatroom',
+                to: 'https://discord.gg/MUpMjP2',
+              },
+              {
+                label: 'Contributing',
+                to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md',
+              },
+              {
+                label: 'Adopting',
+                to: 'https://backstage.spotify.com',
+              },
+              {
+                label: 'Subscribe to our newsletter',
+                to: 'https://mailchi.mp/spotify/backstage-community',
+              },
+              {
+                label: 'CNCF Incubation',
+                to: 'https://www.cncf.io/projects/',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'Open Source @ Spotify',
+                to: 'https://spotify.github.io/',
+              },
+              {
+                label: 'Spotify Engineering Blog',
+                to: 'https://engineering.atspotify.com/',
+              },
+              {
+                label: 'Spotify for Developers',
+                to: 'https://developer.spotify.com/',
+              },
+              {
+                label: 'Github',
+                to: 'https://github.com/backstage/',
+              },
+            ],
+          },
+        ],
+        copyright:
+          '<p style="text-align:center"><a href="https://spotify.github.io/">Made with ❤️ at Spotify</a></p><p class="copyright">Copyright © 2022 Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage</p>',
+      },
+      algolia: {
+        appId: 'AZYC4ZFNTN',
+        apiKey: '7dbd2089b0d445ee0d87db71abfc794f',
+        indexName: 'backstage',
+        searchParameters: {},
+      },
    },
-    image: 'img/sharing-opengraph.png',
-    footer: {
-      links: [
-        {
-          items: [
-            {
-              html: '<a href="/"><h2 class="footerLogo"></h2></a>',
-            },
-          ],
-        },
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'What is Backstage?',
-              to: 'docs/overview/what-is-backstage',
-            },
-            {
-              label: 'Getting started',
-              to: 'docs/getting-started/',
-            },
-            {
-              label: 'Software Catalog',
-              to: 'docs/features/software-catalog/software-catalog-overview',
-            },
-            {
-              label: 'Create a Plugin',
-              to: 'docs/plugins/create-a-plugin',
-            },
-            {
-              label: 'Designing for Backstage',
-              to: 'docs/dls/design',
-            },
-          ],
-        },
-        {
-          title: 'Community',
-          items: [
-            {
-              label: 'Support chatroom',
-              to: 'https://discord.gg/MUpMjP2',
-            },
-            {
-              label: 'Contributing',
-              to: 'https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md',
-            },
-            {
-              label: 'Adopting',
-              to: 'https://backstage.spotify.com',
-            },
-            {
-              label: 'Subscribe to our newsletter',
-              to: 'https://mailchi.mp/spotify/backstage-community',
-            },
-            {
-              label: 'CNCF Incubation',
-              to: 'https://www.cncf.io/projects/',
-            },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
-            {
-              label: 'Open Source @ Spotify',
-              to: 'https://spotify.github.io/',
-            },
-            {
-              label: 'Spotify Engineering Blog',
-              to: 'https://engineering.atspotify.com/',
-            },
-            {
-              label: 'Spotify for Developers',
-              to: 'https://developer.spotify.com/',
-            },
-            {
-              label: 'Github',
-              to: 'https://github.com/backstage/',
-            },
-          ],
-        },
-      ],
-      copyright:
-        '<p style="text-align:center"><a href="https://spotify.github.io/">Made with ❤️ at Spotify</a></p><p class="copyright">Copyright © 2022 Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage</p>',
-    },
-    algolia: {
-      appId: 'AZYC4ZFNTN',
-      apiKey: '7dbd2089b0d445ee0d87db71abfc794f',
-      indexName: 'backstage',
-      searchParameters: {},
-    },
-  },
 };
@@ -17,17 +17,22 @@
    "docusaurus": "docusaurus"
  },
  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.2.0",
    "@spotify/prettier-config": "^14.0.0",
+    "@tsconfig/docusaurus": "^1.0.6",
    "js-yaml": "^4.1.0",
    "prettier": "^2.6.2",
-    "replace": "^1.2.2"
+    "replace": "^1.2.2",
+    "typescript": "^4.9.4"
  },
  "prettier": "@spotify/prettier-config",
  "dependencies": {
    "@docusaurus/core": "2.2.0",
    "@docusaurus/preset-classic": "2.2.0",
    "clsx": "^1.1.1",
+    "docusaurus-plugin-sass": "^0.2.3",
    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sass": "^1.57.1"
  }
 }
@@ -0,0 +1,81 @@
+.communityPage {
+  // --ifm-spacing-horizontal: 2rem;
+
+  font-size: 1.25rem;
+
+  h1 {
+    font-size: 54px;
+    line-height: 56px;
+    word-break: break-word;
+  }
+}
+
+.banner,
+.officialInitiatives,
+.communityInitiatives,
+.trainingNCertifications,
+.commercialPartners {
+  :global(.row .col) {
+    max-width: 50%;
+
+    display: flex;
+    flex-direction: column;
+
+    :global(.bulletLine) {
+      width: 50px;
+      height: 3px;
+      background: linear-gradient(
+        89.75deg,
+        #9bf0e1 -1.5%,
+        rgba(155, 240, 225, 0) 111.48%
+      );
+    }
+
+    p {
+      flex: 1;
+    }
+  }
+}
+
+.banner,
+.communityInitiatives,
+.commercialPartners {
+  background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
+  // clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw - 10px), 0 100%);
+}
+
+.banner {
+  ul {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.officialInitiatives {
+  background: linear-gradient(
+      178.64deg,
+      hsla(0, 0%, 100%, 0) 57.61%,
+      hsla(0, 0%, 100%, 0.17) 127.71%
+    ),
+    linear-gradient(
+      144.35deg,
+      rgba(98, 197, 179, 0) 56.68%,
+      rgba(98, 197, 179, 0.59) 109.25%
+    ),
+    linear-gradient(
+      192.29deg,
+      rgba(155, 240, 225, 0) 54.17%,
+      rgba(155, 240, 225, 0.67) 137.34%
+    );
+}
+
+.communityInitiatives {
+}
+
+.trainingNCertifications {
+}
+
+.partners {
+}
@@ -0,0 +1,281 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import { clsx } from 'clsx';
+import React from 'react';
+
+import communityStyles from './community.module.scss';
+
+interface ICollectionItem {
+  title?: string;
+  content: React.ReactNode;
+  label: string;
+  link: string;
+}
+
+export default function Community() {
+  const { siteConfig } = useDocusaurusContext();
+
+  const communityListItems: ICollectionItem[] = [
+    {
+      content: 'Chat and get support on our',
+      label: 'Discord',
+      link: 'https://discord.gg/MUpMjP2',
+    },
+    {
+      content: 'Get into contributing with the',
+      label: 'Good First Issues',
+      link: 'https://github.com/backstage/backstage/contribute',
+    },
+    {
+      content: 'Subscribe to the',
+      label: 'Community newsletter',
+      link: 'https://info.backstage.spotify.com/newsletter_subscribe',
+    },
+    {
+      content: 'Join the',
+      label: 'Twitter community',
+      link: 'https://twitter.com/i/communities/1494019781716062215',
+    },
+  ];
+
+  const officialInitiatives: ICollectionItem[] = [
+    {
+      title: 'Community sessions',
+      content:
+        'Maintainers and adopters meet monthly to share updates, demos, and ideas. Yep, all sessions are recorded!',
+      link: '/on-demand',
+      label: 'Join a session',
+    },
+    {
+      title: 'Newsletter',
+      content:
+        "The official monthly Backstage newsletter. Don't miss the latest news from your favorite project!",
+      link: 'https://info.backstage.spotify.com/newsletter_subscribe',
+      label: 'Subscribe',
+    },
+    {
+      title: 'Contributor Spotlight',
+      content:
+        "A recognition for valuable community work. Nominate contributing members for their efforts! We'll put them in the spotlight ❤️",
+      link: '/nominate',
+      label: 'Nominate now',
+    },
+  ];
+
+  const communityInitiatives: ICollectionItem[] = [
+    {
+      title: 'Open Mic Meetup',
+      content: (
+        <>
+          A casual get together of Backstage users sharing their experiences and
+          helping each other. Hosted by{' '}
+          <Link to="https://roadie.io/">Roadie.io</Link> and{' '}
+          <Link to="https://frontside.com/">Frontside Software</Link>.
+        </>
+      ),
+      link: 'https://backstage-openmic.com/',
+      label: 'Learn more',
+    },
+    {
+      title: 'Backstage Weekly Newsletter',
+      content: (
+        <>
+          A weekly newsletter with news, updates and things community from your
+          friends at <Link to="https://roadie.io/">Roadie.io</Link>.
+        </>
+      ),
+      link: 'https://roadie.io/backstage-weekly/',
+      label: 'Learn more',
+    },
+  ];
+
+  const trainingNCertifications: ICollectionItem[] = [
+    {
+      title: 'Open Mic Meetup',
+      content:
+        'This is a course produced and curated by the Linux Foundation. This course introduces you to Backstage and how to get started with the project.',
+      link: 'https://training.linuxfoundation.org/training/introduction-to-backstage-developer-portals-made-easy-lfs142x/',
+      label: 'Learn more',
+    },
+  ];
+
+  const partners: { name: string; url: string; logo: string }[] = [
+    {
+      name: 'Frontside Software',
+      url: 'https://frontside.com/backstage/',
+      logo: 'img/partner-logo-frontside.png',
+    },
+    {
+      name: 'Roadie',
+      url: 'https://roadie.io/',
+      logo: 'img/partner-logo-roadie.png',
+    },
+    {
+      name: 'ThoughtWorks',
+      url: 'https://www.thoughtworks.com',
+      logo: 'img/partner-logo-thoughtworks.png',
+    },
+    {
+      name: 'VMWare',
+      url: 'https://www.vmware.com',
+      logo: 'img/partner-logo-vmware.png',
+    },
+  ];
+
+  return (
+    <Layout>
+      <div className={clsx(communityStyles.communityPage)}>
+        <section className={communityStyles.banner}>
+          <div className={clsx('container')}>
+            <div className="row">
+              <div
+                className={clsx('col', 'padding-vert--xl padding-right--xl')}
+              >
+                <h1 className={clsx('margin-bottom--lg')}>
+                  Backstage Community
+                </h1>
+
+                <p>
+                  Join the vibrant community around Backstage through social
+                  media and different meetups. To ensure that you have a
+                  welcoming environment, we follow the
+                  <a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
+                    {' '}
+                    CNCF Code of Conduct{' '}
+                  </a>
+                  in everything we do.
+                </p>
+              </div>
+
+              <div className={clsx('col', 'padding-vert--xl padding-left--xl')}>
+                <h2 className={clsx('margin-bottom--lg')}>
+                  Get started in our community!
+                </h2>
+
+                <ul>
+                  {communityListItems.map(
+                    ({ content: text, link, label }, index) => (
+                      <li key={index}>
+                        <p className="margin-bottom--none">
+                          {text} <a href={link}>{label}</a>
+                        </p>
+                      </li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className={communityStyles.officialInitiatives}>
+          <div className={clsx('container', 'padding-vert--xl')}>
+            <div className="padding-bottom--xl">
+              <h2 className="text--primary">Offical Backstage initiatives</h2>
+
+              <h1>Stay tuned to the latest developments</h1>
+            </div>
+
+            <div className="row">
+              {officialInitiatives.map(
+                ({ title, content, link, label }, index) => (
+                  <div className={clsx('col')} key={index}>
+                    <div className="bulletLine"></div>
+
+                    <h2>{title}</h2>
+
+                    <p className="padding-bottom--lg">{content}</p>
+
+                    <Link
+                      className="button button--primary button--lg"
+                      to={link}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className={communityStyles.communityInitiatives}>
+          <div className={clsx('container', 'padding-vert--xl')}>
+            <div className="padding-bottom--xl">
+              <h2 className="text--primary">Community initiatives</h2>
+            </div>
+
+            <div className="row">
+              {communityInitiatives.map(
+                ({ title, content, link, label }, index) => (
+                  <div className={clsx('col')} key={index}>
+                    <div className="bulletLine"></div>
+
+                    <h2>{title}</h2>
+
+                    <p className="padding-bottom--lg">{content}</p>
+
+                    <Link
+                      className="button button--primary button--lg"
+                      to={link}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className={communityStyles.trainingNCertifications}>
+          <div className={clsx('container', 'padding-vert--xl')}>
+            <div className="padding-bottom--xl">
+              <h2 className="text--primary">Trainings and Certifications</h2>
+            </div>
+
+            <div className="row">
+              {trainingNCertifications.map(
+                ({ title, content, link, label }, index) => (
+                  <div className={clsx('col')} key={index}>
+                    <div className="bulletLine"></div>
+
+                    <h2>{title}</h2>
+
+                    <p className="padding-bottom--lg">{content}</p>
+
+                    <Link
+                      className="button button--primary button--lg"
+                      to={link}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className={communityStyles.commercialPartners}>
+          <div className={clsx('container', 'padding-vert--xl')}>
+            <div className="padding-bottom--xl">
+              <h2 className="text--primary">Commercial Partners</h2>
+            </div>
+
+            <div className="row">
+              {partners.map(({ name, url, logo }, index) => (
+                <div className={clsx('col')} key={index}>
+                  <Link to={url}>
+                    <img src={`${siteConfig.baseUrl}${logo}`} alt={name} />
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+    </Layout>
+  );
+}
@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
@@ -0,0 +1 @@
+declare module '*.scss';
@@ -1794,7 +1794,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@docusaurus/module-type-aliases@npm:2.2.0":
+"@docusaurus/module-type-aliases@npm:2.2.0, @docusaurus/module-type-aliases@npm:^2.2.0":
  version: 2.2.0
  resolution: "@docusaurus/module-type-aliases@npm:2.2.0"
  dependencies:
@@ -2608,6 +2608,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@tsconfig/docusaurus@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@tsconfig/docusaurus@npm:1.0.6"
+  checksum: fb0d7965c01fe64fc6369a72695b903d654bd5fb145f373d707c2bae3c2d828703517d812cef1c041ae44b108f44e52778b9d9837a54fdf782e68e6619a90a4d
+  languageName: node
+  linkType: hard
+
 "@types/body-parser@npm:*":
  version: 1.19.2
  resolution: "@types/body-parser@npm:1.19.2"
@@ -3566,14 +3573,19 @@ __metadata:
  resolution: "backstage-microsite@workspace:."
  dependencies:
    "@docusaurus/core": 2.2.0
+    "@docusaurus/module-type-aliases": ^2.2.0
    "@docusaurus/preset-classic": 2.2.0
    "@spotify/prettier-config": ^14.0.0
+    "@tsconfig/docusaurus": ^1.0.6
    clsx: ^1.1.1
+    docusaurus-plugin-sass: ^0.2.3
    js-yaml: ^4.1.0
    prettier: ^2.6.2
    react: ^17.0.2
    react-dom: ^17.0.2
    replace: ^1.2.2
+    sass: ^1.57.1
+    typescript: ^4.9.4
  languageName: unknown
  linkType: soft

@@ -3939,7 +3951,7 @@ __metadata:
  languageName: node
  linkType: hard

-"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
  version: 3.5.3
  resolution: "chokidar@npm:3.5.3"
  dependencies:
@@ -4790,6 +4802,18 @@ __metadata:
  languageName: node
  linkType: hard

+"docusaurus-plugin-sass@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "docusaurus-plugin-sass@npm:0.2.3"
+  dependencies:
+    sass-loader: ^10.1.1
+  peerDependencies:
+    "@docusaurus/core": ^2.0.0-beta
+    sass: ^1.30.0
+  checksum: 928b02fd7c63835d54cdcce2eeda01cb6124707c6d43ef8e77db06474d3e3b4b7282cc0d88fed378cf1f3db2fc93ba8c11366965bb9b668eae19ca805e578acb
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
  version: 0.2.0
  resolution: "dom-converter@npm:0.2.0"
@@ -6214,6 +6238,13 @@ __metadata:
  languageName: node
  linkType: hard

+"immutable@npm:^4.0.0":
+  version: 4.2.2
+  resolution: "immutable@npm:4.2.2"
+  checksum: 4d6437ea9388fe8ceca7eed5c768cf438cda7fa14d2831b87b90aa00cc60d536964d107c255b8a2e5dbf4f44a0e1295afbb9d1f0a65fb4f57b936e71df601862
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
  version: 3.3.0
  resolution: "import-fresh@npm:3.3.0"
@@ -6793,10 +6824,10 @@ __metadata:
  languageName: node
  linkType: hard

-"klona@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "klona@npm:2.0.5"
-  checksum: 8c976126ea252b766e648a4866e1bccff9d3b08432474ad80c559f6c7265cf7caede2498d463754d8c88c4759895edd8210c85c0d3155e6aae4968362889466f
+"klona@npm:^2.0.4, klona@npm:^2.0.5":
+  version: 2.0.6
+  resolution: "klona@npm:2.0.6"
+  checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
  languageName: node
  linkType: hard

@@ -9214,6 +9245,44 @@ __metadata:
  languageName: node
  linkType: hard

+"sass-loader@npm:^10.1.1":
+  version: 10.4.1
+  resolution: "sass-loader@npm:10.4.1"
+  dependencies:
+    klona: ^2.0.4
+    loader-utils: ^2.0.0
+    neo-async: ^2.6.2
+    schema-utils: ^3.0.0
+    semver: ^7.3.2
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    sass: ^1.3.0
+    webpack: ^4.36.0 || ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+  checksum: df9a65a62247e95305299ccbdf212cffdcdb69490928aecdf4f3dcf539b5302ed7cbffa663f83c5fc3ce0864decf84257a9ce484f6df4cb4426feeb88445dcd0
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.57.1":
+  version: 1.57.1
+  resolution: "sass@npm:1.57.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 734a08781bcbe0e8defb2d54864e7012014ed3e68ba5fcb766189b002929019fc37b2f83a18d4be0b5f69ad77317c92396ce6112447ab47a194ed600ae1afb27
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4":
  version: 1.2.4
  resolution: "sax@npm:1.2.4"
@@ -9603,7 +9672,7 @@ __metadata:
  languageName: node
  linkType: hard

-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
  version: 1.0.2
  resolution: "source-map-js@npm:1.0.2"
  checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c
@@ -10092,6 +10161,26 @@ __metadata:
  languageName: node
  linkType: hard

+"typescript@npm:^4.9.4":
+  version: 4.9.4
+  resolution: "typescript@npm:4.9.4"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^4.9.4#~builtin<compat/typescript>":
+  version: 4.9.4
+  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=a1c5e5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 37f6e2c3c5e2aa5934b85b0fddbf32eeac8b1bacf3a5b51d01946936d03f5377fe86255d4e5a4ae628fd0cd553386355ad362c57f13b4635064400f3e8e05b9d
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^0.7.30":
  version: 0.7.33
  resolution: "ua-parser-js@npm:0.7.33"