jakedohm

<template>
  <div class="widget">
    <h2>Find My {{ title }}</h2>
    <div>
      <div v-if="initialState">
        <p class="description">{{ description }}</p>

        <div class="input">
          <!-- Main input -->
          <input

jakedohm

<template>
  <SmoothReflow>
    <div>My height will change at some point, and the SmoothReflow component
      will automatically make sure that it animates</div> 
  </SmoothReflow>
</template>

jakedohm

<template>
  <svg>
    <use :xlink:href="path"></use>
  </svg>
</template>

<script>
export default {
  props: {
    name: String,

jakedohm

<script>
import { usePersistedRef } from "./usePersistentRef";

export default {
  setup() {
    const name = usePersistedRef('name', 'Jake Dohm')
  }
}
</script>

jakedohm

// Import our CSS
import styles from '../css/app.pcss';
import VueConfetti from 'vue-confetti';

// App main
const main = async () => {
    // Async load the vue module
    const { createApp, defineAsyncComponent } = await import(/* webpackChunkName: "vue" */ 'vue');
    // Create our root vue instance
    const root = createApp({

jakedohm

function generateScreens(screenSizes) {
  const getPx = val => `${val}px`
  const screenEntries = Object.entries(screenSizes)

  const minWidthBreakpoints = screenEntries.reduce(
    (acc, [name, width]) => ({
      ...acc,
      [name]: { min: getPx(width) },
    }),
    {},

jakedohm

<!-- Before -->
<div class="-mx-8">
  <div class="px-8">
    <div class="bg-purple">Card #1</div>
  </div>
  <div class="px-8">
    <div class="bg-purple">Card #2</div>
  </div>
</div>

jakedohm

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: value => ['teal', 'orange'].includes(value)
    }
  }
}

jakedohm

/* Apply a default duration to all .transition classes */
[class*="transition"] {
  @apply duration-300;
}

/* Default transition class must come _before_ utilities,
so it can be overridden by any .duration-x utilities */
@tailwind utilities;

jakedohm

- pipeline: "Production"
  trigger_mode: "MANUAL" # this means builds have to be triggered manually and won't be triggered on Push or PR merge
  ref_name: "master"
  ref_type: "BRANCH"
  target_site_url: "https://applause.com"
  variables:
    - key: "APPPATH"
      value: "applications/XXXXXXXXXX/public_html/" # TODO: Input the path on the server to the webroot
      settable: false
      description: "Server path to webroot"