Heroku dev deps (#19431)

* fix: req.csrfToken doesn't always exist (e.g. 500 page)

* feat: update dockerfile and add nextjs to build

* fix: run linter

* move @babel deps -> dev deps

* move webpack looking things from deps -> dev deps

* move pa11y-ci to optional dep

* explicitly include optional deps for pa11y

* allow heroku dev deps to be installed

* fix: update postcss module

* fix: update dockerfile build

* tmp: disable renderReact

* see if another deploy is slower/faster

* move a few more packages to devDeps

* upgrade to package-lock v2

* use dayjs instead of date-fns

* move cross-env to devDeps

* remove unused 'del' package

* commit husky precommit hooks

* add hrtime to clone-for-build.js

* Revert "add hrtime to clone-for-build.js"

This reverts commit 70ee647bacce833f4ed2f621f62c63c1d85e5413.

* update babel/eslint

* fix: remove unused plugin

* try a .slugignore

* fix: heroku-postbuild to use npm run build

* fix: i cannot spell dereferenced

* add .next/cache to heroku cacheDirectories

* test cached build

* remove aws-sdk, see what breaks

* move jest-puppeteer to optional deps

* fix: update browser-test.yml to use newer node version

* move jimp to optional dependencies

* move puppeteer to optional dependencies

* fix: ci optional include

* fix: bad copy pasta

* remove previous react experiment

* update tests/README.md with note about optional deps

* bump node test version back to 14

* convert package-lock back to v1

* fix: use node 15.x to leverage npm optional deps

* fix: optional dep install

* test: see what happens with heroku/nodejs-typescript buildpack

* back to heroku/nodejs buildpack

* move jest to optional

* revert jest move

* remove .slugignore

* cleanup dockerfile, move xlsx-population to optional, add comment about optional deps

* Update Dockerfile

Co-authored-by: James M. Greene <JamesMGreene@github.com>

Co-authored-by: James M. Greene <JamesMGreene@github.com>

Author: mikesurowiec

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     es2020: true,
     node: true
   },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   extends: [
     'eslint:recommended',
     'standard'

.github/workflows/browser-test.yml

@@ -39,7 +39,7 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --include=optional
 
       - name: Run brower-test
         run: npm run browser-test

.github/workflows/build-docker-image.yml

@@ -23,4 +23,4 @@ jobs:
       - name: Check out repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
       - name: Build the container
-        run: docker build .
+        run: docker build --target production .

.github/workflows/pa11y.yml

@@ -35,7 +35,7 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --include=optional
 
       - name: Run build scripts
         run: npm run build

Dockerfile

@@ -3,25 +3,62 @@
 # It uses two multi-stage builds: `install` and the main build to keep the image size down.
 
 # --------------------------------------------------------------------------------
-# INSTALL IMAGE
-# A temporary image that installs production-only dependencies and builds the production-ready front-end bundles.
+# BASE IMAGE
+# --------------------------------------------------------------------------------
+FROM node:16.2.0-alpine as base
+
+RUN apk add --no-cache make g++ git
 
-FROM node:14-alpine as install
-RUN apk add --no-cache python make g++
-ENV NODE_ENV production
 WORKDIR /usr/src/docs
+
+
+# ---------------
+# ALL DEPS
+# ---------------
+FROM base as all_deps
+
 COPY package*.json ./
+
+RUN npm ci
+
+
+# ---------------
+# PROD DEPS
+# ---------------
+FROM all_deps as prod_deps
+
+RUN npm prune --production
+
+
+# ---------------
+# BUILDER
+# ---------------
+FROM all_deps as builder
+
+ENV NODE_ENV production
+
 COPY javascripts ./javascripts
 COPY stylesheets ./stylesheets
+COPY pages ./pages
+COPY components ./components
 COPY lib ./lib
+
+# one part of the build relies on this content file to pull all-products
+COPY content/index.md ./content/index.md
+
 COPY webpack.config.js ./webpack.config.js
-RUN npm ci --production
+COPY next.config.js ./next.config.js
+COPY tsconfig.json ./tsconfig.json
+
+RUN npx tsc
+
 RUN npm run build
 
 # --------------------------------------------------------------------------------
 # MAIN IMAGE
+# --------------------------------------------------------------------------------
 
-FROM node:14-alpine
+FROM node:16.2.0-alpine as production
 
 # Let's make our home
 WORKDIR /usr/src/docs
@@ -32,11 +69,12 @@ RUN chown node:node /usr/src/docs -R
 # This should be our normal running user
 USER node
 
-# Copy our dependencies
-COPY --chown=node:node --from=install /usr/src/docs/node_modules /usr/src/docs/node_modules
+# Copy just our prod dependencies
+COPY --chown=node:node --from=prod_deps /usr/src/docs/node_modules /usr/src/docs/node_modules
 
 # Copy our front-end code
-COPY --chown=node:node --from=install /usr/src/docs/dist /usr/src/docs/dist
+COPY --chown=node:node --from=builder /usr/src/docs/dist /usr/src/docs/dist
+COPY --chown=node:node --from=builder /usr/src/docs/.next /usr/src/docs/.next
 
 # We should always be running in production mode
 ENV NODE_ENV production

app.json

@@ -2,7 +2,6 @@
   "name": "docs.github.com",
   "env": {
     "NODE_ENV": "production",
-    "NPM_CONFIG_PRODUCTION": "true",
     "ENABLED_LANGUAGES": "en",
     "WEB_CONCURRENCY": "1"
   },

components/Contribution.tsx

@@ -20,7 +20,11 @@ export const Contribution = () => {
       </a>
       <p className="color-text-secondary f6 mt-2">
         {t`or`}{' '}
-        <a href="https://github.com/github/docs/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">
+        <a
+          href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"
+          target="_blank"
+          rel="noopener"
+        >
           {t`to_guidelines`}
         </a>
       </p>

components/Header.tsx

@@ -50,7 +50,11 @@ export const Header = () => {
         <div className="width-full">
           <div className="d-inline-block width-full d-md-flex" style={{ zIndex: 1 }}>
             <div className="float-right d-md-none position-relative" style={{ zIndex: 3 }}>
-              <ButtonOutline css onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Navigation Menu">
+              <ButtonOutline
+                css
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                aria-label="Navigation Menu"
+              >
                 {isMenuOpen ? <XIcon size="small" /> : <ThreeBarsIcon size="small" />}
               </ButtonOutline>
             </div>

components/landing/FeaturedArticles.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import Link from 'next/link'
-import { format } from 'date-fns'
+import dayjs from 'dayjs'
 
 import { ArrowRightIcon } from '@primer/octicons-react'
 import { FeaturedLink, useProductLandingContext } from 'components/context/ProductLandingContext'
@@ -93,9 +93,9 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
                   {link.date && (
                     <time
                       className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
-                      aria-label={format(new Date(link.date), 'PPP')}
+                      aria-label={dayjs(link.date).format('LLL')}
                     >
-                      {format(new Date(link.date), 'MMMM dd')}
+                      {dayjs(link.date).format('MMMM DD')}
                     </time>
                   )}
                 </a>

lib/page.js

@@ -11,7 +11,6 @@ const Permalink = require('./permalink')
 const languages = require('./languages')
 const renderContent = require('./render-content')
 const processLearningTracks = require('./process-learning-tracks')
-const { renderReact } = require('./react/engine')
 const { productMap } = require('./all-products')
 const slash = require('slash')
 const statsd = require('./statsd')
@@ -168,31 +167,8 @@ class Page {
       this.introLinks.overview = await renderContent(this.introLinks.rawOverview, context, { textOnly: true })
     }
 
-    let markdown = this.markdown
-
-    // If the article is interactive parse the React!
-    if (this.interactive) {
-      // Search for the react code comments to find the react components
-      const reactComponents = markdown.match(/<!--react-->(.*?)<!--end-react-->/gs)
-
-      // Render each of the react components in the markdown
-      await Promise.all(reactComponents.map(async (reactComponent) => {
-        let componentStr = reactComponent
-
-        // Remove the React comment indicators
-        componentStr = componentStr.replace('<!--react-->\n', '').replace('<!--react-->', '')
-        componentStr = componentStr.replace('\n<!--end-react-->', '').replace('<!--end-react-->', '')
-
-        // Get the rendered component
-        const renderedComponent = await renderReact(componentStr)
-
-        // Replace the react component with the rendered markdown
-        markdown = markdown.replace(reactComponent, renderedComponent)
-      }))
-    }
-
     context.relativePath = this.relativePath
-    const html = await renderContent(markdown, context)
+    const html = await renderContent(this.markdown, context)
 
     // product frontmatter may contain liquid
     if (this.product) {