Alpha

Nutze deine Inhalte und generiere TypeScript-Typen und API-Clients.

Jedes Projekt ist ein Git-Repository aus einfachen JSON-Dateien. elek.io Core macht aus seinem Inhaltsmodell Typen, damit deine Website und deine Apps jedes Feld in jeder Sprache kennen.

Loslegen GitHub

elek.io Core ist in der Alpha-Phase und noch nicht für den produktiven Einsatz geeignet. Sieh dir an, was noch nicht funktioniert. Wir freuen uns, wenn du es ausprobierst und uns in den GitHub Discussions öffnet in neuem Tab erzählst, was dir auffällt, damit wir es verbessern können.

pnpm npm yarn bun

So funktioniert es

Drei Dateien, und deine Inhalte sind bis in deine Seiten typisiert.

elek.io Core liest ein Projekt aus seinem Git-Remote, typisiert jedes Feld in jeder Sprache, generiert Typen und einen Client für jede App und liefert deine Inhalte lokal aus, während du entwickelst.

astro.config.mjs Provisioniert vor dem Build

import { defineConfig } from 'astro/config';
import { elek } from '@elek-io/core/astro';
import { config } from './elek.config';

export default defineConfig({
  integrations: [elek({ config })],
});

src/content.config.ts Eine Astro-Collection pro Sammlung

import { elekCollections } from '@elek-io/core/astro';
import { config } from '../elek.config';

export const collections = {
  ...(await elekCollections(config, { … })),
};

elek.config.ts Jedes Projekt einmal

import { defineElekConfig } from '@elek-io/core/astro';

export const config = defineElekConfig({
  projects: {
    website: {
      id: '3f2504e0-4f89-41d3-9a0c-0305e82c3301',
      remoteUrl: 'https://github.com/…/website-content.git',
    },
  },
});

src/pages/[language]/[slug].astro Eine Seite pro Sprache

---
import { elekSlugPaths } from '@elek-io/core/astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('websiteBlogPosts');
  return elekSlugPaths(posts, { slugField: 'slug' });
}
const { entry, language } = Astro.props;
---

<h1>{entry.data.title[language]}</h1>
<p>{entry.data.teaser[language]}</p>

title { en: string; de: string }

slug { en: string; de: string }

teaser { en: string | null; de: string | null }

cover { en: { id: string; objectType: "asset" }[]; … }

body { en: MdAstRoot | null; de: MdAstRoot | null }

collections/9b1c…/collection.json Das Inhaltsmodell

{
  "fieldDefinitions": [
    { "fieldType": "text", "slug": "title", … },
    { "fieldType": "slug", "slug": "slug", … },
    {
      "fieldType": "textarea",
      "slug": "teaser",
      "isRequired": false,
      …
    },
    { "fieldType": "asset", "slug": "cover", … },
    …
  ]
}

Terminal Bei jedem Build

$ pnpm astro build
[elek] Provisioning "website" (Project 3f2504e0-…) at "release" from "https://github.com/autohaus-ebersfelde/website-content.git"
[elek] Provisioned "website": Project "Autohaus Ebersfelde" (3f2504e0-…) at version 1.5.0
[elek-entries] Reading Project "Autohaus Ebersfelde" version 1.5.0 (Release tag) from "/home/runner/elek.io"
[elek-entries] Found 24 Entries
[elek-entries] Finished loading Entries
[build] 125 page(s) built in 4.12s

Build settings Dein statischer Host

Build command pnpm astro build Environment variables ELEK_IO_REMOTE_ACCESS_TOKEN •••••••••• ELEK_IO_CHANNEL release

Keine Pipeline-Datei nötig. Ein öffentliches Remote braucht kein Token.

Terminal

$ pnpm exec elek generate:types
$ ls ./.elek.io
types.ts

$ pnpm exec elek generate:client
$ ls ./.elek.io
client.ts  types.ts

.elek.io/types.ts Auf deine Sprachen eingegrenzt

// Auto-generated by elek.io Core - do not edit manually.

// ─── Project ───
export const ProjectId = '3f2504e0-…' as const;
export type ProjectLanguage = 'en' | 'de';

// ─── Collections ───
/** Collection: Blog post (blog-post) */
export interface BlogPostsValues {
  /** title (text, string, required) */
  title: … & { content: Record<ProjectLanguage, string> };
  /** teaser (textarea, string) */
  teaser: … & { content: Record<ProjectLanguage, string | null> };
  …
}

Terminal Nur lesend

$ pnpm exec elek api:start

Terminal 2

$ curl localhost:31310/content/v1/projects/3f2504e0-…/collections/blog-posts/entries/count
24

$ curl "localhost:31310/content/v1/projects/3f2504e0-…/collections/blog-posts/entries?limit=1"
{"total":24,"limit":1,"offset":0,"list":[{"objectType":"entry","id":"8c1e2a4f-…",…}]}

src/lib/news.ts Mit dem generierten Client

