chore(docs): update docs for clarity. some styling changes

mtgjson · Sep 2, 2023 · 471e1a0 · 471e1a0
1 parent cb473c3
commit 471e1a0
Show file tree

Hide file tree

Showing 15 changed files with 521 additions and 152 deletions.
diff --git a/docs/.vitepress/generateSidebar.js b/docs/.vitepress/generateSidebar.js
@@ -53,32 +53,21 @@ export default (routes) => {
             case 'card types':
             case 'enum values':
             case 'sealed product variable':
-              badgeText.push('Abstract');
+              badgeText.push('abstract');
               break;
 
-              // case 'card set deck':
-              // case 'deck set':
-              // case 'sealed product card':
-              // case 'sealed product deck':
-              // case 'sealed product other':
-              // case 'sealed product pack':
-              // case 'sealed product sealed':
-              //   badgeText.push('New');
-              //   break;
-
             default:
               break;
           }
 
-          badgeClasses = badgeText.map((text) => text.toLowerCase());
-          badges = badgeClasses.map((text) => {
-            return `<span class="model-badge sidebar ${text}" title="${
+          badges = badgeText.map((text) => {
+            return `<span class="doc-badge sidebar ${text}" title="${
               text.charAt(0).toUpperCase() + text.slice(1, text.length)
             } Data Model">${text.charAt(0).toUpperCase()}</span>`;
           });
 
           return {
-            text: `${badges.join('')}${fileNameClean}`,
+            text: `${fileNameClean}${badges.join('')}`,
             link: `${route}${file}/`,
           };
         })

diff --git a/docs/.vitepress/theme/components/DocBadge.vue b/docs/.vitepress/theme/components/DocBadge.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-Badge(:type="type" :text="title" :title="tooltip" :class="inline ? 'doc-badge-inline' : ''" class="doc-badge")
+Badge(:type="type" :text="title" :title="tooltip" :class="inline ? 'inline' : ''" class="doc-badge")
 </template>
 
 <script setup lang="ts">
@@ -16,9 +16,13 @@ const title: string = props.text.charAt(0).toUpperCase();
 //   return text.charAt(0).toUpperCase() + text.slice(1, text.length);
 // }).join(' ');
 
