Moved Cocs section to right sidebar (will fix overflow issue later today) + Basic lint

components/graphql/field.vue

@@ -36,12 +36,19 @@ export default {
   computed: {
     fieldString() {
       const args = (this.gqlField.args || []).reduce((acc, arg, index) => {
-        return acc + `${arg.name}: ${arg.type.toString()}${(index !== this.gqlField.args.length - 1) ? ", " : ''}`;
+        return (
-      }, '');
+          acc +
-      const argsString = (args.length > 0) ? `(${args})` : '';
+          `${arg.name}: ${arg.type.toString()}${
+            index !== this.gqlField.args.length - 1 ? ", " : ""
+          }`
+        );
+      }, "");
+      const argsString = args.length > 0 ? `(${args})` : "";
 
-      return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`;
+      return `${
+        this.gqlField.name
+      }${argsString}: ${this.gqlField.type.toString()}`;
     }
   }
-}
+};
 </script>

components/graphql/type.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="type-box">
-    <div class="type-title">{{gqlType.name}}</div>
+    <div class="type-title">{{ gqlType.name }}</div>
     <div class="type-desc" v-if="gqlType.description">
-      {{gqlType.description}}
+      {{ gqlType.description }}
     </div>
 
     <div v-if="gqlType.getFields">
@@ -43,5 +43,5 @@ export default {
   props: {
     gqlType: Object
   }
-}
+};
 </script>

pages/graphql.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="page">
+    <div class="content">
+      <div class="page-columns inner-left">
         <pw-section class="blue" label="Endpoint" ref="endpoint">
           <ul>
             <li>
@@ -30,10 +32,17 @@
             }"
           />
         </pw-section>
+      </div>
+      <aside class="sticky-inner inner-right">
         <pw-section class="purple" label="Docs" ref="docs">
           <section>
-
+            <input
-        <input v-if="queryFields.length > 0" id="queries-tab" type="radio" name="side" checked="checked" />
+              v-if="queryFields.length > 0"
+              id="queries-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
             <label v-if="queryFields.length > 0" for="queries-tab">Queries</label>
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
@@ -41,24 +50,45 @@
               </div>
             </div>
 
-
+            <input
-        <input v-if="mutationFields.length > 0" id="mutations-tab" type="radio" name="side" checked="checked" />
+              v-if="mutationFields.length > 0"
-        <label v-if="mutationFields.length > 0" for="mutations-tab">Mutations</label>
+              id="mutations-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="mutationFields.length > 0" for="mutations-tab"
+              >Mutations</label
+            >
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
                 <gql-field :gqlField="field" />
               </div>
             </div>
 
-        <input v-if="subscriptionFields.length > 0" id="subscriptions-tab" type="radio" name="side" checked="checked" />
+            <input
-        <label v-if="subscriptionFields.length > 0" for="subscriptions-tab">Subscriptions</label>
+              v-if="subscriptionFields.length > 0"
+              id="subscriptions-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
+              >Subscriptions</label
+            >
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
                 <gql-field :gqlField="field" />
               </div>
             </div>
 
-        <input v-if="gqlTypes.length > 0" id="gqltypes-tab" type="radio" name="side" checked="checked" />
+            <input
+              v-if="gqlTypes.length > 0"
+              id="gqltypes-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
             <label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
             <div v-if="gqlTypes.length > 0" class="tab">
               <div v-for="type in gqlTypes" :key="type.name">
@@ -67,6 +97,8 @@
             </div>
           </section>
         </pw-section>
+      </aside>
+    </div>
   </div>
 </template>
 
@@ -144,12 +176,24 @@ export default {
           const typeMap = schema.getTypeMap();
           const types = [];
 
-          const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : '';
+          const queryTypeName = schema.getQueryType()
-          const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : '';
+            ? schema.getQueryType().name
-          const subscriptionTypeName = schema.getSubscriptionType() ? schema.getSubscriptionType().name : '';
+            : "";
+          const mutationTypeName = schema.getMutationType()
+            ? schema.getMutationType().name
+            : "";
+          const subscriptionTypeName = schema.getSubscriptionType()
+            ? schema.getSubscriptionType().name
+            : "";
 
           for (const type in typeMap) {
-            if (!typeMap[type].name.startsWith("__") && !(([queryTypeName, mutationTypeName, subscriptionTypeName]).includes(typeMap[type].name)) && typeMap[type] instanceof gql.GraphQLObjectType) {
+            if (
+              !typeMap[type].name.startsWith("__") &&
+              ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
+                typeMap[type].name
+              ) &&
+              typeMap[type] instanceof gql.GraphQLObjectType
+            ) {
               types.push(typeMap[type]);
             }
           }
@@ -168,7 +212,7 @@ export default {
           this.$toast.error(error + " (F12 for details)", {
             icon: "error"
           });
-          console.log('Error', error);
+          console.log("Error", error);
         });
     }
   }