Skip to content

Instantly share code, notes, and snippets.

View nicooprat's full-sized avatar

Nico Prat nicooprat

View GitHub Profile
@nicooprat
nicooprat / prefetch.ts
Last active December 30, 2023 09:54
Vue-router prefetch plugin for router-links (Vue 3)
/**
* 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
nicooprat / mailjet.js
Created June 13, 2020 08:46
Send a mail through Mailjet
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
nicooprat / mjml.js
Last active June 13, 2020 08:40
Render HTML from MJML
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
nicooprat / template.vue
Last active June 13, 2020 08:32
Render absolute path with vue-router
<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
nicooprat / mjml.vue
Last active June 11, 2020 10:16
Example of MJML template with Vue
<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
nicooprat / app.js
Last active June 11, 2020 10:04
Example of vue-server-renderer usage
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
nicooprat / main.scss
Last active March 1, 2024 07:36
Sharing Tailwind config with SASS (Tailwind beta & Tailwind 1.0)
// 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
nicooprat / nuxt.config.js
Created December 18, 2018 12:07
Nuxt, Webpack & Bugsnag
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
nicooprat / custom-callback.php
Created October 22, 2018 17:22
Create an ACF block with Sage 9 & Blade
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
nicooprat / testimonial.php
Last active October 22, 2018 17:46
Custom Gutenberg bloc with bare PHP
<?php
/*
Title: Témoignage
Description: test
Category: formatting
Icon: admin-comments
Keywords: testimonial quote
*/
?>