Squashed commit of the following:

commit 41c51304195ba6a9af46659899024eb6eae9987e Author: Alex Vanderbist <[email protected]> Date: Tue Sep 19 16:55:16 2023 +0200 Tweak stacktrace background gradient commit 0be058c410d1b30bae467c83538d1c467865a531 Author: Alex Vanderbist <[email protected]> Date: Mon Sep 18 17:51:15 2023 +0200 Update shared errors docs link commit 32aace41de7accb1bf60f9b58b3302ae0a6f8d53 Author: Alex Vanderbist <[email protected]> Date: Mon Sep 18 14:54:15 2023 +0200 Add footer commit 066e9a220b3fd65f6692081837baab7b576b520f Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 20:30:18 2023 +0200 Open docs and links in new tabs commit 3669b45ba945a2c21dfacfa470ef98f57fb954c0 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 19:19:24 2023 +0200 Use container queries commit e761db2c02b49de67cc1df22c1bea4e68215ba11 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 19:12:18 2023 +0200 Update icon commit 315a160104632264ef6147510b4fade04cb0e271 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 15:04:38 2023 +0200 Fix type error when missing editor options commit b8d35babdbda57f8a645e10cb3f3e31ee7ba4e42 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 15:04:27 2023 +0200 Remove obsolete TailwindCSS plugins commit 8604821f86d364f75074979f6373af1bc5880128 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 15:04:12 2023 +0200 Fix spacing on important navbar items commit 50c100245c5a1c8cd4d800f712703b9a467cf927 Author: Alex Vanderbist <[email protected]> Date: Fri Sep 15 15:03:51 2023 +0200 Move share icon right commit 042293257d8829bd986dad7a7007f2d052a47eb1 Author: Alex Vanderbist <[email protected]> Date: Thu Aug 10 16:08:53 2023 +0200 Test navbar links commit fad23db7907a7d22af4f7a51e8b66617fed5c238 Author: Alex Vanderbist <[email protected]> Date: Thu Aug 10 16:07:45 2023 +0200 Add footer
spatie · Sep 19, 2023 · 1ad1964 · 1ad1964
1 parent d92b9a0
commit 1ad1964
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
         "typecheck": "tsc -w --preserveWatchOutput"
     },
     "dependencies": {
-        "@flareapp/ignition-ui": "^4.9.1",
+        "@flareapp/ignition-ui": "^4.9.4",
         "@fortawesome/fontawesome-common-types": "^6.1.1",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",

diff --git a/resources/css/utilities/theme.css b/resources/css/utilities/theme.css
@@ -162,6 +162,13 @@
     @apply dark:border-gray-500/20;
 }
 
