nicooprat

/**
 * Prefetch pages to make navigation faster (from route to route)
 * Monkey patch router-link to trigger async import when the link is in the viewport
 * Use a queue & requestIdleCallback to prevent browser from freezing
 * Install in Vue 3 with `import prefetch from './prefetch` then `app.use(prefetch)`
 * */

import { watchPausable } from '@vueuse/core';
import { ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';

nicooprat

const mailjet = nodeMailjet.connect(process.env.MAILJET_PUBLIC, process.env.MAILJET_PRIVATE)

// Send through Mailjet
mailjet.post('send', { version: 'v3.1' }).request({
  Messages: [{
    From: {
      Email: sender.email,
      Name: sender.name,
    },
    Subject: i18n.t('emails.a1.subject', { app: config.app }),

nicooprat

const mjml2html = require('mjml')

renderer.renderToString(app, (err, mjml) => {
  if (err) throw err

  // Remove illegal MJML attribute added by Vue to avoid warnings
  mjml = mjml.replace('data-server-rendered="true"', '')

  // Compile MJML to raw HTML
  const { html, errors } = mjml2html(mjml)

nicooprat

<template>
  <router-link v-for="(action, i) in actions" :key="i" :to="action.href" v-slot="{ href }">
    <mj-button :href="getAbsoluteURL(href)" font-family="Roboto, sans-serif" font-size="14px" :font-weight="action.type === 'primary' ? 'bold' : 'normal'" :background-color="action.type === 'primary' ? '#0072f0' : '#ffffff'" :color="action.type === 'primary' ? '#ffffff' : '#36404d'" padding-bottom="15px">
      {{ action.label }}
    </mj-button>
  </router-link>
</template>

<script>
  const app = new Vue({

nicooprat

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image v-if="image" width="100px" :src="image"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text :font-size="large ? '20px' : '16px'" color="#F45E43" font-family="helvetica">{{ text }}</mj-text>
        <mj-button v-for="action in actions" :key="i" :href="action.href">
          {{ action.label }}
        </mj-button>

nicooprat

const serverRenderer = require('vue-server-renderer')
const fs = require('fs')
const path = require('path')

// Don't need to create Vue components for MJML ones
Vue.config.ignoredElements = ['mjml', /^mj-/]

// Create a Vue instance
const app = new Vue({
  template: fs.readFileSync(path.resolve('./mjml.vue'), 'utf8'),

nicooprat

// Setting variables like this wouldn't be possible because SASS would 
// get through this file before Tailwind does (because it's PostCSS)

$--color-primary: theme('colors.blue');
$--font-serif: theme('fontFamily.serif');
  
body {
  color: rgba($--color-primary, .5);
  font-family: $font-serif;
}

nicooprat

const { BugsnagBuildReporterPlugin, BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins')

module.exports = {
  ...
  build: {
    extend (config, { isDev, isClient }) {
      if (!isDev && isClient) {
        config.devtool = '#source-map'
        config.plugins.push(
          new BugsnagBuildReporterPlugin({

nicooprat

function my_acf_block_render_callback( $block ) {
  $slug = str_replace('acf/', '', $block['name']);
  $block['slug'] = $slug;
  $block['classes'] = implode(' ', [$block['slug'], $block['className'], $block['align']]);
  echo \App\template("blocks/${slug}", ['block' => $block]);
}

nicooprat

<?php
  /*
  Title: Témoignage
  Description: test
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote
  */
?>