springwolf · timonback · Sep 24, 2022 · Oct 1, 2022 · Oct 30, 2022
diff --git a/README.md b/README.md
@@ -16,6 +16,18 @@ dependencies {
 
 After starting the application, visit: `localhost:8080/springwolf/asyncapi-ui.html`.
 
+## Contribution
+
+You are welcome to raise issues and contribute code.
+
+### Code contribution
+
+Just fork the project, write code and open a PR.
+
+This repository uses github actions. We recommend activating them in your fork and open a PR within your fork to trigger them.
+
+Also, to build a preview for your branch, you can sign up to [Netlify's](https://app.netlify.com) free tier with your github account, import a new site from your github fork and set the build command as described in `src/_redirects`. Open a PR in within your fork and update the code to trigger a build.
+
 ## Development
 1. Run `npm i`
 2. Run `ng serve`
@@ -27,6 +39,11 @@ It contains multiple mocks - including the ones from the springwolf-core example
 
 To update the mock data, run `npm run update-mocks`.
 
+### Code Formatting
+
+The project uses spotless together with prettier for code formatting.
+Using the gradle task `spotlessApply`, the code is reformatted to match the style.
+
 ## Release
 
 Releasing is done by running the gradle task `publish`. For local development, use `publishToMavenLocal`.

diff --git a/build.gradle b/build.gradle
@@ -3,6 +3,7 @@ plugins {
   id 'com.github.node-gradle.node' version '2.2.4'
   id 'signing'
   id 'maven-publish'
+  id "com.diffplug.spotless" version "6.11.0"
 }
 
 def isSnapshot = Boolean.valueOf(project.findProperty('SNAPSHOT'))
@@ -18,6 +19,8 @@ node {
 }
 
 npm_run_build {
+  dependsOn spotlessCheck
+
   inputs.files fileTree("src")
   inputs.file 'angular.json'
   inputs.file 'package.json'
@@ -97,3 +100,14 @@ signing {
   sign publishing.publications.mavenJava
 }
 
+spotless {
+  encoding 'UTF-8'
+
+  format 'Angular', {
+    target 'src/**/*.ts', 'src/**/*.css', 'src/**/*.html'
+
+    trimTrailingWhitespace()
+    endWithNewline()
+    prettier().config(["singleQuote": true])
+  }
+}
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,10 +1,10 @@
 app-header {
-    position: fixed;
-    z-index: 100;
-    width: 100%;
+  position: fixed;
+  z-index: 100;
+  width: 100%;
 }
 
 main {
-    margin: 0 64px;
-    padding: 64px 0;
-}
+  margin: 0 64px;
+  padding: 64px 0;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <app-header></app-header>
 <main fxLayout="column" fxLayoutGap="24px">
-    <app-info></app-info>
-    <app-servers></app-servers>
-    <app-channels></app-channels>
-    <app-schemas></app-schemas>
+  <app-info></app-info>
+  <app-servers></app-servers>
+  <app-channels></app-channels>
+  <app-schemas></app-schemas>
 </main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'springwolf';

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { MockServer } from './shared/mock/mock-server';
 import { PublisherService } from './shared/publisher.service';
 import { FormsModule } from '@angular/forms';
 import { JsonComponent } from './shared/components/json/json.component';
-import {AsyncApiMapperService} from "./shared/asyncapi-mapper.service";
+import { AsyncApiMapperService } from './shared/asyncapi-mapper.service';
 
 @NgModule({
   declarations: [
@@ -42,7 +42,9 @@ import {AsyncApiMapperService} from "./shared/asyncapi-mapper.service";
     HighlightModule,
     HttpClientModule,
     FormsModule,
-    environment.production ? [] : HttpClientInMemoryWebApiModule.forRoot(MockServer, { delay: 100 })
+    environment.production
+      ? []
+      : HttpClientInMemoryWebApiModule.forRoot(MockServer, { delay: 100 }),
   ],
   providers: [
     AsyncApiService,
@@ -52,11 +54,13 @@ import {AsyncApiMapperService} from "./shared/asyncapi-mapper.service";
       provide: HIGHLIGHT_OPTIONS,
       useValue: {
         languages: function () {
-          return { typescript: () => import('highlight.js/lib/languages/typescript') };
-        }
-      }
-    }
+          return {
+            typescript: () => import('highlight.js/lib/languages/typescript'),
+          };
+        },
+      },
+    },
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/src/app/channels/channel-main/channel-main.component.css b/src/app/channels/channel-main/channel-main.component.css
@@ -1,34 +1,34 @@
 textarea {
-    margin-top: 16px;
-    padding: 8px;
-    border-radius: 4px;
-    border-width: 0;
-    line-height: 24px;
-    background-color: #282c34;
-    color: #abb2bf;
+  margin-top: 16px;
+  padding: 8px;
+  border-radius: 4px;
+  border-width: 0;
+  line-height: 24px;
+  background-color: #282c34;
+  color: #abb2bf;
 }
 
 button {
-    margin-top: 8px;
+  margin-top: 8px;
 }
 
 .property-badge {
-    background-color: #C5CAE9;
-    border-radius: 4px;
-    padding: 6px;
-    font-size: small;
-    font-weight: bold;
+  background-color: #c5cae9;
+  border-radius: 4px;
+  padding: 6px;
+  font-size: small;
+  font-weight: bold;
 }
 
 .payload-name {
-    background-color: #E0E0E0;
-    border-radius: 4px;
-    padding: 6px;
-    font-weight: normal;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  padding: 6px;
+  font-weight: normal;
 }
 
 .header-name {
-  background-color: #E0E0E0;
+  background-color: #e0e0e0;
   border-radius: 4px;
   padding: 6px;
   font-weight: normal;

diff --git a/src/app/channels/channel-main/channel-main.component.html b/src/app/channels/channel-main/channel-main.component.html
@@ -1,58 +1,80 @@
 <section>
+  <mat-divider></mat-divider>
+  <div *ngIf="operation.message.description">
+    <h4>{{ operation.message.description }}</h4>
     <mat-divider></mat-divider>
-    <div *ngIf="operation.message.description">
-      <h4>{{ operation.message.description }}</h4>
-      <mat-divider></mat-divider>
-    </div>
-    <mat-tab-group animationDuration="0ms">
-      <mat-tab label="Example">
-        <div fxLayout="column">
-          <textarea spellcheck="false"
-                    #exampleTextArea
-                    [rows]="exampleTextAreaLineCount"
-                    [value]="defaultExample?.value"
-                    (keyup)="recalculateLineCount('example', exampleTextArea.value)"
-          ></textarea>
-          <div fxLayout fxLayoutGap="8px">
-            <button mat-raised-button color="primary" (click)="publish(exampleTextArea.value, headersTextArea.value)">
-              Publish
-            </button>
-            <button mat-raised-button color="primary"
-                    (click)="exampleTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
-              Default
-            </button>
-            <button mat-raised-button color="primary" [cdkCopyToClipboard]="exampleTextArea.value">Copy</button>
-          </div>
+  </div>
+  <mat-tab-group animationDuration="0ms">
+    <mat-tab label="Example">
+      <div fxLayout="column">
+        <textarea
+          spellcheck="false"
+          #exampleTextArea
+          [rows]="exampleTextAreaLineCount"
+          [value]="defaultExample?.value"
+          (keyup)="recalculateLineCount('example', exampleTextArea.value)"
+        ></textarea>
+        <div fxLayout fxLayoutGap="8px">
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="publish(exampleTextArea.value, headersTextArea.value)"
+          >
+            Publish
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="
+              exampleTextArea.value = defaultExample.value;
+              exampleTextAreaLineCount = defaultExample.lineCount
+            "
+          >
+            Default
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [cdkCopyToClipboard]="exampleTextArea.value"
+          >
+            Copy
+          </button>
         </div>
-      </mat-tab>
-      <mat-tab label="Schema">
-        <h4>
-          {{ schemaName }}
-          <span class="payload-name">
-            <a [href]="operation.message.payload.anchorUrl" >{{ operation.message.payload.name }}</a>
-          </span>
-        </h4>
-        <app-schema *ngIf="schema" [schema]="schema"></app-schema>
-      </mat-tab>
-      <mat-tab label="Headers">
-        <h4>
-          {{ headersSchemaName }}
-          <span class="header-name">
-            <a [href]="operation.message.headers.anchorUrl">{{ operation.message.headers.name }}</a>
-          </span>
-        </h4>
-        <app-schema *ngIf="headers" [schema]="headers"></app-schema>
-        <div fxLayout="column">
-          <textarea spellcheck="false"
-                    #headersTextArea
-                    [rows]="headersTextAreaLineCount"
-                    [value]="headersExample?.value"
-                    (keyup)="recalculateLineCount('headers', headersTextArea.value)"
-          ></textarea>
-        </div>
-      </mat-tab>
-      <mat-tab label="Bindings">
-        <app-json [data]="operation.bindings[protocolName]"></app-json>
-      </mat-tab>
-    </mat-tab-group>
+      </div>
+    </mat-tab>
+    <mat-tab label="Schema">
+      <h4>
+        {{ schemaName }}
+        <span class="payload-name">
+          <a [href]="operation.message.payload.anchorUrl">{{
+            operation.message.payload.name
+          }}</a>
+        </span>
+      </h4>
+      <app-schema *ngIf="schema" [schema]="schema"></app-schema>
+    </mat-tab>
+    <mat-tab label="Headers">
+      <h4>
+        {{ headersSchemaName }}
+        <span class="header-name">
+          <a [href]="operation.message.headers.anchorUrl">{{
+            operation.message.headers.name
+          }}</a>
+        </span>
+      </h4>
+      <app-schema *ngIf="headers" [schema]="headers"></app-schema>
+      <div fxLayout="column">
+        <textarea
+          spellcheck="false"
+          #headersTextArea
+          [rows]="headersTextAreaLineCount"
+          [value]="headersExample?.value"
+          (keyup)="recalculateLineCount('headers', headersTextArea.value)"
+        ></textarea>
+      </div>
+    </mat-tab>
+    <mat-tab label="Bindings">
+      <app-json [data]="operation.bindings[protocolName]"></app-json>
+    </mat-tab>
+  </mat-tab-group>
 </section>