Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: support custom pages #91

Closed
1 task done
FliPPeDround opened this issue Jan 22, 2025 · 0 comments
Closed
1 task done

feat: support custom pages #91

FliPPeDround opened this issue Jan 22, 2025 · 0 comments
Labels
✨ feature New feature or request

Comments

@FliPPeDround
Copy link

FliPPeDround commented Jan 22, 2025

Describe the feature

Hello,

I am currently working on creating a complex interactive page, and I find it quite challenging to implement using Markdown. Therefore, I want to write it directly as a SFC. I have placed my page within the pages folder, and it renders successfully (though not entirely, as the files under pages are not processed by @nuxt/content, resulting in useContent returning null, and causing errors when accessing page.aside). However, the aside component still appears on the left, which I do not need. I attempted to find a configuration to disable it but was unsuccessful. If there is a way to do this, I would greatly appreciate your guidance.

In the source code, I found the following:

<template>
  <NuxtLoadingIndicator :color="false" class="z-100 bg-primary/80" />
  <LayoutBanner v-if="config.banner.enable" />
  <LayoutHeader />

  <div v-if="route.path !== '/'" class="min-h-screen border-b">
    <div
      class="flex-1 items-start px-4 md:grid md:gap-6 md:px-8 lg:gap-10"
      :class="[
        config.main.padded && 'container',
        (page.aside ?? true) && 'md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]',
      ]"
    >
      <aside v-if="page.aside ?? true" class="fixed top-[102px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto md:sticky md:top-[60px] md:block">
        <LayoutAside :is-mobile="false" />
      </aside>
      <NuxtPage />
    </div>
  </div>
  <NuxtPage v-else />

  <Toaster />
  <LayoutFooter />
</template>

<script setup lang="ts">
import Toaster from '@/components/ui/toast/Toaster.vue';

const { page } = useContent();
const config = useConfig();
const route = useRoute();
const { themeClass, radius } = useThemes();

useSeoMeta({
  description: config.value.site.description,
  ogDescription: config.value.site.description,
  twitterCard: 'summary_large_image',
});

useServerHead({
  bodyAttrs: {
    class: themeClass.value,
    style: `--radius: ${radius.value}rem;`,
  },
});
</script>

This only checks for the homepage. I hope it can apply to all files under the pages folder. Simply doing this would work:

- <div v-if="route.path !== '/'" class="min-h-screen border-b">
+ <div v-if="page" class="min-h-screen border-b">

I don't know if this can be implemented this way. If it can, I am willing to provide a PR.

Thank you!

Additional information

  • Would you be willing to help implement this feature?
@FliPPeDround FliPPeDround added the ✨ feature New feature or request label Jan 22, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
✨ feature New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant