feat(css-modules): initial version of css modules

.stylelintrc.json

@@ -1,14 +1,13 @@
 {
-  "extends": [
-    "stylelint-config-recommended-scss"
-  ],
-  "plugins": [
-    "stylelint-order",
-    "stylelint-selector-bem-pattern"
-  ],
+  "extends": ["stylelint-config-recommended-scss"],
+  "plugins": ["stylelint-order", "stylelint-selector-bem-pattern"],
   "rules": {
     "order/properties-alphabetical-order": true,
     "no-descending-specificity": null,
-    "scss/at-import-partial-extension": "always"
+    "scss/at-import-partial-extension": "always",
+    "selector-pseudo-class-no-unknown": [
+      true,
+      { "ignorePseudoClasses": ["global"] }
+    ]
   }
 }

content/about/resources.en.md

@@ -21,20 +21,22 @@ Guidelines for the visual display of the Node.js mark are described in the [Visu
 <!--lint enable nodejs-links-->
 
 <table class="resources-logos">
-  <tr>
-    <td class="bg-white"><a href="/static/images/logos/nodejs-new-pantone-black.ai"><img src="/static/images/logos/nodejs-new-pantone-black.svg" alt="Node.js on light background"/></a></td>
-    <td class="bg-node-gray"><a href="/static/images/logos/nodejs-new-pantone-white.ai"><img src="/static/images/logos/nodejs-new-pantone-white.svg" alt="Node.js on dark background"/></a></td>
-  </tr>
-  <tr>
-    <td><a href="/static/images/logos/nodejs-new-pantone-black.ai">Node.js standard AI</a></td>
-    <td><a href="/static/images/logos/nodejs-new-pantone-white.ai">Node.js reversed AI</a></td>
-  </tr>
-  <tr>
-    <td class="bg-white"><a href="/static/images/logos/nodejs-new-black.ai"><img src="/static/images/logos/nodejs-new-black.svg" alt="Node.js on light background"/></a></td>
-    <td class="bg-node-gray"><a href="/static/images/logos/nodejs-new-white.ai"><img src="/static/images/logos/nodejs-new-white.svg" alt="Node.js on dark background"/></a></td>
-  </tr>
-  <tr>
-    <td><a href="/static/images/logos/nodejs-new-black.ai">Node.js standard with less color AI</a></td>
-    <td><a href="/static/images/logos/nodejs-new-white.ai">Node.js reversed with less color AI</a></td>
-  </tr>
+  <tbody>
+    <tr>
+      <td class="bg-white"><a href="/static/images/logos/nodejs-new-pantone-black.ai"><img src="/static/images/logos/nodejs-new-pantone-black.svg" alt="Node.js on light background"/></a></td>
+      <td class="bg-node-gray"><a href="/static/images/logos/nodejs-new-pantone-white.ai"><img src="/static/images/logos/nodejs-new-pantone-white.svg" alt="Node.js on dark background"/></a></td>
+    </tr>
+    <tr>
+      <td><a href="/static/images/logos/nodejs-new-pantone-black.ai">Node.js standard AI</a></td>
+      <td><a href="/static/images/logos/nodejs-new-pantone-white.ai">Node.js reversed AI</a></td>
+    </tr>
+    <tr>
+      <td class="bg-white"><a href="/static/images/logos/nodejs-new-black.ai"><img src="/static/images/logos/nodejs-new-black.svg" alt="Node.js on light background"/></a></td>
+      <td class="bg-node-gray"><a href="/static/images/logos/nodejs-new-white.ai"><img src="/static/images/logos/nodejs-new-white.svg" alt="Node.js on dark background"/></a></td>
+    </tr>
+    <tr>
+      <td><a href="/static/images/logos/nodejs-new-black.ai">Node.js standard with less color AI</a></td>
+      <td><a href="/static/images/logos/nodejs-new-white.ai">Node.js reversed with less color AI</a></td>
+    </tr>
+  </tbody>
 </table>

gatsby-config.js

@@ -21,15 +21,25 @@ const gatsbyConfig = {
     'gatsby-plugin-catch-links',
     '@skagami/gatsby-plugin-dark-mode',
     'gatsby-transformer-yaml',
-    `gatsby-remark-images`,
+    'gatsby-remark-images',
+    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-canonical-urls',
       options: {
         siteUrl: config.siteUrl,
       },
     },
-    'gatsby-plugin-sharp',
-    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        cssLoaderOptions: {
+          modules: {
+            namedExport: false,
+            exportLocalsConvention: 'camelCaseOnly',
+          },
+        },
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -92,7 +102,6 @@ const gatsbyConfig = {
       options: {
         extensions: ['.mdx', '.md'],
         defaultLayouts: {
-          sites: require.resolve(`./src/components/Layout/centered.tsx`),
           default: require.resolve(`./src/components/Layout/index.tsx`),
         },
         gatsbyRemarkPlugins: [

gatsby-node.js

@@ -72,7 +72,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
   const docTemplate = path.resolve('./src/templates/learn.tsx');
   const blogTemplate = path.resolve('./src/templates/blog.tsx');
-  const blogCategoryTemplate = path.resolve('./src/templates/blogCategory.tsx');
+  const blogCategoryTemplate = path.resolve(
+    './src/templates/blog-category.tsx'
+  );
 
   const [learnResult, pagesResult] = await Promise.all([
     graphql(createLearnQuery),