Migrate to Next.js App Router

APP_ROUTER_MIGRATION.md

@@ -0,0 +1,37 @@
+# Next.js App Router Migration
+
+This repository has been migrated from Next.js Pages Router to App Router.
+
+## Migration Details
+
+- Updated Next.js from 13.0.5 to 14.1.0
+- Created app directory structure to replace pages directory
+- Converted getStaticProps/getStaticPaths to Server Components with generateStaticParams
+- Added 'use client' directives to client components
+- Updated metadata handling from Next/head to metadata objects
+- Implemented Google Tag Manager using @next/third-parties
+- Added mdx-components.js for MDX content rendering
+
+## File Structure Changes
+
+Pages Router (old) | App Router (new)
+------------------- | ----------------
+/pages/index.js | /app/page.js
+/pages/blog/index.mdx | /app/blog/page.js and /app/blog/page.mdx
+/pages/plugins/index.js | /app/plugins/page.js
+/pages/plugins/newest.js | /app/plugins/newest/page.js
+/pages/themes/index.js | /app/themes/page.js
+/pages/themes/newest.js | /app/themes/newest/page.js
+/pages/store/[name]/index.js | /app/store/[name]/page.js
+/pages/store/[name]/source.js | /app/store/[name]/source/page.js
+/pages/store/security-notice.mdx | /app/store/security-notice/page.js
+/pages/store/submit.mdx | /app/store/submit/page.js
+/pages/_app.js | /app/layout.js
+/pages/_document.js | /app/layout.js
+
+## Global Functionality Migration
+
+- SearchContext Provider → Moved to app/search-provider.js
+- Google Tag Manager → Implemented using @next/third-parties
+- Navigation Progress → Implemented using a custom ProgressBar component
+- Metadata → Migrated to metadata export objects in layout.js and page files

app/blog/page.js

@@ -0,0 +1,137 @@
+import { MDXProvider } from '@mdx-js/react'
+import WithPostClient from 'components/blog/with-post-client'
+
+export const metadata = {
+  title: 'Hyper 3',
+  description: 'Hyper 3: A cross-platform HTML/JS/CSS terminal',
+  openGraph: {
+    title: 'Hyper™ Blog',
+    description: 'Hyper 3: A cross-platform HTML/JS/CSS terminal',
+    images: [
+      {
+        url: 'https://hyper.is/blog/hyper-3-twitter-card.png',
+        width: 1200,
+        height: 630,
+      },
+    ],
+  },
+}
+
+const meta = {
+  title: 'Hyper 3',
+  metaTitle: 'Hyper™ Blog',
+  metaDescription: 'Hyper 3: A cross-platform HTML/JS/CSS terminal',
+  metaImage: 'https://hyper.is/blog/hyper-3-twitter-card.png',
+  authors: [
+    {
+      name: 'Juan Campa',
+      twitter: 'juancampa',
+      thumbnail: 'https://vercel.com/api/www/avatar/?u=juan&s=160',
+    },
+    {
+      name: 'Julien Déléan',
+      twitter: 'CHaBou69',
+      thumbnail: 'https://vercel.com/api/www/avatar/?u=chabou&s=160',
+    },
+    {
+      name: 'Daniel Imms',
+      twitter: 'tyriar',
+      thumbnail: 'https://vercel.com/api/www/avatar/?u=tyriar&s=160',
+    },
+  ],
+}
+
+export default function BlogPage() {
+  return (
+    <div className="blog-post">
+      <WithPostClient meta={meta}>
+        <>
+          <p>
+            <strong>Hyper 3 is finally out!</strong> The primary focus for this
+            release is <strong>performance</strong>.
+          </p>
+          <p>
+            The latest version includes several enhancements that make Hyper
+            <em>really</em> fast. For those of us who spend a significant amount
+            of time on the command line, this release is a total game changer.
+          </p>
+          <p>
+            <a href="/#installation">Download Hyper 3</a> to try it out, and read on to learn more about
+            what's new.
+          </p>
+          <video
+            src="/blog/comparison.mp4"
+            loop
+            muted
+            autoPlay
+            playsInline
+            className="oversize"
+          />
+          <h2>Getting There</h2>
+          <p>
+            Looking back on this release, a pleasant surprise has been how little
+            time it took from <em>"let's make this thing faster"</em> to
+            <em>"Holy shell! That's fast!"</em>
+          </p>
+          <p>
+            Below, we visit some of the important changes that were shipped as
+            part of this release:
+          </p>
+          <h2>WebGL Renderer</h2>
+          <p>
+            The renderer is the piece of code that draws actual pixels on the
+            screen based on the state of the terminal. The original Hyper renderer
+            was based on the DOM. While that was a flexible approach thanks to
+            CSS, it was also very slow.
+          </p>
+          <p>
+            Hyper 2 improved upon this by switching from <code>hterm</code> to
+            <code>xterm.js</code> and using its canvas-based renderer. While that
+            made Hyper 2 faster, for Hyper 3 we knew it was possible to deliver
+            even faster performance by completely rewriting the renderer with <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>. By fortunate coincidence, as we were still figuring things out, <a href="https://github.com/tyriar">Daniel Imms</a> (from
+            <code>xterm.js</code> and <code>VSCode</code> fame),
+            <a href="https://twitter.com/Tyriar/status/1064932797016489984">just returned from a "vacation"</a>
+            where he happened to be write a shiny new WebGL renderer.
+          </p>
+          {/* Rest of the blog content */}
+          <p>
+            Isn't the open source community just amazing? We immediately merged
+            Daniel's branch onto a test fork, and well, it ran circles around
+            Hyper 2. Thanks <a href="https://twitter.com/Tyriar">Daniel</a>!
+          </p>
+          {/* Continue with the rest of the blog content */}
+          <h2>The Road Ahead</h2>
+          <p>
+            Terminals have existed since the 60s, and have been a powerful tool in
+            our workflows. Their flexibility guarantees that they will remain
+            relevant for years to come. <a href="https://twitter.com/rauchg/status/1074381303506587650">We're in for the long haul</a>.
+          </p>
+          <p>
+            Hyper is a new kind of terminal, built on top of web technology, with
+            a focus on extensibility. This opens new possibilities that can make
+            the CLI experience <a href="https://github.com/chabou/hyper-pane">more productive</a> (and <a href="https://github.com/Aaronius/hyper-cat">fun</a>)!
+          </p>
+          <p>
+            We're excited to keep improving Hyper, both in terms of performance
+            and capabilities — there's a lot to do. Hyper is completely open
+            source, and we welcome your <a href="https://github.com/vercel/hyper">involvement and contribution</a>.
+          </p>
+          <h2>Acknowledgments</h2>
+          <p>
+            We're genuinely thankful to the open source community. We're not
+            saying this only because we are building on top of an incredible set
+            of open source libraries, but also because we find the helpful ethos
+            of the community very touching.
+          </p>
+          <p>
+            As soon as the <a href="https://github.com/xtermjs/xterm.js/"><code>xterm.js</code></a>
+            team heard we were working on performance, they jumped right in and
+            helped us with feedback and several initiatives they had on their
+            side. We would like to extend huge thanks to <a href="https://github.com/tyriar">Daniel Imms</a>, <a href="https://github.com/jerch">@Jerch</a> and <a href="https://github.com/stanzilla">Benjamin Staneck</a> for their
+            contribution and feedback.
+          </p>
+        </>
+      </WithPostClient>
+    </div>
+  )
+}

