Astro 5.7 | Astro

import { Font } from 'astro:assets'
Font cssVariable='--font-roboto' preload />
    font-family: var(--font-roboto);

چیزهای بیشتری برای کشف وجود دارد! برای API کامل، نحوه شروع، و حتی نحوه ایجاد یک مورد سفارشی خود، به مستندات فونت های آزمایشی بروید. AstroFontProvider اگر هنوز از خدمات فونت دلخواه شما پشتیبانی نمی کنیم.

ما همچنین از بازخورد شما قدردانی خواهیم کرد. به توسعه مداوم این ویژگی در Fonts RFC کمک کنید و به شکل گیری آینده آن کمک کنید.

Sessions API

Astro Sessions API اکنون پایدار و آماده تولید است!

Sessions به شما این امکان را می دهد که به طور ایمن داده های مربوط به یک کاربر خاص را هنگام حرکت بین صفحات سایت شما ذخیره کنید. برخلاف کوکی‌ها، جلسات در سرور ذخیره می‌شوند، بنابراین می‌توانید حجم بیشتری از داده‌ها را بدون نگرانی در مورد محدودیت‌های اندازه یا مسائل امنیتی ذخیره کنید. آنها برای ذخیره مواردی مانند داده های کاربر، سبد خرید و حالت فرم مفید هستند و بدون جاوا اسکریپت سمت سرویس گیرنده کار می کنند:

const cart = await Astro.session.get('cart');
export const prerender = false;
a href="/checkout">🛒 {cart?.length ?? 0} itemsa>

آنها را می توان در اجزای Astro، صفحات، نقاط پایانی API، اکشن ها و میان افزار استفاده کرد. API برای همه آنها یکسان است:

