Merge pull request #249 from yihong0618/revert-242-master

Revert "style:fix/deprecation warning with dart sass"

Author: yihong0618

gatsby-config.js

@@ -36,6 +36,24 @@ module.exports = {
         rootFolder: './',
       },
     },
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          'gatsby-remark-responsive-iframe',
+          'gatsby-remark-smartypants',
+          'gatsby-remark-widows',
+          'gatsby-remark-external-links',
+          {
+            resolve: 'gatsby-remark-autolink-headers',
+            options: {
+              className: 'header-link',
+            },
+          },
+        ],
+      },
+    },
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -61,11 +79,20 @@ module.exports = {
         name: 'gatsby-starter-default',
         short_name: 'starter',
         start_url: '/',
-        background_color: '#1A1A1A',
-        theme_color: '#1A1A1A',
+        background_color: '#e1e1e1',
+        theme_color: '#e1e1e1',
         display: 'minimal-ui',
         icon: 'src/images/favicon.png', // This path is relative to the root of the site.
       },
     },
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
+    'gatsby-plugin-sitemap',
+    {
+      resolve: 'gatsby-plugin-robots-txt',
+      options: {
+        policy: [{ userAgent: '*', allow: '/' }],
+      },
+    },
   ],
-}
+};

package.json

@@ -4,31 +4,50 @@
   "version": "1.0.0",
   "author": "Yi Hong <zouzou0208@gmail.com>",
   "dependencies": {
-    "@mapbox/mapbox-gl-language": "^1.0.0",
+    "@mapbox/mapbox-gl-language": "^0.10.1",
     "@mapbox/polyline": "^1.1.1",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.28.0",
-    "gatsby": "^4.16.0",
+    "classnames": "^2.2.6",
+    "date-fns": "^2.14.0",
+    "gatsby": "^4.6.2",
     "gatsby-alias-imports": "^1.0.6",
-    "gatsby-plugin-manifest": "^4.16.0",
-    "gatsby-plugin-react-svg": "^3.1.0",
-    "gatsby-plugin-sass": "^5.16.0",
-    "gatsby-source-filesystem": "^4.16.0",
-    "gatsby-transformer-json": "^4.16.0",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-feed": "^4.6.0",
+    "gatsby-plugin-manifest": "^4.6.0",
+    "gatsby-plugin-meta-redirect": "^1.1.1",
+    "gatsby-plugin-offline": "^5.6.0",
+    "gatsby-plugin-react-helmet": "^5.6.0",
+    "gatsby-plugin-react-svg": "^3.0.0",
+    "gatsby-plugin-robots-txt": "^1.5.1",
+    "gatsby-plugin-sass": "^5.6.0",
+    "gatsby-plugin-sharp": "^4.6.0",
+    "gatsby-plugin-sitemap": "^5.6.0",
+    "gatsby-redirect-from": "^0.4.3",
+    "gatsby-remark-autolink-headers": "^5.6.0",
+    "gatsby-remark-classes": "^1.0.0",
+    "gatsby-remark-external-links": "^0.0.4",
+    "gatsby-remark-images": "^6.6.0",
+    "gatsby-remark-responsive-iframe": "^5.6.0",
+    "gatsby-remark-smartypants": "^5.6.0",
+    "gatsby-remark-widows": "^1.0.0",
+    "gatsby-source-filesystem": "^4.6.0",
+    "gatsby-transformer-json": "^4.6.0",
+    "gatsby-transformer-remark": "^5.6.0",
+    "gatsby-transformer-sharp": "^4.6.0",
+    "gatsby-transformer-yaml": "^4.6.0",
     "gcoord": "^0.3.2",
-    "mapbox-gl": "^2.8.2",
-    "prop-types": "^15.8.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "pngquant-bin": "^6.0.0",
+    "prettier": "^2.2.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-map-gl": "^6.1.16",
-    "sass": "^1.52.3",
-    "sass-mq": "^6.0.0",
-    "styled-components": "^5.3.5",
+    "react-map-gl": "^5.2.11",
+    "sass": "^1.50.0",
+    "sass-mq": "^5.0.1",
+    "styled-components": "^4.4.1",
     "tachyons": "^4.12.0",
-    "tachyons-sass": "https://github.com/tachyons-css/tachyons-sass.git",
-    "viewport-mercator-project": "^7.0.4",
-    "webpack": "^5.73.0"
+    "tachyons-sass": "^4.9.5",
+    "webpack": "^5.11.0"
   },
   "license": "MIT",
   "private": true,

src/components/Header/index.jsx

@@ -21,7 +21,7 @@ const Header = () => {
         <div className="dib w-75 v-mid tr">
           {navLinks.map((n, i) => (
             <a
-              key={i}
+              key={i.name}
               href={n.url}
               className="light-gray link dim f6 f5-l mr3 mr4-l"
             >

src/styles/index.scss

@@ -1,5 +1,7 @@
 @import "~tachyons/css/tachyons.css";
+
 @import "~tachyons-sass/tachyons.scss";
+
 @import "./variables";
 @import "./themes";
 

src/styles/themes.scss

@@ -1,3 +1,4 @@
+@import "~tachyons-sass/tachyons.scss";
 @import "./variables.scss";
 
 $avenir: "avenir next", avenir, sans-serif;