@flyo/nitro-astro 1.4.4 → 2.0.0

package/middleware.ts

@@ -0,0 +1,45 @@
+import { defineMiddleware } from "astro:middleware";
+import { useConfigApi, useFlyoIntegration } from "./index.ts";
+
+let resolvedValue;
+
+async function getConfigPromise(context) {
+  if (resolvedValue) {
+    // If the value is already resolved, return a resolved promise with the value
+    return resolvedValue;
+  }
+
+  // Fetch the config and store the resolved value
+  const value = await useConfigApi().config({
+    lang: context.currentLocale,
+  });
+  resolvedValue = value;
+  return value;
+}
+
+export const onRequest = defineMiddleware(async (context, next) => {
+  context.locals.config = getConfigPromise(context);
+
+  const liveEditEnabled = useFlyoIntegration().options.liveEdit;
+
+  if (!liveEditEnabled) {
+    const response = await next();
+
+    response.headers.set(
+      "Vercel-CDN-Cache-Control",
+      `max-age=${useFlyoIntegration().options.serverCacheHeaderTtl}`
+    );
+    response.headers.set(
+      "CDN-Cache-Control",
+      `max-age=${useFlyoIntegration().options.serverCacheHeaderTtl}`
+    );
+    response.headers.set(
+      "Cache-Control",
+      `max-age=${useFlyoIntegration().options.clientCacheHeaderTtl}`
+    );
+
+    return response;
+  }
+
+  return next();
+});

package/module.d.ts

@@ -1,4 +1,6 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+
 declare module "virtual:*" {
-    const component: any;
-    export default component;
-  }
+  const component: any;
+  export default component;
+}

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@flyo/nitro-astro",
-  "version": "1.4.4",
-  "description": "Astro Framework",
+  "version": "2.0.0",
+  "description": "Nitro Astro connecting Flyo Headless to Astro",
   "main": "./dist/nitro-astro.js",
   "module": "./dist/nitro-astro.mjs",
-  "keywords": [
-    "astro-integration",
-    "astro-component",
-    "astro",
-    "flyo",
-    "headless",
-    "cms",
-    "nitro",
-    "withastro"
-  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@flyo/nitro-typescript": "^1.0.9"
+  },
+  "devDependencies": {
+    "astro": "^4.10.1",
+    "typescript": "5.4.5",
+    "@types/node": "20.12.11",
+    "vite": "^5.2.13",
+    "vite-plugin-dts": "^3.9.1"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -56,7 +60,9 @@
       "require": "./components/MetaInfoPage.ts"
     },
     "./sitemap.ts": "./sitemap.ts",
-    "./cdn.ts": "./cdn.ts"
+    "./middleware.ts": "./middleware.ts",
+    "./cdn.ts": "./cdn.ts",
+    "./toolbar.ts": "./toolbar.ts"
   },
   "type": "module",
   "files": [
@@ -64,27 +70,30 @@
     "dist",
     "components",
     "sitemap.ts",
-    "cdn.ts"
+    "cdn.ts",
+    "middleware.ts"
   ],
   "types": "./dist/index.d.ts",
   "author": "Basil Suter <git@nadar.io>",
   "license": "MIT",
-  "scripts": {
-    "release": "npm publish --access=public",
-    "build": "vite build"
+  "release": {
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ]
   },
-  "devDependencies": {
-    "astro": "^4.2.4",
-    "typescript": "5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-dts": "^3.7.2"
+  "publishConfig": {
+    "access": "public"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/flyocloud/nitro-astro"
-  },
-  "dependencies": {
-    "@flyo/nitro-typescript": "^1.0.7",
-    "nanostores": "^0.10.0"
   }
 }

package/sitemap.ts

