nextjs (#27)

.github/workflows/deployment.yml

@@ -6,8 +6,8 @@ env:
   DOCKERFILE: Dockerfile.caprover
   CAPROVER_APP: resume
   DOCKER_REGISTRY: ghcr.io
-  REACT_APP_GOOGLE_ANALYTICS_ID: ${{secrets.GOOGLE_TAG_ID}}
-  REACT_APP_POSTHOG_ID: ${{secrets.POSTHOG_ID}}
+  GOOGLE_TAG_ID: ${{secrets.GOOGLE_TAG_ID}}
+  POSTHOG_ID: ${{secrets.POSTHOG_ID}}
 
 on:
   workflow_dispatch:
@@ -22,8 +22,8 @@ jobs:
       - uses: actions/checkout@v1
       - run: |
           echo "IMAGE_NAME_WITH_REGISTRY=$DOCKER_REGISTRY/$IMAGE_NAME" >> $GITHUB_ENV
-          echo "REACT_APP_GOOGLE_ANALYTICS_ID=$REACT_APP_GOOGLE_ANALYTICS_ID" >> $GITHUB_ENV
-          echo "REACT_APP_POSTHOG_ID=$REACT_APP_POSTHOG_ID" >> $GITHUB_ENV
+          echo "GOOGLE_TAG_ID=$GOOGLE_TAG_ID" >> $GITHUB_ENV
+          echo "POSTHOG_ID=$POSTHOG_ID" >> $GITHUB_ENV
           export IMAGE_NAME_WITH_REGISTRY=$DOCKER_REGISTRY/$IMAGE_NAME
           echo "FULL_IMAGE_NAME=$IMAGE_NAME_WITH_REGISTRY:$GITHUB_SHA-gitsha" >> $GITHUB_ENV
       - name: Log in to the Container registry

.gitignore

@@ -22,4 +22,46 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-src/run/*
+src/run/*
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.next
+
+.env.local

Dockerfile.caprover

@@ -1,26 +1,56 @@
-FROM node:18.15.0-alpine as builder
-ARG REACT_APP_GOOGLE_ANALYTICS_ID
-ARG REACT_APP_POSTHOG_ID
-ENV REACT_APP_GOOGLE_ANALYTICS_ID=$REACT_APP_GOOGLE_ANALYTICS_ID
-ENV REACT_APP_POSTHOG_ID=$REACT_APP_POSTHOG_ID
+FROM node:18.15.0-alpine AS base
 
+### Dependencies
+ARG GOOGLE_TAG_ID
+ARG POSTHOG_ID
+ENV NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=$GOOGLE_TAG_ID
+ENV NEXT_PUBLIC_POSTHOG_ID=$POSTHOG_ID
+
+# Install dependencies only when needed
+FROM base 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
 # Set the working directory to /app inside the container
 WORKDIR /app
-# Copy app files
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+### Builder
+# Rebuild the source code only when needed
+FROM base AS builder
+# Change environment variables
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
-RUN npm ci 
-# Build the app
+
 RUN npm run build
 
-# Bundle static assets with nginx
-FROM nginx:1.21.0-alpine as production
+### Runner
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+# Set Environment
 ENV NODE_ENV production
-# Copy built assets from `builder` image
-COPY --from=builder /app/build /usr/share/nginx/html
-# Add your nginx.conf
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-# Expose port
-EXPOSE 80
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/.next ./.next
+# 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 3000
+ENV PORT 3000
+
+CMD ["npm", "start"]

app/layout.tsx

@@ -0,0 +1,16 @@
+import Head from 'next/head'
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <>
+            <Head>
+                <title>Jose Salcido - Resume</title>
+            </Head>
+            <>{children}</>
+        </>
+    )
+}

src/App.js → components/App.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import './App.css';
-import Sidebar from './components/Sidebar/Sidebar';
-import Footer from './components/Footer/Footer';
-import MainContent from './components/MainContent/MainContent';
-import developer from './developer'
-import resume from './resume'
+import Sidebar from './Sidebar/Sidebar';
+import Footer from './Footer/Footer';
+import MainContent from './MainContent/MainContent';
+import developer from '../app/developer'
+import resume from '../app/resume'
 
 function App() {
 

src/components/Sidebar/Profile/Profile.js → components/Sidebar/Profile/Profile.js

@@ -1,10 +1,11 @@
 import React from 'react'
-import profilePicture from '../../../images/developer.png'
+
+import Image from 'next/image'
 
 function Profile(props) {
     return (
         <div className="profile-container">
-            <img src={profilePicture} className="profile" alt="logo" />
+            <Image src='/images/developer.png' width={100} height={100} alt="logo" />
             <h1 className="name">{props.name}</h1>
             <h3 className="tagline">{props.tagline}</h3>
         </div>

components/analytics/index.tsx

@@ -0,0 +1,61 @@
+import Script from "next/script"
+import React from "react";
+
+export const AnalyticsConfig = {
+    "gtag": process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID,
+    "posthog": process.env.NEXT_PUBLIC_POSTHOG_ID
+}
+
+
+export const Posthog : React.FC = () => {
+    const POSTHOG_ID = AnalyticsConfig.posthog
+
+    if (!POSTHOG_ID) {
+        console.log("Posthog not initialized")
+        return null;
+    }
+
+    return (
+        <Script id='posthog-script' strategy="afterInteractive" dangerouslySetInnerHTML={{
+            __html: `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+        posthog.init('${POSTHOG_ID}',{api_host:'https://app.posthog.com'})`
+        }} />
+    )
+}
+
+
+export const GoogleTagManager : React.FC = () => {
+
+    const GTM_ID = AnalyticsConfig.gtag
+
+    if (!GTM_ID) {
+        console.log("Google Tag Manager not initialized")
+        return null;
+    }
+
+    return (
+        <>
+            <noscript>
+                <iframe
+                    src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+                    height="0"
+                    width="0"
+                    style={{ display: "none", visibility: "hidden" }}
+                />
+            </noscript>
+            <Script
+                id="gtm-script"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer', '${GTM_ID}');
+  `,
+                }}
+            />
+        </>
+    )
+}

components/layout.tsx

@@ -0,0 +1,58 @@
+import React, { Suspense } from 'react';
+import Sidebar from './Sidebar/Sidebar';
+import Footer from './Footer/Footer';
+import developer from '../app/developer'
+import { AnalyticsConfig, GoogleTagManager, Posthog } from './analytics';
+
+
+const Analytics: React.FC = () => {
+    if (process.env.NODE_ENV === 'development') {
+        console.log("Analytics not initialized")
+        return null;
+    }
+    return (
+        <>
+            <Suspense>
+                <Posthog />
+            </Suspense>
+            <Suspense>
+                <GoogleTagManager />
+            </Suspense>
+        </>
+    )
+}
+
+const DebugBanner: React.FC = () => {
+    if (process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+
+    return (
+        <div className="text-center">
+            <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode. GA: {AnalyticsConfig.gtag}</small>
+        </div>
+    )
+}
+
+export default function Layout({ children }) {
+    return (
+        <>
+            <Analytics />
+            <>
+                <div className="Resume">
+                    <DebugBanner />
+                    <div className="Resume wrapper">
+                        <Sidebar profile={developer.profile}
+                            contact={developer.contact}
+                            education={developer.education}
+                            languages={developer.languages}
+                            interests={developer.interests}
+                        />
+                        <>{children}</>
+                    </div>
+                    <Footer />
+                </div>
+            </>
+        </>
+    );
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.