Web Components

@astroway/ui egy sor szokásos custom element: elhelyezed a tageket az oldalon, és magát rajzolja ki. A térképeket a @astroway/render rajzolja, ugyanaz a kód, ami a /v1/render/* mögött áll, így a kerék az oldaladon megegyezik az API által visszaadott kerékkel.

A csomag alpha állapotban van (0.1.0-alpha.1): az attribútumnevek még változhatnak 1.0-ig. A csomag oldala: npm, kód: GitHub.

Telepítés

CDN-ről, összeállítás nélkül:

<script type="module" src="https://cdn.jsdelivr.net/npm/@astroway/ui/dist/cdn/index.js"></script>
<aw-moon-phase></aw-moon-phase>

Vagy npm-mel, importálva az összes elemet vagy csak a szükségeseket. A csomag még alpha, ezért kérd ezt a taget:

npm install @astroway/ui@alpha

import '@astroway/ui';               // усі елементи
import '@astroway/ui/natal-wheel';   // або один

Három módja az elemnek adat átadásának

A. Saját adataid. Kérést küldesz a saját szerveredről a saját kulcsoddal, és JSON-t adsz át az elemnek. A látogató böngészőjéből nem megy kérés, így bármelyik osztály kulcsa megfelel.

document.querySelector('aw-natal-wheel').data = chart; // data з відповіді /v1/chart

A szerver sablon ugyanazt a JSON-t írhatja egy attribútumba:

<aw-natal-wheel data='<?= htmlspecialchars(json_encode($chart), ENT_QUOTES) ?>'></aw-natal-wheel>

B. Kulcs nélkül. Az /v1/public/* végpontokon lévő elemeknek nincs szükségük kulcsra. Megosztják a látogató nyilvános költségkeretét, 30 egységet óránként egy IP-ről; amikor ez kimerül, az elem azt írja, mennyit kell várni.

<aw-moon-phase lang="uk"></aw-moon-phase>
<aw-horoscope sign="leo" period="daily"></aw-horoscope>
<aw-tarot-spread spread="three-card"></aw-tarot-spread>

C. Kulcs a böngészőhöz. A kulcsot igénylő végpontokon lévő elemek a pk_ kulcsot használják, amelyet a te oldalad számára hoztak létre: a domain lista, a kredit limit és a végpontok tartománya kötelező a létrehozáskor. Lásd a “Kulcsok a böngészőhöz” részt a hitelesítés oldalon. A titkos aw_ kulcs már a kérés előtt elutasításra kerül.

<aw-natal-wheel api-key="pk_live_..." date="1990-05-15" time="14:30"
  latitude="50.45" longitude="30.52" timezone-offset="3"></aw-natal-wheel>

Ezekhez az elemekhez a kulcs területén szükséges a chart, és még a chinese/zodiac/animal, ha a aw-chinese-sign-t használod. A domainek a host alapján ellenőrződnek: a example.com kulcs működik a http://example.com:8080-n is.

React és Next.js

A React 19 közvetlenül rendereli a custom elementeket. Két dologban különbözik a szokásos HTML-től:

• A React elvágja a key-t magának, ezért add át a kulcsot api-key-ként.
• A szerveroldali rendereléssel rendelkező oldalon az A módhoz az adatokat stringként add át. A React elutasítja az objektumokat a szerveroldali renderelés során, és nem állítja be őket a hidratáláskor.

'use client';
import '@astroway/ui/natal-wheel';
import '@astroway/ui/jsx'; // типи для тегів <aw-*> у TypeScript

export default function Chart({ chart }: { chart: unknown }) {
  return <aw-natal-wheel data={JSON.stringify(chart)} />;
}

A modulok importálhatók a szerveren: a tag úgy viselkedik, mint egy szokásos HTML, és megjelenik, amint a böngésző betölti az elemet.

Elemek

Elem	Módok	Forrás
aw-natal-wheel	A/C	/v1/chart
aw-aspect-grid	A/C	/v1/chart
aw-planet-table	A/C	/v1/chart
aw-moon-phase	A/B	/v1/public/moon-phase
aw-planet-of-day	A/B	/v1/public/planet-of-day
aw-horoscope	A/B	/v1/public/horoscope/{daily,weekly,monthly}
aw-tarot-card, aw-tarot-spread	A/B	/v1/public/tarot/*
aw-sign-matrix	A/B	/v1/public/compatibility/matrix
aw-synastry-score	A/B	/v1/public/synastry
aw-chinese-sign	A/C	/v1/chinese/zodiac/animal + /v1/public/chinese/zodiac/texts

Az egyetlen térképpel rendelkező elemek az oldalon (kerék, táblázat és rács ugyanazzal a születési adattal) egyetlen kérést tesznek az összesre.

aw-aspect-grid saját méretében körülbelül 560 px széles. Szűkebb oszlopban csökken, és az orbita feliratok kicsivé válnak; a scroll attribútum megtartja a teljes méretet vízszintes görgetéssel.

Nyelv, téma, hibák

• lang bármelyik 21 nyelvet elfogadja, alapértelmezés szerint a <html lang> attribútumot veszi az oldalból. A nevek a localized táblákból jönnek az API-ban.
• theme="dark" átkapcsolja a megjelenést; a színeket a CSS változók --aw-accent, --aw-fg, --aw-bg, --aw-bg-soft, --aw-border határozzák meg.
• Minden elem aw-error eseményt küld { kind, message } objektummal, ahol a kind lehet error, rate-limited vagy key.