Getting the demo map on the home page working to show the effect of d…

…ifferent Turf functions. Fixing some footer links.
Turfjs · May 3, 2024 · fc3aa58 · fc3aa58
1 parent 706ca58
commit fc3aa58
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -112,7 +112,7 @@ const config = {
               },
               {
                 label: "API",
-                to: "/docs/api",
+                to: "/docs/api/along",
               },
             ],
           },
@@ -121,15 +121,11 @@ const config = {
             items: [
               {
                 label: "Stack Overflow",
-                href: "https://stackoverflow.com/questions/tagged/docusaurus",
-              },
-              {
-                label: "Discord",
-                href: "https://discordapp.com/invite/docusaurus",
+                href: "https://stackoverflow.com/questions/tagged/turfjs",
               },
               {
                 label: "Twitter",
-                href: "https://twitter.com/docusaurus",
+                href: "https://twitter.com/turfjs",
               },
             ],
           },
@@ -147,7 +143,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+        copyright: `Copyright © 2013 Turf org. Built with Docusaurus.`,
       },
       prism: {
         theme: prismThemes.github,

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -18,7 +18,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
@@ -28,3 +28,21 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/**
+ * Styles for turf function radio buttons on home page. Used
+ * for the demo map showing the effect of different turf functions.
+ */
+.turf-functions sl-radio-button::part(button) {
+  background-color: var(--ifm-color-secondary-light);
+  border-color: var(--ifm-color-secondary-dark);
+}
+
+.turf-functions sl-radio-button::part(button):hover,
+.turf-functions sl-radio-button::part(button--checked) {
+  background-color: var(--ifm-color-primary-lighter);
+}
+
+.turf-functions sl-radio-button::part(label) {
+  color: var(--sl-input-label-color);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -40,7 +40,7 @@ function HomepageHeader() {
 
         <div className="sl-theme-dark">
           <SlRadioGroup
-            label="Turf function"
+            className="turf-functions"
             value={turfFunction}
             onSlChange={(event) => setTurfFunction(event.target.value)}
           >

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -24,7 +24,7 @@
 
 .homepageMap {
   width: 100%;
-  margin-bottom: 1.4rem;
+  margin-bottom: 2rem;
 }
 
 .homepageTurfFunctions {