Conf page

.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ["**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}"],
+      extends: ["plugin:tailwindcss/recommended"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        sourceType: "module",
+        ecmaVersion: "latest",
+      },
+      rules: {
+        "tailwindcss/classnames-order": "off",
+      },
+    },
+  ],
+}

gatsby-config.ts

@@ -11,6 +11,8 @@ const config: GatsbyConfig = {
     typesOutputPath: `src/__generated__/gatsby-types.d.ts`,
   },
   plugins: [
+    "gatsby-plugin-postcss",
+    "gatsby-plugin-svgr",
     "gatsby-plugin-anchor-links",
     {
       resolve: "gatsby-source-filesystem",
@@ -39,15 +41,15 @@ const config: GatsbyConfig = {
           google: [
             {
               family: `Rubik`,
-              variants: [`300`],
+              variants: [`300`, `400`, `500`, `700`],
             },
             {
               family: `Roboto Mono`,
               variants: [`400`, `400i`, `600`],
             },
             {
               family: `Roboto`,
-              variants: [`300`],
+              variants: [`300`, `500`],
             },
           ],
         },

package.json

@@ -9,16 +9,20 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
+    "lint": "eslint --ignore-path .gitignore .",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "resolutions": {
     "graphql": "16.6.0"
   },
   "dependencies": {
     "@graphql-tools/schema": "8.3.1",
+    "@radix-ui/react-aspect-ratio": "^1.0.2",
+    "@radix-ui/react-icons": "1.3.0",
     "@reach/router": "1.3.4",
     "@weknow/gatsby-remark-twitter": "0.2.3",
     "assert": "2.0.0",
+    "clsx": "^1.2.1",
     "codemirror": "5.65.1",
     "codemirror-graphql": "1.2.11",
     "gatsby": "5.5.0",
@@ -41,8 +45,19 @@
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
+    "@svgr/webpack": "^7.0.0",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/codemirror": "5.60.5",
     "@types/prismjs": "1.26.0",
-    "prettier": "2.7.1"
+    "@typescript-eslint/parser": "^5.57.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.37.0",
+    "eslint-plugin-tailwindcss": "^3.10.3",
+    "gatsby-plugin-postcss": "^6.8.0",
+    "gatsby-plugin-svgr": "^3.0.0-beta.0",
+    "postcss": "^8.4.21",
+    "prettier": "2.7.1",
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.3"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/css/_css/brand.less

@@ -254,3 +254,7 @@
     }
   }
 }
+
+.conf-style {
+  font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}

src/assets/css/_css/graphql.less

@@ -149,6 +149,7 @@ header {
     text-decoration: none;
 
     img {
+      display: inline;
       vertical-align: -9px;
       margin-right: 6px;
       width: 30px;

src/assets/css/_css/index.less

@@ -7,6 +7,69 @@ div.index {
     margin-top: 50px;
   }
 
+  // GraphQLConf 2023 - Remove on Oct 1, 2023
+  section.conf-banner {
+    background-color: #562556;
+    background: url("/img/conf/graphql-conf-bg.png") repeat center center;
+    background-size: cover;
+    color: #fff;
+    text-align: center;
+    max-width: none;
+    margin-top: 30px;
+
+    & > a {
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 30px;
+      gap: 30px;
+      margin: 0 auto;
+
+      @media (max-width: 900px) {
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+
+        & > * {
+          margin: 6px 0;
+        }
+      }
+    }
+
+    img {
+      height: 150px;
+    }
+
+    .button {
+      .headline-font(@size: 17px, @color: white);
+      border: solid 1px fadeout(white, 60%);
+      border-radius: 6px;
+      color: white;
+      line-height: 1.0;
+      transition: background 0.1s ease-out, color 0.1s ease-out;
+      padding: 0.6em 1.6em;
+      margin: 0 0.8em;
+      display: inline-block;
+      text-decoration: none;
+
+      &:hover, &:focus, &:active {
+        color: @text-color;
+        background: white;
+        text-decoration: none;
+      }
+    }
+  }
+  // End GraphQLConf 2023
+
   header {
     display: none;
     @media screen and (min-width: 1020px) {

src/assets/css/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/BlogSidebar/index.tsx

@@ -27,13 +27,13 @@ const BlogSidebar: React.FC = () => {
 
   return (
     <div className="nav-docs blog-sidebar">
-      <div className="nav-docs-section subscribe">
+      <div>
         <h3>Subscribe</h3>
         <a rel="home" type="application/rss+xml" href="/blog/rss.xml">
           RSS
         </a>
       </div>
-      <div className="nav-docs-section categories">
+      <div className="categories">
         <h3>Categories</h3>
         <ul>
           {tags.map(tag => {
@@ -51,7 +51,7 @@ const BlogSidebar: React.FC = () => {
           })}
         </ul>
       </div>
-      <div className="nav-docs-section recent-posts">
+      <div className="recent-posts">
         <h3>Recent Posts</h3>
         <ul>
           {recentPosts.map(post => (