Add Non-HTML Pages example (#2637)

* Add Non-HTML Pages example * Rename dir non-html-example to non-html-pages * Update name to non-html-pages in package.json
withastro · Feb 25, 2022 · c46db4e · c46db4e
1 parent 7680fd5
commit c46db4e
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 0 deletions.
diff --git a/examples/non-html-pages/.gitignore b/examples/non-html-pages/.gitignore
@@ -0,0 +1,17 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/non-html-pages/.npmrc b/examples/non-html-pages/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
diff --git a/examples/non-html-pages/.stackblitzrc b/examples/non-html-pages/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+ "startCommand": "npm start",
+ "env": {
+ "ENABLE_CJS_IMPORTS": true
+ }
+}
diff --git a/examples/non-html-pages/README.md b/examples/non-html-pages/README.md
@@ -0,0 +1,48 @@
+# Astro Starter Kit: Non-HTML Pages
+
+Documentation for "Non-HTML Pages":
+
+https://docs.astro.build/en/core-concepts/astro-pages/#non-html-pages
+
+```
+npm init astro -- --template non-html-pages
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│ └── pages/
+│ └── index.astro
+│ └── company.json.ts
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command | Action |
+|:---------------- |:-------------------------------------------- |
+| `npm install` | Installs dependencies |
+| `npm run dev` | Starts local dev server at `localhost:3000` |
+| `npm run build` | Build your production site to `./dist/` |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).
diff --git a/examples/non-html-pages/astro.config.mjs b/examples/non-html-pages/astro.config.mjs
@@ -0,0 +1,8 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+ // Comment out "renderers: []" to enable Astro's default component support.
+ renderers: [],
+});
diff --git a/examples/non-html-pages/package.json b/examples/non-html-pages/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@example/non-html-pages",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro build",
+ "preview": "astro preview"
+ },
+ "devDependencies": {
+ "astro": "^0.23.0-next.10"
+ }
+}
diff --git a/examples/non-html-pages/public/favicon.ico b/examples/non-html-pages/public/favicon.ico
diff --git a/examples/non-html-pages/sandbox.config.json b/examples/non-html-pages/sandbox.config.json
@@ -0,0 +1,11 @@
+{
+ "infiniteLoopProtection": true,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "node",
+ "container": {
+ "port": 3000,
+ "startScript": "start",
+ "node": "14"
+ }
+}
diff --git a/examples/non-html-pages/src/pages/company.json.ts b/examples/non-html-pages/src/pages/company.json.ts
@@ -0,0 +1,9 @@
+export async function get() {
+ return {
+ body: JSON.stringify({
+ name: 'Astro',
+ url: 'https://astro.build/',
+ }),
+ };
+}
+
diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+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>
+ </body>
+</html>
diff --git a/examples/non-html-pages/tsconfig.json b/examples/non-html-pages/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "node"
+ }
+}