chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use preval to avoid shipping all of tailwind

Browse Source
This commit is contained in:
Chuck Dries 2021-06-14 22:10:52 -07:00
parent be863ffe7f
commit 7fd15704b8
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
5 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gatsby/gatsby-config.js
View File

@ -47,7 +47,8 @@ module.exports = {
extensions: ['js', 'jsx'],
exclude: ['node_modules', '.cache', 'public'],
// Any eslint-webpack-plugin options below
}
}
},
},
'gatsby-plugin-preval',
],
};

4
gatsby/gatsby-node.js
View File

@ -41,7 +41,7 @@ function transformMetaToNodeData(exifData, iptcData) {
exif: exifData?.exif,
gps,
dateTaken: exifData?.exif?.DateTimeOriginal,
iptc: iptcData || undefined
iptc: iptcData || undefined,
};
}
@ -57,7 +57,7 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
createNodeField({
node,
name: 'imageMeta',
value: transformMetaToNodeData(exifData, iptcData)
value: transformMetaToNodeData(exifData, iptcData),
});
}
};

2
gatsby/package.json
View File

@ -19,6 +19,7 @@
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"autoprefixer": "^10.2.6",
"babel-plugin-preval": "^5.0.0",
"babel-plugin-styled-components": "^1.12.0",
"classnames": "^2.3.1",
"fast-exif": "^1.0.1",
@ -27,6 +28,7 @@
"gatsby-plugin-manifest": "^3.6.0",
"gatsby-plugin-mdx": "^2.7.1",
"gatsby-plugin-postcss": "^4.6.0",
"gatsby-plugin-preval": "^1.0.0",
"gatsby-plugin-react-helmet": "^4.6.0",
"gatsby-plugin-sass": "^4.6.0",
"gatsby-plugin-sharp": "^3.6.0",

15
gatsby/src/components/MasonryGallery.js
View File

@ -3,21 +3,23 @@ import { Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import * as R from 'ramda';
import { getAspectRatio, getName } from '../utils';
// TODO: use resolveCOnfig to not need to define screens in theme file
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../tailwind.config.js';
import useBreakpoint from 'use-breakpoint';
import preval from 'babel-plugin-preval/macro';
const themeBreakpoints = preval`
const R = require('ramda')
const resolveConfig = require('tailwindcss/resolveConfig');
const tailwindConfig = require('../../tailwind.config.js');
const {theme} = resolveConfig(tailwindConfig);
const themeBreakpoints = R.map(size => parseInt(size, 10), theme.screens);
console.log(theme);
module.exports = R.map(size => parseInt(size, 10), theme.screens);
`;
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const breakpoints = React.useMemo(() =>
R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
, [itemsPerRowByBreakpoint]);
const { breakpoint, maxWidth, minWidth } = useBreakpoint(breakpoints, 'md');
const { breakpoint } = useBreakpoint(breakpoints, 'md');
const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
@ -42,7 +44,6 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image);
const widthNumber = ((ar / rowAspectRatioSum) * 100);
const gutterReserve = parseInt(theme.spacing['1'], 10) * (itemsPerRow - 1);
const width = `${widthNumber}%`;
// const width = `${widthNumber}%`;
// console.log('ars', rowAspectRatioSum);

14
gatsby/yarn.lock
View File

@ -2864,6 +2864,15 @@ babel-plugin-polyfill-regenerator@^0.2.2:
dependencies:
"@babel/helper-define-polyfill-provider" "^0.2.2"
babel-plugin-preval@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/babel-plugin-preval/-/babel-plugin-preval-5.0.0.tgz#6cabb947ecc241664966e1f99eb56a3b4bb63d1e"
integrity sha512-8DqJq6/LPUjSZ0Qq6bVIFpsj2flCEE0Cbnbut9TvGU6jP9g3dOWEXtQ/sdvsA9d6souza8eNGh04WRXpuH9ThA==
dependencies:
"@babel/runtime" "^7.9.2"
babel-plugin-macros "^2.8.0"
require-from-string "^2.0.2"
babel-plugin-remove-graphql-queries@^3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz#e041f933dd08556b7786cb4fd44ccb99c8dffaa6"
@ -6224,6 +6233,11 @@ gatsby-plugin-postcss@^4.6.0:
"@babel/runtime" "^7.14.0"
postcss-loader "^4.3.0"
gatsby-plugin-preval@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-preval/-/gatsby-plugin-preval-1.0.0.tgz#b0e9dcc9ef568cb6ca998f7211b5365824b97201"
integrity sha512-HpPp2bdA4nZsuD3R++GRhM9BPlFp8+ilkXIo53hNr14OlHXxrgimh9lqVVvP3q4JriHh+bYcvmfqm6msIsxxLg==
gatsby-plugin-react-helmet@^4.6.0:
version "4.7.1"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.7.1.tgz#0603b1fb9194b421162e2a92d56114dbbbb99946"