Merge pull request #21 from MichiganDaily/vite

Vite
michigandaily · Jul 16, 2022 · f95f6c7 · f95f6c7
2 parents d9f8747 + 7c31bc2
commit f95f6c7
Show file tree

Hide file tree

Showing 29 changed files with 1,010 additions and 1,537 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,7 +35,7 @@ module.exports = {
     'no-use-before-define': 'off',
     'import/no-extraneous-dependencies': [
       'error',
-      { devDependencies: false, optionalDependencies: false, peerDependencies: false },
+      { devDependencies: ['vite-plugin-*.js', 'vite.config.js'], optionalDependencies: false, peerDependencies: false },
     ],
     'react/function-component-definition': [
       2,

diff --git a/.gitignore b/.gitignore
@@ -1,11 +1,28 @@
-.cache/
-.parcel-cache/
-node_modules/
-dist/
-yarn-error.log
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-**/.DS_Store
+node_modules
+dist
+dist-ssr
+*.local
 
-auth.json
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-src/data/
+# Sourdough
+auth.json
+src/data
diff --git a/.parcelrc b/.parcelrc
diff --git a/README.md b/README.md
@@ -7,32 +7,36 @@ It has several useful features:
 - [x] React as a dependency by default
 - [x] MicroCMS with [ArchieML](http://archieml.org/)
 - [x] Data ingest from Google Sheets
-- [x] Bundling with Parcel
+- [x] Bundling with [Vite](https://vitejs.dev/)
 - [ ] Easy deploy to S3 bucket
 
 ## Using this template
 
 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.
 
-You can use `yarn start` to start a development server and `yarn build` to build production-ready files into `dist/`.
+You can use `yarn dev` to start a development server and `yarn build` to build production-ready files into `dist/`.
 
 ### Importing images
 
-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:
+If you want to import an image with a static name, you can simply import it:
 
 ```javascript
-/* eslint-disable-next-line import/no-unresolved */
-import * as images from "../../img/*.png";
+import photo from "../assets/photo.jpg";
+
+const Component = () => (
+  <img src={photo} alt="Alternative text" />
+)
 ```
 
-If you want to import images with different extensions, you need not include an extension:
+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):
 
 ```javascript
-/* eslint-disable-next-line import/no-unresolved, import/extensions */
-import * as images from "../../img/*";
+const Component = ({ image }) => (
+  <img src={new URL(image, import.meta.url).href} alt="Alternative text" />
+)
 ```
 
-_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._
+That said, you'll probably want to be importing images by using a CDN (e.g. Jetpack).
 
 ### Fetching from Google Drive
 
@@ -81,4 +85,4 @@ You can import a CSV file in JS like this:
 import csvfile from "../data/data.csv";
 ```
 
-You'll probably need something like [`d3-fetch`](https://github.com/d3/d3-fetch) to read a CSV into something usable.
+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.
diff --git a/config.json b/config.json
@@ -1,7 +1,7 @@
 {
   "hed": "The Michigan Daily",
   "dek": "Description",
-  "deployment": "test.michigandaily.com",
+  "deployment": "https://test.michigandaily.com",
   "fetch": [
     {
       "id": "",
@@ -15,5 +15,5 @@
       "auth": "./auth.json"
     }
   ],
-  "ga_id": "UA-168080597-1"
+  "GA_MEASUREMENT_ID": ""
 }
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+{# Template #}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <meta property="og:url" content="{{ config.deployment }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="{{ content.hed }}" />
+    <meta property="og:title" content="{{ config.hed }}" />
+    <meta property="og:description" content="{{ config.dek }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:locale" content="en_US" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@michigandaily" />
+    <meta name="twitter:creator" content="@michigandaily" />
+
+    <meta name="description" content="{{ config.dek }}" />
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#000000" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <title>{{ config.hed }}</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      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"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="src/css/main.scss"
+      type="text/css"
+      charset="utf-8"
+    />
+    {% if env == "production" %} {% if config.GA_MEASUREMENT_ID %}
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id={{ config.GA_MEASUREMENT_ID }}"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "{{ config.GA_MEASUREMENT_ID }}");
+    </script>
+    {% endif %} {% endif %}
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/js/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,34 +1,33 @@
 {
   "name": "sourdough",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "license": "MIT",
   "scripts": {
     "prepare": "husky install",
-    "clean": "rm -rf dist/* && rm -rf .parcel-cache",
-    "build": "yarn clean && parcel build --public-url ./ src/index.html",
-    "start": "yarn clean && parcel src/index.html"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@michigandaily/parcel-transformer-nunjucks": "https://github.com/MichiganDaily/parcel-transformer-nunjucks",
-    "@parcel/resolver-glob": "~2.6.0",
-    "@parcel/transformer-raw": "~2.6.0",
-    "@parcel/transformer-sass": "~2.6.0",
-    "@types/react": "^17.0.43",
-    "eslint": "^8.12.0",
+    "@rollup/plugin-dsv": "^2.0.3",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "2.0.0",
+    "eslint": "^8.18.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^7.0.4",
-    "parcel": "~2.6.0",
-    "sink": "https://github.com/MichiganDaily/sink"
+    "nunjucks": "^3.2.3",
+    "sass": "^1.53.0",
+    "sink": "https://github.com/MichiganDaily/sink",
+    "vite": "^3.0.0"
   }
 }
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/icons/android-chrome-192x192.png b/public/icons/android-chrome-192x192.png
diff --git a/public/icons/android-chrome-512x512.png b/public/icons/android-chrome-512x512.png
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
diff --git a/public/icons/favicon.ico b/public/icons/favicon.ico
diff --git a/public/icons/mstile-150x150.png b/public/icons/mstile-150x150.png
diff --git a/public/icons/safari-pinned-tab.svg b/public/icons/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "The Michigan Daily",
+    "short_name": "TMD",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}