mtgjson · Sep 12, 2023
diff --git a/‎CONTRIBUTING.md
+14-6 b/‎CONTRIBUTING.md
+14-6
diff --git a/‎docs/.vitepress/config.js
+11-19 b/‎docs/.vitepress/config.js
+11-19
@@ -41,6 +41,7 @@ Some files and directories are omitted that do not help understand this current
 │   └── generate-types.js # Utility to generate TypeScript notations for documentation
 └── docs/ # Home directory, outputs to `/dist`
     ├── **/**/index.md # Directories and their route entry point
+    ├── types.ts # An abstract of TypeScript types for MTGJSON files
     ├── public/ # Public facing files
     │   ├── favicons/ # All favicon images
     │   ├── images/ # All application images
@@ -52,8 +53,9 @@ Some files and directories are omitted that do not help understand this current
     │   ├── static/ # Legacy path for MTGJSON documentation TypeScript Types
     │   │   └── mtgjson-types.ts # All TypeScript Types for MTGJSON Data Models
     │   │
-    │   ├── types/ # Path to all MTGJSON documentation TypeScript Types
-    │   └── *.* # Any public facing file, like robots.txt
+    │   └── types/ # Path to all MTGJSON documentation TypeScript Types
+    │       └── *.ts # All individual TseScript Types for MTGJSON Data Models
+    │
     └── .vitepress/ # Main config and theme files for Vitepress
         ├── config.js # Main VitePress configuration
         ├── generatePages.js # Polyfill script to generate pages data for search
@@ -105,23 +107,29 @@ You can also change configuration of VitePress by overwriting variables within t
 An example of a property field for a data object field in Markdown:
 
 ```
-> ### artist <Badge type="danger" text="deprecated" /><Badge type="warning" text="optional" />
+> ### artist <DocBadge type="danger" text="deprecated" /><DocBadge type="warning" text="optional" />
 >
-> The name of the artist that illustrated the card art.  
+> The name of the artist that illustrated the card art.
 >
 > **Type:** `string`
 > **Introduced:** `v4.0.0`
 ```
 
-The `<Badge type="warning" text="optional" />` markup will render a UI change in the property that denotes the property is optional. The same applies for `<Badge type="danger" text="deprecated" />` that can be used to denote a property is deprecated. Be sure to order them with deprecated first, and then optional. Using the optional Badge is required for properties that we know are optional in order to generate the TypeScript types properly.
+The `<DocBadge type="warning" text="optional" />` markup will render a UI change in the property that denotes the property is optional. The same applies for `<DocBadge type="danger" text="deprecated" />` that can be used to denote a property is deprecated. Be sure to order them with deprecated first, and then optional. Using the optional Badge is required for properties that we know are optional in order to generate the TypeScript types properly.
 
 You can also use the `<ExampleField type='<Enum Name>'` component to render examples provided the enum values exist in the EnumValues.json file. This requires some frontmatter updates where the `enum` Frontmatter property has a value that equates to an EnumValues.json property and the `<Enum Name>` is the property within that enumeration. For example:
 
 If you set `enum` is Frontmatter to `card`, and `<Enum Name>` to `availability`, the example field will populate from `EnumValues.json` -> `data` -> `card` -> `availability`.
 
+#### TypeScript Models
+
+These are generated at build-time of the application and then import inline to the documentation page. THis works by using the above syntax for a property field for a documentation page. The utility will parse out all those blockquotes with properties and transform them in to a TypeScript file.
+
+File Data Models work a bit differently. They are declared in the `/docs/types.ts` file. And need to be updated manually as new files are created.
+
 ## Pinia Store
 
-We use Pinia to fetch data from MTGJSON API's in order to fill our application data. However, we only do this during the first render so the application and store remains as performant as possible.
+We use Pinia to fetch data from MTGJSON API's in order to fill our application data. However, we only do this during the first render so the application and store the data so the app remains as performant as possible without hitting the API's too much.
 
 ## Testing
 
 
@@ -2,10 +2,7 @@ import generateSidebar from './generateSidebar';
 import generatePages from './generatePages';
 
 // Sidebar link generation
-const [
-  abstractModels,
-  dataModels
-] = generateSidebar(['/abstract-models/', '/data-models/']);
+const [dataModels] = generateSidebar(['/data-models/']);
 
 // Page metadata generation
 export const pages = generatePages({
@@ -33,7 +30,7 @@ export default {
     // Google SEO
     ['meta', { property: 'og:title', content: title }],
     ['meta', { property: 'og:description', content: description }],
-    ['meta', { property: 'og:image', src: '/images/assets/thumbnail-mtgjson.jpg' }],
+    ['meta', { property: 'og:image', src: 'https://mtgjson.com/images/assets/og-image-mtgjson.jpg' }],
     // Favicon and OS Tiles
     ['link', { rel: 'shortcut icon', href: '/favicons/favicon.ico', type: 'image/x-icon' }],
     ['link', { rel: 'icon', href: '/favicons/favicon-16x16.png', sizes: '16x16', type: 'image/png' }],
@@ -47,7 +44,7 @@ export default {
     ['meta', { name: 'theme-color', content: '#0f263c' }],
     // Analytics
     ['meta', { name: 'google-site-verification', content: 'M0vhY1d0DytNcuhlzErPmN1UUXkPEZM_jkj8q_S21JY' }],
-    ['script', { src: 'https://www.googletagmanager.com/gtag/js?id=G-ZPPM5J5ET2', async: 'true' }],
+    ['script', { src: 'https://www.googletagmanager.com/gtag/js?id=G-ZPPM5J5ET2', async: 'true', defer: 'true' }],
     [
       'script',
       {},
@@ -61,16 +58,16 @@ export default {
   ],
   markdown: {
     toc: {
-      level: [ 3 ],
+      level: [3],
       shouldAllowNested: true,
-      format: (str) => str.split('<')[0]
+      format: (str) => str.split('<')[0],
     },
-    theme: 'material-theme-darker'
+    theme: 'material-theme',
   },
   // VitePress themeing
   themeConfig: {
     pages,
-    outline: 3,
+    outline: [2, 3],
     smoothScroll: true,
     outlineBadges: false,
     outlineTitle: 'On This Page',
@@ -89,7 +86,7 @@ export default {
       },
       {
         icon: {
-          svg: '<svg alt="Patreon icon" fill="#f96753" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" class="st0"/></svg>'
+          svg: '<svg alt="Patreon icon" fill="#f96753" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" class="st0"/></svg>',
         },
         link: 'https://www.patreon.com/MTGJSON',
       },
@@ -111,7 +108,7 @@ export default {
             text: 'F.A.Q.',
             link: '/faq/',
           },
-        ]
+        ],
       },
       {
         text: 'GraphQL API',
@@ -120,8 +117,8 @@ export default {
           {
             text: 'MTGGraphQL',
             link: '/mtggraphql/',
-          }
-        ]
+          },
+        ],
       },
       {
         text: 'Downloads',
@@ -146,11 +143,6 @@ export default {
         link: '/data-models/',
         items: dataModels,
       },
-      {
-        text: 'Abstract Models',
-        link: '/abstract-models/',
-        items: abstractModels,
-      },
       {
         text: 'Changelogs',
         link: '/changelogs/',