This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command
$ docker-compose up -d
# To Tear Down
$ docker-compose down --volumes
/** | |
* live demo https://codesandbox.io/p/devbox/confident-bessie-ldx396?file=%2Fsrc%2FApp.tsx%3A1%2C34&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsz5b2c400073j6j1kpfsrwy%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsz5b2c300023j6jd |
import { useEffect, useState } from "react"; | |
/** | |
* This hook runs a callback when a component is mounted. | |
*/ | |
export const useComponentFirstRender = (callback: Function) => { | |
const [isMounted, setIsMounted] = useState(false); | |
useEffect(() => { | |
if (isMounted) { | |
console.log("Component mounted!"); |
# some stuffs | |
sudo apt install -y zsh curl build-essential tmux zip unrar g++ as31 nasm ruby ruby-bundler ruby-dev clang-9 lldb valgrind sqlite3 cmake python3-pip && | |
# install node 16.x | |
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - | |
sudo apt-get install -y nodejs | |
# config npm without sudo | |
mkdir -p ~/.npm-global | |
npm config set prefix ~/.npm-global |
/** | |
* you can call the api route with fetch and will return the base64 blob as json. | |
* you can use it on a <img /> tag like so: | |
*/ | |
import { useEffect, useState } from 'react'; | |
export const WebScreenshot = ({ url }) => { | |
const [data, setData] = useState(null); | |
useEffect(() => { | |
fetch(`/api/get-screenshot${url ? `?url=${url}` : ''}`) |
/** | |
* @description _middleware es un objeto con funciones | |
* útiles para user dentro de api routes de nextjs | |
*/ | |
export const _middleware = { | |
/** | |
* @description Si esta función es llamada como primera linea | |
* dentro de un método "handler" en una ruta api de nextjs, | |
* su finalidad es ejecutar tantos middlewares como sea posible | |
* antes de la ejecución del resto de la función. |