This is a nice idea, thanks @Segun!
Maybe, instead of doing it “the npm way”, we can do it “the frontity way” and create a new newsletter namespace.
The main difference is:
- With “the npm way”, users of the theme need to change the code.
- With “the frontity way”, users of the theme just need to install and configure a package.
That may not seem like a great difference now, but we are already thinking about the moment when Frontity users can install and configure packages from an Admin UI. Once that moment comes, we want them to be able to install the theme they want, then search for a “newsletter” package for their platform, for example MailChimp, install it, add the apiKey to the configuration and they are good to go. Just like they are used to do it today in the WordPress dashboard.
User Stories
As a Frontity theme user
I want to integrate any newsletter platform with a theme using Frontity packages
so that I don’t have to write the integration myself
Posible solution
These are some ways it could be built. Feel free to add your feedback.
Newsletter packages can use theme slots
This is similar to what ads packages do. The theme exposes “slots” and the package “fills” one of the slots.
// Theme.
const Footer = () => {
return (
<>
<Slot id="above-the-footer" />
{ /* more stuff */ }
</>
);
};
The slot id could be configurable via settings:
state: {
newsletter: {
slot: "above-the-footer"
}
}
// Newsletter package.
const NewsletterFill = ({ state }) => {
return (
<Fill id={state.newsletter.slot}>
<Newsletter />
<Fill />
);
};
Newsletter packages can expose their own component
This is similar to what comments packages do.
// Theme
const Footer = ({ libraries }) => {
const Newsletter = libraries.newsletter.Newsletter || null;
return (
<>
<Newsletter />
{ /* more stuff */ }
</>
);
};
Newsletter packages can expose actions
This is in case the theme developer want to control the style of the form:
// Theme.
const Newsletter = ({ actions }) => {
return (
<form onSubmit={actions.newsletter.subscribe} >
<Input name="name" />
<Input name="email" />
<SendButton />
<form />
);
};
const Footer = ({ actions }) => {
return (
<>
{ /* Check if there is a newsletter package */ }
{actions.newsletter && <Newsletter />}
</>
);
};
Type of newsletter namespace
This is only a suggestion of how the types could look like.
interface Subscribe {
name?: string;
email: string;
}
interface Newsletter {
state: {
newsletter: {
isSubscribing: false;
}
};
actions: {
newsletter: {
subscribe: AsyncAction<Newsletter, Subscribe>;
}
};
libraries: {
newsletter: {
Newsletter: React.ReactType;
}
}
}
Type of a MailChimp newsletter package
Again, this is only a suggestion.
interface MailChimp extends Newsletter {
state: Newsletter["state"] & {
newsletter: {
apiKey: string;
listId: string;
}
}
}
Then, the actions.newsletter.subscribe method can add those fields before sending the request to the MailChimp server.
Feel free to add your opinion.
cc: @orballo, you’ve worked with a newsletter. Would something like this make sense for you?
