mattmaribojoc

<template>
  <Layout>

    <!-- Learn how to use images here: https://gridsome.org/docs/images -->
    <div v-for="post in $page.allPost.edges" :key="post.node.path" class="post-list">
      <h2><router-link :to="post.node.path"> {{ post.node.title }} </router-link></h2>
      <h4>{{ moment(post.node.date).format('MMMM d, YYYY') }}</h4>
      <p>{{ post.node.summary }}</p>
    </div>

mattmaribojoc

<template>
    <Layout>
        <header>
            <h1> {{ $page.post.title }} </h1>
            <h3 class="subheader"> 
                {{ moment($page.post.date).format('MMMM d, YYYY') }} 
                    &middot;
                {{ $page.post.timeToRead }} min. read 
                
            </h3> 

mattmaribojoc

<page-query>
    query Post ($path: String!) {
        post (path: $path) {
            title,
            path,
            date,
            summary,
            tags,
            content,
            timeToRead

mattmaribojoc

<template>
  <h2 :style="{ color: color } "> COLOR CHANGING </h2>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'

const source = ref([0, 0, 0])

mattmaribojoc

<template>
  <h2> 
    <p> Join over </p>
    <p> {{ Math.round(output) }}+ </p>
    <p>Developers </p>
  </h2>
</template>

<script setup>
import { ref } from 'vue'

mattmaribojoc

<template>
  <p> Is target visible? {{ targetIsVisible }} </p>
  <div class="container">
    <div class="target" ref="target">
      <h1>Hello world</h1>
    </div>
  </div>
</template>

<script>

mattmaribojoc

<template>
    <div>
        <input 
            type="text" 
            :value="data"
            @input="update"
        />
    </div>
</template>

mattmaribojoc

<template>
  <div>
    <p> {{ data }} </p>
    <custom-input 
      :data="data" 
      @update:data="data = $event"
    />
  </div>
</template>

mattmaribojoc

<template>
  <button @click="open = true"> Open Popup </button>
  <div class="popup" v-if='open'>
    <div class="popup-content" ref="popup">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?
    </div>
  </div>
</template>

<script setup>

mattmaribojoc

<template>
  <p> 
    <button @click="undo"> Undo </button>
    <button @click="redo"> Redo </button>
  </p>
  <textarea v-model="text"/>
  <ul>
    <li v-for="entry in history" :key="entry.timestamp">
      {{ entry }}
    </li>