cross-country 1.2.5 → 1.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,9 +17,23 @@ Do you pour over your personal stats from Github, Strava or Spotify? Is your yea
|
|
|
17
17
|
|
|
18
18
|
In my case, I'm using this library to present metrics about my path as a developer as well as my home energy efficiency and [decarbonization](https://greenbuildingcanada.ca/decarbonize-home/).
|
|
19
19
|
|
|
20
|
-
###
|
|
20
|
+
### NextJS Install
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
For this third-party library to work within NextJS, you need to make one change when you consume cross-country to import it's single css bundle.
|
|
23
|
+
|
|
24
|
+
Edit the _app.js file to:
|
|
25
|
+
```
|
|
26
|
+
import "../styles/globals.css";
|
|
27
|
+
import "cross-country/dist/bundle.css";
|
|
28
|
+
|
|
29
|
+
function MyApp({ Component, pageProps }) {
|
|
30
|
+
return <Component {...pageProps} />;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default MyApp;
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
After upgrading to Vite, this library did not with NextJS due to the way it imports its CSS. I tried [exploring different approaches](https://dev.to/headwinds/comment/2bel0) but for now I would recommend using this library within [Vite react starter](https://vitejs.dev/guide/), and landed on [rollup-plugin-css-only](https://www.npmjs.com/package/rollup-plugin-css-only) which has minimal configuration.
|
|
23
37
|
|
|
24
38
|
By wrapping html, each component is augmented for building accessible experiences across screens. A simple page may look like this:
|
|
25
39
|
|