Skip to content

Commit

Permalink
Merge pull request #6 from openobserve/feature/dynemic-data
Browse files Browse the repository at this point in the history
Feature/dynemic data
  • Loading branch information
ktx-krupa authored Jan 29, 2025
2 parents 0f1a956 + 304e46e commit c1847f9
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 177 deletions.
1 change: 0 additions & 1 deletion src/components/header/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,6 @@ const onHover = (event) => {
};
const onMouseLeave = () => {
console.log("Hovered");
isPlatformHovered.value = false;
};
</script>
Expand Down
16 changes: 11 additions & 5 deletions src/components/header/LaptopView.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<header class="bg-black">
<!-- Sticky Header -->
<header class="bg-black sticky top-0 z-50">
<div class="w-full mx-auto px-4 flex justify-between items-center">
<Logo />
<nav>
Expand Down Expand Up @@ -64,6 +65,7 @@
<CustomButton variant="primary" size="small"> GET DEMO </CustomButton>
</div>
</div>
<!-- Dropdown Menus -->
<div
class="absolute top-full flex justify-center translate-x-[15%] w-[80%] xl:w-3/4 container mx-auto"
@mouseenter="onPlatformMenuHover"
Expand All @@ -74,7 +76,6 @@
<h3 class="text-xl font-bold pb-2 text-[#FFFFFF]">
{{ items.platform.title }}
</h3>

<div class="w-full flex justify-between flex-col md:flex-row gap-2">
<div
class="w-full md:w-2/3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2"
Expand All @@ -83,7 +84,6 @@
<SectionHeader :title="item.title" :items="item.items" />
</div>
</div>

<div class="flex flex-col space-y-1 w-full md:w-1/3">
<h4 class="text-[#FFFFFF] text-base font-semibold">
{{ items.platform.keyFeature.title }}
Expand Down Expand Up @@ -155,13 +155,11 @@
</ul>
</div>
</div>

<!-- Sandbox Column -->
<div>
<a :href="items?.solutions?.sandbox?.link">{{
items?.solutions?.sandbox?.title
}}</a>
<!-- class="hover:text-blue-500" -->
</div>
</div>
</div>
Expand Down Expand Up @@ -217,6 +215,8 @@
</div>
</header>
</template>