-let tooltip: string = `${title} property`;
+let tooltip: string = '';
 
 switch (props.text) {
+  case 'abstract':
+    tooltip = 'Abstract Data Model'
+    break;
+
   case 'optional':
     tooltip = 'Property may not be available';
     break;
@@ -44,10 +48,32 @@ switch (props.text) {
 }
 </script>
 
-<style lang="scss" scoped>
+<!-- This is unscoped so we can target this class elsewhere outside the component -->
+<style lang="scss">
 .doc-badge {
-  &-inline {
-    margin: 0 !important;
+  &.sidebar {
+    text-align: center;
+    display: inline-block;
+    color: var(--white-color);
+    border: 2px solid var(--white-color);
+    padding: 0 0.5rem;
+    line-height: 0.5rem;
+    border-radius: var(--common-radius);
+    font-size: 12px;
+    line-height: 22px;
+    font-weight: bold;
+    margin-left: 0.5rem;
+  }
+
+  &.abstract {
+    color: var(--vp-badge-info-text);
+    border-color: var(--vp-badge-info-border);
+    background-color: var(--vp-badge-info-bg);
+  }
+
+  &.inline {
+    margin: 1rem 0.25rem 0 0 !important;
+    display: inline-block;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/styles/theme.scss b/docs/.vitepress/theme/styles/theme.scss
@@ -13,10 +13,6 @@ a {
     &:hover {
       text-decoration: none !important;
     }
-
-    .model-badge {
-      display: none;
-    }
   }
 }
 
@@ -54,29 +50,12 @@ code {
   right: 0.45rem !important;
 }
 
-// Model Badges
-.model-badge {
-  text-align: center;
-  display: inline-block;
-  color: var(--white-color);
-  border: 2px solid var(--white-color);
-  padding: 0 0.45rem 0;
-  line-height: 0.5rem;
-  border-radius: var(--common-radius);
-  margin: 0 0.5rem;
-  font-size: 12px;
-  line-height: 22px;
-  font-weight: bold;
-
-  &.sidebar {
-    margin-right: 0.5rem;
-    margin-left: 0;
-  }
-
-  &.abstract {
-    color: var(--model-abstract-badge-color);
-    border-color: var(--model-abstract-badge-color);
-    background-color: var(--model-abstract-badge-bg-color);
+.custom-block {
+  a:link,
+  a:visited,
+  a:active,
+  a:hover {
+    color: var(--accent-color);
   }
 }
 
@@ -173,6 +152,11 @@ code {
 // Content
 .VPDoc {
   // Fix headings
+
+  h1 {
+    display: inline-flex;
+    align-items: center;
+  }
   h4 {
     margin-top: 1rem;
   }
@@ -236,9 +220,9 @@ code {
 
   .VPBadge {
     margin-left: 0.5rem;
-    background-color: transparent !important;
     border-width: 2px !important;
     border-radius: var(--common-radius);
+    padding: 0 0.5rem;
     font-weight: bold !important;
   }
 
@@ -272,22 +256,6 @@ code {
       }
     }
   }
-
-  // Custom blocks, like info and tips
-  .custom-block {
-    margin-bottom: 1.5rem;
-    border-radius: var(--common-radius);
-    border-color: var(--vp-c-divider);
-    background-color: var(--vp-sidebar-bg-color);
-
-    .custom-block-title {
-      color: var(--vp-c-text-1);
-    }
-
-    a {
-      color: var(--vp-c-brand);
-    }
-  }
 }
 
 // Dark themeing

diff --git a/docs/.vitepress/theme/styles/vars.scss b/docs/.vitepress/theme/styles/vars.scss
@@ -1,10 +1,12 @@
 :root {
-  // True colors, not to be changed
+  // True colors, not to be changed later
   --accent-color: #1e90ff;
-  --yellow-color: #fcd253;
+  --accent-1-color: #092d50;
+  --accent-2-color: #daecfe;
+  --yellow-color: #FFCB6B;
   --yellow-1-color: goldenrod;
   --yellow-2-color: #feffdb;
-  --yellow-3-color: #363816;
+  --yellow-3-color: #d7d28d;
   --green-color: palegreen;
   --green-1-color: green;
   --green-2-color: #e0ffe1;
@@ -51,10 +53,6 @@
   --supporter-rare-color: var(--yellow-color);
   --supporter-uncommon-color: var(--white-color);
 
-  // Model Badges
-  --model-abstract-badge-color: var(--orange-color);
-  --model-abstract-badge-bg-color: transparent;
-
   // Version
   --version-color: var(--gray-4-color);
 
@@ -70,17 +68,25 @@
   --vp-c-brand-dark: var(--accent-color);
   --vp-c-brand-darker: var(--accent-color);
   --vp-c-text-code: var(--yellow-color);
+
   --vp-input-switch-bg-color: var(--vp-c-bg-alt);
 
-  --vp-badge-danger-bg: transparent;
+  --vp-custom-block-tip-bg: var(--accent-2-color);
+  --vp-custom-block-tip-border: var(--accent-color);
+  --vp-custom-block-warning-bg: var(--yellow-2-color);
+  --vp-custom-block-warning-border: var(--yellow-color);
+  --vp-custom-block-details-border: var(--gray-2-color);
+  --vp-custom-block-details-bg: var(--gray-color);
+
+  --vp-badge-info-border: var(--orange-color);
+  --vp-badge-info-text: var(--orange-color);
+  --vp-badge-info-bg: transparent;
+  --vp-badge-warning-border: var(--yellow-1-color);
+  --vp-badge-warning-text: var(--yellow-1-color);
+  --vp-badge-warning-bg: transparent;
   --vp-badge-danger-border: var(--red-1-color);
   --vp-badge-danger-text: var(--red-1-color);
-  --vp-badge-warning-bg: transparent;
-  --vp-badge-warning-text: var(--yellow-1-color);
-  --vp-badge-warning-border: var(--yellow-1-color);
-  --vp-badge-info-bg: transparent;
-  --vp-badge-info-text: var(--orange-color);
-  --vp-badge-info-border: var(--orange-color);
+  --vp-badge-danger-bg: transparent;
 
   --vp-code-font-size: 12px;
 }
@@ -102,12 +108,19 @@ html.dark {
   --vp-c-bg-alt: var(--dark-2-color);
   --vp-c-bg: var(--dark-1-color);
   --vp-c-bg-soft: var(--dark-2-color);
-  --vp-custom-block-info-bg: var(--dark-2-color);
-  --vp-custom-block-warning-bg: var(--dark-2-color);
   --vp-backdrop-bg-color: var(--dark-2-alpha-color);
+  --vp-custom-block-tip-bg: var(--accent-1-color);
+  --vp-custom-block-tip-text: var(--white-color);
+  --vp-custom-block-warning-bg: var(--yellow-3-color);
+  --vp-custom-block-warning-border: var(--yellow-color);
+  --vp-custom-block-warning-text: var(--dark-color);
+  --vp-custom-block-details-border: var(--dark-color);
+  --vp-custom-block-details-bg: var(--dark-2-color);
 
-  --vp-badge-danger-border: var(--red-color);
-  --vp-badge-danger-text: var(--red-color);
+  --vp-badge-info-border: var(--orange-color);
+  --vp-badge-info-text: var(--orange-color);
   --vp-badge-warning-border: var(--yellow-color);
   --vp-badge-warning-text: var(--yellow-color);
+  --vp-badge-danger-border: var(--red-color);
+  --vp-badge-danger-text: var(--red-color);
 }
diff --git a/docs/data-models/all-prices/index.md b/docs/data-models/all-prices/index.md
@@ -15,7 +15,7 @@ head:
       content: mtg, magic the gathering, mtgjson, json, all prices
 ---
 
-# All Prices
+# All Prices <DocBadge type="abstract" text="abstract" />
 
 The All Prices Abstract Data Model describes the properties of card prices based on a card's uuid property.
 
@@ -39,43 +39,44 @@ MTGJSON currently has affiliated with the following price providers to keep a **
 ::: details Toggle Model
 
 ```TypeScript
+export type AllPricesProvider = {
+  buylist?: {
+    foil?: {
+      // ISO 8601 date format as the key and price as value
+      [key: string]: number;
+    },
+    normal?: {
+      // ISO 8601 date format as the key and price as value
+      [key: string]: number;
+    }
+  },
+  currency: string;
+  retail?: {
+    // Foil prices
+    foil?: {
+      // ISO 8601 date format as the key and price as value
+      [key: string]: number;
+    },
+    // Normal prices
+    normal?: {
+      // ISO 8601 date format as the key and price as value
+      [key: string]: number;
+    }
+  }
+};
+
 export type AllPrices = {
-  // Card uuid property
+  // Card uuid
   [key: string]: {
-    // Product format, such as "paper"
-    [key: string]: {
-      // Price provider
-      [key: string]: {
-        // Provider buylist values
-        buylist?: {
-          // Foil prices
-          foil?: {
-            // ISO 8601 date format as the key and price as value
-            [key: string]: number;
-          },
-          // Normal prices
-          normal?: {
-            // ISO 8601 date format as the key and price as value
-            [key: string]: number;
-          }
-        },
-        // Currency of the provider
-        currency: string;
-        // Provider retail values
-        retail?: {
-          // Foil prices
-          foil?: {
-            // ISO 8601 date format as the key and price as value
-            [key: string]: number;
-          },
-          // Normal prices
-          normal?: {
-            // ISO 8601 date format as the key and price as value
-            [key: string]: number;
-          }
-        }
-      }
-    }
+    mtgo?: {
+      cardhoarder: AllPricesProvider;
+    };
+    paper?: {
+      cardkingdom?: AllPricesProvider;
+      cardmarket?: AllPricesProvider;
+      cardsphere?: AllPricesProvider;
+      tcgplayer?: AllPricesProvider;
+    };
   }
 }
 ```

diff --git a/docs/data-models/booster/index.md b/docs/data-models/booster/index.md
@@ -15,7 +15,7 @@ head:
       content: mtg, magic the gathering, mtgjson, json, booster
 ---
 
-# Booster
+# Booster <DocBadge type="abstract" text="abstract" />
 
 The Booster Abstract Data Model describes the properties of how a [Set](/data-models/set/)'s booster pack may be constructed.
 

diff --git a/docs/data-models/card-atomic/index.md b/docs/data-models/card-atomic/index.md
@@ -23,9 +23,9 @@ The Card (Atomic) Data Model describes the properties of a single "atomic" card,
 - **Parent file:** [AtomicCards](/downloads/all-files/#atomiccards), [LegacyAtomic](/downloads/all-files/#legacyatomic), [ModernAtomic](/downloads/all-files/#modernatomic), [PauperAtomic](/downloads/all-files/#pauperatomic), [PioneerAtomic](/downloads/all-files/#pioneeratomic), [StandardAtomic](/downloads/all-files/#standardatomic), [VintageAtomic](/downloads/all-files/#vintageatomic)
 - **Parent property:** `data`
 
-::: info Accessing the data
+::: tip Accessing Card (Atomic) Data
 
-When using any **Atomic-like** file, the Card (Atomic) Data Model is accessed through a single index array where its parent property is the card's [name](/data-models/card-atomic/#name) property. Here is a reduced payload of the model as an example:
+When using any **Atomic-like** file, the Card (Atomic) Data Model is accessed through a single index array where its parent property is the card's [name](/data-models/card-atomic/#name) property.
 
 ```TypeScript
 {

diff --git a/docs/data-models/card-types/index.md b/docs/data-models/card-types/index.md
@@ -15,7 +15,7 @@ head:
       content: mtg, magic the gathering, mtgjson, json, card types
 ---
 
-# Card Types
+# Card Types <DocBadge type="abstract" text="abstract" />
 
 The Card Types Abstract Data Model describes the properties of any possible subtypes and supertypes of a card.