Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-04-07 23:41:43 -05:00
Code Issues Activity

WIP: html pages

Browse source
This commit is contained in:
Nate Moore 2022-01-05 18:19:04 -06:00
parent 0b55918738
commit 20ab9f9636
16 changed files with 173 additions and 1 deletions

18
examples/with-html/.gitignore vendored Normal file
View file

@ -0,0 +1,18 @@
# build output
dist
# dependencies
node_modules/
.snowpack/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

2
examples/with-html/.npmrc Normal file
View file

@ -0,0 +1,2 @@
## force pnpm to hoist
shamefully-hoist = true

6
examples/with-html/.stackblitzrc Normal file
View file

@ -0,0 +1,6 @@
{
"startCommand": "npm start",
"env": {
"ENABLE_CJS_IMPORTS": true
}
}

43
examples/with-html/README.md Normal file
View file

@ -0,0 +1,43 @@
# Astro Starter Kit: Minimal
```
npm init astro -- --template minimal
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
> 🧑‍🚀 **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
└── 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).

13
examples/with-html/astro.config.mjs Normal file
View file

@ -0,0 +1,13 @@
// Full Astro Configuration API Documentation:
// https://docs.astro.build/reference/configuration-reference
// @type-check enabled!
// VSCode and other TypeScript-enabled text editors will provide auto-completion,
// helpful tooltips, and warnings if your exported object is invalid.
// You can disable this by removing "@ts-check" and `@type` comments below.
// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
// Comment out "renderers: []" to enable Astro's default component support.
renderers: [],
});

14
examples/with-html/package.json Normal file
View file

@ -0,0 +1,14 @@
{
"name": "@example/minimal",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"devDependencies": {
"astro": "^0.22.6"
}
}

BIN
examples/with-html/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width: 32px  |  Height: 32px  |  Size: 4.2 KiB

2
examples/with-html/public/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Disallow: /

11
examples/with-html/sandbox.config.json Normal file
View file

@ -0,0 +1,11 @@
{
"infiniteLoopProtection": true,
"hardReloadOnChange": false,
"view": "browser",
"template": "node",
"container": {
"port": 3000,
"startScript": "start",
"node": "14"
}
}

12
examples/with-html/src/pages/basic.html Normal file
View file

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title>
</head>
<body>
<h1>Welcome to this HTML page!</h1>
</body>
</html>

20
examples/with-html/src/pages/index.astro Normal file
View file

@ -0,0 +1,20 @@
---
// Component imports and setup JavaScript go here!
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title>
<style>
/* scoped CSS styles go here: */
/* h1 { ... } */
</style>
</head>
<body>
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
</body>
</html>

2
packages/astro/src/core/create-vite.ts
View file

@ -5,6 +5,7 @@ import type { LogOptions } from './logger';
import { builtinModules } from 'module';
import { fileURLToPath } from 'url';
import vite from './vite.js';
import htmlVitePlugin from '../vite-plugin-html/index.js';
import astroVitePlugin from '../vite-plugin-astro/index.js';
import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js';
import configAliasVitePlugin from '../vite-plugin-config-alias/index.js';
@ -50,6 +51,7 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
},
plugins: [
configAliasVitePlugin({ config: astroConfig }),
htmlVitePlugin({ config: astroConfig, logging }),
astroVitePlugin({ config: astroConfig, devServer, logging }),
markdownVitePlugin({ config: astroConfig, devServer }),
jsxVitePlugin({ config: astroConfig, logging }),

1
packages/astro/src/core/ssr/index.ts
View file

@ -206,6 +206,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
// Validate the page component before rendering the page
const Component = await mod.default;
if (!Component) throw new Error(`Expected an exported Astro component but received typeof ${typeof Component}`);
if (typeof Component === 'string') return Component;
if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
const result = createResult({ astroConfig, origin, params, pathname, renderers });

2
packages/astro/src/core/ssr/routing.ts
View file

@ -86,7 +86,7 @@ interface Item {
export function createRouteManifest({ config, cwd }: { config: AstroConfig; cwd?: string }, logging: LogOptions): ManifestData {
const components: string[] = [];
const routes: RouteData[] = [];
const validExtensions: Set<string> = new Set(['.astro', '.md']);
const validExtensions: Set<string> = new Set(['.astro', '.md', '.html']);
function walk(dir: string, parentSegments: Part[][], parentParams: string[]) {
let items: Item[] = [];

3
packages/astro/src/vite-plugin-html/README.md Normal file
View file

@ -0,0 +1,3 @@
# vite-plugin-jsx
Modifies Vite’s built-in JSX behavior to allow for React, Preact, and Solid.js to coexist and all use `.jsx` and `.tsx` extensions.

25
packages/astro/src/vite-plugin-html/index.ts Normal file
View file

@ -0,0 +1,25 @@
import type { Plugin, ResolvedConfig } from '../core/vite';
import type { AstroConfig, Renderer } from '../@types/astro';
import type { LogOptions } from '../core/logger';
import { promises as fs } from 'fs';
interface AstroPluginJSXOptions {
config: AstroConfig;
logging: LogOptions;
}
/** Use Astro config to allow for alternate or multiple JSX renderers (by default Vite will assume React) */
export default function html({ config, logging }: AstroPluginJSXOptions): Plugin {
return {
name: '@astrojs/vite-plugin-html',
enforce: 'pre', // run transforms before other plugins
async load(id) {
if (/\.html/.test(id)) {
const content = await fs.readFile(id).then(res => res.toString());
return `export default \`${content}\``;
}
return null;
},
};
}