Blog ideas

[raae]

• File route API solution so there is no need for custom slugs

 // Works, but we have to make the slug
{MarkdownRemark.fields__slug}.js

// This did not work, but something like it should owrk...
{MarkdownRemark.parent__name}.js

// This is what laurieontech suggested
{MarkdownRemark.parent__(File)__name}.js

• The different ways of including assets in Gatsby (like audio files)
  • In public folder
  • As a source node
  • Part of source code

[raae]

• Netlify custom domain
  • A little confusing when using a domain you already own

[raae]

• Audio has some limitation (especially on mobile)
  • How to work around auto play limitation
  • There was a warning when testing Ola'a PL that spurred me thinking back to oslohistorier.no.

[raae]

• How to use theme ui styles with md files
  • It seems the cool kids are all using mdx and forgotten about the straight md use case
  • Either create a component that gets everything from theme.styles or use the mdx plugin with md only files

[raae]

• The animated element needs to be a block, even though Josh's code uses a span.
  • Fixed this by adding display: "block" in the useBoop style settings.

[raae]

/** @jsx jsx */ vs import React

Om develop it complains about React, and builds without it. But on build it does not build without it.

[PaulieScanlon]

/** @jsx jsx */ vs import React

Om develop it complains about React, and builds without it. But on build it does not build without it.

you might find this helpful https://paulie.dev/posts/2020/07/everythings-a-box/

[raae]

Is it possible to animate a path around its own center? Not the svg center?

[PaulieScanlon]

Hmmm, tricky one. I think what i'd do is...

1. Create an Svg component that accepts viewBox path and sx prop
2. Wrap the Svg in a <Box /> and give it position: relative this will ensure each Svg has a parent with a CSS position
3. Export each of the individual illustrations as their own Svg, and open them up in VS Code and copy the path and viewbox and pass them in via props.
4. Layout all the Svg (paths) in a Grid which can then be responsive across the breakpoints

Having it all as one Svg makes it more difficult to target and or control the individual elements.
Having them as their own Svg's gives you back the control from both a prop / animation perspective but also allows you to modify the "layout" of the complete piece because you're dealing with the illustration as if it were boxes on a page

/** @jsx jsx */
import { Box, Grid, jsx } from 'theme-ui'

const fade = ...

export const Svg = ({ viewBox, path, sx }) => {
  return (
    <Box
      sx={{
        position: 'relative'
        svg :{
          // do all the animation stuff here
          animationName: fade.toString()
        }
      }}
    >
      <svg
        version="1.0"
        fill="currentcolor"
        viewBox={viewBox}
        preserveAspectRatio="xMidYMid meet"
        x="0"
        y="0"
        width: "100%",
        height: "100%",
        sx={{
          ...sx,
        }}
      >
        <path d={path} fill="currentcolor" />
      </svg>
    </Box>
  )
}

// Usage

<Grid
  sx={{
    gridTemplateColumns: ['auto auto', 'auto auto auto auto'],
  }}
>
  <Svg path="" viewBox="" sx={{ color: '#xxxxx' }} />
  <Svg path="" viewBox="" sx={{ color: '#xxxxx' }} />
  <Svg path="" viewBox="" sx={{ color: '#xxxxx' }} />
  <Svg path="" viewBox="" sx={{ color: '#xxxxx' }} />
</Grid>

[olavea]

How to make a favicon with an emoji