Skip to content

Commit

Permalink
feat: add internal main page (#1157)
Browse files Browse the repository at this point in the history
  • Loading branch information
NaMax66 committed Jul 5, 2024
1 parent 82d5466 commit b2dad89
Show file tree
Hide file tree
Showing 19 changed files with 279 additions and 152 deletions.
2 changes: 1 addition & 1 deletion client-app/core/api/graphql/page/queries/getPage/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ import type { GetPageQueryVariables } from "@/core/api/graphql/types";
import type { MaybeRefOrGetter } from "vue";

export function useGetPage(payload: MaybeRefOrGetter<GetPageQueryVariables>) {
return useLazyQuery(GetPageDocument, payload);
return useLazyQuery(GetPageDocument, payload, { fetchPolicy: "cache-and-network" });
}
15 changes: 12 additions & 3 deletions client-app/pages/404.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<TwoColumn class="max-w-screen-lg">
<TwoColumn ref="page404Anchor" class="max-w-screen-lg">
<template #left>
<h1 class="text-black-800 mb-5 text-7xl font-black md:text-8xl">
{{ $t("pages.404.error_code") }}
Expand All @@ -25,14 +25,23 @@
</template>

<script setup lang="ts">
import { useElementVisibility } from "@vueuse/core";
import { shallowRef, watch } from "vue";
import { useI18n } from "vue-i18n";
import { usePageHead } from "@/core/composables";
import { TwoColumn } from "@/shared/layout";
const { t } = useI18n();
usePageHead({
title: `${t("pages.404.error_code")} ${t("pages.404.error_text")}`,
const page404Anchor = shallowRef<HTMLElement | null>(null);
const page404AnchorIsVisible = useElementVisibility(page404Anchor);
watch(page404AnchorIsVisible, (value) => {
if (value) {
usePageHead({
title: `${t("pages.404.error_code")} ${t("pages.404.error_text")}`,
});
}
});
</script>

Expand Down
2 changes: 1 addition & 1 deletion client-app/pages/catalog.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Category />
<Category allow-set-meta />
</template>

<script setup lang="ts">
Expand Down
2 changes: 1 addition & 1 deletion client-app/pages/category.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Category />
<Category allow-set-meta />
</template>

<script setup lang="ts">
Expand Down
16 changes: 12 additions & 4 deletions client-app/pages/demo-landing.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="pt-7">
<div ref="demoPageAnchor" class="pt-7">
<div class="mx-auto w-full max-w-screen-2xl px-5 pb-5 md:px-12 lg:pb-10">
<VcTypography tag="h1">
{{ $t("pages.demo_landing.header") }}
Expand Down Expand Up @@ -174,7 +174,8 @@
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useElementVisibility } from "@vueuse/core";
import { onMounted, shallowRef, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useBreadcrumbs, usePageHead, useProductsRoutes } from "@/core/composables";
import { AddToCart } from "@/shared/cart";
Expand All @@ -185,8 +186,15 @@ const { products, fetchProducts } = useProducts();
const productsRoutes = useProductsRoutes(products);
usePageHead({
title: t("pages.demo_landing.meta.title"),
const demoPageAnchor = shallowRef<HTMLElement | null>(null);
const demoPageAnchorIsVisible = useElementVisibility(demoPageAnchor);
watch(demoPageAnchorIsVisible, (value) => {
if (value) {
usePageHead({
title: t("pages.demo_landing.meta.title"),
});
}
});
useBreadcrumbs([{ title: t("shared.layout.footer.demo_landing_link") }]);
Expand Down
48 changes: 16 additions & 32 deletions client-app/pages/index.vue → client-app/pages/home.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<template>
<StaticPage v-if="staticPage" />
<template v-else-if="!loading && !hasContent">
<div ref="homePageAnchor">
<LoginFormSection />

<!-- Main content -->
<div class="main">
<div class="container mx-auto px-6 pb-40 pt-32 md:px-12">
Expand Down Expand Up @@ -80,52 +78,38 @@
</div>
</div>
</div>
</template>
<div v-else-if="loading" class="min-h-[80vh]">
<VcLoaderOverlay />
</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, watchEffect } from "vue";
import { useElementVisibility } from "@vueuse/core";
import { shallowRef, watch } from "vue";
import { useI18n } from "vue-i18n";
import { usePageHead } from "@/core/composables";
import { useSlugInfo } from "@/shared/common";
import { LoginFormSection } from "@/shared/layout";
import { useStaticPage } from "@/shared/static-content";
const { t } = useI18n();
usePageHead({
title: t("pages.home.meta.title"),
meta: {
keywords: t("pages.home.meta.keywords"),
description: t("pages.home.meta.description"),
},
});
const StaticPage = defineAsyncComponent(() => import("@/pages/static-page.vue"));
const { staticPage } = useStaticPage();
staticPage.value = undefined;
const { loading, hasContent, pageContent, fetchContent } = useSlugInfo("__index__home__page__", true);
const homePageAnchor = shallowRef<HTMLElement | null>(null);
const homePageAnchorIsVisible = useElementVisibility(homePageAnchor);
watchEffect(async () => {
if (hasContent.value) {
await fetchContent();
if (pageContent.value) {
staticPage.value = pageContent.value;
} else {
staticPage.value = undefined;
}
watch(homePageAnchorIsVisible, (value) => {
if (value) {
usePageHead({
title: t("pages.home.meta.title"),
meta: {
keywords: t("pages.home.meta.keywords"),
description: t("pages.home.meta.description"),
},
});
}
});
</script>

<style scoped>
.main {
background-image: url(/static/images/home/bevel-top.webp), url(/static/images/home/bevel-bottom.webp),
url(/static/images/home/hexa-left.webp), url(/static/images/home/hexa-right.webp);
background-image: url(/images/home/bevel-top.webp), url(/images/home/bevel-bottom.webp),
url(/images/home/hexa-left.webp), url(/images/home/hexa-right.webp);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100%, 100%, auto, auto;
background-position:
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<template>
<div v-if="canShowContent">
<div v-if="canShowContent" ref="builderIoAnchor">
<Content model="page" :content="content" :api-key="apiKey" :custom-components="getRegisteredComponents()" />
</div>
</template>

<script setup lang="ts">
import { Content, fetchOneEntry, getBuilderSearchParams, isPreviewing } from "@builder.io/sdk-vue";
import { onMounted, ref, shallowRef } from "vue";
import { useElementVisibility } from "@vueuse/core";
import { onMounted, ref, shallowRef, watchEffect } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
import { usePageHead } from "@/core/composables";
import { IS_DEVELOPMENT } from "@/core/constants";
import { builderIOComponents } from "@/shared/static-content";
import type { StateType } from "./priorityManager";
import type { BuilderContent } from "@builder.io/sdk-vue";
interface IEmits {
(event: "setState", value: StateType): void;
Expand All @@ -25,7 +28,7 @@ const emit = defineEmits<IEmits>();
const props = defineProps<IProps>();
const canShowContent = shallowRef(false);
const content = shallowRef();
const content = shallowRef<BuilderContent | null>(null);
const isLoading = ref(false);
function clearState() {
Expand Down Expand Up @@ -73,6 +76,28 @@ async function tryLoadContent(urlPath: string) {
}
}
const builderIoAnchor = shallowRef<HTMLElement | null>(null);
const builderIoAnchorIsVisible = useElementVisibility(builderIoAnchor);
type MetaDataType = { title?: string; keywords?: string; description?: string };
watchEffect(() => {
const data: MetaDataType | undefined = content.value?.data;
if (data && builderIoAnchorIsVisible.value) {
const { title, keywords, description } = data;
usePageHead({
title,
meta: {
title,
keywords,
description,
},
});
}
});
const getRegisteredComponents = () => {
return builderIOComponents;
};
Expand Down
35 changes: 35 additions & 0 deletions client-app/pages/matcher/internal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<component :is="page" />
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import type { StateType } from "@/pages/matcher/priorityManager";
interface IEmits {
(event: "setState", value: StateType): void;
}
const emit = defineEmits<IEmits>();
const pages = {
"/": defineAsyncComponent(() => import("@/pages/home.vue")),
"/demo-landing": defineAsyncComponent(() => import("@/pages/demo-landing.vue")),
} as const;
const route = useRoute();
const page = computed(() => {
if (Object.keys(pages).includes(route.path)) {
emit("setState", "ready");
return pages[route.path as keyof typeof pages];
}
emit("setState", "empty");
return null;
});
onBeforeUnmount(() => {
emit("setState", "initial");
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<SlugContent
v-if="previewers.slugContent.isActive"
v-show="visibleComponent === 'slugContent'"
:seo-url="seoUrl"
:path-match="pathMatch"
@set-state="updateState($event, 'slugContent')"
/>
<BuilderIo
Expand All @@ -12,37 +12,35 @@
:api-key="builderIoApiKey"
@set-state="updateState($event, 'builderIo')"
/>
<Internal
v-if="previewers.internal.isActive"
v-show="visibleComponent === 'internal'"
@set-state="updateState($event, 'internal')"
/>
<div v-if="visibleComponent === 'loader'" class="min-h-[80vh]">
<VcLoaderOverlay />
</div>
<NotFound v-show="!visibleComponent" />
<NotFound v-if="!visibleComponent" />
</div>
</template>

<script setup lang="ts">
import { computedEager } from "@vueuse/core";
import { computed, ref } from "vue";
import { useThemeContext } from "@/core/composables";
import { getVisiblePreviewer } from "./priorityManager";
import type { StateType, PreviewerStateType } from "./priorityManager";
import NotFound from "@/pages/404.vue";
import BuilderIo from "@/pages/external/builder-io.vue";
import SlugContent from "@/pages/external/slug-content.vue";
const props = withDefaults(defineProps<IProps>(), {
pathMatch: () => [],
});
const { modulesSettings } = useThemeContext();
import BuilderIo from "@/pages/matcher/builder-io.vue";
import Internal from "@/pages/matcher/internal.vue";
import SlugContent from "@/pages/matcher/slug-content.vue";
interface IProps {
pathMatch?: string[];
}
const seoUrl = computedEager(() => {
// Because URL `/printers/` is an array of paths ["printers", ""], empty paths must be removed.
const paths = props.pathMatch.filter(Boolean);
return paths.join("/");
});
defineProps<IProps>();
const { modulesSettings } = useThemeContext();
const moduleSettings = computed(() => {
return modulesSettings.value?.find((el) => el.moduleId === "VirtoCommerce.BuilderIO");
Expand All @@ -58,17 +56,23 @@ const builderIoApiKey = computed(() => {
// The highest priority has the previewer whose 'priority' value is closer to zero
const previewers = ref<{ [key in string]: PreviewerStateType }>({
builderIo: {
id: "builderIo",
priority: 1,
state: "initial",
isActive: isBuilderIOEnabled.value,
},
slugContent: {
id: "slugContent",
priority: 2,
state: "initial",
isActive: true,
},
builderIo: {
id: "builderIo",
priority: 1,
internal: {
id: "internal",
priority: 3,
state: "initial",
isActive: isBuilderIOEnabled.value,
isActive: true,
},
});
Expand Down
File renamed without changes.
Loading

0 comments on commit b2dad89

Please sign in to comment.