wagura-maurice

This gist will guide you through the process of integrating Google ReCaptcha v3 into a Laravel Jetstream w/ Inertia application.

API Keys and Configuration

First, obtain your ReCaptcha v3 API keys from the Google ReCaptcha Admin Console. Add these keys to your .env file:

RECAPTCHA_SITE_KEY=your_site_key_here
RECAPTCHA_SECRET_KEY=your_secret_key_here

Next, update your config/services.php file to include the ReCaptcha configuration. This configuration allows us to access our ReCaptcha keys throughout the application using Laravel's config helper. It keeps our sensitive keys secure by referencing environment variables.

wagura-maurice

mkdir -p /etc/apt/keyrings

wget -O - https://packages.adoptium.net/artifactory/api/gpg/key/public | tee /etc/apt/keyrings/adoptium.asc

echo "deb [signed-by=/etc/apt/keyrings/adoptium.asc] https://packages.adoptium.net/artifactory/deb $(awk -F= '/^VERSION_CODENAME/{print$2}' /etc/os-release) main" | tee /etc/apt/sources.list.d/adoptium.list

apt update 

apt install temurin-8-jdk

wagura-maurice

#!/bin/bash

# 2. Create and lock /etc/resolv.conf early to avoid chattr error
if [ ! -f /etc/resolv.conf ]; then
  echo "📄 Creating /etc/resolv.conf..."
  touch /etc/resolv.conf
fi
if lsattr /etc/resolv.conf | grep -qv 'i'; then
  echo "🔒 Locking /etc/resolv.conf with chattr..."
  chattr +i /etc/resolv.conf

wagura-maurice

# PHP

sudo apt -y -V install wget curl php php8.2-fpm php8.2-cli php8.2-dev php8.2-pgsql \
php8.2-sqlite3 php8.2-gd php8.2-curl php8.2-imap php8.2-mysql \
php8.2-mbstring php8.2-xml php8.2-zip php8.2-bcmath php8.2-soap \
php8.2-intl php8.2-readline php8.2-gmp php8.2-redis php8.2-memcached \
php8.2-msgpack php8.2-igbinary

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

wagura-maurice

// 1. First inject the CSS
const select2CSS = document.createElement('link');
select2CSS.rel = 'stylesheet';
select2CSS.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css';
document.head.appendChild(select2CSS);

// 2. Create our enhanced custom styles
const customStyles = document.createElement('style');
customStyles.textContent = `
/* General Select2 Container */

wagura-maurice

#headlinetext {
  background-color: rgba(236, 43, 247, 0.1) !important;
  border-left: 5px solid #ec2bf7 !important;
  padding: 15px !important;
  font-style: italic;
  color: #f9f9f9 !important;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 5px;
  resize: none;

wagura-maurice

/* ---------------------------------------General Backgrounds----------------------------------------------- */
body {
  background-color: #001b30 !important;
}

.site-bg-primary {
  background-color: #ec2bf7 !important; /* #0b2539; */
}

/* ---------------------------------------home page----------------------------------------------- */

wagura-maurice

/* ---------------------------------------General Backgrounds----------------------------------------------- */
.site-bg-white,
.site-bg-gray {
  background-color: #001b30 !important;
}

.loading-area .loading-box {
  background-color: #f9f9f9 !important;
}

wagura-maurice

#!/bin/bash

# Determine file extension for Vue.js with TypeScript
FILE_EXTENSION=".vue"

# Set up the desired project directory structure for Vue
DIRECTORIES=(
  "src/assets/images"
  "src/assets/styles"
  "src/components/common"

wagura-maurice

#!/bin/bash

# Prompt the user for the application name
echo "Enter your application name:"
read APP_NAME

# Determine file extension for Vue.js with TypeScript
FILE_EXTENSION=".vue"

# Initialize the Vite app using the specified name with the Vue TypeScript template