gyuto docs

Installation

Für die Installation wird ein aktuelles gridsome binary benötigt. Du findest es hier: gridsome.org

Quickstart

Die schnellste Möglichkeit ins Arbeiten zu kommen ist, alles dem Initialisierungsprozess zu überlassen. In dem Fall werden alle Dateien die für den Betrieb einer Seite mit Gridsome / Gyuto benötigt werden in dein Projekt übernommen. Insgesamt werden folgende Pakete für dich installiert:

  • ZSP Gridsome Gyouto Source - (@zuckersalzundpfeffer/gridsome-gyuto-source)
  • ZSP Gyuto Components - (@zuckersalzundpfeffer/gyuto-components)
  • ZSP Gyuto Preview - (@zuckersalzundpfeffer/gyuto-preview)
  • ZSP Sugar UI - (@zuckersalzundpfeffer/sugar-ui)
Installation
yarn add -D @zuckersalzundpfeffer/gyuto-grid-sugar
npx node_modules/@zuckersalzundpfeffer/gyuto-grid-sugar init

Mehr ist hier garnicht notwendig. In dem startenden Dialog werden Paramenter für die Backendverbindung abgefragt. Aktuell wird aktiv an der GraphQL Integration gearbeitet. Die Vorlagen arbeiten aktuell daher sicherer damit. REST ist trotzdem aber möglich. Mit den vergebenen Credentials kannst du dich auf <gyuto server >/api/<version>/schalten und mit den Endpunkten spielen. Der Einfachheit halber bleibe für einen Quickstart aber bei GraphQL.

Eine gute Resource für einen SchemaInspector findest du übrigens hier: https://altair.sirmuel.design/

Nach der Installation kannst du das Projekt mit yarn develop das Gridsomeprojekt starten. Es sollte unsere Standard Willkommens-Seite geladen werden.

Installierte Komponenten

Standardmäßig werden lediglich Komponenten geladen, die keinerlei UI besitzen. Der Fokus liegt auf der Unterstützung deiner weiteren Entwicklung. Du kannst natürlich die Verwendung der Komponenten komplett entfernen. Dazu musst du lediglich die gyuto.config.js anpassen.

src/gyuto.config.js
import Layout from "~/layouts/Default.vue";

// Import the default Components as they may be usefull for
// your development. you can get more information within our
// documentation page https://gyuto.zuckersalzundpfeffer.de/components
import { GyutoComponents } from "@zuckersalzundpfeffer/gyuto-components";


// feel free to register more components and layouts. All components
// will be shared with the preview system and the app. They will be
// autoregistered wihtin the app. You can use them everywhere.
export const components = {
  ...GyutoComponents,

};
export const layouts = {
  Layout,
};

// If you want to decouple component configuration from the component
// you can use the our componentConfig object. The config is distributed
// to all components. eg: componentName: {prop1:{}, prop2:[],prop3:"", prop4:true}
export const componentConfig = {};

export default {
  components,
  layouts,
  componentConfig,
};

Die Config Datei sollte dazu genutzt werden deine Haupt-Komponenten und Layouts zu registrieren. Die Plugins kümmern sich dann um die richtige Verwendung innerhalb des Projektes. Die Komponenten sind, sobald sie hier hinterlegt sind, im gesamten Projekt nutzbar. Du musst sie nicht mehr an anderer Stelle importieren. Die Hauptkomponente, mit der die Daten aus dem Backend im Frontend dargestellt werden ist der GyutoComponentProxy Mit ihm werden alle anderen Komponenten für die Daten aufbereitet. Zu diesem Zweck übernimmt die Komponente zwei Props. components und components-props. Components sind in unserem Projekt die Komponenten der Page vom Backend. Der Proxy erwartet an dieser Stelle ein Array von Objekten. Die components-props sind ein wenig spezieller. Jede Komponente nimmt externe props entgegen. Dazu wird aus der globalen componentConfig das Property heraus, das den selben Namen wie die Komponente enthält. Das Property selbst ist idealweise wieder ein Objekt. Auf dieser Ebene sind keine Eigenschaften zwingend vorgesehen. Hier kannst du selber entscheiden, welche Eigenschaften das Objekt enthalten soll.

GyutoComponentProxy
<template>
  <Layout>
    <GyutoComponentProxy
      :components="$page.gyuto.page.components"
      :components-props="componentsProps" />
  </Layout>
</template>
<script>
import { componentConfig } from "../gyuto.config.js";
export default {
  data() {
    return {
      componentsProps: { ...componentConfig },
    };
  },
};
</script>

Die zweite wichtige Komponente ist der GyutoPageWrapper. Er kümmert sich um die richtige Zuweisung eines Layouts in generierten Seiten. (Seiten die über Templates erzeugt werden)

./src/templates/GyutoPageTemplate.vue
<template>
    <GyutoPageWrapper :page-type="$context.pageType" />
</template>

Komponenten entwickeln

Für die Entwicklung neuer Komponenten gibt es eigentlich keine Einschränkungen unsererseits. Es ist allerdings sinnvoll eine gewisse Struktur beizubehalten.

  • ./src/components
    • /partials
      • Partial.vue

Für die Entwicklung neuer Komponenten haben wir drei Helfer erstellt.

  • componentInspector
  • sharedProps
  • DefaultPartial

sharedProps und componentInspector können als mixins in deine Komponente eingebunden werden. Sie helfen dir dabei, die vom Backend zur Verfügung gestellten Props und Contents einzusehen. Schau dazu einfach mal in den DevTools in deine Console. Grundsätzlich sollten immer alle Props die der Komponente zur Verfügung gestellt werden von deiner Arbeit verarbeiten werden.

Vue Install
<template>
  <div></div>
</template>

<script>
import { sharedProps } from "@zuckersalzundpfeffer/gyuto-components/mixins";
import { componentInspector } from "@zuckersalzundpfeffer/gyuto-components/mixins/componentInspector";
export default {
  mixins: [sharedProps, componentInspector],
};
</script>

<style lang="postcss" scoped></style>

Wird vom Gyuto eine Page mit Komponenten ausgeliefert, für die das Frontend keine Implementierung der Komponenten vorgesehen hat, wird das DefaultPartial geladen. Dies stellt sicher, dass wir keine Komponente vergessen, die im Backend benutzt worden ist. Näheres dazu erfährst du hier:

Sugar UI

ZSP Sugar UI ist ein eigenständiges Projekt, welches dem tailwind css framework eine zusätzliche Konfigurationsebene liefert. Du kannst alles darüber hier lesen: