Add main components for Landing

spa/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+.idea
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+
+# Local env files
+.env
+.env.*
+!.env.example

spa/app.vue

@@ -0,0 +1,5 @@
+<template>
+ <NuxtLayout>
+ <NuxtPage />
+ </NuxtLayout>
+</template>

spa/assets/css/main.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-gray-100 w-full;
+}
+
+.section-title {
+ @apply text-3xl lg:text-5xl leading-none font-extrabold text-blue-800 tracking-tight mb-12;
+}
+
+.section-body {
+ @apply font-medium mb-6 text-xl;
+}
+
+a.text-link {
+ @apply text-blue-700 underline;
+}
+
+.read-more-link {
+ @apply border font-bold px-5 py-2 rounded-full;
+
+ &.gray {
+ @apply bg-gray-100 hover:bg-gray-200 text-gray-800;
+ }
+
+ &.purple {
+ @apply bg-purple-100 hover:bg-purple-200 text-purple-800;
+ }
+
+ &.green {
+ @apply bg-green-100 hover:bg-green-200 text-green-800;
+ }
+
+ &.blue {
+ @apply bg-blue-100 hover:bg-blue-200 text-blue-800;
+ }
+
+ &.small {
+ @apply text-sm px-3 py-1;
+ }
+}
+
+.feature {
+ @apply border p-8 rounded-lg justify-between hover:shadow-xl transition;
+}
+
+.feature-grid {
+ @apply flex flex-col gap-4;
+}
+
+.feature-title {
+ @apply text-lg font-bold text-gray-600;
+}
+
+.feature-text {
+ @apply text-gray-400 font-semibold;
+}

spa/components/v1/CopyCommand.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import copy from 'copy-to-clipboard';
+
+const props = defineProps<{
+ text: string;
+}>();
+
+const copyToClipboard = () => {
+ copy(props.text);
+};
+</script>
+
+<template>
+ <div class="mb-10 flex">
+ <code class="code" @click="copyToClipboard">{{ text }}</code>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.code {
+ @apply overflow-hidden select-all cursor-pointer w-auto bg-gray-50 text-gray-800 font-semibold hover:text-gray-700 font-mono px-3 py-2 border border-gray-200 hover:border-blue-600 rounded-full transition-colors duration-200 text-nowrap break-keep;
+}
+</style>

spa/components/v1/Demo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Frame from "~/components/v1/Demo/BuggregatorFrame.vue";
+import Buttons from "~/components/v1/Demo/Buttons.vue";
+</script>
+
+<template>
+ <div class="demo">
+ <Frame class="relative flex-1"/>
+ <Buttons />
+ </div>
+</template>
+
+<style scoped lang="scss">
+.demo {
+ @apply mt-24 flex gap-0 md:gap-4 mb-24;
+}
+</style>

spa/components/v1/Demo/BuggregatorFrame.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppStore } from "~/stores/app";
+
+const app = useAppStore();
+</script>
+
+<template>
+ <div>
+ <div class="p-0 sticky top-0 h-screen">
+ <div class="flex flex-col items-center">
+ <iframe class="frame" :src="app.buggregator_link" frameborder="0"></iframe>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.frame {
+ @apply w-full h-screen md:shadow-xl md:rounded-r-xl bg-white;
+}
+</style>

