Skip to content
This repository has been archived by the owner on Mar 6, 2024. It is now read-only.

Commit

Permalink
add newsletter
Browse files Browse the repository at this point in the history
  • Loading branch information
@hlassiege
hlassiege committed Feb 18, 2024
1 parent 27ea868 commit d5218a6
Show file tree
Hide file tree
Showing 5 changed files with 255 additions and 101 deletions.
197 changes: 96 additions & 101 deletions components/TheFooter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,106 @@
<template>
<footer class="lg:mt-40 border-t border-t-2">
<div class="flex flex-col items-center mt-16">
<div class="flex mb-3 space-x-4">
<a
aria-label="Open RSS feed"
target="_self"
:href="siteMetadata.rss"
class="text-sm text-gray-500 transition hover:text-gray-600"
>
<img
alt="Icon for RSS feed"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/rss.svg"
/>
</a>
<a
aria-label="Open Youtube profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="me"
:href="siteMetadata.youtube"
><span class="sr-only">Youtube</span>
<img
alt="Icon for Youtube"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/youtube.svg"
/>
</a>
<a
aria-label="Open Mastodon profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="me"
:href="siteMetadata.mastodon"
><span class="sr-only">Mastodon</span>
<img
alt="Icon for Mastodon"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/mastodon.svg"
/>
</a>
<a
aria-label="Open github profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="nofollow noopener noreferrer"
:href="siteMetadata.github"
><span class="sr-only">github</span>
<img
alt="Icon for Github"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/github_new.svg"
/> </a
><a
aria-label="Open linkedin profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="noopener noreferrer"
:href="siteMetadata.linkedin"
><span class="sr-only">Linkedin</span>
<img
alt="Icon for Linkedin"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/linkeding.svg"
/>
</a>
<a
aria-label="Open twitter profile"
target="_blank"
rel="nofollow noopener noreferrer"
:href="siteMetadata.twitter + siteMetadata.twitter_user"
class="text-sm text-gray-500 transition hover:text-gray-600"
>
<img
alt="Icon for Twitter"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/twitter.svg"
/>
</a>
</div>
<div
class="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400"
>
<div>Copyright © {{ new Date().getFullYear() }}</div>
<div>•</div>
{{ siteMetadata.title }} - {{ siteMetadata.slogan }}
</div>
<div class="text-sm text-gray-500">
Credits to www.freepik.com -
<a href="https://www.freepik.com/vectors/citizen"
>Citizen vector created by freepik -
</a>
<a href="https://www.freepik.com/vectors/css"
>Css vector created by vectorjuice</a
<div
class="max-w-6xl mx-auto grid grid-cols-1 gap-4"
:class="newsletterEnabled ? 'md:grid-cols-2' : 'md:grid-cols-1'"
>
<div class="flex flex-col items-center mt-16">
<div class="flex mb-3 space-x-4">
<a
aria-label="Open RSS feed"
target="_self"
:href="siteMetadata.rss"
class="text-sm text-gray-500 transition hover:text-gray-600"
>
<img
alt="Icon for RSS feed"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/rss.svg"
/>
</a>
<a
aria-label="Open Youtube profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="me"
:href="siteMetadata.youtube"
><span class="sr-only">Youtube</span>
<img
alt="Icon for Youtube"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/youtube.svg"
/>
</a>
<a
aria-label="Open Mastodon profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="me"
:href="siteMetadata.mastodon"
><span class="sr-only">Mastodon</span>
<img
alt="Icon for Mastodon"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/mastodon.svg"
/>
</a>
<a
aria-label="Open github profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="nofollow noopener noreferrer"
:href="siteMetadata.github"
><span class="sr-only">github</span>
<img
alt="Icon for Github"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/github_new.svg"
/> </a
><a
aria-label="Open linkedin profile"
class="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank"
rel="noopener noreferrer"
:href="siteMetadata.linkedin"
><span class="sr-only">Linkedin</span>
<img
alt="Icon for Linkedin"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/linkeding.svg"
/>
</a>
<a
aria-label="Open twitter profile"
target="_blank"
rel="nofollow noopener noreferrer"
:href="siteMetadata.twitter + siteMetadata.twitter_user"
class="text-sm text-gray-500 transition hover:text-gray-600"
>
<img
alt="Icon for Twitter"
class="transition-transform hover:scale-110 w-8 h-8"
src="~assets/icon/twitter.svg"
/>
</a>
</div>
<div
class="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400"
>
<div>Copyright © {{ new Date().getFullYear() }}</div>
<div>•</div>
{{ siteMetadata.title }} - {{ siteMetadata.slogan }}
</div>
</div>
<Newsletter />
</div>
</footer>
</template>