import { apiClient } from '../../.elek.io/client.js';

const client = apiClient({
  baseUrl: 'http://localhost:31310',
  apiKey: '<your-api-key>',
});

const { list } = await client.content.v1.projects[
  '3f2504e0-4f89-41d3-9a0c-0305e82c3301'
].collections['blog-posts'].entries.list({ limit: 10, offset: 0 });

for (const post of list) {
  console.log(post.values.teaser.content.de); // string | null
}

Live beim Entwickeln. Während astro dev läuft, lädt eine Änderung am Projekt seine Sammlung neu, und die offene Seite zeigt sie einen Moment später. Eine Änderung am Inhaltsmodell selbst braucht einen Neustart.

Git ist dabei. Git und Git LFS kommen über dugite mit elek.io Core, eine Build-Maschine braucht also nichts weiter installiert.

An ein Release gebunden. Ein Build liest das neueste Release, die neueste Vorschau, die Entwürfe oder eine genaue Version. Was er zeigt, ändert sich, wenn ein Release veröffentlicht wird, nicht wenn jemand speichert.

Deine Inhalte

Ein Ordner, den du öffnen kannst.

Jedes Projekt ist ein Git-Repository aus einfachen JSON-Dateien auf deiner Festplatte: eine Datei pro Eintrag, im Ordner seiner Sammlung, die Assets in Git LFS. Öffne es in jedem Editor, synchronisiere es mit dem Git-Host deiner Wahl oder behalte es auf deinem Computer.

Wie ein Projekt gespeichert wird

Fragen

Noch vor der Installation.

Was Entwicklungsteams zuerst fragen. Den Rest beantwortet die Dokumentation von elek.io Core, auf Englisch.

Mit welchen Frameworks funktioniert elek.io Core?

Mit Astro, über unsere Integration, die bisher die einzige ist. Du kannst Core auch nutzen, indem du seine Methoden direkt aufrufst, die generierten Typen mit dem JSON verwenden, das elek export schreibt, oder die lokale API nutzen.

Brauche ich elek.io Desktop?

Nein. elek.io Core ist die Bibliothek, auf der elek.io Desktop aufbaut. Du kannst Projekte, Sammlungen und Einträge also mit TypeScript anlegen oder warten, bis die Desktop-App veröffentlicht ist.

Wie bekommt ein Build in der CI die Inhalte?

Die elek()-Integration holt jedes Projekt vor dem Astro-Build aus seinem Git-Remote, standardmäßig das neueste Release. Ein privates Remote braucht ein Lese-Token in ELEK_IO_REMOTE_ACCESS_TOKEN, ein öffentliches keins. Ein Projekt, das ohne Remote deklariert ist, wird aus dem Datenverzeichnis auf der Festplatte gelesen. Alternativ erledigst du das mit der provision-Methode von Core außerhalb der Astro-Integration.

Bekomme ich meine Inhalte als einfaches JSON?

Ja. elek export schreibt jedes Projekt als JSON, entweder als eine verschachtelte Datei oder als Baum einzelner Dateien, und --watch hält es aktuell.

Was funktioniert noch nicht?

elek.io Core ist in der Alpha-Phase. Ein Update kann ändern, wie ein Projekt gespeichert wird. Ein Projekt, das eine ältere Version geschrieben hat, lässt sich danach vielleicht nicht mehr öffnen. Ein Projekt anlegen, seine Inhalte schreiben und ein Release erstellen geht bisher nur über die API von elek.io Core, mit Code, solange elek.io Desktop in Entwicklung ist. Astro ist das einzige Framework mit einer Integration. Astros render() zeigt für einen Eintrag nichts, ein Markdown-Wert wird deshalb über mdastRender gerendert. Eine Änderung am Inhaltsmodell braucht einen Neustart von astro dev. Eine Volltextsuche gibt es nicht.

Loslegen

Probiere es in deinem Astro-Projekt aus.

Installiere elek.io Core, deklariere dein Projekt und baue. Oder überlasse die Einrichtung deinem Coding-Agenten.

Selbst installieren

elek.io Core mit seinen benötigten Peers, dann die Dateien, die die Dokumentation zeigt.

pnpm npm yarn bun

Loslegen

Oder frag deinen Agenten

Füge ihn in den Coding-Agenten ein, den du nutzt, in deinem Astro-Projekt.

Agent-Prompt

Richte elek.io in diesem Astro-Projekt ein. Installiere @elek-io/core mit seinen Peers dugite und zod und lies die Dokumentation, die es in node_modules/@elek-io/core/docs mitbringt, bevor du irgendetwas anderes änderst. Deklariere dann das Projekt in elek.config.ts mit seiner ID und Remote-URL, füge die elek()-Integration in astro.config.mjs hinzu und leite die Collections in src/content.config.ts ab.

elek.io ist in Entwicklung.

Neuigkeiten bekommst du, wenn du uns auf Bluesky folgst.

Folge uns auf Bluesky