mantinedev / gatsby-template Goto Github PK
View Code? Open in Web Editor NEWMantine + Gatsby.js template
Home Page: https://mantine.dev/guides/gatsby
Mantine + Gatsby.js template
Home Page: https://mantine.dev/guides/gatsby
Update: this is ready to look at now
Because mantine-gatsby-template (this repo) is still on 5.1.0
of @mantine/hooks
and @mantine/core
, Title
props are not all working correctly (particularly size
and variant
/gradient
) but updating to 5.10.1
like the Vite template already is fixes it. I will open a PR if you want. PR #3 opened with that. Do you want to update any other deps like gatsby
, @emotion/react
or react
& react-dom
simultaneously?
gatsby-template exhibiting the issue in my fork's canary branch:
my fork's updated-mantine-5.10.1 branch, issues resolved:
mantine-vite-template working fine with the same code, also on 5.10.1
Hi!
I was trying to investigate an issue with FOUC on Gatsby in my own project, but it's easily replicated with this template too.
FOUC on loading the page.
There is <style data-emotion="mantine "></style>
in the head of the HTML document instead of actual styles.
See README.md of this repo. Reproducible locally and on Vercel.
The styles are loaded initially and there is no FOUC.
Happens on 6.0.1 too.
This only works as is with legacy versions of the deps, I need this to work up to date and help aid in debugging why the gatsby-plugin-mantine isn't handling the server side code in my real application, but I couldn't even get this to work.
git clone [email protected]:mantinedev/mantine-gatsby-template.git
cd
into mantine-gatsby-templateyarn
yarn gatsby
to get the latest gatsby v5.5yarn start
and I am presented with this error{
"name": "mantine-gatsby-template",
"version": "1.0.0",
"description": "Mantine + Gatsby.js template",
"main": "index.js",
"repository": "[email protected]:mantinedev/mantine-gatsby-template.git",
"author": "Vitaly Rtishchev <[email protected]>",
"license": "MIT",
"scripts": {
"build": "gatsby build",
"clean": "gatsby clean",
"start": "gatsby develop -H 0.0.0.0 -p 5001",
"serve": "gatsby serve -H 0.0.0.0 -p 5002"
},
"dependencies": {
"@emotion/react": "^11.9.3",
"@mantine/core": "5.1.0",
"@mantine/hooks": "5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.14.0",
"@typescript-eslint/parser": "^5.14.0",
"eslint": "^8.10.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-mantine": "1.1.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"gatsby": "^5.5.0",
"gatsby-plugin-mantine": "^5.0.0",
"typescript": "^4.6.4"
}
}
How can this work or is there a more updated template I am not aware of?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.