@@ -1,10 +1,11 @@
-import { useSitemapApi } from "@flyo/nitro-astro"
+import { useSitemapApi } from "./index.ts";
+import type { AstroGlobal } from "astro";
 
 function buildUrl(path: string, domain: string) {
-  return `${domain.replace(/\/$/, '')}/${path.replace(/^\//, '')}`;
+  return `${domain.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
 }
 
-export async function GET(config: any) {
+export async function GET(config: AstroGlobal) {
   const sitemap = await useSitemapApi().sitemap();
 
   let xml = '<?xml version="1.0" encoding="UTF-8"?>';
@@ -12,22 +13,22 @@ export async function GET(config: any) {
 
   const routes = [];
   for (const item of sitemap) {
-    if (item.entity_type === 'nitro-page') {
+    if (item.entity_type === "nitro-page") {
       if (routes.includes(item.entity_slug)) {
         continue;
       }
       routes.push(item.entity_slug);
       xml += `<url><loc>${buildUrl(item.entity_slug, config.site.origin)}</loc></url>`;
     } else if (item.routes?.detail) {
-      xml += `<url><loc>${buildUrl(item.routes['detail'], config.site.origin)}</loc></url>`;
+      xml += `<url><loc>${buildUrl(item.routes["detail"], config.site.origin)}</loc></url>`;
     }
   }
 
-  xml += '</urlset>';
+  xml += "</urlset>";
 
   return new Response(xml, {
     headers: {
-      'Content-Type': 'application/xml'
-    }
-  })
-}
+      "Content-Type": "application/xml",
+    },
+  });
+}

package/README.md

@@ -1,167 +0,0 @@
-# Flyo Nitro Astro Framework Integration
-
-The Flyo Nitro Astro Framework Integration provides a comprehensive solution for implementing the Flyo Nitro CMS within the Astro (astro.build) environment. This guide details the integration process, emphasizing the use of Nitro [configurations](https://dev.flyo.cloud/dev/nitro/#die-grundlagen-von-nitro) within the Astro layout framework. Key highlights include:
-
-+ **Nitro Configuration in Astro**: This section explores methods for incorporating Nitro configurations into the Astro layout, offering step-by-step instructions for seamless integration that leverages the strengths of both systems.
-+ **Page Resolution and Block Integration**: Learn to manage and resolve pages within the Astro framework, including integrating Nitro's dynamic [blocks](https://dev.flyo.cloud/dev/nitro/block.html). This part provides insights into creating responsive and interactive web pages using Nitro block technology.
-+ **Fetching Entity Details**: Focus on techniques for retrieving and displaying detailed information about entities within Astro. This segment covers data fetching, handling, and presentation methods.
-+ **Image Service Integration**: Understand the integration of Flyo Storage's image service, as detailed in [Flyo Storage Documentation](https://dev.flyo.cloud/dev/infos/images.html). This section delves into working with images in Astro, including uploading, retrieving, and displaying images from Flyo Storage.
-+ **Meta Information Extraction**: The guide concludes with extracting and utilizing meta information, discussing the importance of meta tags for SEO and user engagement within the Astro framework.
-
-This guide targets developers and web designers aiming to combine Flyo Nitro CMS and Astro framework capabilities to create dynamic, efficient, and feature-rich websites.
-
-## Installation
-
-To install the package, execute the following command:
-
-```bash
-astro add @flyo/nitro-astro
-```
-
-Then, revise and adjust the configuration in your `astro.config.mjs`:
-
-```js
-import flyoNitroIntegration from '@flyo/nitro-astro';
-
-export default defineConfig({
-  site: "https://myflyowebsite.com", // required to make the sitemap.xml work
-  integrations: [
-    flyoNitroIntegration({
-      accessToken: 'ADD_YOUR_TOKEN_HERE', // Switch between dev and prod tokens depending on the environment
-      liveEdit: true, // Enable on dev and preview systems for application reloading in the Flyo preview frame upon changes
-      components: { 
-        // Define where the Flyo components are located. The suffix .astro is not required. The object key is the value from Flyo, while the object value is the component in the Astro components folder
-        // [!] Adding new elements requires restarting the development process
-        "FlyoElementName": "AstroElementName",
-        "AnotherFlyoElement": "subfolder/AnotherFlyoElement"
-      }
-    })
-  ],
-  output: 'server'
-});
-```
-
-> The nitro astro integration requires an SSR setup which is done by using `output: 'server'`.
-
-### Pages
-
-Add a `[...slug].astro` file in the pages directory with the following example content as a catch-all CMS handler:
-
-```astro
----
-import Layout from '../layouts/Layout.astro';
-import { usePagesApi } from '@flyo/nitro-astro';
-import FlyoNitroPage from '@flyo/nitro-astro/FlyoNitroPage.astro'
-import MetaInfoPage from '@flyo/nitro-astro/MetaInfoPage.astro';
-
-const { slug } = Astro.params;
-let page;
-try {
-  page = await usePagesApi().page({slug: slug === undefined ? '' : slug})
-} catch (e) {
-  return new Response(e.body.name, {
-    status: 404,
-    statusText: 'Page Not Found'
-  });
-}
----
-<Layout title={page.title}>
-  <MetaInfoPage page={page} slot="head" />
-  <FlyoNitroPage page={page} />
-</Layout>
-```
-
-To receive the config in the layout in `src/layouts/Layout.astro`:
-
-```astro
----
-import { useConfigApi } from "@flyo/nitro-astro";
-
-const config = await useConfigApi().config();
-const { title } = Astro.props;
-const currentPath = Astro.url.pathname;
----
-<!doctype html>
-<html lang="en">
-  <head>
-    <title>{title}</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <!-- Auto-inject meta information for pages and entities -->
-    <slot name="head" />
-  </head>
-  <body>
-    {config.containers.nav.items.map((item: object) => (
-      <a style="background-color: red; color: white" href={item.href} class={`nav-class ${currentPath === item.href ? 'text-red' : ''}`}>
-        {item.label}<br />
-      </a>
-    ))}
-    <div class="container">
-      <slot />
-    </div>
-  </body>
-</html>
-```
-
-### Blocks
-
-Block Component Example (which are mostly located in `src/components/flyo`):
-
-```astro
----
-import { Image } from "astro:assets"
-import { editableBlock } from '@flyo/nitro-astro'
-import BlockSlot from '@flyo/nitro-astro/BlockSlot.astro'
-const { block } = Astro.props;
----
-<!-- Make the block editable if necessary -->
-<div {...editableBlock(block)}>
-
-  <!-- Content variable -->
-  <div set:html={block.content.content.html} />
-
-  <!-- Handling items -->
-  {block.items.map((item: object) => (
-    <div>
-      { item.title }
-      <a href={item.link.routes.detail}>Go to Detail</a>
-    </div>
-  ))}
-
-  <!-- Image Proxy -->
-  <Image src={block.content.image.source} alt={block.content.alt ?? ''} width={1920} height={768} />
-
-  <!-- Handling slots -->
-  <BlockSlot slot={block.slots.mysuperslotname} />
-</div>
-```
-
-### Entities
-
-Entity Detail Example, for a file which is located in `src/pages/blog/[slug].astro`:
-
-```astro
----
-import Layout from '../../layouts/Layout.astro';
-import { useEntitiesApi } from '@flyo/nitro-astro';
-import MetaInfoEntity from '@flyo/nitro-astro/MetaInfoEntity.astro';
-
-const { slug } = Astro.params;
-let response = null;
-try {
-  response = await useEntitiesApi().entityBySlug({ slug });
-} catch (e) {
-  return new Response(e.body, {
-    status: 404,
-    statusText: 'Entity Not Found'
-  });
-}
-const isProd = import.meta.env.PROD;
----
-<Layout>
-  <MetaInfoEntity response={response} slot="head" />
-  <h1>{ slug }</h1>
-  <img src={ response.model.image.source } style="width:100%" />
-</Layout>
-{ isProd && <script is:inline define:vars={{ api: response.entity.entity_metric.api }}>fetch(api)</script> }
-```

package/dist/cdn.d.ts

@@ -1,6 +0,0 @@
-/**
- * Create an astro ExternalImageService for flyo where the base url with transormations looks like https://storage.flyo.cloud/image_7a158241.jpg/thumb/250x250?format=webp
- */
-import type { ExternalImageService } from "astro";
-declare const service: ExternalImageService;
-export default service;

package/dist/components/BlockSlot.d.ts

@@ -1,2 +0,0 @@
-import BlockSlot from "./BlockSlot.astro";
-export default BlockSlot;

package/dist/components/FallbackComponent.d.ts

@@ -1,2 +0,0 @@
-import FallbackComponent from "./FallbackComponent.astro";
-export default FallbackComponent;

package/dist/components/FlyoNitroBlock.d.ts

@@ -1,2 +0,0 @@
-import FlyoNitroBlock from "./FlyoNitroBlock.astro";
-export default FlyoNitroBlock;

package/dist/components/FlyoNitroPage.d.ts

@@ -1,2 +0,0 @@
-import FlyoNitroPage from "./FlyoNitroPage.astro";
-export default FlyoNitroPage;

package/dist/components/MetaInfo.d.ts

@@ -1,2 +0,0 @@
-import MetaInfo from "./MetaInfo.astro";
-export default MetaInfo;

package/dist/components/MetaInfoEntity.d.ts

@@ -1,2 +0,0 @@
-import MetaInfoEntity from "./MetaInfoEntity.astro";
-export default MetaInfoEntity;

package/dist/components/MetaInfoPage.d.ts

@@ -1,2 +0,0 @@
-import MetaInfoPage from "./MetaInfoPage.astro";
-export default MetaInfoPage;

package/dist/index.d.ts

@@ -1,19 +0,0 @@
-import type { AstroIntegration } from "astro";
-import { Configuration, ConfigApi, EntitiesApi, PagesApi, SearchApi, SitemapApi, VersionApi, Block, ConfigResponse } from '@flyo/nitro-typescript';
-export type IntegrationOptions = {
-    accessToken: string;
-    liveEdit: any;
-    componentsDir: string;
-    components: object;
-    fallbackComponent?: string;
-};
-export declare function useConfiguration(): Configuration;
-export declare function useConfigApi(): ConfigApi;
-export declare function useConfig(): Promise<ConfigResponse>;
-export declare function useEntitiesApi(): EntitiesApi;
-export declare function usePagesApi(): PagesApi;
-export declare function useSearchApi(): SearchApi;
-export declare function useSitemapApi(): SitemapApi;
-export declare function useVersionApi(): VersionApi;
-export declare function editableBlock(block: Block): object;
-export default function flyoNitroIntegration(options: IntegrationOptions): AstroIntegration;

package/dist/sitemap.d.ts

@@ -1 +0,0 @@
-export declare function GET(config: any): Promise<Response>;