Update package-lock.json and .gitignore files and fix builds (#158)

* chore(example-ssr): update .gitignore

* chore(example): update .gitignore

* chore: update package-lock.json

These changes were caused only by running `npm install` using `[email protected]"`.

* fix(example-ssr): make sure broken images are handled

At least one image lacks all information except
`{"_type":"image","_key":"caf3ba0151b7"}` causing that blog post to break
halfway through with an internal server error.

* fix(example): make sure broken images are handled

At least one image lacks all information except
`{"_type":"image","_key":"caf3ba0151b7"}` causing the site to fail to build.

apps/example-ssr/.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+.vercel
+.env*.local

apps/example-ssr/src/components/SanityImage.astro

@@ -1,20 +1,26 @@
 ---
 import imageUrlBuilder from "@sanity/image-url";
+import type { ImageUrlBuilder } from "@sanity/image-url/lib/types/builder";
 import {sanityClient} from "sanity:client"
 
 const builder = imageUrlBuilder(sanityClient)
 
 const {node} = Astro.props
 const { width = 960 } = Astro.props
+let image: ImageUrlBuilder | undefined;
 
 // See https://www.sanity.io/docs/presenting-images for general documentation on
 // presenting images, and https://www.sanity.io/docs/image-url for specifics on
 // this builder API
-const image = node && builder
-  .image(node)
-  .width(width)
-  .fit('max')
-  .auto('format')
+try {
+  image = node && node.asset && builder
+    .image(node)
+    .width(width)
+    .fit('max')
+    .auto('format')
+} catch (error) {
+  console.error(error)
+}
 ---
 
-{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}
+{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}

apps/example/.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 .DS_Store
 
 .vercel
+.env*.local

apps/example/src/components/SanityImage.astro

@@ -1,21 +1,26 @@
 ---
 import imageUrlBuilder from "@sanity/image-url";
+import type { ImageUrlBuilder } from "@sanity/image-url/lib/types/builder";
 import { sanityClient } from "sanity:client";
 
-
 const builder = imageUrlBuilder(sanityClient)
 
 const {node} = Astro.props
 const { width = 960 } = Astro.props
+let image: ImageUrlBuilder | undefined;
 
 // See https://www.sanity.io/docs/presenting-images for general documentation on
 // presenting images, and https://www.sanity.io/docs/image-url for specifics on
 // this builder API
-const image = node && builder
-  .image(node)
-  .width(width)
-  .fit('max')
-  .auto('format')
+try {
+  image = node && node.asset && builder
+    .image(node)
+    .width(width)
+    .fit('max')
+    .auto('format')
+} catch(error) {
+  console.error(error)
+}
 ---
 
-{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}
+{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}