refactor(all): add TypeScript

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "avoid",
+  "semi": false,
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@(.*)$", "^[./]"],
+  "importOrderCaseInsensitive": true,
+  "importOrderParserPlugins": ["jsx", "typescript"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

README.md

@@ -6,7 +6,6 @@
 <p align="center">
     <img alt="Website" src="https://img.shields.io/website?url=https%3A%2F%2Foxidizer-rs.github.io">
     <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/oxidizer-rs/website/deploy">
-    <img alt="David" src="https://img.shields.io/david/oxidizer-rs/website">
     <a href="https://github.com/oxidizer-rs/website/blob/dev/LICENSE"><img alt="GitHub license" src="https://img.shields.io/github/license/oxidizer-rs/website"></a>
     <a href= "https://github.com/prettier/prettier"><img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg"></a>
 </p>

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
-};
+}

docusaurus.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('@docusaurus/types').Config} */
+const config = {
   title: "Oxidizer",
   tagline: "A Rust ORM based on tokio-postgres and refinery",
   url: "https://oxidizer-rs.github.io",
@@ -9,6 +10,7 @@ module.exports = {
   organizationName: "oxidizer-rs",
   projectName: "oxidizer-rs.github.io",
   themeConfig: {
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     announcementBar: {
       id: "archived",
       content:
@@ -79,4 +81,6 @@ module.exports = {
       },
     ],
   ],
-};
+}
+
+module.exports = config

package.json

@@ -41,10 +41,14 @@
     ]
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
+    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@tsconfig/docusaurus": "1.0.5",
     "cz-conventional-changelog": "3.3.0",
     "husky": "7.0.4",
     "prettier": "2.6.2",
-    "pretty-quick": "3.1.3"
+    "pretty-quick": "3.1.3",
+    "typescript": "4.6.4"
   },
   "config": {
     "commitizen": {

sidebars.js

@@ -22,4 +22,4 @@ module.exports = {
       id: "contributing",
     },
   ],
-};
+}

src/theme/CodeSnippet/index.js → src/components/CodeSnippet/index.tsx

@@ -1,18 +1,19 @@
-import React, { useEffect, useState } from "react";
-import Highlight, { defaultProps } from "prism-react-renderer";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { useColorMode } from "@docusaurus/theme-common";
+import React, { useEffect, useState } from "react"
 
-import styles from "./styles.module.scss";
+import Highlight, { defaultProps } from "prism-react-renderer"
 
-function CodeSnippet(props) {
-  const {
-    siteConfig: {
-      themeConfig: { prism = {} },
-    },
-  } = useDocusaurusContext();
+import { useColorMode } from "@docusaurus/theme-common"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 
-  const [mounted, setMounted] = useState(false);
+import styles from "./styles.module.scss"
+
+const CodeSnippet = (props: { language?: "javascript"; code: any }) => {
+  const { siteConfig } = useDocusaurusContext()
+
+  // @ts-ignore
+  const { theme, darkTheme } = siteConfig.themeConfig.prism
+
+  const [mounted, setMounted] = useState(false)
   // The Prism theme on SSR is always the default theme but the site theme
   // can be in a different mode. React hydration doesn't update DOM styles
   // that come from SSR. Hence force a re-render after mounting to apply the
@@ -21,22 +22,22 @@ function CodeSnippet(props) {
   // the flash will require changing the theming approach and is not worth it
   // at this point.
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    setMounted(true)
+  }, [])
 
-  const { isDarkTheme } = useColorMode();
-  const lightModeTheme = prism.theme;
-  const darkModeTheme = prism.darkTheme || lightModeTheme;
-  const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
+  const { colorMode, setColorMode } = useColorMode()
+  const lightModeTheme = theme
+  const darkModeTheme = darkTheme || lightModeTheme
+  const prismTheme = colorMode === "dark" ? darkModeTheme : lightModeTheme
 
-  const { language = "rust", code } = props;
+  const { language = "javascript", code } = props
 
   return (
     <Highlight
       {...defaultProps}
       code={code}
+      key={mounted.toString()}
       language={language}
-      key={mounted}
       theme={prismTheme}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -51,7 +52,7 @@ function CodeSnippet(props) {
         </pre>
       )}
     </Highlight>
-  );
+  )
 }
 
-export default CodeSnippet;
+export default CodeSnippet

src/theme/Comparison/index.js → src/components/Comparison/index.tsx

@@ -1,8 +1,10 @@
-import React from "react";
-import { FiCheck, FiX } from "react-icons/fi";
+import React from "react"
 
-import Headline from "@theme/Headline";
-import styles from "./styles.module.scss";
+import { FiCheck, FiX } from "react-icons/fi"
+
+import Headline from "@site/src/components/Headline"
+
+import styles from "./styles.module.scss"
 
 const data = [
   {
@@ -20,7 +22,7 @@ const data = [
     name: "RustORM",
     highlighted: false,
   },
-];
+]
 
 const features = [
   {
@@ -43,10 +45,10 @@ const features = [
     name: "SQLite",
     values: { oxidizer: false, diesel: true, rustorm: true },
   },
-];
+]
 
