by Yonatan Vigilio Lavado
- Instalar paquetes npm
bun install- Correr cliente y servidor
bun dev
bun serve
# abrir y trabajar en el cliente y servidor para apis- Produccion
bun build:dev
bun build:serve- HOLA MUNDO
// pages/index.astro
---
import '../../css/index.css' //css
import '@vigilio/sweet/sweet.min.css' // others library
import Snow from './Snow' // components import
// props in astro TYPESCRIPT
interface WebLayoutProps {
title: string;
description: string;
}
const { title, description } = Astro.props as WebLayoutProps;
---
<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} />
<meta name="description" content={description}/>
<title>Astro - {title}</title>
</head>
<body class="bg-[#2C2820]">
<h1>Hola mundo </h1>
</body>
</html>- Layout
---
import '../../css/index.css'
import '@vigilio/sweet/sweet.min.css'
import Snow from './Snow'
interface WebLayoutProps {
title: string;
description: string;
}
const { title, description } = Astro.props as WebLayoutProps;
---
<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} />
<meta name="description" content={description}/>
<title>Astro - {title}</title>
</head>
<body class="bg-[#2C2820]">
<header>this is a header</header>
<slot/> //slot children
<footer>this is a footer</footer>
</body>
</html>
// usarlo
<WebLayout title="" description="">
<h1>hola mundo</h1>
</WebLayout>- Components js in Astro
// client:load: Carga js tenga tanta reactividad
<FormExample client:only/>
// client:load: Carga js que no tenga tanta reactividad
<FormExample client:load/>
// client:visible: cuando se vea el componente carga js - lazy
<FormExample client:visible/>- Router - Paginas Dinamicas - SSR
<div>
<h1>LOGO</h1>
<div>
<a href="/">Inicio</a>
<a href="/blog">Blog</a>
<a href={`/pokemon/${4}`}>Pokemon </a> // dinamic
</div>
</div>// <!-- pokemon/[id].astro -->
import type { GetStaticPathsResult } from "astro";
import WebLayout from '@/web/WebLayout.astro'
import {Image} from 'astro:assets'
// GETSTATICPATHS
interface PokemonsApi{
count:number,
results:({name:string,url:string})[]
}
interface PokemonApi{ name:string,image:string}
//! crean paginas estaticas al build- son estaticas recomendado para webs que no cambian mucho
export async function getStaticPaths() :Promise<GetStaticPathsResult>{
// obtener toda las lista para leer, para crear la cantidad de paginas
const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100")
const result :PokemonsApi= await response.json()
const params :GetStaticPathsResult= await Promise.all( result.results.map(async (res)=>{
// a cada uno de eso sacar información. para mostrar en el html
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${res.name}`)
const result =await response.json()
return {
params:{
id:res.name
},
props:{
// buena practica, poner props que vas a usar para no tener muy pesado la web
result:{
name:result.name,image:result.sprites.front_default
} as PokemonApi
}
}
}))
return params ;
}
const {id}=Astro.params as {id:string}
const {result}=Astro.props as {result:PokemonApi}
---
<WebLayout title={result.name}>
<h1>Pokemon {result.name}</h1>
//Image , para tener img más optimizado
<Image src={result.image} width={100} height={100} alt={result.name}>
</WebLayout>---
const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100")
const result :PokemonsApi= await response.json()
const data = result.results
---
<div>
{data.map((pokemon)=>(<span>{pokemon.name}</span>))}
</div>- Variables de Entorno
# corre en el servidor
NODE_ENV=
# corre en el cliente y servidor
PUBLIC_URL=const enviroments = {
PUBLIC_URL: import.meta.env.PUBLIC_URL,
NODE_ENV: import.meta.env.NODE_ENV,
};
export default enviroments;- COOKIES Astro js corre en el servidor. USAR JS-COOKIE no localstorage
import cookie from "js-cookie";
// obtener
JSON.parse(cookie.get("users"));
// insertar
cookie.set("users", JSON.stringify(users.value));- MARKDOWN
bun add @astrojs/mdxpages/blog.mdx
---
layout: ../../services/web/WebLayout.astro
title: Blog Principal
author: Himanshu
description: Find out what makes Astro awesome!
---
# Hi there!
This Markdown file creates a page at `your-domain.com/page-1/`
It probably isn't styled much, but Markdown does support:
- **bold** and _italics._
- lists
- [links](https://astro.build)
- and more!- Transition - SPA
<head>
<title>Astro</title>
<ViewTransitions />
</head><aside transition:animate="slide"></aside>- Fuentes
@font-face {
font-family: Exo-Thin;
src: url("/fonts/Exo-Thin.ttf");
font-display: swap;
}import "../../css/index.css";