Skip to content

Instantly share code, notes, and snippets.

View ChangoMan's full-sized avatar
🇨🇳
Sabbatical in Asia

Hunter Chang ChangoMan

🇨🇳
Sabbatical in Asia
View GitHub Profile
@ChangoMan
ChangoMan / EditAccount.tsx
Last active September 2, 2023 13:27
Next.js Client Component consuming a Server Action
'use client'
import { Button } from '@/components/ui/button'
import { useCallback, useState } from 'react'
import { updateAccount } from '../actions'
type Profile = {
avatarUrl: string
email?: string
fullName: string
userId: string
@ChangoMan
ChangoMan / actions.ts
Created September 2, 2023 13:21
Next.js Server Actions that Updates Supabase Database
'use server'
import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers'
export const updateAccount = async (formData: FormData, userId: string) => {
try {
const full_name = formData.get('full-name')
const username = formData.get('username')
@ChangoMan
ChangoMan / layout.tsx
Created August 21, 2023 06:07
Next.js App Router Metadata Object
const meta = {
title: 'Travel x Family',
description:
'Travel x Family is a family friendly travel blog with an emphasis on food and adventure!',
image: `${WEBSITE_HOST_URL}/og-preview.jpg`,
}
export const metadata: Metadata = {
title: {
template: '%s - Travel x Family',
@ChangoMan
ChangoMan / sitemap.ts
Created August 21, 2023 06:05
Next.js App Router Sitemap.js
import { MetadataRoute } from 'next'
import { getAllArticles } from '@/lib/articles'
const WEBSITE_HOST_URL = process.env.SITE_URL || 'https://travelxfamily.com'
type changeFrequency =
| 'always'
| 'hourly'
| 'daily'
| 'weekly'
import React, { useReducer } from "react";
/* Page With Chart Data */
const pageWithChartState = {
loading: false,
error: false,
chartData: [],
filters: null
};
function pageWithChartReducer(state, action) {
@ChangoMan
ChangoMan / slack-dark.txt
Created September 4, 2018 13:29
Slack Dark
Slack Dark
(From Mac root) Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static
Edit file ssb-interop.js
Append this to bottom of file:
document.addEventListener('DOMContentLoaded', function() {
$.ajax({
git clone https://github.com/ChangoMan/Preact-Workbox.git preact-demo
cd preact-demo
npm install
npm run dev
# Navigate to http://localhost:8080 in your browser
// Default Precache for files generated by Preact.js
workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
// Detect and register any fetch calls using 'https://' and use the Network First Strategy by Workbox
workbox.routing.registerRoute(/(?:https:\/\/.*)/,workbox.strategies.networkFirst());
// Handle any images
workbox.routing.registerRoute(
// Cache image files
/.*\.(?:png|jpg|jpeg|svg|gif)/,
import { h, Component } from "preact";
import style from "./style";
const apiKey = "YOUR_NEWS_API_KEY";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", arial, sans-serif;
font-weight: 400;
color: #444;