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 separate node app runs as a Github action to download and parse the addons.xml file and saves it as three JSON files (addons.json, categories.json, and authors.json) and downloads any needed images. A custom Gatsby plugin loads those json files to build the addon pages for each version.

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 addon-parser Node Application

This script lives in scripts/addon-parser. It is run daily at 2am UTC via a Github action on the kodi-tv repo (controlled from .github/workflows/update-addon-history.yml. You can also run it manually from the Github web site. If you want to run it locally for some reason, you need to run npm install from within the addon-parser directory. To run it the command is node app.js --kv=<kodiversionname>. This app downloads the addons.xmlfile from the repo named when the app is run, parses it, and saves out three JSON files (addons.json, authors.json, and categories.json) insrc/data/addons/`. Here's the portion of the workflow file that runs script against a given repo:

      - name: Run addon-parser for Matrix branch
        run: node app.js --kv=matrix

The gatsby-source-kodiaddon Plugin

This plugin lives in the plugins directory. It reads the three files generated by the addon-parser app as well as the file in src/data/addons/<version>/featured.yaml to generate the add-on pages for each version of Kodi we are monitoring.

Configuration in gatsby-config.js

There is entry in plugins section of the gatsby-config.js file that specifies which repos to use. Here's what that looks like:

    {
      resolve: "gatsby-source-kodiaddon",
      options: {
        kodiversion: ["leia, "matrix"]
      },
    },

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:

CMS Managed Add-on Pages

The file src/content/pages/addons/index.md is the main page for all add-ons and can be edited via the web CMS. There is a link in that file to the add-on section for each version of Kodi.

Version Specific Sections

Each version of Kodi we are providing on the web site has it's own set of pages as well.

• src/pages/addons/<version>/index.tsx 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.tsx is the add-on search interface for that Kodi version's add-ons.
• src/pages/addons/<version>/top-authors.tsx 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. Add the new Kodi version to the Github actions workflow file (in the main branch) and delete the one you are retiring.
2. Copy the current version folder from src/data/addons/ and rename it to the current version.
3. Run the addon-parser app once on the new repo to generate the needed files and download the new images. To do that go to the kodi-tv folder you downloaded and cd to scripts/addon-parser and then run node app.js --kv=<version_name>.
4. In gatsby-config.js look for the gatsby-source-kodiaddon section in the plugins area and update thekodiversion entry to include the versions of Kodi you want to monitor.
5. 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.
6. In src/templates/ copy the folder from the current version of Kodi and rename it to the new version. In each file in that folder, update the graphQL at the bottom to use the correct name for the new add-on branch.
7. 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 with the correct version name as needed.
8. In /src/content/pages/addons/index.md add a link to the add-ons for the new version of Kodi (this can be done via the web CMS).
9. 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.
10. In components/Header.tsx find the Add-ons section of the main menu dict and update it as needed to add/delete the appropriate versions of Kodi.