diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index 5b225541f..5cc87a009 100644 --- a/.github/workflows/deploy-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -84,4 +84,4 @@ jobs: ClusterName=canopas-website-dev, ImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-frontend, BackendImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-backend, - NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-nginx + NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-nginx \ No newline at end of file diff --git a/vue-frontend/src/components/home-new/LandingSection.vue b/vue-frontend/src/components/home-new/LandingSection.vue index d321d7d63..c3305d14e 100644 --- a/vue-frontend/src/components/home-new/LandingSection.vue +++ b/vue-frontend/src/components/home-new/LandingSection.vue @@ -7,6 +7,7 @@ :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`" class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw--z-[1] tw-object-contain" alt="canopas-landing" + loading="eager" />
{ - const piniaInitialState = window.INITIAL_DATA; - if (piniaInitialState) { - pinia.state.value = piniaInitialState; - } - - mixpanel.init(config.MIX_PANEL_TOKEN); - - if (!config.IS_PROD) { - useContributionStore(pinia).fetchStars("fetchContributionStars"); - } - - app.provide("mixpanel", mixpanel).mount("#app"); + var piniaInitialState = window.INITIAL_DATA; + piniaInitialState && (pinia.state.value = piniaInitialState), + mixpanel.init(config.MIX_PANEL_TOKEN), + config.IS_PROD || + useContributionStore(pinia).fetchStars("fetchContributionStars"), + app.provide("mixpanel", mixpanel).mount("#app"); }); diff --git a/vue-frontend/src/entry-server.js b/vue-frontend/src/entry-server.js index 0dd302434..ae6c0294a 100644 --- a/vue-frontend/src/entry-server.js +++ b/vue-frontend/src/entry-server.js @@ -2,17 +2,14 @@ import { buildApp } from "./main"; import { renderToString } from "vue/server-renderer"; import { renderMetaToString } from "vue-meta/ssr/index.js"; -export async function render(url, manifest) { +async function render(url, manifest) { const { app, router, pinia } = buildApp(true); - // set the router to the desired URL before rendering + // Set the router to the desired URL before rendering router.push(url); await router.isReady(); - // passing SSR context object which will be available via useSSRContext() - // @vitejs/plugin-vue injects code into a component's setup() that registers - // itself on ctx.modules. After the render, ctx.modules would contain all the - // components that have been instantiated during this render call. + // Passing SSR context object which will be available via useSSRContext() const ctx = {}; const html = await renderToString(app, ctx); await renderMetaToString(app, ctx); @@ -22,10 +19,10 @@ export async function render(url, manifest) { window.INITIAL_DATA = ${JSON.stringify(pinia.state.value)} `; - // the SSR manifest generated by Vite contains module -> chunk/asset mapping - // which we can then use to determine what files need to be preloaded for this - // request. + // Generate preload links based on module IDs from the SSR context const preloadLinks = renderPreloadLinks(ctx.modules, manifest); + + // Return the rendered HTML, preload links, teleports, render state, and route name return [ html, preloadLinks, @@ -63,3 +60,5 @@ function renderPreloadLink(file) { return ""; } } + +export { render }; diff --git a/vue-frontend/src/main.js b/vue-frontend/src/main.js index 4a45a4af6..4e5dbd3c2 100644 --- a/vue-frontend/src/main.js +++ b/vue-frontend/src/main.js @@ -5,13 +5,20 @@ import { createPinia } from "pinia"; import { createMetaManager } from "vue-meta"; import "@/assets/css/tailwind.css"; -export function buildApp(isSSR) { - const app = isSSR ? createSSRApp(App) : createApp(App); - const router = createRouter(); - const pinia = createPinia(); - const metaManager = createMetaManager(isSSR); +function buildApp(isSSR) { + var appInstance = (isSSR ? createSSRApp : createApp)(App), + routerInstance = createRouter(), + piniaInstance = createPinia(), + metaManagerInstance = createMetaManager(isSSR); - app.use(router).use(metaManager).use(pinia); + appInstance.use(routerInstance).use(metaManagerInstance).use(piniaInstance); - return { app, router, pinia, metaManager }; + return { + app: appInstance, + router: routerInstance, + pinia: piniaInstance, + metaManager: metaManagerInstance, + }; } + +export { buildApp }; diff --git a/vue-frontend/src/router.js b/vue-frontend/src/router.js index 61eec0c02..ca0a684b6 100644 --- a/vue-frontend/src/router.js +++ b/vue-frontend/src/router.js @@ -3,28 +3,20 @@ import { createRouter as _createRouter, createWebHistory, } from "vue-router"; - const Error404Page = () => import("@/components/error404/index.vue"); import routes from "~pages"; - -routes.push({ - path: "/:pathMatch(.*)*", - name: "Error404Page", - component: Error404Page, -}); - -export function createRouter() { +function createRouter() { return _createRouter({ - // use appropriate history implementation for server/client - // import.meta.env.SSR is injected by Vite. - history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(), - routes, + history: (import.meta.env.SSR ? createMemoryHistory : createWebHistory)(), + routes: routes, scrollBehavior(to, from, savedPosition) { - if (savedPosition) { - return savedPosition; - } else { - return { top: 0, behavior: "instant" }; - } + return savedPosition || { top: 0, behavior: "instant" }; }, }); } +routes.push({ + path: "/:pathMatch(.*)*", + name: "Error404Page", + component: Error404Page, +}); +export { createRouter }; diff --git a/vue-frontend/src/utils.js b/vue-frontend/src/utils.js index 8a2d2b986..f734db2f2 100644 --- a/vue-frontend/src/utils.js +++ b/vue-frontend/src/utils.js @@ -1,37 +1,27 @@ import { useElementVisibility } from "@vueuse/core"; import mixpanel from "mixpanel-browser"; -export function elementInViewPort(refs) { +function elementInViewPort(refs) { var element; - Object.keys(refs).forEach((key) => { - if (refs[key] && refs[key].length > 0) { - refs[key].forEach((ref, index) => { - if (useElementVisibility(refs[key][index]).value) { - element = key; - return; - } - }); - } else { - if (useElementVisibility(refs[key]).value) { - element = key; - return; - } - } - }); - return element; + return ( + Object.keys(refs).forEach((key) => { + refs[key] && 0 < refs[key].length + ? refs[key].forEach((ref, index) => { + useElementVisibility(refs[key][index]).value && (element = key); + }) + : useElementVisibility(refs[key]).value && (element = key); + }), + element + ); } - -export function handleAnimationOnScroll(data) { - if (data) { - let { top, bottom } = data.name.getBoundingClientRect(); - let height = document.documentElement.clientHeight; - - if (top < height && bottom > 0) { - data.name.classList.add(data.animation); - } - } +function handleAnimationOnScroll(data) { + var n, t; + data && + (({ top: n, bottom: t } = data.name.getBoundingClientRect()), + n < document.documentElement.clientHeight) && + 0 < t && + data.name.classList.add(data.animation); } - -export function setGithubStars(contributions, githubRepos) { +function setGithubStars(contributions, githubRepos) { return contributions.forEach((contribution) => { contribution.stars = githubRepos .filter( @@ -42,8 +32,7 @@ export function setGithubStars(contributions, githubRepos) { .map((repo) => repo.stargazers_count.toString())[0]; }); } - -export function openBlog(link, event) { - window.open(link, "_blank"); - mixpanel.track(event); +function openBlog(link, event) { + window.open(link, "_blank"), mixpanel.track(event); } +export { elementInViewPort, handleAnimationOnScroll, setGithubStars, openBlog };