tprwt/pnkjtesting

Change Page - Change home page

dev-main 2023-06-23 06:16 UTC

Requires

• php: ^8.0

MIT

• karan

README

To colorize the highlighted text in addition to adding the asterisks, you can use HTML <span> tags with inline CSS styles. Here's the modified content with colorized and highlighted text:

Proton Auth Context Package

This is a Laravel package that provides authentication context functionality using Proton. It allows you to easily integrate Proton login functionality into your Laravel application.

Installation

1. Run the following command to install the package:

   composer require home-bloks/proton-auth-context

2. Run the Proton authentication command:

   php artisan proton:auth

3. Install the required npm packages:

   npm install

4. Compile the assets:

   npm run dev

Configuration

1. Update your vite.config.js file by adding the following code:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import react from "@vitejs/plugin-react";
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
           react(),
       ],
   });

2. Update your root JavaScript file (e.g., App.jsx, app.jsx, Main.jsx) with the following code:

   import ReactDOM from "react-dom/client";
   import ProtonLoginButton from "./components/ProtonLoginButton";
   import { AuthContextProvider } from "./store/auth.context.jsx";
   
   ReactDOM.createRoot(document.getElementById("root")).render(
     <>
       <AuthContextProvider>
         <span style="color: red;">**<ProtonLoginButton />**</span>
       </AuthContextProvider>
     </>
   );

3. Customize the code according to your requirements.

4. Add the following code to your header before closing the </head> tag:

   <span style="color: blue;">**@viteReactRefresh**</span>
   <span style="color: blue;">**@vite('resources/js/app.jsx')**</span>

   Note: Make sure the @vite('resources/js/app.jsx') file matches the root JavaScript file you updated.

5. Place the following code where you want to add the ProtonLoginButton component:

   <span style="color: green;">**<div id="root"></div>**</span>

   You can change the id attribute according to your setup in the root JavaScript file.

In the modified content, the highlighted text is denoted by the double asterisks (**), and the colorized text is wrapped in <span> tags with inline CSS styles (style="color: <color>";). Adjust the color values as per your preference by replacing <color> with the desired color (e.g., red, blue, green, etc.).