Merge pull request #3 from flyocloud/v2

Version 2 of nitro astro package

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release CI
+
+on:
+  push:
+    branches: [main, next, alpha]
+  pull_request:
+    branches: [main, next, alpha]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+      - name: Build lib
+        run: npm run build
+      - name: Release
+        working-directory: lib
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/tests.yml

@@ -0,0 +1,17 @@
+name: Lint Code
+
+on: [push, pull_request]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - name: Install Dependencies
+        run: npm ci --legacy-peer-deps
+      - name: Run ESLint
+        run: npx eslint

.gitignore

@@ -1,2 +1,3 @@
-/node_modules
-.dist
+node_modules
+.dist
+dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

README.md

@@ -2,11 +2,11 @@
 
 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.
+- **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.
 
@@ -21,23 +21,23 @@ astro add @flyo/nitro-astro
 Then, revise and adjust the configuration in your `astro.config.mjs`:
 
 ```js
-import flyoNitroIntegration from '@flyo/nitro-astro';
+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
+      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: { 
+      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"
-      }
-    })
+        FlyoElementName: "AstroElementName",
+        AnotherFlyoElement: "subfolder/AnotherFlyoElement",
+      },
+    }),
   ],
-  output: 'server'
+  output: "server",
 });
 ```
 
@@ -49,32 +49,33 @@ Add a `[...slug].astro` file in the pages directory with the following example c
 
 ```astro
 ---
-import Layout from '../layouts/Layout.astro';
-import { usePagesApi, useConfig } from '@flyo/nitro-astro';
-import FlyoNitroPage from '@flyo/nitro-astro/FlyoNitroPage.astro'
-import MetaInfoPage from '@flyo/nitro-astro/MetaInfoPage.astro';
+import Layout from "../layouts/Layout.astro";
+import { usePagesApi, useConfig } from "@flyo/nitro-astro";
+import FlyoNitroPage from "@flyo/nitro-astro/FlyoNitroPage.astro";
+import MetaInfoPage from "@flyo/nitro-astro/MetaInfoPage.astro";
 
 const { slug } = Astro.params;
-const resolveSlug = slug === undefined ? '' : slug
-const config = await useConfig()
+const resolveSlug = slug === undefined ? "" : slug;
+const config = await useConfig(Astro);
 let page;
 
 try {
   if (!config.pages.includes(resolveSlug)) {
-		return new Response('Not Found', {
-			status: 404,
-			statusText: 'Page Not Found'
-		});
-	}
+    return new Response("Not Found", {
+      status: 404,
+      statusText: "Page Not Found",
+    });
+  }
 
-  page = await usePagesApi().page({slug: resolveSlug})
+  page = await usePagesApi().page({ slug: resolveSlug });
 } catch (e) {
   return new Response(e.body.name, {
     status: 404,
-    statusText: 'Page Not Found'
+    statusText: "Page Not Found",
   });
 }
 ---
+
 <Layout title={page.title}>
   <MetaInfoPage page={page} slot="head" />
   <FlyoNitroPage page={page} />
@@ -87,10 +88,11 @@ To receive the config in the layout in `src/layouts/Layout.astro`:
 ---
 import { useConfig } from "@flyo/nitro-astro";
 
-const config = await useConfig();
+const config = await useConfig(Astro);
 const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 ---
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -101,11 +103,18 @@ const currentPath = Astro.url.pathname;
     <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>
-    ))}
+    {
+      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>
@@ -119,27 +128,34 @@ 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'
+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>
-  ))}
+  {
+    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} />
+  <Image
+    src={block.content.image.source}
+    alt={block.content.alt ?? ""}
+    width={1920}
+    height={768}
+  />
 
   <!-- Handling slots -->
   <BlockSlot slot={block.slots.mysuperslotname} />
@@ -152,9 +168,9 @@ Entity Detail Example, for a file which is located in `src/pages/blog/[slug].ast
 
 ```astro
 ---
-import Layout from '../../layouts/Layout.astro';
-import { useEntitiesApi } from '@flyo/nitro-astro';
-import MetaInfoEntity from '@flyo/nitro-astro/MetaInfoEntity.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;
@@ -163,21 +179,36 @@ try {
 } catch (e) {
   return new Response(e.body, {
     status: 404,
-    statusText: 'Entity Not Found'
+    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%" />
+  <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> }
+{
+  isProd && (
+    <script is:inline define:vars={{ api: response.entity.entity_metric.api }}>
+      fetch(api)
+    </script>
+  )
+}
 ```
 
 # Nitro Astro Integration Local Development
 
-1. for yarn go into the example app and replace the dependecie with: `"@flyo/nitro-astro": "file:../nitro-astro"`
-2. always run the `yarn build` command in the nitro-astro package after making changes
-2. don't forget to run `rm -rf node_modules/ && yarn && yarn dev` in the example app whenever you like to test changes.
+> Workspaces with npm => https://docs.npmjs.com/cli/v10/using-npm/workspaces
+
+1. `npm install`
+2. `npm run dev`
+3. `npm run playground`
+4. localhost:4321
+5. `npx prettier . --write`
+
+> `npm cache clean --force` fixed an issue where the astro project did not start due to missing dependencies.
+
+Releasing: https://semantic-release.gitbook.io/semantic-release

UPGRADE.md

@@ -0,0 +1,19 @@
+# UPGRADE
+
+This document will help you upgrading from a Version into another.
+
+## 1.x to 2.x
+
+- BREAKING CHANGE: useConfig() param signature has changed. The language parameter when accessing the config has been removed and the full Astro context object is now required.
+
+before (in 1.x):
+
+```astro
+const config = await useConfig(Astro.currentLocale)
+```
+
+now (in 2.x):
+
+```astro
+const config = await useConfig(Astro);
+```