Add ons

Introduction

The website currently provides two sections of add-ons (the current version of Kodi and one version back). During beta for the next version of Kodi, that one is also added. The add-on section of the website for each Kodi version is created based on the addons.xml file for that version and is downloaded from the mirrors each time the site is built. A custom Gatsby plugin parses the addons.xml file and downloads images for any new/updated add-ons so that other Gatsby functions can build all the pages.

Anatomy of the Add-ons Section

There are many pieces that work together to create the add-on section of the web site. This section provides an overview of that pieces. A section further down describes in detail how to setup a new section for a new version of Kodi.

The gatsby-source-kodiaddon Plugin

The plugin was written, in theory, to be called multiple times with different settings, but current testing has shown that configuration doesn't work properly. Given that Each version of Kodi requires a separate copy of the plugin tagged with the version name at the end. (So gatsby-source-kodiaddon-matrix for the Matrix add-ons). The plugin downloads a copy of the addons.xml file and parses it. It also reads a file in src/data/addons/<version>/featured.xml to tag the featured addons for the main add-ons page and a file in src/data/addons/<version>/history.json that helps the build system know which add-ons are new/updated. During parsing, images for new and updated add-ons are downloads and stored in static/images/addons/<version>/<addonid>. When the parsing is complete, the history.json file is updated.

Configuration in gatsby-config.js

Each version of the plugin requires an entry in plugins section of the gatsby-config.js file. Here's what that looks like:

    {
      resolve: "gatsby-source-kodiaddon-matrix",
      options: {
        kodiversion: "matrix",
        kodimirror: "ftp.halifax.rwth-aachen.de/xbmc",
      },
    },

In addition, there is a separate sub-header for each Kodi version that is defined in the sideNav constant. Here's what that looks like:

  {
    rootPath: "/addons/matrix",
    menuType: "submenu",
    nav: [
      {
        title: "Matrix Add-Ons",
        path: "/addons/matrix",
      },
      {
        title: "Search Matrix Add-Ons",
        path: "/addons/matrix/search",
      },
      {
        title: "Top Matrix Add-on Authors",
        path: "/addons/matrix/top-authors",
      },
    ],
  },

Managing Featured Add-ons from the Web Interface

There is a section of the CMS configuration file that defines the area that is used to manage featured add-ons from the web. It looks like this:

  - name: 'featuredaddons'
    label: 'Featured Add-ons'
    files:
      - name: 'matrixfeaturedlist'
        label: "Matrix Featured Add-ons List"
        file: 'src/data/addons/matrix/featured.yaml'
        fields:
          - name: 'addons'
            label: 'Add-ons'
            label_singular: 'Add-on'
            widget: 'list'
            summary: '{{addonid}}'
            fields:
              - { name: 'addonid', label: 'Add-on ID', widget: 'string' }
      - name: 'leiafeaturedlist'
        label: "Leia Featured Add-ons List"
        file: 'src/data/addons/leia/featured.yaml'
        fields:
          - name: 'addons'
            label: 'Add-ons'
            label_singular: 'Add-on'
            widget: 'list'
            summary: '{{addonid}}'
            fields:

Semi-static Pages

The file src/pages/addons/index.mdx is the main page for all add-ons. There is a link in that file to the add-on section for each version of Kodi. Each addon section has it's own set of static pages as well.

• src/pages/addons/<version>/index.mdx is the main page for each section and has dynamically generate content for featured add-ons, new add-ons, updated addons, as well as the categories of add-ons available.
• src/pages/addons/<version>/search.mdx is the add-on search interface for that Kodi version's add-ons.
• src/pages/addons/<version>/top-authors.mdx is the dynamically generated list of top add-on authors for that Kodi version.

Page Generation Code

Each Kodi version has a set of entries in gatsby-node.js that initiates the generation of the pages for the add-ons section. It looks like this:

// *** Begin Matrix Addon Page Builds
  const matrixaddonresults = await graphql(`
    query MyQuery {
      allMatrixAddon {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  matrixaddonresults.data.allMatrixAddon.edges.forEach(({ node }) => {
    createPage({
      path: "addons/matrix/" + node.slug,
      component: path.resolve(`src/templates/matrix/addon.tsx`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.slug,
      },
    })
  })

  const matrixcategoryresults = await graphql(`
    query MyQuery {
      allMatrixCategory {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  matrixcategoryresults.data.allMatrixCategory.edges.forEach(({ node }) => {
    createPage({
      path: "addons/matrix/category/" + node.slug,
      component: path.resolve(`src/templates/matrix/category.tsx`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.slug,
      },
    })
  })

  const matrixauthorresults = await graphql(`
    query MyQuery {
      allMatrixAuthor {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  matrixauthorresults.data.allMatrixAuthor.edges.forEach(({ node }) => {
    createPage({
      path: "addons/matrix/author/" + node.slug,
      component: path.resolve(`src/templates/matrix/author.tsx`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.slug,
      },
    })
  })
// *** End Matrix Addon Page Builds

Auto-generated Pages

Each Kodi version has a folder of templates in /src/templates/<version>/ that generate various pages:

• /addon.tsx generates the add-on details page for every add-on.
• author.tsx generates the author page for everyone author. This is primarily a list of the add-ons that author created.
• categories.tsx generates the page that contains a list of add-ons for a given category.

Adding a New Kodi Version

For each add-ons section you want, you need to do a set of things:

1. In plugins duplicate one of the existing gatsby-source-kodiaddon folders. Rename it to match the version name for the new version of Kodi. In the package.json file in that folder, change the name: entry to match the folder name.
2. In gatsby-config.js copy the section in the plugin area (see above for example) from one of the other versions and change the version name in resolve: and kodiversion entries.
3. In gatsby-config.js copy the section in the sideNav constant (see above for example) from one of the other versions and change the path and title as needed.
4. In gatsby-node.js copy the area that initiates the page generation (see above for example) and then change the version name as needed. Please note that capitalization will matter here, so match your change to the original.
5. In /static/images/addons/ copy the folder from the current version of Kodi and rename it to the new version.
6. In /src/data/addons/ copy the folder from the current version of Kodi and rename it to the new version.
7. In src/templates/ copy the folder from the current version of Kodi and rename it to the new version.
8. In /src/pages/addons/ copy the folder from the current version of Kodi and rename it to the new version. In each file in that folder, update the MetadataHeader component call with the correct version name.
9. In /src/pages/addons/index.mdx add a link to the add-ons for the new version of Kodi.
10. In /static/admin/config.yml copy the files section (see example above) for the current version of Kodi and the update the version name where needed.