import { defineAction } from "astro:actions";
import { z } from "astro:schema";
  addToCart: defineAction({
    async handler({ product }, { session }) {
      const cart = await session.get('cart');
      session.set('cart', [...cart, product]);

ایمنی را تایپ کنید

البته، از آنجایی که این Astro است، جلسات شما نیز می‌تواند ایمن باشد. یک رابط تعریف کنید و چک کردن نوع و تکمیل خودکار برای تمام داده های جلسه خود دریافت خواهید کرد:

جلسات بدون کوکی

شناسه جلسه به طور خودکار با استفاده از یک کوکی ردیابی می شود، اما می توانید از آن نیز استفاده کنید session.load() روش دسترسی به جلسه بدون کوکی این برای مواردی مانند API که ممکن است بخواهید از یک سرصفحه یا پارامترهای سفارشی برای ردیابی شناسه جلسه استفاده کنید مفید است:

export async function POST({ session, request }: APIContext) {
  const sessionId = request.headers.get('x-session-id');
  // If there is an existing session ID, load it. Otherwise, one will be created
    await session.load(sessionId);
  const cart = await session.get('cart');
  const data = await request.jsonitem: string }>();
    return new Response('Item is required', { status: 400 });
  session.set('cart', [...cart, data.item]);
  // Return the cart and session ID
  return Response.json({ cart, sessionId: session.sessionId });

درایورهای ذخیره سازی

جلسات Astro از درایورهای ذخیره سازی برای ذخیره داده ها استفاده می کنند و یا بدون پیکربندی هستند یا برای همه آداپتورهای رسمی Astro به حداقل تنظیمات نیاز دارند. از طرف دیگر، می‌توانید از هر درایور غیر ذخیره‌سازی که از ده‌ها پشتیبان ذخیره‌سازی پشتیبانی می‌کند، مانند Redis و MongoDB استفاده کنید.

• یک گره: درایور سیستم فایل پیکربندی صفر
• Netlify: درایور Netlify Blobs با پیکربندی صفر
• Cloudflare: حداقل پیکربندی درایور Workers KV
• ورسای: درایور Redis/Upstash با حداقل پیکربندی

در هر یک از این پلتفرم‌ها، اگر نمی‌خواهید از حالت پیش‌فرض استفاده کنید، می‌توانید به راحتی درایور را به دیگری تغییر دهید.

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';
export default defineConfig({
      url: process.env.REDIS_URL,

ارتقاء از جلسات آزمایشی

اگر از API جلسات آزمایشی استفاده کرده‌اید، باید پرچم آزمایشی را از خود حذف کنید astro.config.mjs فایل:

import { defineConfig } from 'astro/config';
export default defineConfig({

راهنمای جلسات را بررسی کنید تا در مورد نحوه استفاده از آنها در پروژه Astro خود بیشتر بدانید.

اجزای SVG

Astro اکنون از فایل های SVG محلی به عنوان کامپوننت پشتیبانی می کند! جاسازی SVG مستقیماً در HTML قبلاً به مراحل دیگری نیاز داشت، مانند تبدیل دستی SVG به مؤلفه Astro یا نصب یکپارچگی شخص ثالث. Astro اکنون از واردات پیش‌فرض برای همه پشتیبانی می‌کند .svg همانطور که از هر فایل دیگری استفاده می کنید .astro جزء اجزای SVG به طور خودکار در یک جاسازی می شوند مستقیماً در HTML خود تگ کنید.

شما می توانید غرفه ها را به عنوان ارسال کنید width، height، fill، strokeو هر صفت دیگری که بومی پذیرفته باشد عنصر

import Logo from './path/to/svg/file.svg';
Logo width={64} height={64} fill="currentColor" />

برای جزئیات بیشتر، مستندات اجزای SVG را بررسی کنید.

تشکر ویژه از مایکل استرامل برای کارش روی این ویژگی!

ارتقا از SVG آزمایشی

اگر قبلاً از API آزمایشی SVG استفاده کرده‌اید، باید پرچم آزمایشی را از پرچم خود حذف کنید astro.config.mjs فایل

import { defineConfig } from 'astro/config';
export default defineConfig({

توجه داشته باشید که Astro 5.6 تغییرات مهمی را در این پرچم ایجاد کرده است. لطفاً بررسی کنید که کد شما با آخرین نسخه پایدار این API به روز باشد.

پیکربندی واردات

ماژول مجازی جدید astro:config اکنون پایدار است!

ماژول مجازی به شما امکان می دهد تا زیر مجموعه ای از پیکربندی Astro را با در نظر گرفتن ایمنی نوع وارد کنید. دو مسیر فرعی برای دسترسی کنترل شده به پیکربندی شما در معرض دید قرار می گیرند:

• astro:config/client: اطلاعات پیکربندی را نشان می‌دهد که در معرض دید مشتری امن است.
• astro:config/server: اطلاعات اضافی مانند مسیرهای فایل/دایرکتوری را که برای نمایش در سرور امن است، در معرض نمایش می گذارد.

به عنوان مثال، اکنون می توانید ابزارهای مسیر خود را بدون تکیه بر یکپارچه سازی ایجاد کنید. خواص مانند base و trailingSlash مجموعه در پیکربندی شما می تواند وارد شود و در a استفاده شود .js فایل:

export default defineConfig({

import { trailingSlash, base } from 'astro:config/client';
// This method adds a forward slash to paths, and prepends the `base`
function addForwardSlashAndBase(path) {
    if (trailingSlash === 'always') {
      finalPath = path.endsWith("https://astro.build/") ? path : path + "https://astro.build/";
    if (base !== "https://astro.build/") {

از این ابزار مسیر استفاده کنید که به تنظیمات پیکربندی شما در سراسر پروژه بستگی دارد، به عنوان مثال برای کنترل بیشتر روی پیوندهای صفحه:

import { addForwardSlashAndBase } from "@src/utils.js";
const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"

ما configمطمئن شوید که از این روش جدید برای دسترسی به تنظیمات خود لذت می برید، با ایمنی علامت تجاری Astro که به شما کمک می کند آن را به درستی انجام دهید!

رفع اشکال

مثل همیشه، ما سخت کار می کنیم تا مشکلات بعد از انتشار 5.6 را برطرف کنیم. برای جزئیات کامل تغییرات لاگ را ببینید.

تیم اصلی Astro عبارتند از:

بن هلمز، کالب جاسیک، کریس سویتین بانک، امانوئل استوپا، اریکا، فلوریان لوفور، فازی، سلام، لویی فراز، مت کین، متیو فیلیپس، نیت مور، روبن ردیف، سارا رینزبرگر، و ایان توماس.

از همه مشارکت‌کنندگان دیگری که به امکان‌پذیر شدن Astro 5.7 کمک کردند، از جمله: روبرتو مولینا، جونسئونگ پارک، ریو، مارتین تراپ، مایکل استرامل، آرماند فیلیپات، Nin3، وینیسیوسدلیز، خوان دیاز، پل والادارس، بوگو، لیرویفنگو، توماس بونت، مینگ‌ه‌زی، لولوی‌شن ماسیک پالمووسکی، متیو جاستیس، آدام ماتیسن و لوئیس اشر.

ما مشتاقانه منتظریم ببینیم چه چیزی با Astro 5.7 ایجاد می کنید! اگر سوالی دارید، نظری دارید یا فقط می خواهید سلام کنید، از Astro Discord دیدن کنید.