Merge pull request #1129 from middyjs/update-website-to-docusaurus3

Update website to docusaurus3
middyjs · Nov 11, 2023 · 583a3b0 · 583a3b0
2 parents 5644e76 + 60bbf17
commit 583a3b0
Show file tree

Hide file tree

Showing 12 changed files with 7,678 additions and 4,449 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,10 @@
   <img alt="fourTheorem" src="https://raw.githubusercontent.com/middyjs/middy/main/website/static/img/logo/fourthereom.svg" style="max-width:50%" width="380"/>
 </a>
 
+<a href="https://github.com/aws">
+  <img alt="Amazon Web Services Free and Open Source Software Fund (AWS FOSS Fund)" src="https://raw.githubusercontent.com/middyjs/middy/main/website/static/img/logo/amazon-web-services.svg" style="max-width:50%" width="380"/>
+</a>
+
 ## License
 
 Licensed under [MIT License](LICENSE). Copyright (c) 2017-2023 [Luciano Mammino](https://github.com/lmammino), [will Farrell](https://github.com/willfarrell) and the [Middy team](https://github.com/middyjs/middy/graphs/contributors).

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -1,7 +1,8 @@
 // @ts-check
+const { themes } = require('prism-react-renderer')
 
-const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+const lightCodeTheme = themes.jettwaveLight
+const darkCodeTheme = themes.nightOwl
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -2,6 +2,9 @@
   "name": "middy",
   "version": "0.0.0",
   "private": true,
+  "engines": {
+    "node": ">=18.0"
+  },
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -14,16 +17,16 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.4.1",
-    "@mdx-js/react": "1.6.22",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "classnames": "^2.3.2",
     "clsx": "^1.1.1",
-    "docusaurus-lunr-search": "^2.4.1",
-    "prism-react-renderer": "^1.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "docusaurus-lunr-search": "^3.3.0",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "browserslist": {
     "production": [
@@ -38,6 +41,7 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/types": "^2.4.1"
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/types": "3.0.0"
   }
 }
diff --git a/website/src/components/Example.js b/website/src/components/Example.js
@@ -96,7 +96,7 @@ export default function Example () {
           Do you want to see some more <em>realistic</em> examples?
         </h3>
 
-        <p className='text--center'>
+        <p className={styles.buttons_list}>
           <Link
             to='/docs/events/api-gateway-http'
             className='button button--info'

diff --git a/website/src/components/Example.module.css b/website/src/components/Example.module.css
@@ -5,9 +5,16 @@
 .heading2 {
   text-align: center;
   font-size: 3em;
+  margin-bottom: 2rem;
 }
 
 .heading3 {
   text-align: center;
   font-size: 2.5em;
+  margin-bottom: 1.5rem;
 }
+
+.buttons_list {
+  text-align: center;
+  line-height: 3rem;
+}
diff --git a/website/src/components/HomepageSponsors.js b/website/src/components/HomepageSponsors.js
@@ -1,33 +1,33 @@
 import styles from './HomepageSponsors.module.css'
 import React from 'react'
 import clsx from 'clsx'
-
-/*
-AWS Powertools team
- */
-
-/*
- {
-   title: 'Organization Name',
-   url: 'https://github.com/{github username}', // https://github.com/{username}/{repo}
-   img: '/img/logo/{from github}.png'
- },
- */
+import FourTheoremLogo from './sponsors/fourtheorem'
+import AwsLogo from './sponsors/aws'
 
 const emptySponsor = {
   title: 'Sponsor',
   url: 'https://github.com/sponsors/willfarrell',
   img: '/img/logo/reserved.svg'
 }
 
-// const SponsorListLevel1 = []
 const SponsorListLevel2 = [
   {
-    title: 'fourThereom',
     url: 'https://fourtheorem.com',
-    img: '/img/logo/fourthereom.svg'
+    Component: (
+      <FourTheoremLogo className={styles.featureSvg} title='fourThereom' />
+    )
     // 2023-07 - 2024-06
   },
+  {
+    url: 'https://github.com/aws',
+    Component: (
+      <AwsLogo
+        className={styles.featureSvg}
+        title='Amazon Web Services Free and Open Source Software Fund (AWS FOSS Fund)'
+      />
+    )
+    // 2023-11-08
+  },
   emptySponsor
 ]
 
@@ -40,11 +40,11 @@ const SponsorListLevel4 = [
   }, */
 ]
 
-function Feature ({ title, url, img, size }) {
+function Feature ({ title, url, Component, size }) {
   return (
     <div className={clsx('col')}>
       <a href={url} className='padding-horiz--md'>
-        <img className={styles.featureSvg} alt={title} src={img} />
+        {Component}
       </a>
     </div>
   )

diff --git a/website/src/components/HomepageSponsors.module.css b/website/src/components/HomepageSponsors.module.css
@@ -3,8 +3,16 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  text-align: center;
+}
+
+.features h2 {
+  font-size: 2.5rem;
+  margin-bottom: 2.75rem;
 }
 
 .featureSvg {
   width: 100%;
-}
+  max-width: 250px;
+  max-height: 100px;
+}
diff --git a/website/src/components/sponsors/aws.js b/website/src/components/sponsors/aws.js
@@ -0,0 +1,34 @@
+import * as React from 'react'
+const AwsLogo = (props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlSpace='preserve'
+    id='Layer_1'
+    x={0}
+    y={0}
+    style={{
+      enableBackground: 'new 0 0 304 182'
+    }}
+    viewBox='0 0 304 182'
+    {...props}
+  >
+    <style>
+      {
+        "st0{fill:#252F3E;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FF9900;} html[data-theme='dark'] .st0 {fill: #fcfcfc;}"
+      }
+    </style>
+    <path
+      d='M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1h-8.6zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z'
+      class='st0'
+    />
+    <path
+      d='M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z'
+      className='st1'
+    />
+    <path
+      d='M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z'
+      className='st1'
+    />
+  </svg>
+)
+export default AwsLogo
diff --git a/website/src/components/sponsors/fourtheorem.js b/website/src/components/sponsors/fourtheorem.js
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -35,10 +35,14 @@ html[data-theme='dark'] {
 }
 
 html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(181, 24, 24, 0.3);
 }
 
 html[data-theme='dark'] .navbar__logo img,
 html[data-theme='dark'] img[alt="Middy middleware engine diagram"] {
   filter: invert(1);
 }
+
+.token-line.theme-code-block-highlighted-line {
+  background-color: rgba(245, 203, 67, 0.154) !important;
+}
diff --git a/website/static/img/logo/amazon-web-services.svg b/website/static/img/logo/amazon-web-services.svg