Cria configuração para o mostrar os colabs no blog

gatsby-config.js

@@ -12,6 +12,23 @@ module.exports = {
             resolve: "gatsby-plugin-scroll-reveal",
             options: {
                 threshold: 1,
+            }
+        },
+        {
+            resolve: "gatsby-source-filesystem",
+            options: {
+                name: "notebooks",
+                path: `${__dirname}/src/data/posts/notebooks`,
+                ignore: ["**/.ipynb_checkpoints"],
+            },
+        },
+        {
+            resolve: "@rafaelquintanilha/gatsby-transformer-ipynb",
+            options: {
+                notebookProps: {
+                    displayOrder: ["image/png", "text/html", "text/plain"],
+                    showPrompt: false,
+                },
             },
         },
     ],

package.json

@@ -14,12 +14,15 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@gatsby-contrib/gatsby-transformer-ipynb": "^0.5.8",
+    "@rafaelquintanilha/gatsby-transformer-ipynb": "^0.1.21",
     "@researchgate/react-intersection-observer": "^1.3.5",
     "bootstrap": "^5.0.0-beta2",
     "gatsby": "^2.26.1",
     "gatsby-plugin-react-helmet": "^3.10.0",
     "gatsby-plugin-sass": "^3.2.0",
     "gatsby-plugin-scroll-reveal": "^0.0.7",
+    "gatsby-source-filesystem": "^2.11.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",

src/components/Header/header.scss

@@ -2,6 +2,7 @@
 
 .header {
     position: relative;
+    margin-top: 4rem;
     width: 100%;
     height: 100vh;
     display: flex;
@@ -27,5 +28,6 @@
     &__subtitle {
         font-weight: 300;
         color: darken($color: $orange-grey, $amount: 30%);
+        padding: 1rem;
     }
 }

src/components/Header/index.jsx

@@ -3,7 +3,7 @@ import "./header.scss";
 import HeaderImg from "../../assets/images/undraw_teacher_35j2.svg";
 
 class Header extends Component {
-    render() { 
+    render () {
         return (
             <header className="header">
                 <div className="container">
@@ -29,7 +29,7 @@ class Header extends Component {
 
                         <div className="col-md-6">
                             <img 
-                                src={HeaderImg}
+                                src={this.props.headerImage || HeaderImg}
                                 alt="Grupo de Estudos em NLP - UFFS"
                                 className="header__image"
                                 data-sal="zoom-out"

src/pages/blog.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from "react"
+import Header from "../components/Header"
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import MainLayout from "../layouts/MainLayout";
+import NewImage from "../assets/images/undraw_newspaper_k72w.svg";
+
+export default class IndexPage extends Component {
+    render() {
+        return (
+            <>
+                <MainLayout>
+                    <Navbar />
+                    <Header 
+                        title="Blog de notícias do grupo"
+                        subtitle="Aqui você irá encontrar sínteses dos encontros semanais,
+                            produções do grupo de estudo (resenhas, aplicações, apresentações) e
+                            notícias recentes da área de NLP."
+                        headerImage={NewImage}
+                    />
+                </MainLayout>
+                <Footer />
+            </>
+        )
+    }
+}