jbmoelker

const queryDatoGraphQL = require('./query-dato-graphql.js');

module.exports = function (config) {
  // Custom data file formats (https://www.11ty.dev/docs/data-custom/)
  config.addDataExtension(
    'graphql',
    async (query) => await queryDatoGraphQL({ query })
  );

  // Base Config

jbmoelker

/**
 * Nuxt2 DatoCMS Plugin
 *
 * features:
 * - $datocms.fetchData: lightweight isomorphic data fetching of GraphQL queries
 * - $datocms.subscribeToData: real-time data updates using GraphQL queries
 * - $datocms.state: { error, status, statusMessage } for data subscription
 * - $datocms.toHead: alias for vue-datocms' toHead method
 * - <DatocmsImage>: global alias for vue-datocms's Image component
 * - <DatocmsStructuredText>: global alias for vue-datocms's StructuredText component

jbmoelker

<template>
  <ClientOnly v-if="$nuxt.isPreview">
    <div role="alert">
      <span>Preview mode: {{ statusMessage }}</span>
      <button type="button" @click="exitPreview">
        Exit preview
      </button>
    </div>
  </ClientOnly>
</template>

jbmoelker

'use strict';

/**
 * Script converts an animated SVG (`fileIn`) into an animated GIF (`fileOut`)
 * with the given `duration`, `fps`, `width` and `height.
 * This is just a proof-of-concept. Script needs an API etc etc.
 */

// config which should come from cli args
const fileIn = 'animation.svg';

jbmoelker

/**
 * @module limitTo
 *
 * Creates a new array or string containing only a specified number of elements.
 * The elements are taken from either the beginning or the end of the source array
 * or string, as specified by the value and sign (positive or negative) of limit.
 *
 * Same behavior as AngularJS limitTo filter: http://docs.angularjs.org/api/ng/filter/limitTo
 *
 * To use this filter in a template, first register it in the Nunjucks environment:

jbmoelker

Immutable caching of static assets with Express.js and Service Worker

This recipe revisions all asset files in a dist/assets/ directory using gulp-rev. The adds a unique content based hash to each asset file. The pattern of that hash (/.*-[0-9a-f]{10}\..*/) is then used to handle these files in Express.js and the Service Worker. Express.js sets the Cache-Control header to immutable. The Service Worker serves these files directly from cache without ever attempting the server again.

jbmoelker

angular
	.module('directives.viewBox', [])
	.directive('viewBox', [
		/**
		 * @ngdoc directive
		 * @name directives.viewBox.directive:viewBox
		 * @description
		 * Supports using expression for SVG viewBox, by
		 * using `data-view-box` which sets `viewBox` attribute.
		 * Code borrowed from http://stackoverflow.com/a/14596319

jbmoelker

/**
 * HTMLDialogELement
 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
 */
interface HTMLDialogElement extends HTMLElement {
    /**
     * Reflects the open HTML attribute,
     * indicating that the dialog is available for interaction.
     */
    open:boolean;

jbmoelker

import React from 'react';
import Section from './section';

export default App = () => (
  <Section>
    <Section.Header>
      <Section.Title> My Section </Section.Title>
    </Section.Header>
    <Section.Body>
      Any content here

jbmoelker

if ('performance' in window) {
    window.addEventListener('load', function () {
        var paintMetrics = performance.getEntriesByType('paint');
        if (paintMetrics !== undefined && paintMetrics.length > 0){
            console.table(paintMetrics.map(function(metric) {
                return {
                    event: metric.name,
                    startTime: metric.startTime.toFixed(2) + ' ms',
                    duration: metric.duration + ' ms'
                }