michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

get new example working during build

Browse source
This commit is contained in:
Fred K. Schott 2022-02-25 08:28:38 -08:00
parent 00dda8e056
commit 5370bba0b0
4 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/non-html-pages/README.md
View file

@ -22,7 +22,7 @@ Inside of your Astro project, you'll see the following folders and files:
├── src/ ├── src/
│ └── pages/ │ └── pages/
│ └── index.astro │ └── index.astro
│ └── company.json.ts │ └── about.json.ts
└── package.json └── package.json
``` ```

11
examples/non-html-pages/src/pages/about.json.ts Normal file
View file

@ -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/',
}),
};
}

8
examples/non-html-pages/src/pages/company.json.ts
View file

@ -1,8 +0,0 @@
export async function get() {
return {
body: JSON.stringify({
name: 'Astro',
url: 'https://astro.build/',
}),
};
}

16
examples/non-html-pages/src/pages/index.astro
View file

@ -1,8 +1,4 @@
---
const url = `${Astro.request.canonicalURL.origin}/company.json`;
const response = await fetch(url);
const data = await response.json();
---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -10,7 +6,13 @@ const data = await response.json();
<title>Astro</title> <title>Astro</title>
</head> </head>
<body> <body>
<h1>Astro</h1> <h1 id="result">Loading...</h1>
<div>{JSON.stringify(data)}</div> <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> </body>
</html> </html>