-function renderTable() {
-  const size = 24;
+const renderTable = () => {
+  const size = 24
   return (
     <table className={styles.table}>
       <thead>
@@ -79,10 +81,10 @@ function renderTable() {
         ))}
       </tbody>
     </table>
-  );
+  )
 }
 
-function Comparison() {
+const Comparison = () => {
   return (
     <>
       <section id="comparison" className={styles.comparison}>
@@ -100,7 +102,7 @@ function Comparison() {
         </div>
       </section>
     </>
-  );
+  )
 }
 
-export default Comparison;
+export default Comparison

src/theme/Examples/index.js → src/components/Examples/index.tsx

@@ -1,18 +1,18 @@
-import React from "react";
-import CodeSnippet from "@theme/CodeSnippet";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import React from "react"
 
-import Headline from "@theme/Headline";
-import snippets from "./snippets";
-import styles from "./styles.module.scss";
+import CodeSnippet from "@site/src/components/CodeSnippet"
+import Headline from "@site/src/components/Headline"
+import TabItem from "@theme/TabItem"
+import Tabs from "@theme/Tabs"
 
-function renderTabs() {
+import snippets from "./snippets"
+
+const renderTabs = () => {
   return (
     <Tabs
       defaultValue={snippets[0].label}
       values={snippets.map((props, idx) => {
-        return { label: props.label, value: props.label };
+        return { label: props.label, value: props.label }
       })}
     >
       {snippets.map((props, idx) => (
@@ -21,13 +21,13 @@ function renderTabs() {
         </TabItem>
       ))}
     </Tabs>
-  );
+  )
 }
 
-function Examples() {
+const Examples = () => {
   return (
     <>
-      {snippets && snippets.length && (
+      {snippets?.length && (
         <section id="examples">
           <div className="container">
             <div className="row">
@@ -43,7 +43,7 @@ function Examples() {
         </section>
       )}
     </>
-  );
+  )
 }
 
-export default Examples;
+export default Examples

src/theme/Examples/snippets.js → src/components/Examples/snippets.ts

@@ -78,6 +78,6 @@ async fn main() {
     let deleted: bool = result.delete(&db).await.unwrap();
 }`,
   },
-];
+]
 
-export default snippets;
+export default snippets

src/components/Features/index.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode } from "react"
+
+import clsx from "clsx"
+import { FiCoffee, FiDatabase, FiPackage, FiZap } from "react-icons/fi"
+
+import styles from "./styles.module.scss"
+
+const size = 24
+const data = [
+  {
+    icon: <FiPackage size={size} />,
+    title: "Dead simple, but powerful",
+    description:
+      "Oxidizer is a Rust ORM based on tokio-postgres and refinery. Two powerful libraries that give performance and reliability to perform database interactions.",
+  },
+  {
+    icon: <FiZap size={size} />,
+    title: "Asynchronous from the ground up",
+    description:
+      "By using tokio and tokio-postgres, all the database operations are efficiently handled by tokio at runtime.",
+  },
+  {
+    icon: <FiDatabase size={size} />,
+    title: "Relations",
+    description:
+      " Oxidizer macros generate code to access forward and reverse relations between entities with ease.",
+  },
+  {
+    icon: <FiCoffee size={size} />,
+    title: "Productive and Extensible",
+    description:
+      "Write reusable code and think in terms of your problem domain, not SQL.",
+  },
+]
+
+interface FeatureProps {
+  icon: ReactNode
+  title: string
+  description: string
+}
+
+const Feature = ({ icon, title, description }: FeatureProps) => {
+  return (
+    <div className={clsx("col col--6", styles.feature)}>
+      <div className="item">
+        <div className={styles.header}>
+          <div className={styles.icon}>{icon}</div>
+          <h2 className={styles.title}>{title}</h2>
+        </div>
+        <p>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+const Features = () => {
+  return (
+    <>
+      {data?.length > 0 && (
+        <section id="features" className={styles.features}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--11 col--offset-1">
+                <div className="row">
+                  {data.map((props, idx) => (
+                    <Feature key={idx} {...props} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  )
+}
+
+export default Features

src/theme/Headline/index.js → src/components/Headline/index.tsx

@@ -1,11 +1,15 @@
-import React from "react";
-import { PropTypes } from "prop-types";
+import React from "react"
 
-import styles from "./styles.module.scss";
+import styles from "./styles.module.scss"
 
-function Headline(props) {
-  const { category, title, subtitle, offset } = props;
+interface HeadlineProps {
+  category?: string
+  offset?: number
+  subtitle?: string
+  title?: string
+}
 
+function Headline({ category, offset = 0, subtitle, title }: HeadlineProps) {
   return (
     <div className="row">
       <div className={`col col--${12 - offset} col--offset-${offset}`}>
@@ -16,18 +20,7 @@ function Headline(props) {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
-Headline.propTypes = {
-  category: PropTypes.string,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  offset: PropTypes.number,
-};
-
-Headline.defaultProps = {
-  offset: 0,
-};
-
-export default Headline;
+export default Headline