<script>
<script setup lang="ts">
import { ref } from "vue";
import siteMetaInfo from "@/data/siteMetaData";
export default {
data() {
return {
siteMetadata: siteMetaInfo,
};
},
};
const siteMetadata = ref(siteMetaInfo);
const config = useRuntimeConfig();
const newsletterEnabled = config.public.newsletter.enabled;
</script>
64 changes: 64 additions & 0 deletions components/content/Newsletter.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<div v-if="newsletterEnabled" class="justify-center items-center flex mt-6">
<div class="border-2 border-gray-200 bg-amber-100 rounded-lg p-8">
<span class="font-bold text-xl mb-8 mt-6">
Subscribe to get the latest posts by email.
</span>
<p v-if="error" class="text-red-500 text-xs italic mb-2">
Subscription failed. Please retry later
</p>
<p v-if="success" class="text-green-500 text-xs italic mb-2">
You have successfully subscribed
</p>

<form :action="formAction" method="post" target="_blank">
<input
v-model="email"
name="fields[email]"
autocomplete="email"
type="email"
placeholder="Your email"
class="mt-6 p-2 text-gray-700 w-full"
required
/>
<input type="hidden" name="ml-submit" value="1" />
<input type="hidden" name="anticsrf" value="true" />

<button
class="mt-4 mb-2 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded"
@click.prevent="subscribe"
>
Subscribe
</button>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const config = useRuntimeConfig();
const newsletterEnabled = config.public.newsletter.enabled;
const formAction = config.public.newsletter.form_action;
const email = ref("");
const success = ref(false);
const error = ref(false);
async function subscribe() {
const formData = new FormData();
formData.append("fields[email]", email.value);
formData.append("ml-submit", "1");
formData.append("anticsrf", "true");
const response = await fetch(formAction, {
method: "POST",
body: formData,
});
email.value = "";
if (response.ok) {
success.value = true;
} else {
error.value = true;
}
}
</script>
80 changes: 80 additions & 0 deletions content/articles/2024/02/add-newsletter-static-website.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
id: "35"
title: "Profiter de son flux RSS pour créer une newsletter"
description: "Comment utiliser son flux RSS pour créer une newsletter sur un site statique."
tags: []
date: "2024-02-16"
cover: "/add-newsletter-static-website/postier.jpg"

language: "fr"
---


Vous vous doutez bien si vous lisez ce blog, j'aime ce format.
L'écrit a pour moi toujours sa place et je lis personnellement des tonnes de billets de blog.

