@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/layer/pages/_cwa/index/pages.vue

@@ -0,0 +1,130 @@
+<template>
+  <ListHeading
+    title="Pages"
+    @add="goToAdd"
+  />
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['reference', 'title', 'uiComponent']"
+  />
+  <ListContainer>
+    <div>
+      <div>
+        <FilterFormWrapper
+          label="Page Type"
+          input-id="page-type"
+        >
+          <div class="cwa:flex cwa:gap-x-2">
+            <div>
+              <ListFilterButton
+                v-model="selectedTypesModel"
+                value="false"
+                label="Static"
+                background-color-class="cwa:bg-blue-600/20"
+                border-color-class="cwa:border-blue-600"
+              />
+            </div>
+            <div>
+              <ListFilterButton
+                v-model="selectedTypesModel"
+                value="true"
+                label="Dynamic"
+                background-color-class="cwa:bg-yellow/20"
+                border-color-class="cwa:border-yellow"
+              />
+            </div>
+          </div>
+        </FilterFormWrapper>
+      </div>
+    </div>
+  </ListContainer>
+  <ListContent
+    ref="listContent"
+    fetch-url="/_/pages"
+  >
+    <template #item="{ data }">
+      <div class="cwa:flex cwa:border-b cwa:border-b-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center">
+        <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1">
+          <div class="cwa:flex cwa:items-center cwa:gap-x-3">
+            <span class="cwa:text-xl">{{ data.reference }}</span><span :class="['cwa:outline', 'cwa:outline-1', 'cwa:outline-offset-2', 'cwa:w-2', 'cwa:h-2', 'cwa:rounded-full', data.isTemplate ? 'cwa:outline-yellow cwa:bg-yellow' : 'cwa:outline-blue-600 cwa:bg-blue-600']" />
+          </div>
+          <span class="cwa:text-stone-400">UI: {{ data.uiComponent ? getDisplayPageUi(data.uiComponent) : 'Unknown' }}</span>
+        </div>
+        <div class="cwa:flex cwa:gap-x-2">
+          <CwaUiFormButton :to="computedItemLink(data['@id'])">
+            <CwaUiIconCogIcon class="cwa:w-6" />
+            <span class="cwa:sr-only">Settings</span>
+          </CwaUiFormButton>
+          <CwaUiFormButton @click="() => goToPage(data['@id'])">
+            <CwaUiIconEyeIcon class="cwa:h-5" />
+            <span class="cwa:sr-only">View</span>
+          </CwaUiFormButton>
+        </div>
+      </div>
+    </template>
+  </ListContent>
+  <ResourceModalOverlay @reload="triggerReload" />
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { useListPage } from './composables/useListPage'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/templates/components/core/admin/ListFilter.vue'
+import ListContainer from '#cwa/templates/components/core/admin/ListContainer.vue'
+import FilterFormWrapper from '#cwa/templates/components/core/admin/form/FilterFormWrapper.vue'
+import ListFilterButton from '#cwa/templates/components/core/admin/ListFilterButton.vue'
+import { useQueryBoundModel } from '#cwa/composables/cwa-query-bound-model'
+import ResourceModalOverlay from '#cwa/templates/components/core/admin/ResourceModalOverlay.vue'
+import { definePageMeta, useCwa, useCwaResourceRoute, useHead } from '#imports'
+
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+
+const $cwa = useCwa()
+const { goToAdd, triggerReload, computedItemLink } = useListPage(listContent)
+const { getInternalResourceLink } = useCwaResourceRoute()
+
+const router = useRouter()
+
+const orderOptions = [
+  {
+    label: 'New - Old',
+    value: { createdAt: 'desc' },
+  },
+  {
+    label: 'Old - New',
+    value: { createdAt: 'asc' },
+  },
+  {
+    label: 'A - Z',
+    value: { reference: 'asc' },
+  },
+  {
+    label: 'Z - A',
+    value: { reference: 'desc' },
+  },
+]
+
+const { model: selectedTypesModel } = useQueryBoundModel('isTemplate[]', {
+  defaultValue: ['true', 'false'],
+})
+
+function goToPage(page: string) {
+  router.push(getInternalResourceLink(page))
+}
+
+function getDisplayPageUi(ui: string) {
+  return $cwa.pagesConfig?.[ui]?.name || ui
+}
+
+useHead({
+  title: 'Pages',
+})
+
+definePageMeta({
+  name: '_cwa-pages',
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/index/routes.vue

@@ -0,0 +1,56 @@
+<template>
+  <ListHeading
+    title="Routes"
+    :hide-add="true"
+  />
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['path']"
+  />
+  <ListContent
+    ref="listContent"
+    fetch-url="/_/routes"
+  >
+    <template #item="{ data, rawData }">
+      <RouteListRow
+        :data="data"
+        :associated-resources="rawData.associatedResources"
+        :link-fn="computedItemLink"
+        @delete="deleteRoute"
+      />
+    </template>
+  </ListContent>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/templates/components/core/admin/ListFilter.vue'
+import { useListPage } from '#cwa-layer/pages/_cwa/index/composables/useListPage'
+import { definePageMeta, useCwa, useHead } from '#imports'
+import RouteListRow from '#cwa/templates/components/core/admin/RouteListRow.vue'
+
+const $cwa = useCwa()
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+const { computedItemLink, triggerReload } = useListPage(listContent, true)
+
+async function deleteRoute(routeIri: string) {
+  await $cwa.resourcesManager.deleteResource({ endpoint: routeIri })
+  triggerReload()
+}
+
+const orderOptions = [
+  { label: 'New - Old', value: { createdAt: 'desc' } },
+  { label: 'Old - New', value: { createdAt: 'asc' } },
+  { label: 'A - Z', value: { path: 'asc' } },
+  { label: 'Z - A', value: { path: 'desc' } },
+]
+
+useHead({ title: 'Routes' })
+
+definePageMeta({
+  name: '_cwa-routes',
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/index/settings.vue

@@ -0,0 +1,398 @@
+<template>
+  <ListHeading
+    title="Site settings"
+    hide-add
+  />
+  <ListContainer class="cwa:relative cwa:py-10">
+    <Spinner
+      v-if="$cwa.siteConfig.isLoading || allSettings === undefined"
+      :show="true"
+    />
+    <CwaUiAlertWarning v-else-if="!allSettings">
+      Sorry, there was an error loading the settings
+    </CwaUiAlertWarning>
+    <div
+      v-else
+      class="cwa:flex cwa:flex-col"
+    >
+      <div :class="{ 'cwa:pointer-events-none cwa:opacity-50 cwa:transition': showUpdateProgress }">
+        <div>
+          <h2 class="cwa:text-xl cwa:mb-4">
+            General
+          </h2>
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+            <div>
+              <ModalInput
+                v-model="allSettings.siteName"
+                label="Site name"
+                type="text"
+              />
+            </div>
+            <div>
+              <CwaUiFormToggle
+                v-model="allSettings.concatTitle"
+                label="Extend page titles with the default title"
+              />
+              <div
+                class="cwa:text-sm cwa:font-normal cwa:mt-2.5 cwa:text-stone-300"
+              >
+                <p>
+                  <span>Page titles will be formatted as</span>&nbsp;
+                  <CwaCode v-if="allSettings.concatTitle">
+                    [Page title] | [Site name]
+                  </CwaCode>
+                  <CwaCode
+                    v-else
+                  >
+                    [Page title]
+                  </CwaCode>
+                </p>
+              </div>
+            </div>
+            <div>
+              <CwaUiFormToggle
+                v-model="allSettings.fallbackTitle"
+                label="Smart fallback page titles"
+              />
+              <div
+                class="cwa:text-sm cwa:font-normal cwa:mt-2.5 cwa:text-stone-300"
+              >
+                <p v-if="allSettings.fallbackTitle">
+                  Fallback title based on URL. Eg. <CwaCode>/blog-articles</CwaCode> becomes <CwaCode>Blog Articles</CwaCode>
+                </p>
+                <p
+                  v-else
+                  class="cwa:text-danger cwa:font-bold"
+                >
+                  If you do not specify a page title, no page title will be used
+                </p>
+              </div>
+            </div>
+            <div>
+              <ModalInput
+                v-model="allSettings.canonicalUrl"
+                label="Canonical URL"
+                type="url"
+                placeholder="https://your-site-domain.com"
+              />
+              <p
+                v-if="canonicalMismatch"
+                class="cwa:text-danger cwa:font-bold cwa:text-sm cwa:mt-2"
+              >
+                You are loading this page via <CwaCode>{{ currentHostDomain }}</CwaCode>&nbsp;which is different to the URL you have specified. Please ensure the canonical URL above is your primary domain and does not have redirects.
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr class="cwa:my-8 cwa:text-stone-600">
+        <div>
+          <h2 class="cwa:text-xl cwa:mb-4">
+            Sitemap
+          </h2>
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+            <div class="cwa:pb-4">
+              <p class="cwa:text-sm cwa:text-stone-400">
+                <strong>Please note:</strong><br>A sitemap will be created automatically for any pages (if any) which are not created within the CWA. You should submit <CwaCode>/sitemap_index.xml</CwaCode> in your chosen search engine search consoles
+              </p>
+            </div>
+            <CwaUiFormToggle
+              v-model="allSettings.sitemapEnabled"
+              label="Add CWA URLs to your sitemap"
+            />
+            <ModalInput
+              v-model="allSettings.sitemapXml"
+              label="Additional custom XML sitemap"
+              type="textarea"
+            />
+          </div>
+        </div>
+        <hr class="cwa:my-8 cwa:text-stone-600">
+        <div>
+          <h2 class="cwa:text-xl cwa:mb-4">
+            SEO Indexing
+          </h2>
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+            <CwaUiFormToggle
+              v-model="allSettings.indexable"
+              label="Allow your website to be indexed"
+            />
+            <template v-if="allSettings.indexable">
+              <CwaUiFormToggle
+                v-model="allSettings.robotsAllowNonSeoCrawlers"
+                label="Allow Non-SEO Crawlers (Web Scrapers etc.)"
+              />
+              <CwaUiFormToggle
+                v-model="allSettings.robotsAllowAiBots"
+                label="Allow Artificial Intelligence Bots"
+              />
+            </template>
+            <CwaUiFormToggle
+              v-model="allSettings.robotsRemoveSitemap"
+              label="Remove sitemap.xml from robots.txt"
+            />
+            <ModalInput
+              v-model="allSettings.robotsText"
+              label="Additional custom robots.txt"
+              type="textarea"
+            />
+            <div
+              v-if="showErrors && formErrors.robotsText"
+              class="cwa:text-sm cwa:flex cwa:items-center cwa:gap-x-2 cwa:transition cwa:text-danger cwa:font-bold"
+            >
+              <p
+                v-for="(error, index) of formErrors.robotsText"
+                :key="`rtxterr-${index}`"
+              >
+                {{ error }}
+              </p>
+            </div>
+            <div
+              v-if="formWarnings.robotsText"
+              class="cwa:text-sm cwa:flex-col cwa:items-center cwa:gap-y-2 cwa:transition cwa:text-yellow-500 cwa:font-bold"
+            >
+              <p
+                v-for="(warning, index) of formWarnings.robotsText"
+                :key="`rtxtwarn-${index}`"
+              >
+                {{ warning }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr class="cwa:my-8 cwa:text-stone-600"><div>
+          <h2 class="cwa:text-xl cwa:mb-4">
+            Maintenance
+          </h2>
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+            <div>
+              <CwaUiFormToggle
+                v-model="allSettings.maintenanceModeEnabled"
+                label="Enable maintenance mode"
+              />
+              <div
+                v-if="allSettings.maintenanceModeEnabled"
+                class="cwa:text-sm cwa:font-normal cwa:mt-2.5 cwa:text-stone-300"
+              >
+                <p>Website visitors will be redirected to a 'website under maintenance page'</p>
+                <p>Crawlers will receive an HTTP status code so they know this is not permanent</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr class="cwa:my-8 cwa:text-stone-600">
+        <div>
+          <h2 class="cwa:text-bas cwa:mb-4">
+            CWA Version Info
+          </h2>
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-2 text-sm">
+            <div>
+              <MenuLink :to="moduleLink">
+                App: <span class="cwa:text-xs">{{ displayAppVersion }}</span>
+              </MenuLink>
+            </div>
+            <div>
+              <MenuLink
+                :to="apiPackagistLink"
+                title="Hello"
+              >
+                API: <span class="cwa:text-xs">{{ displayApiVersion }}</span>
+              </MenuLink>
+            </div>
+          </div>
+        </div>
+        <hr class="cwa:my-8 cwa:text-stone-600">
+      </div>
+
+      <div class="flex">
+        <CwaUiFormButton
+          :color="showSubmitErrorState ? 'error' : 'blue'"
+          :disabled="submitDisabled"
+          type="button"
+          @click="processChanges"
+        >
+          Save Changes
+        </CwaUiFormButton>
+      </div>
+      <div
+        v-if="showSubmitErrorState"
+        class="cwa:mt-2 cwa:text-sm cwa:flex cwa:items-center cwa:gap-x-2 cwa:transition cwa:text-danger cwa:font-bold"
+      >
+        <p>An error occurred while saving your changes</p>
+      </div>
+      <div
+        :class="[showUpdateProgress ? 'opacity-100' : 'opacity-0']"
+        class="cwa:mt-2 cwa:text-sm cwa:flex cwa:items-center cwa:gap-x-2 cwa:transition"
+      >
+        <Spinner show /><p>Processing updates {{ updatingCount - $cwa.siteConfig.totalRequests.value }} / {{ updatingCount }}</p>
+      </div>
+    </div>
+  </ListContainer>
+</template>
+
+<script lang="ts" setup>
+import { consola } from 'consola'
+import { computed, onMounted, ref, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import isEqual from 'lodash-es/isEqual'
+import { asArray, parseRobotsTxt, validateRobots } from '#robots/util'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import { definePageMeta, useCwa, useRequestURL, useHead } from '#imports'
+import ListContainer from '#cwa/templates/components/core/admin/ListContainer.vue'
+import Spinner from '#cwa/templates/components/utils/Spinner.vue'
+import ModalInput from '#cwa/templates/components/core/admin/form/ModalInput.vue'
+import MenuLink from '#cwa/templates/components/main/admin/header/_parts/MenuLink.vue'
+import type { SiteConfigParams } from '#cwa/types'
+import CwaCode from '#cwa/templates/components/core/admin/CwaCode.vue'
+
+const $cwa = useCwa()
+
+const allSettings = ref<SiteConfigParams>()
+
+const isDataChanged = computed(() => {
+  return !isEqual(allSettings.value, $cwa.siteConfig.config)
+})
+
+const submitDisabled = computed(() => {
+  return !isDataChanged.value || $cwa.siteConfig.isLoading || $cwa.siteConfig.totalRequests.value > 0
+})
+
+const apiVersion = ref('')
+const showUpdateProgress = ref(false)
+const updatingCount = ref(0)
+
+const moduleLink = computed(() => {
+  return `https://www.npmjs.com/package/${$cwa.currentModulePackageInfo.name}/v/${$cwa.currentModulePackageInfo.version}`
+})
+
+useHead({
+  title: 'Site Settings',
+})
+
+definePageMeta({
+  name: '_cwa-settings',
+  pageTransition: false,
+})
+
+async function setApiVersion() {
+  const docs = await $cwa.getApiDocumentation()
+  const version = docs?.docs?.info.version
+  if (!version) {
+    apiVersion.value = ''
+    return
+  }
+  const matches: RegExpMatchArray | null = version.match(/ \(([a-zA-Z0-9\-@]+)\)$/)
+  if (!matches) {
+    apiVersion.value = version
+    return
+  }
+  apiVersion.value = matches[1] || version
+}
+
+function truncateVersion(version: string) {
+  return version.length > 9
+    ? `${version.substring(0, 3)}..${version.substring(version.length - 4)}`
+    : version
+}
+
+const displayApiVersion = computed(() => {
+  const unstablePostfix = apiVersion.value.substring(0, 3) === 'dev' ? ' (unstable)' : ''
+  return truncateVersion(apiVersion.value) + unstablePostfix
+})
+
+const apiPackagistLink = computed(() => {
+  const versionParts = apiVersion.value.split('@')
+  return `https://packagist.org/packages/components-web-app/api-components-bundle#${versionParts[0]}`
+})
+
+const displayAppVersion = computed(() => {
+  const unstablePostfix = $cwa.currentModulePackageInfo.name.substring($cwa.currentModulePackageInfo.name.length - 4) === 'edge' ? ' (unstable)' : ''
+  return (
+    truncateVersion($cwa.currentModulePackageInfo.version)
+    + unstablePostfix
+  )
+})
+
+const url = useRequestURL()
+const currentHostDomain = computed(() => {
+  return url.origin
+})
+
+const canonicalMismatch = computed(() => {
+  const canonical = $cwa.siteConfig.config?.canonicalUrl
+  if (!canonical) {
+    return false
+  }
+  return canonical !== currentHostDomain.value
+})
+
+watchDebounced($cwa.siteConfig.totalRequests, (newTotal) => {
+  showUpdateProgress.value = newTotal > 0
+}, {
+  debounce: 300,
+})
+
+const showErrors = ref(false)
+const formErrors = ref<{ [property: string]: string[] }>({})
+const formWarnings = ref<{ [property: string]: string[] }>({})
+
+function validateRobotsTxt(robotsText: string) {
+  clearErrorsAndWarnings('robotsText')
+  const parsedRobotsTxt = parseRobotsTxt(robotsText)
+  const { errors } = validateRobots(parsedRobotsTxt)
+  if (errors.length > 0) {
+    formErrors.value.robotsText = errors
+  }
+  // check if the robots.txt is blocking indexing
+  const wildCardGroups = parsedRobotsTxt.groups.filter((group: any) => asArray(group.userAgent).includes('*'))
+  if (wildCardGroups.some((group: any) => asArray(group.disallow).includes('/'))) {
+    formWarnings.value.robotsText = [
+      `The user defined robots.txt is blocking indexing for all environments.`,
+      'It\'s recommended to use the `indexable` Site Config to toggle this instead.',
+    ]
+  }
+}
+
+function clearErrorsAndWarnings(prop: string) {
+  delete formErrors.value[prop]
+  delete formWarnings.value[prop]
+}
+
+watch(() => allSettings.value?.robotsText, (robotsText: string | undefined) => {
+  if (!robotsText) {
+    clearErrorsAndWarnings('robotsText')
+    return
+  }
+  validateRobotsTxt(robotsText)
+}, {
+  immediate: true,
+})
+
+const hasClientSideErrors = computed(() => {
+  return Object.values(formErrors.value).length > 0
+})
+const showSubmitErrorState = computed(() => {
+  return $cwa.siteConfig.apiState.hasError.value || (showErrors.value && hasClientSideErrors.value)
+})
+
+async function processChanges() {
+  if (!allSettings.value) return
+  if (hasClientSideErrors.value) {
+    showErrors.value = true
+    consola.error(formErrors.value)
+    return
+  }
+  const { totalConfigsChanged } = $cwa.siteConfig.saveConfig(allSettings.value)
+  showUpdateProgress.value = totalConfigsChanged > 0
+  updatingCount.value = totalConfigsChanged
+}
+
+onMounted(async () => {
+  setApiVersion()
+  allSettings.value = await $cwa.siteConfig.loadConfig()
+  watch(() => $cwa.siteConfig.config, (newConfig) => {
+    allSettings.value = { ...newConfig }
+  }, {
+    deep: true,
+  })
+})
+</script>