get new example working during build

withastro · Feb 25, 2022 · 5370bba · jonathantneal · Feb 25, 2022 · 5370bba
1 parent 00dda8e
commit 5370bba
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/examples/non-html-pages/README.md b/examples/non-html-pages/README.md
@@ -22,7 +22,7 @@ Inside of your Astro project, you'll see the following folders and files:
 ├── src/
 │ └── pages/
 │ └── index.astro
-│ └── company.json.ts
+│ └── about.json.ts
 └── package.json
 ```
 

diff --git a/examples/non-html-pages/src/pages/about.json.ts b/examples/non-html-pages/src/pages/about.json.ts
@@ -0,0 +1,11 @@
+// Returns the file body for this non-HTML file.
+// The content type is based off of the extension in the filename,
+// in this case: about.json.
+export async function get() {
+ return {
+ body: JSON.stringify({
+ name: 'Astro',
+ url: 'https://astro.build/',
+ }),
+ };
+}
diff --git a/examples/non-html-pages/src/pages/company.json.ts b/examples/non-html-pages/src/pages/company.json.ts
diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro
@@ -1,16 +1,18 @@
----
-const url = `${Astro.request.canonicalURL.origin}/company.json`;
-const response = await fetch(url);
-const data = await response.json();
----
+
 <html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Astro</title>
  </head>
  <body>
- <h1>Astro</h1>
- <div>{JSON.stringify(data)}</div>
+ <h1 id="result">Loading...</h1>
+ <script type="module">
+ // Non-HTML files will be included in your final build, so you
+ // can fetch them directly in the browser.
+ const response = await fetch(`/about.json`);
+ const data = await response.json();
+ document.getElementById('result').innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
+ </script>
  </body>
 </html>