Cependant, je rate également beaucoup d'articles de qualité. Il y a très longtemps j'utilisais [Google Reader](https://en.wikipedia.org/wiki/Google_Reader) qui me permettait de ne rien louper de mes blogs préférés.

Et puis Google Reader a rejoint le [cimetière des applications tuées par Google](https://killedbygoogle.com/) en 2013. Snif.

Je n'ai pas vraiment remplacé cette application en tant que tel. J'aurais pu, il y a désormais feedbly, flipboard et plein d'autres apps équivalentes.

Mais mes habitudes ont changé.

J'aime qu'on me recommande du contenu :

- je regarde plus de vidéos youtube qu'avant, que je découvre directement sur la page d'acceuil (je vous invite d'ailleurs à découvrir [la chaine eventuallycoding](https://youtube.com/@eventuallycoding))
- je suis les recommandations qui me sont faites sur Medium

Mais surtout, je me suis inscrit sur de nombreuses newsletters (codrops, pragmatic engineer, leaddev, SWLW etc...).

Par contre jusqu'ici, pour les petits blogs, qui, comme le mien, ont décidé de ne pas donner leur contenu à Medium ou Substack, je comptais un peu sur la chance pour les découvrir via un Tweet ou un Toot.

Parce que, très souvent, ces petits blogs ont deux défauts :
1. ils n'ont pas mis en place de flux RSS
2. ce sont des sites statiques qui ne proposent pas d'inscription à une newsletter

Eh bien je vous propose de découvrir comment remédier à ces deux points. Et n'hésitez pas à renvoyer les auteurs de vos blogs favoris vers ce billet s'ils n'ont toujours pas de flux RSS :)

## Un flux RSS ?

Un flux RSS reprend l'historique des publications d'un blog dans un fichier xml. Sur ce blog par exemple, il est disponible sur /rss.xml.

Ce flux peut être facilement exploité par une application comme feedly ou mailbrew par exemple.

Vous avez un blog, mais pas de flux RSS ?

Aahhh ! S'il vous plait, rajoutez en un. Ca vous coute rien.

Si vous utilisez wordpress, le flux RSS est en principe sur https://monsitewordpress.com/feed.

Si vous utilisez un générateur de site statique, il faut l'activer via des plugins, des modules ou un peu de dev supplémentaire :

- [hugo](https://gohugo.io/templates/rss/)
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/)
- [Jekyll](https://github.com/jekyll/jekyll-feed)

Pour Nuxt-content, [vous pouvez regarder ce que j'ai fait sur github](https://github.com/hlassiege/bloggr/blob/main/server/routes/rss.xml.ts).

## RSS vers email

Vous allez me dire, "oui, mais le reflexe des lecteurs de blogs aujourd'hui n'est plus d'utiliser un flux RSS"

Certes, c'est un peu vrai. Mais, vous pouvez vous en servir pour proposer une newsletter ! Le fameux "Si tu ne viens pas à Lagardère, Lagardère ira à toi !"

Parce que si vos lecteurs n'utilisent pas d'outils de suivi RSS, vous pouvez leur proposer l'inscription à une newsletter.

Bien sûr, je sais que si vous avez choisi d'utiliser un générateur de site statique, vous ne pouvez pas déclencher des envois d'emails à vos utilisateurs. Mais vous pouvez utiliser une application de RSS to email qui va parcourir à intervalles réguliers votre flux RSS pour envoyer les nouvelles entrées du flux aux personnes qui le souhaitent.

C'est l'approche que j'utilise désormais pour ce blog via [Mailerlite](https://www.mailerlite.com/), dont l'usage s'est avéré peu complexe. Le plus complexe a été le fait d'avoir une adresse email d'envoi pro. C'est-à-dire que désormais la plupart des outils permettant l'envoi d'email vous demanderont une adresse associée à un domaine que vous possédez, sinon vos emails vont très probablement finir en spam.

Je vous passe la procédure d'inscription de Mailerlite, l'idée, c'est de comprendre le fonctionnement, mais après, vous pouvez en essayer d'autres qui proposent la même fonctionnalité.

Une fois inscrit, il faudra créer un formulaire d'abonnement à la newsletter. Ce formulaire sera directement intégré ensuite sur votre site.
Enfin, la dernière étape consiste à créer une campagne "RSS to email". Vous allez devoir indiquer l'adresse de votre flux RSS, et le tour est joué.

Et voilà, vous avez maintenant une newsletter pour votre blog statique, qui utilise votre flux RSS et qui va donc permettre d'envoyer un email à chaque nouvelle publication à ceux qui le souhaitent.

Et si vous souhaitez vous inscrire à la newsletter de ce blog, c'est juste ici :

:newsletter
15 changes: 15 additions & 0 deletions nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ export default defineNuxtConfig({
},
},

runtimeConfig: {
public: {
newsletter: {
enabled: true,
form_action:
"https://assets.mailerlite.com/jsonp/824357/forms/113155364217685975/subscribe",
},
},
},

css: ["@/assets/css/main.css", "@/assets/scss/main.scss"],
modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxt/image"],
image: {
Expand All @@ -35,4 +45,9 @@ export default defineNuxtConfig({
routes: ["/sitemap.xml", "/rss.xml"],
},
},
vue: {
compilerOptions: {
isCustomElement: (tag) => ["hyvor-talk-comments"].includes(tag),
},
},
});
Binary file added public/images/add-newsletter-static-website/postier.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d5218a6

Please sign in to comment.