docs.vue 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <div class="w-full min-h-screen bg-black">
  3. <Head>
  4. <Link rel="preconnect" href="https://fonts.googleapis.com"/>
  5. <Link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  6. <Link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
  7. <Link rel="apple-touch-icon" sizes="180x180" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/apple-touch-icon.png'"/>
  8. <Link rel="icon" type="image/png" sizes="32x32" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/favicon-32x32.png'"/>
  9. <Link rel="icon" type="image/png" sizes="16x16" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/favicon-16x16.png'"/>
  10. <Link rel="manifest" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/site.webmanifest'"/>
  11. <Link rel="mask-icon" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/safari-pinned-tab.svg'" color="#5bbad5"/>
  12. <Meta name="msapplication-TileColor" content="#da532c"/>
  13. <Meta name="theme-color" content="#ffffff"/>
  14. </Head>
  15. <GlobalServerSideUp/>
  16. <MarketingHeader/>
  17. <div class="lg:flex lg:w-screen lg:h-[calc(100vh-167px)]">
  18. <div style="scrollbar-width: none" class="contents lg:overflow-y-scroll lg:pointer-events-none lg:z-40 lg:flex lg:top-[126px]">
  19. <div class="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:px-6 lg:pt-4 lg:pb-8 lg:border-white/10 xl:w-80">
  20. <DocsNavigation
  21. class="hidden lg:block"/>
  22. </div>
  23. </div>
  24. <div class="relative px-4 pt-5 sm:px-6 lg:overflow-y-scroll lg:flex-1 lg:px-8">
  25. <main class="py-8 scroll-smooth" id="content-container">
  26. <ContentDoc
  27. class="prose prose-invert"
  28. tag="article" />
  29. </main>
  30. <DocsFooter/>
  31. </div>
  32. </div>
  33. <Search/>
  34. </div>
  35. </template>
  36. <script setup>
  37. const route = useRoute();
  38. const { basePath, domain } = useRuntimeConfig().public;
  39. const { page } = useContent();
  40. useHead({
  41. htmlAttrs: {
  42. lang: 'en'
  43. },
  44. bodyAttrs: {
  45. class: 'antialiased font-inter bg-black'
  46. }
  47. });
  48. useSeoMeta({
  49. ogLocale: 'en_US',
  50. ogUrl: domain+basePath+route.path,
  51. ogType: 'website',
  52. ogSiteName: 'Server Side Up - Docker PHP',
  53. ogTitle: page.value?.head.title,
  54. ogDescription: page.value.description,
  55. twitterCard: 'summary_large_image',
  56. twitterDescription: page.value?.description,
  57. twitterSite: '@serversideup',
  58. twitterTitle: page.value?.head.title
  59. })
  60. defineOgImage({
  61. component: 'DocsImage',
  62. title: page.value.title,
  63. description: page.value.description
  64. });
  65. </script>