Addon as a theme

[tiberiuichim]

Let's discuss how we want to treat the following pattern that I've started using. I have an addon that can behave as a "theme addon".

The addon has a razzle.extend.js file with the following content:

const plugins = (defaultPlugins) => defaultPlugins;

const modify = (config, { target, dev }, webpack) => {
  config.resolve.alias[
    '../../theme.config$'
  ] = `${__dirname}/theme/theme.config`;

  return config;
};

module.exports = {
  plugins,
  modify,
};

And I have a my-volto-addon/theme/theme.config file with the following content:

// ........ all the semantic-ui elements are set to pastanage, like:

@ad          : 'pastanaga';
....
@main        : 'pastanaga';
@custom      : 'pastanaga';

// then:

/* Path to theme packages */
@themesFolder  : '~volto-themes';

/* Path to site override folder */
@siteFolder  : '~my-volto-addon/../theme/site';

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : "~volto-themes/@{theme}/assets/fonts";

I like this pattern because it allows me to decouple the theme from the Volto project. The Volto project is subject to:

• many changes in the infrastructure files. We're constantly improving how we organise the Volto project
• needs that are not specific to that Volto project or to the theme, but to the organisation's internal workflows (testing, deployment, etc)
• the need to centralize this "intelligence" across multiple projects, so the Volto project can't be something specific to the "volto final site".

I've started touching some of these issues in the yeoman-based create-volto-app, which enables reapplying the volto-starter-kit on top of an existing Volto project, but my dream scenario is that I can decouple the volto addons and theme from the "Volto project as infrastructure for Volto". Once #1706 is merged, we're already there.

[sneridagh]

@tiberiuichim shouldn't this be documented and closed?

[tiberiuichim]

@sneridagh Yes, indeed, it needs to be documented. Perhaps also along with making it obvious that you can write your own custom semantic.less file, just like this one: https://github.com/eea/volto-eea-design-system/blob/master/src/semantic.less

[stevepiercy]

@tiberiuichim does anything more need to be added to Create a Volto theme add-on? It looks like @sneridagh wrote the docs for it in April 2023.