init commit

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.editorconfig

@@ -0,0 +1,18 @@
+# See http://editorconfig.org/
+# EditorConfig helps developers define and maintain consistent coding styles
+# between different editors and IDEs. The EditorConfig project consists of a
+# file format for defining coding styles and a collection of text editor plugins
+# that enable editors to read the file format and adhere to defined styles.
+# EditorConfig files are easily readable and they work nicely with version
+# control systems.
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "react/no-unescaped-entities": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@next/next/no-img-element": 0,
+    "@next/next/no-html-link-for-pages": 0
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,46 @@
+on: [push]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Deploy to Cloudflare Pages
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.15.0
+          cache: 'npm'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_CONTENT_API: ${{ secrets.NEXT_PUBLIC_CONTENT_API }}
+          NEXT_PUBLIC_ASSETS_URL: ${{ secrets.NEXT_PUBLIC_ASSETS_URL }}
+          NEXT_TELEMETRY_DISABLED: ${{ secrets.NEXT_TELEMETRY_DISABLED }}
+          PINO_LOG_LEVEL: ${{ secrets.PINO_LOG_LEVEL }}
+          NEXT_PUBLIC_PROMISE_CACHE_DEBUG: ${{ secrets.NEXT_PUBLIC_PROMISE_CACHE_DEBUG }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+
+      - name: Test
+        run: npm run lint
+
+      - name: Deploy
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: 'portfolio'
+          directory: 'out'
+          gitHubToken: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/analyze
+
+# next.js
+/.next/
+/out/
+/dist/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# ides
+.idea
+.vscode

.prettierignore

@@ -0,0 +1,6 @@
+.git
+.next
+out
+analyze
+coverage
+node_modules

Dockerfile

@@ -0,0 +1,55 @@
+ARG IMAGE=node:18-alpine
+ARG SERVER_PORT=3000
+
+# Install dependencies only when needed
+FROM $IMAGE AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies
+COPY package.json package-lock.json* ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM $IMAGE AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM $IMAGE AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE $SERVER_PORT
+
+ENV PORT $SERVER_PORT
+
+CMD ["node", "server.js"]

LICENSE.txt

@@ -0,0 +1 @@
+This is proprietary code, it is NOT open source. You have a right to VIEW the code in this repo. You DO NOT have a right to DISTRIBUTE or MAKE USE of this code, including any portion of it for any purposes whatsoever, either commercial, non-commercial or personal. You MAY NOT base a new project off of either the application, its theme or any other derivative portion of the codebase. The only permission granted is to allow the viewing the code as-is on github.com OR to make a SINGLE copy on your computer for the sole purpose of running and/or viewing the project for yourself. All other rights reserved. Enjoy!

README.md

@@ -0,0 +1,23 @@
+## jasongallagher.org v4
+
+My personal site and portfolio in NextJS 13 using the app directory and React Server Components. Static site built off from a headless CMS and deployed to Cloudflare Pages. Significantly slimmer payload and better performance over V3, with a Page Speed Insights score of 98 on mobile (versus ~78 for v3).
+
+> Note: this code is NOT an open source. You have a right to view, or install a local copy for personal viewing only. You are not granted the right to use this in any other way, either for commercial or non-commercial reasons. You may not distribute this code. Please see the LICENSE file for more details.
+
+### Prerequisites
+
+Node 16.8+
+
+### Secrets
+
+Copy `sample.env` to `.env` and modify as needed.
+
+### Install
+
+`npm i`
+
+### Run in dev mode
+
+`npm run dev` To view in the browser, go to `http://localhost:3000`
+
+Keep in mind the site depends on a CMS backend for most of its content. So running it by itself will mainly show a skeleton with lots of errors in the network tab!

app/data.ts

@@ -0,0 +1,65 @@
+import { Navigation, Project, Skills } from '@/services/types/directus';
+import { directus } from '@/lib/services';
+import { BlockWithMeta, Data } from '@/services/types/directus.data';
+
+export async function getNavigation() {
+  const fields = 'id,title,link,sort';
+
+  return (
+    await directus().get<Data<Navigation[]>>(
+      `/items/navigation?fields=${fields}`
+    )
+  ).data;
+}
+
+export async function getHomeBlocks() {
+  const fields = 'id,title,content,image,image.id,image.width,image.height';
+
+  return (
+    await directus().get<Data<BlockWithMeta[]>>(
+      `/items/blocks?fields=${fields}`
+    )
+  ).data;
+}
+
+export async function getProjects() {
+  const fields =
+    'project_id,date_created,title,decription_short,image_logo,slug,sort,image_logo.id,image_logo.width,image_logo.height';
+
+  return (
+    await directus().get<Data<Project[]>>(`/items/project?fields=${fields}`)
+  ).data;
+}
+
+export async function getSkills() {
+  const fields = 'sort,id,title';
+
+  return (
+    await directus().get<Data<Skills[]>>(`/items/skills?fields=${fields}`)
+  ).data;
+}
+
+export async function sendContact<T>(data: T) {
+  return await directus().post<T>('/items/contacts', {
+    body: JSON.stringify(data),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+export default async function getHomeData() {
+  const [homeBlocks, projects, skills] = await Promise.all([
+    getHomeBlocks(),
+    getProjects(),
+    getSkills(),
+    getNavigation(),
+  ]);
+
+  return {
+    getNavigation,
+    homeBlocks,
+    projects,
+    skills,
+  };
+}

app/error.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  console.log('ERROR BOUNDARY CALLED');
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('error from Error Boundary Component', error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

app/layout.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import GlobalState from '@/components/providers';
+import { Oswald, Sanchez } from 'next/font/google';
+
+// prevents flash of large icons during SSR
+// https://github.com/FortAwesome/react-fontawesome/issues/134
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@/assets/scss/global.scss';
+import { Metadata } from 'next';
+import { META_DEFAULT_DESC, META_DEFAULT_TITLE } from '@/lib/constants';
+import MobileNavigation from '@/components/mobileNavigation/mobileNavigation';
+import Navigation from '@/components/navigation/navigation';
+
+// prevent duplicate FA css
+config.autoAddCss = false;
+
+const oswald = Oswald({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-oswald',
+});
+const sanchez = Sanchez({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-sanchez',
+});
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <html lang="en" className={`${oswald.variable} ${sanchez.variable}`}>
+      <body>
+        <GlobalState>
+          <MobileNavigation>
+            {/* @ts-expect-error Server Component */}
+            <Navigation template="hamburger" ulClass="responsiveNav" />
+          </MobileNavigation>
+
+          {children}
+        </GlobalState>
+      </body>
+    </html>
+  );
+}
+
+export const metadata: Metadata = {
+  title: {
+    default: META_DEFAULT_TITLE,
+    template: '%s | Jason Gallagher',
+  },
+  description: META_DEFAULT_DESC,
+  alternates: {
+    canonical: 'https://jasongallagher.org',
+  },
+};