+@layer utilities {
+    .\~border-violet-500 {
+        @apply border-violet-500;
+        @apply dark:border-violet-400/70;
+    }
+}
+
 .\~border-b-dropdown {
     @apply border-b-white !important;
     @apply dark:border-b-gray-700 !important;

diff --git a/resources/js/Ignition.tsx b/resources/js/Ignition.tsx
@@ -17,14 +17,21 @@ import {
 import {IgniteData} from './types';
 import {useInView} from 'react-intersection-observer';
 import AppDebugWarning from 'components/AppDebugWarning';
+import FlareFooter from "components/FlareFooter";
 
 type Props = {
     errorOccurrence: ErrorOccurrence;
     igniteData: IgniteData;
 };
 
-export default function Ignition({errorOccurrence, igniteData}: Props) {
-    const {ref: intersectionRef, inView: errorCardInView} = useInView({
+export default function Ignition({
+    errorOccurrence,
+    igniteData
+}: Props) {
+    const {
+        ref: intersectionRef,
+        inView: errorCardInView
+    } = useInView({
         rootMargin: '-40px 0px 0px 0px',
         threshold: 0.3,
         initialInView: true,
@@ -38,7 +45,7 @@ export default function Ignition({errorOccurrence, igniteData}: Props) {
                         <InViewContextProvider>
                             <NavBar showException={!errorCardInView}/>
                             <main
-                                className="mx-auto my-20 px-6 lg:px-10 max-w-4xl lg:max-w-[90rem] grid grid-cols-1 gap-10"
+                                className="mx-auto mt-20 mb-10 px-6 lg:px-10 max-w-4xl lg:max-w-[90rem] grid grid-cols-1 gap-10"
                             >
                                 <AppDebugWarning/>
 
@@ -51,6 +58,8 @@ export default function Ignition({errorOccurrence, igniteData}: Props) {
                                 <Section name="context" children={<Context/>}/>
 
                                 {hasDebugInfo(errorOccurrence) && <Section name="debug" children={<Debug/>}/>}
+
+                                <Section name="flare" children={<FlareFooter />}/>
                             </main>
                         </InViewContextProvider>
                     </ErrorOccurrenceContext.Provider>

diff --git a/resources/js/components/AppDebugWarning.tsx b/resources/js/components/AppDebugWarning.tsx
@@ -30,7 +30,6 @@ export default function AppDebugWarning() {
                     <a
                         className="mt-1.5 underline inline-flex items-center gap-2"
                         target="_blank"
-                        rel="noopener"
                         href="https://flareapp.io/docs/ignition-for-laravel/security"
                     >
                         <FontAwesomeIcon icon={faShieldAlt} className="text-sm opacity-50" />

diff --git a/resources/js/components/FlareFooter.tsx b/resources/js/components/FlareFooter.tsx
@@ -0,0 +1,69 @@
+import { FlareIcon } from '@flareapp/ignition-ui';
+import React from 'react';
+
+export default function FlareFooter() {
+    return (
+        <footer>
+            <div
+                className="@container relative isolate overflow-hidden bg-gray-900 py-8 sm:py-20 shadow-2xl rounded-lg px-6 sm:px-24 | flex justify-center">
+                <div className="@4xl:grid @4xl:grid-cols-[max-content,12rem] gap-x-16 xl:gap-x-24">
+                    <div>
+                        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+                            <span className="bg-gradient-to-br to-[#ab90e5] from-[#d4c0ff] bg-clip-text text-transparent">Flare</span> is your error page for production.
+                        </h2>
+                        <p className="mt-6 max-w-xl text-lg leading-8 text-gray-300">
+                            Start seamlessly tracking errors in your Laravel applications within minutes. Designed
+                            specifically for Laravel, Flare offers unmatched error monitoring for your applications.
+                        </p>
+                        <div className="mt-10 flex flex-wrap items-center justify-start gap-x-6">
+                            <a
+                                href="#"
+                                className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                            >
+                                Learn more <span aria-hidden="true">→</span>
+                            </a>
+                            <span className="text-sm font-semibold leading-6 py-2 text-white">
+                            Use code <code>IGNITION</code> for 50% off your first month.
+                        </span>
+                        </div>
+                    </div>
+                    <div className="hidden @4xl:block relative">
+                        <FlareIcon className="ml-0 absolute left-0 -top-6 h-[170%] w-auto opacity-90" />
+                        <FlareIcon className="ml-0 absolute left-0 -top-6 h-[170%] w-auto opacity-50 blur-[10px]" />
+                    </div>
+                </div>
+
+                <svg
+                    viewBox="0 0 1024 1024"
+                    className="absolute left-0 -top-32 -z-10 h-[75rem] w-[75rem] -translate-x-1/2 -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
+                    aria-hidden="true"
+                >
+                    <circle cx={512} cy={512} r={512}
+                            fill="url(#purple-grad)"
+                            fillOpacity="0.6"/>
+                    <defs>
+                        <radialGradient id="purple-grad">
+                            <stop stopColor="#906ED8"/>
+                            <stop offset={1} stopColor="#906ED8"/>
+                        </radialGradient>
+                    </defs>
+                </svg>
+                <svg
+                    viewBox="0 0 1024 1024"
+                    className="absolute right-0 -bottom-32 -z-10 h-[75rem] w-[75rem] translate-x-1/2 translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
+                    aria-hidden="true"
+                >
+                    <circle cx={512} cy={512} r={512}
+                            fill="url(#green-grad)"
+                            fillOpacity="0.6"/>
+                    <defs>
+                        <radialGradient id="green-grad">
+                            <stop stopColor="#41D591"/>
+                            <stop offset={1} stopColor="#41D591"/>
+                        </radialGradient>
+                    </defs>
+                </svg>
+            </div>
+        </footer>
+    )
+}
diff --git a/resources/js/components/NavBar.tsx b/resources/js/components/NavBar.tsx
@@ -104,6 +104,18 @@ export default function NavBar({ showException }: Props) {
                                 />
                             )}
 
+                            <NavBarItem
+                                name="flare"
+                                href="https://flareapp.io/?utm_campaign=ignition&utm_source=ignition"
+                                icon={<svg viewBox="0 0 36 56" fill="currentColor" className="h-[.9rem] -top-[.1rem] inline-block">
+                                    <path d="M 11.995 55.987 L 0 48.993 L 0 35 L 11.967 41.994 L 11.995 55.987 Z"/>
+                                    <path d="M 11.967 41.993 L 0 34.999 L 11.995 28 L 23.989 34.999 L 11.967 41.993 Z"/>
+                                    <path d="M 11.995 27.987 L 0 20.987 L 0 7 L 12.062 14.022 L 11.995 27.987 Z"/>
+                                    <path d="M 23.978 20.981 L 0 6.999 L 11.995 0 L 36 13.981 L 23.978 20.981 Z"/>
+                                </svg>}
+                            />
+                        </ul>
+                        <ul className="-mr-3 sm:-mr-5 grid grid-flow-col justify-end items-center">
                             {ignitionConfig.enableShareButton && (
                                 <NavBarItem
                                     navRef={shareRef}
@@ -116,8 +128,7 @@ export default function NavBar({ showException }: Props) {
                                     <ShareDropdown isOpen={isShareDropdownOpen} />
                                 </NavBarItem>
                             )}
-                        </ul>
-                        <ul className="-mr-3 sm:-mr-5 grid grid-flow-col justify-end items-center">
+
                             {docs && (
                                 <NavBarItem
                                     name="docs"
@@ -128,7 +139,6 @@ export default function NavBar({ showException }: Props) {
                                             icon={docs.type === 'laravel' ? faLaravel : faPhp}
                                         />
                                     }
-                                    iconOpacity="opacity-80"
                                     important={docs.tailored}
                                 />
                             )}

diff --git a/resources/js/components/NavBarItem.tsx b/resources/js/components/NavBarItem.tsx
@@ -41,6 +41,7 @@ export default function NavBarItem({
                     className={`
                     group px-3 sm:px-5 h-10 uppercase tracking-wider text-xs font-medium
                     hover:text-red-500
+                    ${important ? 'mr-2' : ''}
                     ${last(inView) === name ? 'text-red-500' : ''}
                 `}
                 >

diff --git a/resources/js/components/SettingsDropdown.tsx b/resources/js/components/SettingsDropdown.tsx
@@ -108,7 +108,8 @@ export default function SettingsDropdown({ isOpen }: Props) {
                     <h4 className="whitespace-nowrap font-semibold">Ignition Settings</h4>
                     <a
                         className="text-xs ~text-gray-500 hover:text-red-500 flex items-center underline transition-colors"
-                        href="https://flareapp.io/ignition"
+                        href="https://flareapp.io/ignition?utm_campaign=ignition&utm_source=ignition"
+                        target="_blank"
                     >
                         Docs
                         <IgnitionIcon />

diff --git a/resources/js/components/ShareDropdown.tsx b/resources/js/components/ShareDropdown.tsx
@@ -65,18 +65,18 @@ export default function ShareDropdown({ isOpen }: Props) {
 
     return (
         <div
-            className={`block absolute mt-2 top-10 left-1/2 transform -translate-x-6 transition-all duration-150 origin-top-left
+            className={`block absolute mt-2 top-10 right-1/2 transform translate-x-8 transition-all duration-150 origin-top-right
                  ${isOpen ? '' : 'opacity-0 pointer-events-none scale-90'}`}
         >
-            <div className="flex px-4 justify-start">
+            <div className="flex px-4 justify-end">
                 <div className="w-0 h-0 border-[10px] border-t-0 border-transparent ~border-b-dropdown" />
             </div>
             <div className="flex flex-col gap-6 ~bg-dropdown px-10 py-8 shadow-2xl">
                 <div className="flex items-center justify-between gap-6">
                     <h4 className="whitespace-nowrap font-semibold">Share with Flare</h4>
                     <a
                         className="text-xs ~text-gray-500 hover:text-violet-500 flex items-center underline transition-colors"
-                        href="https://flareapp.io/docs/ignition-for-laravel/sharing-errors"
+                        href="https://flareapp.io/docs/ignition/introducing-ignition/sharing-errors?utm_campaign=ignition&utm_source=ignition"
                         target="_blank"
                     >
                         Docs

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,11 @@ module.exports = {
     // important: true,
     theme: {
         extend: {
+            colors: {
+                'gray': {
+                    25: 'rgb(252, 252, 253)',
+                }
+            },
             gridTemplateColumns: {
                 'auto-1fr': 'auto 1fr'
             },