new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

setup/gatsby

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Gatsby quick start with PostCSS

To set up Mantine with Gatsby, first follow the Gatsby quick start guide to create a new application. When prompted 'Would you like to install a styling system?', select PostCSS.

PostCSS plugins for Gatsby setup

Install postcss, postcss-preset-mantine, and postcss-simple-vars as dev dependencies for Mantine with Gatsby.

postcss.config.cjs for Gatsby

Create a postcss.config.cjs file at the root with postcss-preset-mantine and postcss-simple-vars plugins. Set the following breakpoint variables: mantine-breakpoint-xs to 36em, mantine-breakpoint-sm to 48em, mantine-breakpoint-md to 62em, mantine-breakpoint-lg to 75em, and mantine-breakpoint-xl to 88em.

theme.ts file for Gatsby

Create src/theme.ts and import createTheme from @mantine/core. Export a theme object created with createTheme() where you can set properties like fontFamily and other theme overrides.

gatsby-ssr.tsx file setup

Create gatsby-ssr.tsx at the root. Import ColorSchemeScript and MantineProvider from @mantine/core, and your theme. In onPreRenderHTML, get and replace head components to add the ColorSchemeScript. In wrapPageElement, wrap the element with MantineProvider passing the theme prop.

gatsby-browser.tsx file setup

Create gatsby-browser.tsx at the root. Import @mantine/core/styles.css at the top. Import MantineProvider from @mantine/core and your theme. In wrapPageElement, wrap the element with MantineProvider passing the theme prop. All packages except @mantine/hooks require style imports.

Gatsby CSS modules import syntax

In Gatsby, import CSS modules using the syntax 'import * as classes from ./Demo.module.css'. The default syntax 'import classes from ./Demo.module.css' will not work in Gatsby.

Give your agent this brain