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.yml 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"]
      },
    },

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. Add the new Kodi version to the Github actions workflow file.
2. If the new repo is inheriting the addons from the previous version you, then in /static/images/addons/ copy the folder from the current version of Kodi and rename it to the new version, and in /src/data/addons/ copy the folder from the current version of Kodi and rename it to the new version.
3. If the new repo is starting with fresh addons, you will need to run the addon-parser app once on the new repo to generate the needed files and download the new images.
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-config.js copy the section in the sideNav constant (see above for example) from one of the other versions and change the paths and titles as needed.
6. 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.
7. 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.
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.