Post data to a PHP endpoint and dynamically display a response with Alpine.js
<html x-data="utility">
<!-- ... -->
const rasterGlobe = (limit = 1000, x1 = -180, y1 = -180) => { | |
type Coordinates = { x: number; y: number }; | |
let base = Math.pow(limit, 1 / 2); | |
let root = Math.floor(base); | |
let data: Array<Coordinates> = []; | |
const rasterLine = (x2: number) => { | |
for (let i = 0; i < root; i++) { | |
let y = y1 + ((y1 * -2) / (root - 1)) * i; |
/** | |
* @param {object} night Configure night mode controls and targets. | |
* @param {string} night.mount Mount theme class to single given DOM element. | |
* @param {string} night.targets Match control targets using `querySelectorAll()`. | |
* @param {string} [night.theme] Set optional theme name to be mounted. Default: night. | |
* @param {function} [night.callback] Optional callback triggered on target interaction. | |
* @return {object} Current theme state and targeted DOM elements. | |
*/ | |
const night = ({ mount, targets, theme = "night", callback }) => { |
format = """ | |
$directory\ | |
[](fg:#313244 bg:#45475a)\ | |
$git_branch\ | |
$git_status\ | |
[](fg:#45475a bg:#585b70)\ | |
$nodejs\ | |
$rust\ | |
$golang\ | |
$php\ |
<?php | |
$response = (object) []; | |
$json = json_decode(file_get_contents('php://input')); | |
//... | |
if (!$json) { | |
$response->state = [ | |
'code' => 400, |
<?php | |
$response = new \stdClass(); | |
$response->state = [ | |
'code' => 200, | |
'type' => 'success', // Can be used for CSS indicators classes such as `.is-[type]` | |
'message' => 'Your data has ben successfully submitted.' | |
]; |
// Transform a ISO 8601 format date string to a given locale ―――――――――――――――― // | |
const date = (input, locale = "de-DE", options = { dateStyle: "long" }) => { | |
const date = Date.parse(input); | |
return new Intl.DateTimeFormat(locale, options).format(date); | |
}; | |
// Mount, toggle and store dark mode theme on client ―――――――――――――――――――――――― // | |
/** | |
* @param {object} night Configure night mode controls and targets. | |
* @param {string} night.mount Mount theme class to single given DOM element. |
const scrollVideo = (media, threshold = 1) => { | |
const video = document.querySelector(media); | |
const target = video.parentNode; | |
const scrollDistance = target.clientHeight - window.innerHeight; | |
let observer = new IntersectionObserver( | |
(entries, observer) => { | |
entries.forEach((entry) => { | |
if (entry.isIntersecting) { |
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; | |
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; | |
import { | |
AnimationMixer, | |
Clock, | |
Color, | |
DirectionalLight, | |
HemisphereLight, | |
PerspectiveCamera, |
# https://github.com/nvm-sh/nvm | |
export NVM_DIR="$HOME/.nvm" | |
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" | |
# https://github.com/zsh-users/zsh-autosuggestions | |
source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh | |
# https://starship.rs/ | |
eval "$(starship init zsh)" |