Matt Maribojoc mattmaribojoc

making videos and websites nobody asked for

mattmaribojoc / Index.vue

Created September 19, 2021 14:33

	<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 / Post.vue

Created September 19, 2021 14:25

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

	</h3>

mattmaribojoc / Post.vue

Created September 19, 2021 14:21

mattmaribojoc / ColorChange.vue

Created July 14, 2021 17:47

	<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 / FullComponent.vue

Created July 14, 2021 17:45

mattmaribojoc / IntersectionObserver.vue

Created July 14, 2021 17:32

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

	<script>

mattmaribojoc / CustomInput.vue

Created July 14, 2021 15:34

mattmaribojoc / ParentComponent.vue

Created July 14, 2021 15:33

mattmaribojoc / Popup.vue

Created July 13, 2021 20:04

mattmaribojoc / FinishedComponent.vue

Created July 8, 2021 18:24

	<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>

	<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>