add browser preview template for both image & avatar endpoints

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@adraffy/ens-normalize": "^1.10.0",
-    "@ensdomains/ens-avatar": "^1.0.0-alpha.2.ethers.6",
+    "@ensdomains/ens-avatar": "^1.0.0-alpha.3.ethers.6",
     "@ensdomains/ensjs": "^3.7.0",
     "@types/lodash": "^4.14.170",
     "btoa": "^1.2.1",

src/controller/avatarImage.ts

@@ -11,6 +11,7 @@ import {
 import { RESPONSE_TIMEOUT }        from '../config';
 import { getAvatarImage }          from '../service/avatar';
 import getNetwork, { NetworkName } from '../service/network';
+import createDocumentfromTemplate  from '../template-document';
 
 export async function avatarImage(req: Request, res: Response) {
   // #swagger.description = 'ENS avatar image'
@@ -29,6 +30,15 @@ export async function avatarImage(req: Request, res: Response) {
            description: 'Image file'
       } */
       if (!res.headersSent) {
+        if (req.header('sec-fetch-dest') === 'document') {
+          const documentTemplate = createDocumentfromTemplate({ buffer, metadata: { name, network: networkName },  mimeType });
+          res
+            .writeHead(200, {
+              'Content-Type': 'text/html',
+            })
+            .end(documentTemplate);
+          return;
+        }
         res
           .writeHead(200, {
             'Content-Type': mimeType,

src/controller/ensImage.ts

@@ -10,6 +10,7 @@ import { RESPONSE_TIMEOUT }        from '../config';
 import { checkContract }           from '../service/contract';
 import { getDomain }               from '../service/domain';
 import getNetwork, { NetworkName } from '../service/network';
+import createDocumentfromTemplate  from '../template-document';
 
 /* istanbul ignore next */
 export async function ensImage(req: Request, res: Response) {
@@ -39,6 +40,15 @@ export async function ensImage(req: Request, res: Response) {
       version
     );
     if (result.image_url) {
+      if (req.header('sec-fetch-dest') === 'document') {
+        const documentTemplate = createDocumentfromTemplate({ metadata: {...result, network: networkName }});
+        res
+          .writeHead(200, {
+            'Content-Type': 'text/html',
+          })
+          .end(documentTemplate);
+        return;
+      }
       const base64 = result.image_url.replace('data:image/svg+xml;base64,', '');
       const buffer = Buffer.from(base64, 'base64');
       if (!res.headersSent) {

src/index.ts

@@ -22,6 +22,7 @@ const setCacheHeader = function (
       `public, max-age=${period}, s-maxage=${period}`
     );
   }
+  res.append('Vary', 'Sec-Fetch-Dest');
 
   next();
 };

src/service/avatar.ts

@@ -64,7 +64,7 @@ export class AvatarMetadata {
     this.uri = uri;
   }
 
-  async getImage() {
+  async getImage(): Promise<[Buffer, string]> {
     let avatarURI;
     try {
       avatarURI = await this.avtResolver.getAvatar(this.uri, {
@@ -102,7 +102,7 @@ export class AvatarMetadata {
 
       assert(!!response, 'Response is empty');
 
-      const mimeType = response?.headers.get('Content-Type');
+      const mimeType = response?.headers.get('Content-Type') || '';
       const data = await response?.buffer();
 
       if (mimeType?.includes('svg') || isSvg(data.toString())) {
@@ -189,7 +189,7 @@ export async function getAvatarMeta(
 export async function getAvatarImage(
   provider: JsonRpcProvider,
   name: string
-): Promise<any> {
+): Promise<[Buffer, string]> {
   const avatar = new AvatarMetadata(provider, name);
   return await avatar.getImage();
 }