spa/components/v1/Demo/Buttons.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+const buttons = [
+ {
+ key: "ray",
+ title: 'spatie/ray package support',
+ description: 'The Ray debug tool supports PHP, Ruby, JavaScript, TypeScript, NodeJS, Go and Bash applications. After installing one of the libraries, you can use the ray function to quickly dump stuff. Any variable(s) that you pass will be sent to the Buggregator.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'Int', 'String', 'Array', 'Bool', 'Object', 'Colors', 'Sizes', 'Labels', 'Caller', 'Trace', 'Counter',
+ 'CounterWithName', 'Limit', 'ClassName', 'Measure', 'Json', 'Xml', 'Carbon', 'File', 'Table', 'Image',
+ 'Html', 'Text', 'Hide', 'Notify', 'Phpinfo', 'Exception', 'Markdown',
+ ]
+ },
+ {
+ group: 'laravel',
+ actions: [
+ 'ShowQueries', 'CountQueries', 'ManuallyShowedQuery', 'ShowEvents', 'ShowJobs', 'ShowCache',
+ 'ShowHttpClientRequests', 'HandlingModels', 'Mailable', 'ShowViews', 'Collections', 'StrString',
+ 'Env',
+ ]
+ },
+
+ {
+ group: 'logs',
+ actions: [
+ 'Debug', 'Info', 'Warning', 'Error', 'Critical', 'Notice', 'Alert', 'Emergency', 'Exception',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/ray.html',
+ },
+ {
+ key: "profiler",
+ title: 'xhprof PHP Profiler',
+ description: 'Pinpoint performance bottlenecks in your PHP applications. This lightweight profiler provides essential insights to optimize your code for better efficiency and speed.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'Report',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/xhprof.html'
+ },
+ {
+ key: "sentry",
+ title: 'Sentry Integration.',
+ description: 'Use Buggregator as a local alternative to Sentry for catching exceptions.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'Report',
+ 'Event'
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/sentry.html',
+ },
+ {
+ key: "monolog",
+ title: 'monolog/monolog package support',
+ description: 'Analyze logs from your PHP application.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'Debug',
+ 'Info',
+ 'Warning',
+ 'Error',
+ 'Critical',
+ 'Notice',
+ 'Alert',
+ 'Emergency',
+ 'Exception',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/monolog.html',
+ },
+ {
+ key: "smtp",
+ title: 'SMTP Server',
+ description: 'Test email functionalities within your applications without relying on external email servers.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'OrderShipped',
+ 'WelcomeMail',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/smtp.html',
+ },
+ {
+ key: "var_dump",
+ title: 'symfony/var-dumper server.',
+ description: 'The dump() and dd() functions display their output in the same browser window or console terminal as your application, which can sometimes lead to confusion by mixing real and debug outputs. To avoid this, the Buggregator is used to collect all dumped data separately.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'String',
+ 'Array',
+ 'Bool',
+ 'Int',
+ 'Object',
+ 'Exception',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/var-dumper.html',
+ },
+ {
+ key: "inspector",
+ title: 'inspector.dev Integration',
+ description: 'A handy feature for local development, ensuring swift issue identification and resolution.',
+ events: [
+ {
+ group: 'common',
+ actions: [
+ 'Request',
+ 'Command',
+ ]
+ }
+ ],
+ docs: 'https://docs.buggregator.dev/config/inspector.html',
+ },
+]
+
+const callAction = (section: string, group: string, action: string) => {
+ const event = `${section}.${group}.${action}`;
+ console.log(`Triggered event: ${event}`);
+}
+</script>
+
+<template>
+ <div class="buttons">
+ <div class="section" v-for="section in buttons" :id="section.key" :key="section.key">
+
+ <h3 class="title">{{ section.title }}</h3>
+ <p v-if="section.description" class="description">{{ section.description }}</p>
+
+ <div class="docs">
+ <a href="{{ section.docs }}" target="_blank" class="read-more-link blue small">Docs</a>
+ </div>
+
+ <div v-for="event in section.events" :key="`${section.key}-${event.group}`" class="events">
+ <h4 v-if="event.group !== 'common'" class="title">{{ event.group }}</h4>
+ <div class="events-buttons">
+ <button v-for="action in event.actions" @click="callAction(section.key, event.group, action)"
+ type="button"
+ class="button"
+ >
+ {{ action }}
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.buttons {
+ @apply w-40 md:w-1/3 xl:w-1/4 flex flex-col md:gap-4;
+
+ .section {
+ @apply border p-4 md:p-6 lg:p-10 md:rounded-l-xl bg-white hover:shadow-xl transition;
+
+ > .title {
+ @apply md:text-xl leading-none font-bold text-blue-800 tracking-tight mb-4;
+ }
+
+ > .description {
+ @apply hidden md:block text-gray-500 text-sm font-medium mb-6;
+ }
+
+ > .docs {
+ @apply mb-8 flex gap-4 items-center;
+ }
+
+ > .events {
+ .title {
+ @apply md:text-xl leading-none font-extrabold text-blue-600 tracking-tight mt-6 mb-4;
+ }
+
+ > .events-buttons {
+ @apply overflow-hidden flex flex-wrap gap-2 md:gap-3 lg:gap-4 text-sm;
+
+ .button {
+ @apply border rounded-full text-blue-600 md:py-1 md:px-3 px-2 lg:px-3 border-blue-400 hover:bg-blue-500 hover:text-white transition-all duration-300;
+ }
+ }
+ }
+ }
+}
+</style>