vercel · jaredpalmer · Jan 31, 2022 · Jan 28, 2022 · Jan 28, 2022 · Jan 28, 2022
@@ -1,12 +1,6 @@
 import Image from "next/image";
 
-type Props = {
-  name: string;
-  picture: string;
-  twitterUsername: string;
-};
-
-export const Avatar = ({ name, picture, twitterUsername }: Props) => {
+export const Avatar = ({ name, picture, twitterUsername }) => {
   return (
     <div className="flex items-center">
       <Image
@@ -15,17 +9,19 @@ export const Avatar = ({ name, picture, twitterUsername }: Props) => {
         width={32}
         layout="fixed"
         priority={true}
-        className="rounded-full"
+        className="w-full rounded-full"
         alt={name}
       />
       <dl className="ml-2 text-sm font-medium leading-4 text-left whitespace-no-wrap">
         <dt className="sr-only">Name</dt>
-        <dd className="text-gray-900 dark:text-white ">{name}</dd>
+        <dd className="text-gray-900 dark:text-white">{name}</dd>
         <dt className="sr-only">Twitter</dt>
         <dd>
           <a
             href={`https://twitter.com/${twitterUsername}`}
             className="text-xs text-blue-500 no-underline betterhover:hover:text-blue-600 betterhover:hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             @{/* */}
             {twitterUsername}

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from "react";
+import format from "date-fns/format";
 import { useRouter } from "next/router";
 import "focus-visible";
 import { SkipNavContent } from "@reach/skip-nav";
@@ -21,6 +22,8 @@ import sortDate from "./utils/sort-date";
 import Link from "next/link";
 import { Footer as FooterMain } from "../components/Footer";
 import { Avatar } from "../components/Avatar";
+import { formatDistanceToNow } from "date-fns";
+import renderComponent from "./utils/render-component";
 function useDirectoryInfo(pageMap) {
   const { locale, defaultLocale, asPath } = useRouter();
 
@@ -55,10 +58,20 @@ function Body({ meta, toc, filepathWithName, navLinks, children, postList }) {
         )
       ) : postList ? (
         <div className="relative w-full overflow-x-hidden">
-          <main className="z-10 max-w-screen-md min-w-0 px-6 pt-4 mx-auto nextra-content">
-            <h1 className="pt-2 pb-8 text-4xl font-bold">Blog</h1>
-            {postList}
-          </main>
+          <div className="pb-24">
+            <div className="px-6 py-8 mx-auto border-b dark:border-gray-800">
+              <h1 className="max-w-screen-lg pt-2 pb-8 mx-auto text-4xl font-bold leading-tight text-center lg:text-5xl">
+                Blog
+              </h1>
+              <div className="flex items-center justify-center mx-auto ">
+                The latest updates and releases from the Turborepo team at
+                Vercel.
+              </div>
+            </div>
+            <main className="z-10 max-w-screen-md min-w-0 px-6 pt-8 mx-auto">
+              {postList}
+            </main>
+          </div>
           <FooterMain />
         </div>
       ) : meta.full ? (
@@ -68,16 +81,22 @@ function Body({ meta, toc, filepathWithName, navLinks, children, postList }) {
       ) : meta.type === "post" ? (
         <div className="relative w-full mx-auto overflow-x-hidden">
           <article className="pb-24">
-            <div className="px-6 py-8 mx-auto border-b dark:border-gray-800">
-              <h1 className="max-w-screen-lg pt-2 pb-8 mx-auto text-4xl font-bold leading-tight text-center lg:text-5xl">
+            <div className="px-6 py-8 mx-auto space-y-8 text-center border-b dark:border-gray-800">
+              <h1 className="max-w-screen-lg pt-2 mx-auto text-4xl font-bold leading-tight lg:text-5xl">
                 {meta.title}
               </h1>
+              <div className="text-gray-400 dark:text-gray-500">
+                {format(new Date(meta.date), "MMMM do, yyyy")} (
+                {formatDistanceToNow(new Date(meta.date), {
+                  includeSeconds: false,
+                  addSuffix: true,
+                })}
+                )
+              </div>
               <div className="flex items-center justify-center mx-auto ">
-                <Avatar
-                  name="Jared Palmer"
-                  picture="/images/people/jaredpalmer_headshot.jpeg"
-                  twitterUsername="jaredpalmer"
-                />
+                {config.authors
+                  ? renderComponent(config.authors, { authors: meta.authors })
+                  : null}
               </div>
             </div>
             <main className="z-10 max-w-screen-md min-w-0 px-6 pt-8 mx-auto">
@@ -188,20 +207,11 @@ const Layout = ({
   const postList = posts ? (
     <ul className="pb-24 space-y-10 ">
       {posts.map((post) => {
-        // if (tagName) {
-        //   const tags = getTags(post);
-        //   if (!tags.includes(tagName)) {
-        //     return null;
-        //   }
-        // } else if (type === "tag") {
-        //   return null;
-        // }
-
         const postTitle =
           (post.frontMatter ? post.frontMatter.title : null) || post.name;
         const postDate = post.frontMatter ? (
           <time className="post-item-date">
-            {new Date(post.frontMatter.date).toDateString()}
+            {format(new Date(post.frontMatter.date), "MMMM do, yyyy")}
           </time>
         ) : null;
         const postDescription =

@@ -33,6 +33,7 @@
     "axios": "^0.24.0",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
+    "date-fns": "^2.28.0",
     "flexsearch": "^0.7.21",
     "focus-visible": "^5.1.0",
     "github-slugger": "^1.4.0",

@@ -1,4 +1,5 @@
 ---
-title: Posts
+title: Blog
+description: The latest updates and releases from the Turborepo team at Vercel.
 type: posts
 ---
@@ -3,7 +3,8 @@ title: Turborepo is joining Vercel
 date: 2021/12/09
 description: Turborepo is joining Vercel to make the web even faster.
 tag: web development
-author: Jared Palmer
+authors: 
+  - jaredpalmer
 type: post
 ---
 

@@ -3,8 +3,9 @@ title: SAML SSO is now available
 date: 2021/08/03
 description: SAML Single Sign-on (SSO) is now available to Enterprise customers thanks to our friends over at WorkOS. 
 tag: web development
-author: Jared Palmer
-ogImage: /blog/og-saml.png
+authors: 
+  - jaredpalmer
+ogImage: /images/blog/og-saml.png
 type: post
 ---
 

@@ -1,9 +1,10 @@
 ---
-title: Turborepo v0.4.0
+title: Turborepo 0.4.0
 date: 2021/04/02
-description: Turborepo v0.4.0 introduces 10x faster hashing, pruned workspaces with sparse installs, a new pipeline configuration API, and improved cache control.
+description: Turborepo 0.4.0 introduces 10x faster hashing, pruned workspaces with sparse installs, a new pipeline configuration API, and improved cache control.
 tag: web development
-author: Jared Palmer
+authors: 
+  - jaredpalmer
 type: post
 ---
 

@@ -0,0 +1,143 @@
+---
+title: Turborepo 1.1
+date: 2022/01/31
+description: Turborepo 1.1 introduces automatic migrations, turbo.json configuration, environment variable dependencies, partial Yarn v2 support, and more!
+tag: web development
+ogImage: /images/blog/turbo-1-1-0/twitter-card.png
+type: post
+authors: 
+  - jaredpalmer
+  - becca__z
+  - gaspargarcia_
+  - gsoltis
+---
+
+Since releasing Turborepo v1.0 in mid-December, we've seen incredible adoption:
+
+- 5.5k+ GitHub Stars
+- 70k+ weekly NPM downloads
+- 65+ OSS contributors
+- In production at [Vercel](https://github.com/vercel/next.js), [AWS](https://github.com/aws-amplify/amplify-ui), [PayPal](https://twitter.com/jaredpalmer/status/1485617973477978121?s=20&t=E5K-_H-Uo0Q1qIB_uAvdXw), [Twilio](https://github.com/twilio-labs/function-templates), [Contentful](https://github.com/contentful/forma-36), [Miro](https://github.com/miroapp/app-examples), [Framer](https://github.com/framer/motion), [Discord.js](https://github.com/discordjs/discord.js), [Rocket.chat](https://github.com/RocketChat/Rocket.Chat.Fuselage), [Astro.build](https://github.com/withastro/astro)
+- 585+ members of the [Turborepo Community Discord](https://turborepo.org/discord)
+
+![Weekly NPM downloads of `turbo`](../../public/images/blog/turbo-1-1-0/turborepo-weekly-npm-downloads.png)
+
+We're further improving build performance and caching with Turborepo v1.1, featuring:
+
+- [**Automatic Migrations:**](#automatic-migrations) Official idempotent migration scripts to assist with upgrading.
+- [**`turbo.json` Support:**](#turbojson-support) Turborepo configuration now lives in its own file.
+- [**Faster Package Manager Detection:**](#faster-package-manager-detection) Turborepo now respects the `packageManager` key in the root `package.json`.
+- [**Environment Variable Dependencies:**](#environment-variable-dependencies) Define how environment variables impact global and task-specific caching.
+- [**Partial Support for Yarn v2+:**](#partial-yarn-v2v3-support) Support for yarn v2+ with `nodeLinker: "node-modules"`.
+
+Update today by running `npm install turbo@latest`. After running `turbo`, you'll see instructions about how to use `@turbo/codemod` to run automatic migrations for `v1.1`.
+
+## Automatic Migrations
+
+Turborepo now provides idempotent code transformations and automatic migration scripts (a.k.a "codemods") to help upgrade your Turborepo codebase when a feature is deprecated or will be deprecated in the future.
+
+Codemods are transformations that run on your codebase programmatically. This saves you time by applying a large number of changes to your code automatically, without having to manually go through and edit every file.
+
+### Usage
+
+```bash
+npx @turbo/codemod <transform> <path>
+```
+
+- `transform` - the name of transform, [see available transforms in the docs](https://turborepo.org/docs/reference/codemods#turborepo-1x).
+- `path` - files or directory to transform.
+- `--dry` - Do a dry run, no code will be edited.
+- `--print` - Prints the changed output for comparison.
+
+For more information about specific transforms, check out the [new Codemods documentation](https://turborepo.org/docs/reference/codemods#turborepo-1x).
+
+## `turbo.json` Support
+
+Turborepo configuration is now defined in a `turbo.json` file in the root of your monorepo. This is an improvement over having a `turbo` key in `package.json` for those who want to quickly jump straight to their Turborepo configuration in their code editors.
+
+To automatically migrate from your current configuration in `package.json`, check out a new branch, navigate to the root of your monorepo and run the following codemod:
+
+```bash
+npx @turbo/codemod create-turbo-config .
+```
+
+For more information on this transformation, [check out the documentation](https://turborepo.org/docs/reference/codemods#create-turbo-config).
+
+## Faster Package Manager Detection
+
+Turborepo now supports the recently established `packageManager` field in `package.json` for faster package manager detection. Previously, `turbo` would check for specific files to infer this information. To automatically set this field, check out a new branch, navigate to the root of your monorepo and run:
+
+```bash
+npx @turbo/codemod add-package-manager .
+```
+
+For more information on this transformation, [check out the documentation](https://turborepo.org/docs/reference/codemods#add-package-manager).
+
+## Environment Variable Dependencies
+
+When you use `turbo` with tools that inline environment variables at build time (e.g. Next.js or Create React App), it is important you tell `turbo` about it to avoid shipping a cached artifact with the wrong environment variables.
+
+You can now control `turbo`'s [cache fingerprinting (a.k.a. hashing)](https://turborepo.org/docs/features/caching#hashing) behavior based on the values of both environment variables and the contents of files:
+
+- Including environment variables in a `dependsOn` in your `pipeline` definition prefixed by a `$` will impact the cache fingerprint on a per-task or per-package-task basis.
+- Including environment variables in `globalDependencies` list prefixed by a `$` will impact the cache fingerprint of _all_ tasks.
+- Including files or globs of files in `globalDependencies` will impact the cache fingerprint of _all_ tasks.
+- The value of any environment variable that includes `THASH` in its name will impact the cache fingerprint of _all_ tasks.
+
+```jsonc
+{
+    "pipeline": {
+      "build": {
+        "dependsOn": {
+          "^build"
+          // env vars will impact hashes of all "build" tasks
+          "$SOME_ENV_VAR"
+        },
+        "outputs": ["dist/**"]
+      },
+      "web#build": { // override settings for the "build" task for the "web" app
+        "dependsOn": [
+          "^build",
+           // env vars that will impact the hash of "build" task for only "web" app
+           "$STRIPE_SECRET_KEY",
+           "$NEXT_PUBLIC_STRIPE_PUBLIC_KEY",
+           "$NEXT_PUBLIC_ANALYTICS_ID",
+        ],
+        "outputs": [".next/**"],
+      },
+      "docs#build": { // override settings for the "build" task for the "docs" app
+        "dependsOn": [
+          "^build",
+           // env vars that will impact the hash of "build" task for only "web" app
+           "$STRIPE_SECRET_KEY",
+           "$NEXT_PUBLIC_STRIPE_PUBLIC_KEY",
+           "$NEXT_PUBLIC_ANALYTICS_ID",
+        ],
+        "outputs": [".next/**"],
+      }
+    },
+    "baseBranch": "origin/main",
+    "globalDependencies": [
+      "$GITHUB_TOKEN"// env var that will impact the hashes of all tasks,
+      "tsconfig.json" // file contents will impact the hashes of all tasks,
+      ".env.*" // glob file contents will impact the hashes of all tasks,
+    ],
+  }
+}
+```
+
+Note: In most monorepos, you don't often use environment variables in shared packages, but mostly in applications. Thus, to get higher cache hit rates, you should only include environment variables in the app-specific tasks where they are used/inlined.
+
+For more information, read the [caching and hashing documentation](https://turborepo.org/docs/features/caching).
+
+## Partial Yarn v2/v3 support
+
+In addition to Yarn v1, npm, and pnpm package managers, Turborepo now supports Yarn v2+ with [`nodeLinker: "node-modules"` set in `.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker). This key tells Yarn v2+ to mimic Yarn v1's `node_modules` installation behavior. Yarn v2+ Plug'n'Play (a.k.a. "PnP") is not currently supported.
+
+## What's next?
+
+[Since our launch](https://turborepo.org/blog/joining-vercel), Turborepo has focused on seamless incremental adoption/migration and speeding up CI/CD. We are committed to both of those values, but now we'll also be focusing on improving Turborepo's day-to-day ergonomics for local development and observability. We're really excited about this next chapter and will be sharing more details soon.
+
+## We're hiring!
+
+The Turborepo team at [Vercel](https://vercel.com) is hiring! We're specifically looking for full time [Senior Full Stack Software Engineers](https://vercel.com/careers/senior-full-stack-engineer-amer) and [Senior DevOps/Infrastructure Engineers](https://vercel.com/careers/senior-infrastructure-engineer-amer) to help us make Turborepo even better.
@@ -3,9 +3,10 @@ title: You might not need TypeScript project references
 date: 2021/04/23
 description: As it turns out, you might not even references or even an interim TypeScript build step with a pattern I am about to show you, which I dub "internal packages."
 tag: web development
-author: Jared Palmer
-ogImage: /blog/og-project-references.png
+ogImage: /images/blog/og-project-references.png
 type: post
+authors: 
+  - jaredpalmer
 ---
 
 If you've worked in a larger TypeScript codebase or monorepo, you are likely familiar with [project references](https://www.typescriptlang.org/docs/handbook/project-references.html "TypeScript Project References Documentation"). They are indeed fairly powerful.