app/client-components.js

@@ -0,0 +1,15 @@
+'use client'
+
+import useOs from 'lib/use-os'
+import { useState, useEffect } from 'react'
+import DownloadButton from 'components/download-button'
+
+export function ClientDownloadButton(props) {
+  const os = useOs()
+  return <DownloadButton {...props} os={os} />
+}
+
+export function ClientOsProvider({ children }) {
+  const os = useOs()
+  return children(os)
+}

app/layout.js

@@ -0,0 +1,52 @@
+import 'styles/global.css'
+import { SearchContext } from 'lib/search-context'
+import Header from 'components/header'
+import SearchList from 'components/search-list'
+import SearchProvider from './search-provider'
+import { GoogleTagManager } from '@next/third-parties/google'
+import { ProgressBar } from 'components/progress-bar'
+import { GA_TRACKING_ID } from 'lib/gtag'
+import { Suspense } from 'react'
+
+export const metadata = {
+  title: {
+    default: 'Hyper™',
+    template: '%s | Hyper™',
+  },
+  description: 'A terminal built on web technologies',
+  openGraph: {
+    title: {
+      default: 'Hyper™',
+      template: '%s | Hyper™',
+    },
+    description: 'A terminal built on web technologies',
+    url: 'https://hyper.is',
+    siteName: 'Hyper™',
+    images: [
+      {
+        url: 'https://assets.vercel.com/image/upload/v1590627842/hyper/og-image-3.png',
+        width: 1200,
+        height: 630,
+      },
+    ],
+    type: 'website',
+  },
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <Suspense fallback={null}>
+          <ProgressBar />
+        </Suspense>
+        <SearchProvider>
+          <Header />
+          {children}
+        </SearchProvider>
+        <GoogleTagManager gtmId={GA_TRACKING_ID} />
+      </body>
+    </html>
+  )
+}