Tyler Forest-Hauser tylerforesthauser

1. Preparing the server

Install git

sudo apt install git-all

Generate a new deploy key

https://docs.github.com/en/developers/overview/managing-deploy-keys#deploy-keys

Main

EDIT: DO NOT USE THIS. THIS WAS FROM WHEN ALL OF THIS WAS NEW/EXPERIMENTAL AND NOT OFFICIALLY SUPPORTED. PLEASE SEE THE LINK BELOW FOR THE PROPER, EASIER INTEGRATION NOWADAYS =)

https://typescript.nuxtjs.org/examples/composition-api/basic/

Use create-nuxt-app and enable the Typescript related options to scaffold a new boilerplate TS Nuxt repo:

yarn create nuxt-app

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

Alpine calls the beginning and ending states "start" & "end"
Vue calls the beginning and ending states "from" and "to"
Alpine has inline "directives" ie x-transition:enter="classes"
Vue has a wrapper component that applies classes to the child
Alpine applies the classes you pass it for each state, :enter-start="class"

	import { defineStore } from 'pinia'

	export const useAuthStore = defineStore({
	id: 'auth',
	state: () => ({
	isAuthenticated: false,
	user: null
	}),
	actions: {
	async nuxtServerInit() {

	#!/bin/sh
	start=`date +%s.%N`

	SRC_CONNECTION_STRING="postgresql://src_username:src_password@src_host/src_dbname"
	DST_CONNECTION_STRING="postgresql://dst_username:dst_password@dst_host/dst_dbname"

	rm src_schema.sql
	rm src_data.sql
	rm dst_data.sql

	import {LanguageDescription, LanguageSupport} from "@codemirror/language"
	import {languages} from "@codemirror/language-data"
	import {highlightTree} from "@codemirror/highlight"
	import {highlightStyle} from "./highlight-style"

	export function syntaxHighlight(text: string, support: LanguageSupport, callback: (token: {text: string; style: string; from: number; to: number}) => void, options = {match: highlightStyle.match}) {
	let pos = 0;
	let tree = support.language.parseString(text);
	highlightTree(tree, options.match, (from, to, classes) => {
	from > pos && callback({text: text.slice(pos, from), style: null, from: pos, to: from});

	// extensions/hooks/google-recaptcha-v2/index.js
	module.exports = function registerHook({ env, exceptions }) {
	const querystring = require("querystring");
	const axios = require("axios");
	const { BaseException } = exceptions;
	const VERIFY_ENDPOINT = "https://www.google.com/recaptcha/api/siteverify";
	return {
	"auth.login.before": async function (input) {
	const captcha = input["g-recaptcha-response"];
	if (captcha) {

	{
	// Snippits that make working with Twin a little easier
	// https://github.com/ben-rogerson/twin.macro
	"Add react import": {
	"scope": "javascript,typescript,typescriptreact",
	"prefix": "react",
	"body": "import React from 'react'",
	"description": "Add react import"
	},
	"Add twin imports": {

	// store/auth.js

	// reusable aliases for mutations
	export const AUTH_MUTATIONS = {
	SET_USER: 'SET_USER',
	SET_PAYLOAD: 'SET_PAYLOAD',
	LOGOUT: 'LOGOUT',
	}

	export const state = () => ({

	import React from 'react'
	import PropTypes from 'prop-types'
	import { DateTime } from 'luxon'

	const RelativeTime = (props) => {
	const dt = DateTime.fromJSDate(props.time)
	const [relTime, setRelTime] = useState(dt.toRelative())
	const [intervalID, setIntervalID] = useState()

	useEffect(() => {