Skip to content

Commit f95f6c7

Browse files
erxclauerxclau
authored
Merge pull request #21 from MichiganDaily/vite
Vite
2 parents d9f8747 + 7c31bc2 commit f95f6c7

29 files changed

Lines changed: 1010 additions & 1537 deletions

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
'no-use-before-define': 'off',
3636
'import/no-extraneous-dependencies': [
3737
'error',
38-
{ devDependencies: false, optionalDependencies: false, peerDependencies: false },
38+
{ devDependencies: ['vite-plugin-*.js', 'vite.config.js'], optionalDependencies: false, peerDependencies: false },
3939
],
4040
'react/function-component-definition': [
4141
2,

‎.gitignore‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
1-
.cache/
2-
.parcel-cache/
3-
node_modules/
4-
dist/
5-
yarn-error.log
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
69

7-
**/.DS_Store
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
814

9-
auth.json
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
1025

11-
src/data/
26+
# Sourdough
27+
auth.json
28+
src/data

‎.parcelrc‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎README.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,36 @@ It has several useful features:
77
- [x] React as a dependency by default
88
- [x] MicroCMS with [ArchieML](http://archieml.org/)
99
- [x] Data ingest from Google Sheets
10-
- [x] Bundling with Parcel
10+
- [x] Bundling with [Vite](https://vitejs.dev/)
1111
- [ ] Easy deploy to S3 bucket
1212

1313
## Using this template
1414

1515
Click the green "Use this template" button to create a new instance of the `sourdough` template. Then, clone the new instance and run `yarn install` to initialize the project.
1616

17-
You can use `yarn start` to start a development server and `yarn build` to build production-ready files into `dist/`.
17+
You can use `yarn dev` to start a development server and `yarn build` to build production-ready files into `dist/`.
1818

1919
### Importing images
2020

21-
If you want to import images with variable names, you'll need to use [glob specifiers](https://parceljs.org/features/dependency-resolution/#glob-specifiers) like this:
21+
If you want to import an image with a static name, you can simply import it:
2222

2323
```javascript
24-
/* eslint-disable-next-line import/no-unresolved */
25-
import * as images from "../../img/*.png";
24+
import photo from "../assets/photo.jpg";
25+
26+
const Component = () => (
27+
<img src={photo} alt="Alternative text" />
28+
)
2629
```
2730

28-
If you want to import images with different extensions, you need not include an extension:
31+
If you want to import images with variable names, you'll need to use a [URL constructor](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta):
2932

3033
```javascript
31-
/* eslint-disable-next-line import/no-unresolved, import/extensions */
32-
import * as images from "../../img/*";
34+
const Component = ({ image }) => (
35+
<img src={new URL(image, import.meta.url).href} alt="Alternative text" />
36+
)
3337
```
3438
35-
_Though we are importing all images in the above line, we will only end up sending network requests to ones that we use. So, this is not resource inefficient._
39+
That said, you'll probably want to be importing images by using a CDN (e.g. Jetpack).
3640
3741
### Fetching from Google Drive
3842
@@ -81,4 +85,4 @@ You can import a CSV file in JS like this:
8185
import csvfile from "../data/data.csv";
8286
```
8387

84-
You'll probably need something like [`d3-fetch`](https://github.com/d3/d3-fetch) to read a CSV into something usable.
88+
We use the `@rollup/plugin-dsv` plugin (which relies on [`d3-dsv`](https://github.com/d3/d3-dsv)) to parse the CSV file into a usable array.

‎config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"hed": "The Michigan Daily",
33
"dek": "Description",
4-
"deployment": "test.michigandaily.com",
4+
"deployment": "https://test.michigandaily.com",
55
"fetch": [
66
{
77
"id": "",
@@ -15,5 +15,5 @@
1515
"auth": "./auth.json"
1616
}
1717
],
18-
"ga_id": "UA-168080597-1"
18+
"GA_MEASUREMENT_ID": ""
1919
}

‎index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{# Template #}
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<meta property="og:url" content="{{ config.deployment }}" />
9+
<meta property="og:type" content="website" />
10+
<meta property="og:site_name" content="{{ content.hed }}" />
11+
<meta property="og:title" content="{{ config.hed }}" />
12+
<meta property="og:description" content="{{ config.dek }}" />
13+
<meta property="og:image" content="" />
14+
<meta property="og:locale" content="en_US" />
15+
16+
<meta name="twitter:card" content="summary_large_image" />
17+
<meta name="twitter:site" content="@michigandaily" />
18+
<meta name="twitter:creator" content="@michigandaily" />
19+
20+
<meta name="description" content="{{ config.dek }}" />
21+
22+
<link
23+
rel="apple-touch-icon"
24+
sizes="180x180"
25+
href="/icons/apple-touch-icon.png"
26+
/>
27+
<link
28+
rel="icon"
29+
type="image/png"
30+
sizes="32x32"
31+
href="/icons/favicon-32x32.png"
32+
/>
33+
<link
34+
rel="icon"
35+
type="image/png"
36+
sizes="16x16"
37+
href="/icons/favicon-16x16.png"
38+
/>
39+
<link rel="manifest" href="/site.webmanifest" />
40+
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#000000" />
41+
<meta name="msapplication-TileColor" content="#da532c" />
42+
<meta name="theme-color" content="#ffffff" />
43+
44+
<title>{{ config.hed }}</title>
45+
46+
<link rel="preconnect" href="https://fonts.googleapis.com" />
47+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
48+
<link
49+
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap"
50+
rel="stylesheet"
51+
/>
52+
<link
53+
rel="stylesheet"
54+
href="src/css/main.scss"
55+
type="text/css"
56+
charset="utf-8"
57+
/>
58+
{% if env == "production" %} {% if config.GA_MEASUREMENT_ID %}
59+
<!-- Global site tag (gtag.js) - Google Analytics -->
60+
<script
61+
async
62+
src="https://www.googletagmanager.com/gtag/js?id={{ config.GA_MEASUREMENT_ID }}"
63+
></script>
64+
<script>
65+
window.dataLayer = window.dataLayer || [];
66+
function gtag() {
67+
dataLayer.push(arguments);
68+
}
69+
gtag("js", new Date());
70+
71+
gtag("config", "{{ config.GA_MEASUREMENT_ID }}");
72+
</script>
73+
{% endif %} {% endif %}
74+
</head>
75+
76+
<body>
77+
<div id="root"></div>
78+
<script type="module" src="/src/js/index.jsx"></script>
79+
</body>
80+
</html>

‎package.json‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
{
22
"name": "sourdough",
3-
"version": "2.0.1",
3+
"version": "3.0.0",
44
"license": "MIT",
55
"scripts": {
66
"prepare": "husky install",
7-
"clean": "rm -rf dist/* && rm -rf .parcel-cache",
8-
"build": "yarn clean && parcel build --public-url ./ src/index.html",
9-
"start": "yarn clean && parcel src/index.html"
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"prop-types": "^15.8.1",
13-
"react": "^17.0.2",
14-
"react-dom": "^17.0.2",
15-
"react-router-dom": "^6.2.2"
12+
"react": "^18.0.0",
13+
"react-dom": "^18.0.0"
1614
},
1715
"devDependencies": {
18-
"@michigandaily/parcel-transformer-nunjucks": "https://github.com/MichiganDaily/parcel-transformer-nunjucks",
19-
"@parcel/resolver-glob": "~2.6.0",
20-
"@parcel/transformer-raw": "~2.6.0",
21-
"@parcel/transformer-sass": "~2.6.0",
22-
"@types/react": "^17.0.43",
23-
"eslint": "^8.12.0",
16+
"@rollup/plugin-dsv": "^2.0.3",
17+
"@types/react": "^18.0.0",
18+
"@types/react-dom": "^18.0.0",
19+
"@vitejs/plugin-react": "2.0.0",
20+
"eslint": "^8.18.0",
2421
"eslint-config-airbnb": "^19.0.4",
2522
"eslint-config-prettier": "^8.5.0",
26-
"eslint-plugin-import": "^2.25.4",
27-
"eslint-plugin-jsx-a11y": "^6.5.1",
28-
"eslint-plugin-react": "^7.29.4",
29-
"eslint-plugin-react-hooks": "^4.3.0",
23+
"eslint-plugin-import": "^2.26.0",
24+
"eslint-plugin-jsx-a11y": "^6.6.0",
25+
"eslint-plugin-react": "^7.30.1",
26+
"eslint-plugin-react-hooks": "^4.6.0",
3027
"husky": "^7.0.4",
31-
"parcel": "~2.6.0",
32-
"sink": "https://github.com/MichiganDaily/sink"
28+
"nunjucks": "^3.2.3",
29+
"sass": "^1.53.0",
30+
"sink": "https://github.com/MichiganDaily/sink",
31+
"vite": "^3.0.0"
3332
}
3433
}

‎public/browserconfig.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/icons/mstile-150x150.png"/>
6+
<TileColor>#da532c</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎public/icons/android-chrome-192x192.png‎

4.43 KB
Loading

‎public/icons/android-chrome-512x512.png‎

13.4 KB
Loading

0 commit comments

Comments
 (0)