Update sort order (#4)

* update sort order, use pnpm, update styles

* update README

* update workflow

.github/workflows/lint.yml

@@ -2,7 +2,7 @@
 name: Lint
 
 #############################
-# Start the job on push #
+# Start the job on push     #
 #############################
 on:
   push:
@@ -28,29 +28,35 @@ jobs:
       # Checkout the code base #
       ##########################
       - name: Checkout Code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           # Full git history is needed to get a proper
           # list of changed files within `super-linter`
           fetch-depth: 0
 
       ################################
-      # Install packages #
+      # Install packages             #
       ################################
       - name: Install packages
-        run: npm ci
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
       ################################
-      # Lint codebase #
+      # Lint codebase                #
       ################################
       - name: Run ESLint
         run: npx eslint .
+
       ################################
-      # Check Prettier on codebase #
+      # Check Prettier on codebase   #
       ################################
       - name: Run Prettier
         run: npx prettier --check .
+
       ################################
-      # Check for TypeScript errors #
+      # Check for TypeScript errors  #
       ################################
       - name: Run TypeScript compiler (tsc)
         run: npx tsc --noEmit

.prettierrc.json

@@ -6,13 +6,14 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all",
-
   "importOrder": [
     "<TYPES>^(node:)",
     "<TYPES>",
     "<TYPES>^[.]",
-    "^react/?[^-]*$",
-    "^next/?[^-]*$",
+    "^react$",
+    "^react[-/]{1}.*",
+    "^next$",
+    "^next[-/]{1}.*",
     "<BUILTIN_MODULES>",
     "<THIRD_PARTY_MODULES>",
     "^@/.*$",

README.md

@@ -1,6 +1,6 @@
 # \[Insert Project Name\]
 
-**[BLUEPRINT INTERNAL]: PLEASE GO THROUGH THIS README AND REPLACE ALL THE [INSERT] STATEMENTS WITH VALUES SPECIFIC TO YOUR PROJECT. DELETE THIS MESSAGE WHEN DONE.**
+**[BLUEPRINT INTERNAL]: PLEASE GO THROUGH THIS README AND REPLACE ALL THE [INSERT] STATEMENTS WITH VALUES SPECIFIC TO YOUR PROJECT. DELETE THIS SECTION WHEN DONE.**
 
 This template also has variants with pre-configured setup for styling libraries:
 - [Tailwind CSS](https://github.com/calblueprint/web-app-template/tree/tailwind)
@@ -15,14 +15,14 @@ This project is being built by a team at [Blueprint](https://calblueprint.org),
 
 ### Prerequisites
 
-Check your installation of `npm` and `node`:
+Check your installation of `pnpm` and `node`:
 
 ```bash
 node -v
-npm -v
+pnpm -v
 ```
 
-We strongly recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) (for Mac) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows) to install Node.js and npm. See [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+We strongly recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) (for Mac) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows) to install Node.js and pnpm. See [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js (and optionally npm). See the [Installation Guide for pnpm](https://pnpm.io/installation) to get pnpm on your system.
 
 ### Installation
 
@@ -43,7 +43,7 @@ We strongly recommend using a Node version manager like [nvm](https://github.com
       ```
    3. Install project dependencies. This command installs all packages from [`package.json`](package.json).
       ```bash
-      npm install
+      pnpm install
       ```
 
 2. Set up secrets:
@@ -66,7 +66,7 @@ We strongly recommend using a Node version manager like [nvm](https://github.com
 In the project directory, run:
 
 ```shell
- npm run dev
+pnpm run dev
 ```
 
 Then, navigate to http://localhost:3000 to launch the web application.

app/page.tsx

@@ -1,3 +1,29 @@
+import { CSSProperties } from 'react';
+import Image from 'next/image';
+import BPLogo from '@/assets/images/bp-logo.png';
+
 export default function Home() {
-  return <main>Hello, world!</main>;
+  return (
+    <main style={mainStyles}>
+      <Image style={imageStyles} src={BPLogo} alt="Blueprint Logo" />
+      <p>Open up app/page.tsx to get started!</p>
+    </main>
+  );
 }
+
+// CSS styles
+
+const mainStyles: CSSProperties = {
+  width: '100%',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const imageStyles: CSSProperties = {
+  width: '80px',
+  height: '80px',
+  marginBottom: '0.5rem',
+};

graphics.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.webp';