Deploy with Netlify instead of Vercel (#778)

* try ditching vercel

* replace vercel badge with netlify

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* remove remaining vercel refs

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fixup eslint config

* bump node

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Joseph Hamman <joe@earthmover.io>

Author: 3 people

README.md

@@ -1,6 +1,6 @@
 # xarray landing page
 
-![Vercel Deployment](https://img.shields.io/github/deployments/xarray-contrib/xarray.dev/Production?label=vercel&logo=vercel&style=for-the-badge)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/4f940719-54bd-4ff7-95e0-0088dfb3c10f/deploy-status)](https://app.netlify.com/projects/xarraydev/deploys)
 
 Landing Page for xarray project.
 
@@ -44,10 +44,11 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-<a href="https://vercel.com?utm_source=xarray&utm_campaign=oss">
-<p align="center">
-  <img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg">
-</p>
+<a href='https://www.netlify.com'>
+  <img
+    src='https://www.netlify.com/assets/badges/netlify-badge-color-bg.svg'
+    alt='Deploys by Netlify'
+  />
 </a>
 
 ## Authoring blog post tips

netlify.toml

@@ -0,0 +1,48 @@
+[build]
+  publish = ".next"
+  command = "npm run build"
+
+[build.environment]
+  NODE_VERSION = "20"
+
+# Redirect rules for Next.js
+[[redirects]]
+  from = "/_next/static/*"
+  to = "/static/:splat"
+  status = 200
+
+# Handle client-side routing
+[[redirects]]
+  from = "/*"
+  to = "/404.html"
+  status = 404
+
+# Environment variables for different deploy contexts
+[context.production.environment]
+  NEXT_PUBLIC_SITE_URL = "https://xarray.dev"
+
+[context.deploy-preview.environment]
+  NEXT_PUBLIC_SITE_URL = "$DEPLOY_PRIME_URL"
+
+[context.branch-deploy.environment]
+  NEXT_PUBLIC_SITE_URL = "$DEPLOY_PRIME_URL"
+
+# Headers for security
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "DENY"
+    X-XSS-Protection = "1; mode=block"
+    X-Content-Type-Options = "nosniff"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+
+# Cache static assets
+[[headers]]
+  for = "/static/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/_next/static/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"

public/vercel.svg

@@ -14,7 +14,7 @@ import { getRootURL } from '@/lib/seo-utils'
 
 import { GitSHA } from '@/components/git-sha'
 import { Image, Link } from '@/components/mdx'
-import { VercelCallout } from '@/components/vercel'
+import { NetlifyCallout } from '@/components/netlify'
 import { footerItems } from '@/data/footer-items'
 import { FaGithub, FaRss, FaTwitter, FaYoutube } from 'react-icons/fa'
 
@@ -154,7 +154,7 @@ export const Footer = () => {
           </Stack>
         </SimpleGrid>
         <VStack as='footer' spacing={4} mt={12} textAlign='center'>
-          <VercelCallout />
+          <NetlifyCallout />
         </VStack>
       </Container>
     </Box>

src/components/footer.js

@@ -2,9 +2,17 @@ import { Link } from '@/components/mdx'
 import { Flex, Text } from '@chakra-ui/react'
 import { IoGitBranchOutline } from 'react-icons/io5'
 
-const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || ''
-const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER || ''
-const slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG || ''
+const sha = process.env.HEAD || ''
+const repositoryUrl = process.env.REPOSITORY_URL || ''
+
+// Extract owner and repo from REPOSITORY_URL (format: https://github.com/owner/repo)
+const getRepoInfo = (url) => {
+  if (!url) return { owner: '', slug: '' }
+  const match = url.match(/github\.com\/([^\/]+)\/([^\/]+?)(?:\.git)?$/)
+  return match ? { owner: match[1], slug: match[2] } : { owner: '', slug: '' }
+}
+
+const { owner, slug } = getRepoInfo(repositoryUrl)
 
 export const GitSHA = () => {
   if (!sha || !owner || !slug) {

src/components/git-sha.js

@@ -35,9 +35,9 @@ export const Layout = ({
   //)
 
   // Determine the base URL based on the environment
-  const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
-    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-    : 'http://localhost:3000'
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL
+    ? process.env.NEXT_PUBLIC_SITE_URL
+    : process.env.URL || 'http://localhost:3000'
 
   // Construct the full card URL
   const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`

src/components/layout.js

@@ -0,0 +1,13 @@
+import { Link } from '@/components/mdx'
+import { Box } from '@chakra-ui/react'
+
+export function NetlifyCallout() {
+  return (
+    <a href='https://www.netlify.com'>
+      <img
+        src='https://www.netlify.com/assets/badges/netlify-badge-color-bg.svg'
+        alt='Deploys by Netlify'
+      />
+    </a>
+  )
+}

src/components/netlify.js

@@ -1,10 +1,11 @@
 export function getRootURL() {
   let url = 'https://xarray.dev'
-  if (
-    process.env.NEXT_PUBLIC_VERCEL_URL &&
-    process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production'
-  ) {
-    url = `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+
+  // Use Netlify URL environment variable for deploy previews and branch deploys
+  if (process.env.NEXT_PUBLIC_SITE_URL && process.env.CONTEXT !== 'production') {
+    url = process.env.NEXT_PUBLIC_SITE_URL
+  } else if (process.env.URL && process.env.CONTEXT !== 'production') {
+    url = process.env.URL
   }
 
   return url

src/components/vercel.js

@@ -88,7 +88,7 @@ export async function getStaticPaths() {
   const paths = getAllPostsIds()
 
   const isDev =
-    process.env.VERCEL_ENV === 'preview' ||
+    process.env.CONTEXT !== 'production' ||
     process.env.NODE_ENV === 'development'
   // We'll pre-render only these paths at build time.
   // { fallback: false } means other routes should 404.