feat: astro integration (#21)

.changeset/forty-bags-kneel.md

@@ -0,0 +1,5 @@
+---
+'@urami/astro': major
+---
+
+Initial integration support for [Astro](https://astro.build/)

apps/docs/src/.vitepress/config.mts

@@ -39,6 +39,7 @@ export default defineConfig({
         text: 'Getting Started',
         items: [
           { text: 'Introduction', link: '/introduction' },
+          { text: 'Astro', link: '/guide/astro' },
           { text: 'SvelteKit', link: '/guide/sveltekit' },
           { text: 'Solid Start', link: '/guide/solid-start' },
         ],

apps/docs/src/guide/astro.md

@@ -0,0 +1,80 @@
+# Astro
+
+[Example](https://github.com/rayriffy/urami/tree/main/apps/examples/astro)
+
+Here're the steps to integrate Urami with Astro.
+
+## Quick install
+
+Use `astro add` to install `@urami/astro` package. This will automatically install dependencies, and add integration to `astro.config.mjs`.
+
+::: code-group
+
+```sh [npm]
+$ npx astro add @urami/astro
+```
+
+```sh [pnpm]
+$ pnpm astro add @urami/astro
+```
+
+```sh [yarn]
+$ yarn astro add @urami/astro
+```
+
+:::
+
+## Manual install
+
+First, install `@urami/astro` package.
+
+::: code-group
+
+```sh [npm]
+$ npm add @urami/astro
+```
+
+```sh [pnpm]
+$ pnpm add @urami/astro
+```
+
+```sh [yarn]
+$ yarn add @urami/astro
+```
+
+:::
+
+Then, apply integration to `astro.config.mjs`. It's important to have `output: 'server'` in order to use Urami.
+
+```js [astro.config.mjs]
+import { defineConfig } from 'astro/config'
+
+import urami from '@urami/astro' // [!code ++]
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server', // [!code ++]
+  integrations: [
+    urami(), // [!code ++]
+  ],
+})
+
+```
+
+## Image component
+
+Import `Image` component from `@urami/astro` and use it like `next/image`.
+
+```astro
+---
+import Image from '@urami/astro/image'
+---
+
+<Image
+  src="https://demo.rayriffy.com/tom-scott.jpg"
+  width={801}
+  height={801}
+  alt="Tom Scott"
+  class="rounded-xl shadow-md"
+/>
+```

apps/examples/astro/.gitignore

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

apps/examples/astro/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/examples/astro/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/examples/astro/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── 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:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

apps/examples/astro/astro.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config'
+import urami from '@urami/astro'
+
+import tailwind from '@astrojs/tailwind'
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  integrations: [urami(), tailwind()],
+})

apps/examples/astro/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@urami/demo-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/tailwind": "^5.0.2",
+    "@urami/astro": "workspace:*",
+    "astro": "^3.5.3",
+    "tailwindcss": "^3.0.24"
+  }
+}

apps/examples/astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

apps/examples/astro/src/pages/index.astro

@@ -0,0 +1,42 @@
+---
+import Image from '@urami/astro/image'
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<main class="max-w-xl mx-auto m-4 py-4">
+			<section class="">
+				<h1 class="text-gray-900 font-bold text-3xl">Urami</h1>
+				<p class="text-gray-700">
+					Automatic image optimization for all! This is a demo for <b>Astro</b>
+				</p>
+			</section>
+
+			<section class="py-8">
+				<a
+					href="https://urami.dev"
+					class="inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+				>
+					Documentation
+				</a>
+			</section>
+
+			<h2 class="text-2xl font-bold pb-4">Demo</h2>
+			<Image
+				src="https://demo.rayriffy.com/tom-scott.jpg"
+				width={801}
+				height={801}
+				alt="Tom Scott"
+				class="rounded-xl shadow-md"
+			/>
+		</main>
+
+	</body>
+</html>

apps/examples/astro/tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

apps/examples/astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}

packages/astro/README.md

@@ -0,0 +1,43 @@
+# @urami/astro
+
+Automatic image optimization for [Astro](https://astro.build/). Please refer to [documentation](http://urami.dev/guide/astro) for more details.
+
+## Quick install
+
+```
+# Using NPM
+npx astro add @urami/astro
+
+# Using Yarn
+pnpm astro add @urami/astro
+
+# Using PNPM
+yarn astro add @urami/astro
+```
+
+Please consult documentation for manual installation.
+
+## Component usage
+
+```astro
+---
+import Image from '@urami/astro/image'
+---
+
+<Image
+  src="https://demo.rayriffy.com/tom-scott.jpg"
+  width={801}
+  height={801}
+  alt="Tom Scott"
+  class="rounded-xl shadow-md"
+/>
+```
+
+## Props
+
+| Name      | Type     | Default                                                                                            | Required | Description                                                          |
+| --------- | -------- | -------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------- |
+| `src`     | `string` | -                                                                                                  | ✅       | Source of the image                                                  |
+| `width`   | `number` | -                                                                                                  | ✅       | Width of the image                                                   |
+| `height`  | `number` | -                                                                                                  | ❌       | Height of the image (Specify this will results in less layout shift) |
+| `quality` | `number` | `75`                                                                                               | ❌       | Quality of the image                                                 |

packages/astro/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@urami/astro",
+  "version": "0.0.0",
+  "description": "Astro integration for automatic image optimization",
+  "type": "module",
+  "author": {
+    "name": "Phumrapee Limpiancop",
+    "email": "[email protected]",
+    "url": "https://rayriffy.com"
+  },
+  "homepage": "https://urami.dev/",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rayriffy/urami.git"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./image": "./src/image.ts",
+    "./serverHandler": "./src/serverHandler.ts"
+  },
+  "keywords": [
+    "astro-integration",
+    "astro-component",
+    "image",
+    "images",
+    "optimize",
+    "optimization",
+    "optimize-images",
+    "plugin",
+    "sharp",
+    "webp",
+    "jpg",
+    "jpeg",
+    "png"
+  ],
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "astro": "^3.0.0"
+  },
+  "dependencies": {
+    "@urami/core": "workspace:*",
+    "@urami/utils": "workspace:*",
+    "sharp": "^0.32.5"
+  },
+  "devDependencies": {
+    "@urami/types": "workspace:*",
+    "astro": "^3.5.0"
+  }
+}