switch to typescript + sass, add typings

Author: yiliansource

docusaurus.config.js

@@ -10,102 +10,106 @@ module.exports = {
   favicon: "img/fastj/fastj_icon.png",
   organizationName: "fastjengine",
   projectName: "fastjengine.github.io",
-  themeConfig: {
-    prism: {
-      additionalLanguages: ["java", "groovy", "kotlin"],
-    },
-    colorMode: {
-      defaultMode: "dark",
-      disableSwitch: false,
-      respectPrefersColorScheme: false,
-      switchConfig: {
-        darkIcon: "🌙",
-        lightIcon: "❄️",
+  plugins: ["docusaurus-plugin-sass"],
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      prism: {
+        additionalLanguages: ["java", "groovy", "kotlin"],
       },
-    },
-    navbar: {
-      logo: {
-        alt: "FastJ Logo",
-        src: "svg/fastj_icon.svg",
-      },
-      items: [
-        {
-          type: "doc",
-          docId: "intro",
-          position: "left",
-          label: "Wiki",
-        },
-        {
-          href: "https://javadoc.io/doc/io.github.lucasstarsz.fastj/fastj-library",
-          label: "API Docs",
-          position: "left",
-        },
-        {
-          to: "/news",
-          label: "News",
-          position: "left",
-        },
-        {
-          href: "https://github.com/fastjengine/FastJ/",
-          label: "GitHub",
-          position: "right",
-        },
-      ],
-    },
-    footer: {
-      style: "dark",
-      links: [
-        {
-          title: "Docs",
-          items: [
-            {
-              label: "Wiki",
-              to: "/wiki/intro",
-            },
-            {
-              label: "API Docs",
-              href: "https://api.fastj.dev",
-            },
-          ],
+      colorMode: {
+        defaultMode: "dark",
+        disableSwitch: false,
+        respectPrefersColorScheme: false,
+        switchConfig: {
+          darkIcon: "🌙",
+          lightIcon: "❄️",
         },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "FastJ Discord",
-              href: "https://discord.gg/FTWsYVSDv6",
-            },
-          ],
-        },
-        {
-          title: "More",
-          items: [
-            {
-              label: "News",
-              to: "/news",
-            },
-            {
-              label: "GitHub",
-              href: "https://fastj.dev/",
-            },
-          ],
+      },
+      navbar: {
+        logo: {
+          alt: "FastJ Logo",
+          src: "svg/fastj_icon.svg",
         },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} Andrew Dey. Built with Docusaurus.
+        items: [
+          {
+            type: "doc",
+            docId: "intro",
+            position: "left",
+            label: "Wiki",
+          },
+          {
+            href: "https://javadoc.io/doc/io.github.lucasstarsz.fastj/fastj-library",
+            label: "API Docs",
+            position: "left",
+          },
+          {
+            to: "/news",
+            label: "News",
+            position: "left",
+          },
+          {
+            href: "https://github.com/fastjengine/FastJ/",
+            label: "GitHub",
+            position: "right",
+          },
+        ],
+      },
+      footer: {
+        style: "dark",
+        links: [
+          {
+            title: "Docs",
+            items: [
+              {
+                label: "Wiki",
+                to: "/wiki/intro",
+              },
+              {
+                label: "API Docs",
+                href: "https://api.fastj.dev",
+              },
+            ],
+          },
+          {
+            title: "Community",
+            items: [
+              {
+                label: "FastJ Discord",
+                href: "https://discord.gg/FTWsYVSDv6",
+              },
+            ],
+          },
+          {
+            title: "More",
+            items: [
+              {
+                label: "News",
+                to: "/news",
+              },
+              {
+                label: "GitHub",
+                href: "https://fastj.dev/",
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Andrew Dey. Built with Docusaurus.
       <br/>
       Hand + Feather, Windows, macOS, and Linux icons originally made by 
       <a href="https://www.freepik.com" title="Freepik">Freepik</a> 
       from 
       <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>, 
       and modified by me.`,
-    },
-  },
+      },
+    }),
   presets: [
     [
       "@docusaurus/preset-classic",
-      {
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve("./src/css/custom.scss"),
         },
         blog: {
           path: "news",
@@ -124,7 +128,7 @@ module.exports = {
           editUrl:
             "https://github.com/fastjengine/fastjengine.github.io/edit/main/",
         },
-      },
+      }),
     ],
   ],
 };

package.json

@@ -18,8 +18,10 @@
     "@docusaurus/preset-classic": "^2.0.0-beta.4",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-sass": "^0.2.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sass": "^1.42.1"
   },
   "browserslist": {
     "production": [
@@ -32,5 +34,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.6",
+    "@tsconfig/docusaurus": "^1.0.4",
+    "@types/react": "^17.0.27",
+    "@types/react-helmet": "^6.1.3",
+    "@types/react-router-dom": "^5.3.1",
+    "typescript": "^4.4.3"
   }
 }

src/components/HomepageFeatures.js

@@ -5,15 +5,13 @@
   align-items: center;
   padding: 2rem 1rem;
   width: 100%;
-}
-
-.featureMedia {
-  height: 200px;
-  width: 200px;
-}
 
-@media screen and (max-width: 966px) {
-  .features {
+  @media screen and (max-width: 966px) {
     padding: 2rem 2rem;
   }
+
+  .featureMedia {
+    height: 200px;
+    width: 200px;
+  }
 }