README

除了添加星号外，您还可以使用HTML <span>标签和内联CSS样式来着色高亮文本。以下是着色和突出显示文本的修改内容

Proton Auth Context Package

这是一个使用Proton提供认证上下文功能的Laravel包。它允许您轻松地将Proton登录功能集成到您的Laravel应用程序中。

安装

1. 运行以下命令安装包

   composer require home-bloks/proton-auth-context

2. 运行Proton认证命令

   php artisan proton:auth

3. 安装所需的npm包

   npm install

4. 编译资源

   npm run dev

配置

1. 更新您的vite.config.js文件，添加以下代码

   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. 更新您的根JavaScript文件（例如App.jsx、app.jsx、Main.jsx）以下代码

   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. 根据您的需求自定义代码。

4. 在</head>标签关闭之前添加以下代码到您的页眉中

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

   注意：确保@vite('resources/js/app.jsx')文件与您更新的根JavaScript文件匹配。

5. 将以下代码放置在您想要添加ProtonLoginButton组件的位置

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

   您可以根据根JavaScript文件中的设置更改id属性。

在修改后的内容中，高亮文本由双星号（**）表示，着色文本用带有内联CSS样式的<span>标签包裹（style="color: <color>";）。通过将<color>替换为您希望的颜色（例如red、blue、green等）来调整颜色值。