danilowoz

a[href^='http'] {
    border: 4px solid red !important;
}

a[href^='//'][target='_blank'] {
    border: 4px solid blue !important;
}

a[href^='//'][rel='noopener noreferrer'] {
    border: 4px solid green !important;

danilowoz

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: "stable",

danilowoz

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: "stable",

danilowoz

Schrödinger’s commit. 50% chance we fixed the bug
i tried my best
Please don't tell anyone I did this
Check the changes for yourself
Works on my machine

danilowoz

import * as React from 'react'

interface IState {
  offSet: number
}

interface IProp {
  force?: number
  offsetComp?: number
  children(offSet: number): React.ReactNode

danilowoz

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 600px; 
}

.item {

danilowoz

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    const [month, day, year] = new Date(node.frontmatter.date)
      .toLocaleDateString("en-EN", {
        year: "numeric",

danilowoz

const path = require(`path`)

// 1. This is called once the data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ graphql, actions }) => {
  // 1.1 Getting the method to create pages
  const { createPage } = actions
  // 1.2 Tell which layout Gatsby should use to thse pages
  const blogLayout = path.resolve(`./src/layouts/blog-post.js`)

  // 2 Return the method with the query

danilowoz

import React from "react"
import { graphql } from "gatsby"

const BlogPost = ({ data }) => {
  const { markdownRemark } = data
  const imageSource = markdownRemark.frontmatter.image.childImageSharp.fluid.src

  return (
    <>
      <img src={imageSource} alt={markdownRemark.frontmatter.title} />

danilowoz

const blogListLayout = path.resolve(`./src/layouts/blog-list.js`)