<script setup>
import Logo from "../core/Logo.vue";
import CustomButton from "../core/CustomButton.vue";
Expand Down Expand Up @@ -294,6 +294,7 @@ onUnmounted(() => {
.gradient-hover {
display: inline-block;
}
.gradient-hover:hover {
background: linear-gradient(
to left,
Expand All @@ -308,3 +309,8 @@ onUnmounted(() => {
border-radius: 0.5rem;
}
</style>
<style>
body {
margin-top: 20vh; /* Adjust this value based on your header height */
}
</style>
2 changes: 1 addition & 1 deletion src/components/heroSections/FeatureHeroSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ defineProps({

<template>
<section
class="relative flex flex-col items-center text-center bg-no-repeat bg-[50%_40vh] md:bg-[50%_20vh] bg-cover px-4 py-24"
class="relative flex flex-col items-center text-center bg-no-repeat bg-[50%_40vh] md:bg-[50%_20vh] bg-cover px-4"
:style="{
backgroundImage: `url(${backgroundImage})`,
}"
Expand Down
3 changes: 2 additions & 1 deletion src/components/heroSections/HomeHeroSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ defineProps({
<template>
<section
class="relative flex justify-center items-center lg:justify-start h-[calc(100vh-100px)] text-center lg:text-left bg-cover bg-center bg-no-repeat px-4 sm:px-8 lg:px-16"
:style="{ backgroundImage: `url('${background}')` }"
:style="{ backgroundImage: `url(${background})` }"

>
<!-- Content Section -->
<div class="relative z-10 text-white max-w-4xl">
Expand Down
3 changes: 3 additions & 0 deletions src/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
interface ImportMetaEnv {
readonly PUBLIC_API_BASE_URL: string;
}
52 changes: 0 additions & 52 deletions src/pages/button/index.astro

This file was deleted.

136 changes: 19 additions & 117 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ import ComponentCollectionMapper from "../components/ComponentCollectionMapper.v
import BlogWrapper from "../components/wrapper/BlogWrapper.vue";
import HomeFeatureWrapper from "../components/wrapper/HomeFeatureWrapper.vue";
import HomeWhyO2Wrapper from "../components/wrapper/HomeWhyO2Wrapper.vue";
import fetchApi from '../utils/strapi';
const PageData = await fetchApi({
endpoint: "pages",
query: { path: "/", pLevel: "10" },
});
console.log(PageData.data[0].body,"datatatata");
const cards = [
{
image: "public/blogColor-1.png",
Expand Down Expand Up @@ -382,122 +389,16 @@ const tabsData = [
image: "/Homepage/UI-14.svg",
},
];
const pageData = [
// {
// __component: "section.announcementbanner",
// description:
// "Genericon 2023 Join us in Denver from June 7 - 9 to see what's coming next.",
// },
{
__component: "section.herosection",
title: "Open Source Observability",
subtitle:
"Fast, Scalable, and Cost-effective Monitoring for Modern Applications",
background: "/Coding BG.svg",
},
// {
// __component: "section.featurecard",
// title: "Full stack observability platform",
// description:"Explore the transformative functionalities of OpenObserve and experience a new level of data observation.",
// items:[
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Home'
// },
// ]
// },
// {
// __component: "section.usecasecard",
// title: "Designed for every team",
// description:"Explore the transformative functionalities of OpenObserve and experience a new level of data observation.",
// items:[
// {
// icon: 'cardIcon.svg',
// title: 'Dev Ops'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Developers'
// },
// {
// icon: 'cardIcon.svg',
// title: 'Site Reliability Engineers'
// },
// ]
// },
// {
// __component: "section.companyswiper",
// items: [
// { path: "/Logo place holder (2).svg" },
// { path: "/Logo place holder (3).svg" },
// { path: "/Logo place holder (4).svg" },
// { path: "/Logo place holder (5).svg" },
// ]
// },
// {
// __component: "section.faq",
// title: "OpenObserve Logs FAQ's",
// items: [
// {
// question: "Why choose OpenObserve for Log Management?",
// answer:
// "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
// },
// {
// question: "Why choose OpenObserve for Log Management?",
// answer:
// "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",
// },
// {
// question: "Why choose OpenObserve for Log Management?",
// answer:
// "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
// },
// {
// question: "Why choose OpenObserve for Log Management?",
// answer:
// "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",
// },
// {
// question: "Why choose OpenObserve for Log Management?",
// answer:
// "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
// },
// ],
// },
];
// const pageData = [
// {
// __component: "section.herosection",
// title: "Open Source Observability",
// subtitle:
// "Fast, Scalable, and Cost-effective Monitoring for Modern Applications",
// background: "/Coding BG.svg",
// },
// ];
const trustedCompanies = {
title: "Trusted by leading companies",
Expand All @@ -523,7 +424,7 @@ const trustedCompanies = {

<Layout>
<!-- <CustomAnnouncement AnnouncementBanner={announcementBanner} /> -->
<ComponentCollectionMapper data={pageData} client:load />
<ComponentCollectionMapper data={PageData.data[0].body} client:load />
<FeatureCardWithIconWrapper cardData={cardDataforsection2} />
<UsecaseCardWithIconWrapper cardData={cardDataforsection3} />
<TopCompaniesWrapper
Expand Down Expand Up @@ -569,3 +470,4 @@ const trustedCompanies = {
]}
/>
</Layout>

70 changes: 70 additions & 0 deletions src/utils/strapi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
interface Props {
endpoint: string;
query?: Record<string, string>;
wrappedByKey?: string;
wrappedByList?: boolean;
token?: string; // Optional authorization token
}

/**
* Fetches data from the Strapi API
* @param endpoint - The endpoint to fetch from
* @param query - The query parameters to add to the URL
* @param wrappedByKey - The key to unwrap the response from
* @param wrappedByList - If the response is a list, unwrap it
* @returns
*/
export default async function fetchApi<T>({
endpoint,
query,
wrappedByKey,
wrappedByList,
}: Props): Promise<T> {
// Construct the base URL
const baseUrl = import.meta.env.PUBLIC_API_BASE_URL;
let url = new URL(`${baseUrl}/${endpoint}`);

// Append query parameters if provided
if (query) {
Object.entries(query).forEach(([key, value]) => {
url.searchParams.append(key, value);
});
}


const headers: HeadersInit = {
"Content-Type": "application/json",
};

// Use token from function parameter OR environment variable
const authToken = import.meta.env.PUBLIC_TOKEN;
if (authToken) {
headers["Authorization"] = `Bearer ${authToken}`;
}

try {
const res = await fetch(url.toString(), {
method: "GET",
headers,
});

if (!res.ok) {
throw new Error(`Error fetching data: ${res.status} ${res.statusText}`);
}

let data = await res.json();

if (wrappedByKey) {
data = data[wrappedByKey];
}

if (wrappedByList) {
data = data[0];
}

return data as T;
} catch (error) {
console.error("Fetch API Error:", error);
throw error;
}
}

0 comments on commit c1847f9

Please sign in to comment.