Quick Started

Installation

1. StarSquid is a custom astro loader. Install it using your favorite package manager:

   npm

   npm i starsquid

   pnpm

   pnpm add starsquid

   Yarn

   yarn add starsquid

Configure

2. StarSquid uses Astro’s content collections, which are configured in the src/content.config.ts file.

   Add squidexCollections and configure the necessary squidex parameters to initialize a squidex client. If you don’t add this, it will be the default read from the Vite env(import.mete.env.*). Or add an initialized squidex client.

   Add the schemas you want to load to the array squidexSchemas. Currently, the system schema, such as app and news (previously named features), are not loaded. If you need them, remember to add them.

   Note

   v1.1.1 is a transitional version that supports both to meet your migration needs.

   Creating new Squidex client.

   src/content.config.ts

   import { squidexCollections } from "starsquid/loaders";
   
   const enum SCHEMAS {
     APP = "app",
     NEWS = "news",
     AUTHORS = "authors",
     INTRODUCTIONS = "introductions",
     ARTICLES = "articles",
   }
   
   export const collections = squidexCollections({
     squidexAppName: import.meta.env.SQUIDEX_APP_NAME,
     squidexSchemas: [
       SCHEMAS.APP,
       SCHEMAS.NEWS,
       SCHEMAS.AUTHORS,
       SCHEMAS.INTRODUCTIONS,
     ],
   });

   Using provided Squidex client.

   src/content.config.ts

   import { squidexCollections } from "starsquid/loaders";
   import { squidexClient } from "./data/core/client";
   
   const enum SCHEMAS {
     APP = "app",
     NEWS = "news",
     AUTHORS = "authors",
     INTRODUCTIONS = "introductions",
     ARTICLES = "articles",
   }
   
   export const collections = squidexCollections({
     squidexAppName: import.meta.env.SQUIDEX_APP_NAME,
     squidexClient: squidexClient,
     squidexSchemas: [
       SCHEMAS.APP,
       SCHEMAS.NEWS,
       SCHEMAS.AUTHORS,
       SCHEMAS.INTRODUCTIONS,
     ],
   });

   Read more about Singleton.

3. Configure the loader to support dynamic refresh in the astro.config.mjs file.

   astro.config.mjs

   import { defineConfig } from 'astro/config'
   import { refreshContentIntegration } from'starsquid/integrations'
   
   export default defineConfig({
     integrations: [refreshContentIntegration("https://webhook")],
   });

   Caution

   This feature only supports the development environment, not for production environment, see detailed description.

Usage

4. Use the app collection in your index.astro frontmatter:

   src/pages/index.astro

     ---
     import { getCollection } from "astro:content";
     import { SCHEMAS } from "@/data/models/schemas";
   
     const app = (await getCollection(SCHEMAS.APP))?.[0];
     console.log(app);
     ---

   Start up your app, you will notice the output log, which is the detail of your Squidex app. Magical, look back at what we to do, only reference a package of starsquid, define a collection, very convenient to use:

   {
     id: 'guid',
     data: {
       links: { ping: [Object], assets: [Object], settings: [Object] },
       id: 'guid',
       name: '<your app name>,
       version: 27,
       created: 2024-08-12T10:45:08.000Z,
       lastModified: 2024-09-05T09:38:37.000Z,
       permissions: [],
       canAccessApi: false,
       canAccessContent: true,
       roleProperties: {}
     },
     collection: 'app'
   }

Schema

5. Load schema

   Obtain schema from squidex schema API, so you don’t need to define schema manually, which is very good for developers and makes sense.

   Then run astro async command, enjoy yourself!🙌

   pnpm run astro sync