fix: fix edit link and prev and next links display (#97)

fix #97

src/client/app/composables/pageData.ts

@@ -0,0 +1,8 @@
+import { computed } from 'vue'
+import { useRoute } from '../router'
+
+export function usePageData() {
+  const route = useRoute()
+
+  return computed(() => route.data)
+}

src/client/app/exports.ts

@@ -1,13 +1,17 @@
 // exports in this file are exposed to themes and md files via 'vitepress'
 // so the user can do `import { useRoute, useSiteData } from 'vitepress'`.
 
+// generic types
+export type { SiteData, PageData } from '/@types/shared'
+
 // theme types
 export * from './theme'
 
 // composables
 export { useRouter, useRoute, Router, Route } from './router'
 export { useSiteData } from './composables/siteData'
 export { useSiteDataByRoute } from './composables/siteDataByRoute'
+export { usePageData } from './composables/pageData'
 
 // components
 export { Content } from './components/Content'

src/client/theme-default/components/EditLink.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="edit-link">
+    <a v-if="url" class="link" :href="url" target="_blank" rel="noopener noreferrer">
+      {{ text }} <OutboundLink class="icon" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useEditLink } from '../composables/editLink'
+import OutboundLink from './icons/OutboundLink.vue'
+
+export default defineComponent({
+  components: {
+    OutboundLink
+  },
+
+  setup() {
+    const { url, text } = useEditLink()
+
+    return {
+      url,
+      text
+    }
+  }
+})
+</script>
+
+<style scoped>
+.edit-link {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  overflow: auto;
+}
+
+.link {
+  font-weight: 500;
+  color: var(--text-color-light);
+}
+
+.link:hover {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+.icon {
+  display: inline-block;
+  margin-left: 4px;
+  width: 1rem;
+  height: 1rem;
+}
+</style>

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -1,35 +1,92 @@
 <template>
-  <div v-if="hasLinks" class="links-wrapper">
-    <div class="prev-link">
-      <div v-if="prev">
-      ← <a :href="prev.link">{{ prev.text }}</a>
-      </div>
+  <div v-if="hasLinks" class="next-and-prev-link">
+    <div class="prev">
+      <a v-if="prev" class="link" :href="prev.link">
+        <ArrowLeft class="icon icon-prev" />
+        <span class="text">{{ prev.text }}</span>
+      </a>
     </div>
-    <div class="next-link">
-      <div v-if="next">
-        <a :href="next.link">{{ next.text }}</a> →
-      </div>
+    <div class="next">
+      <a v-if="next" class="link" :href="next.link">
+        <span class="text">{{ next.text }}</span>
+        <ArrowRight class="icon icon-next" />
+      </a>
     </div>
   </div>
 </template>
 
-<script src="./NextAndPrevLinks"></script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks'
+import ArrowLeft from './icons/ArrowLeft.vue'
+import ArrowRight from './icons/ArrowRight.vue'
 
-<style>
-.links-wrapper {
+export default defineComponent({
+  components: {
+    ArrowLeft,
+    ArrowRight
+  },
+
+  setup () {
+    const { hasLinks, prev, next } = useNextAndPrevLinks()
+
+    return {
+      hasLinks,
+      prev,
+      next
+    }
+  }
+})
+</script>
+
+<style scoped>
+.next-and-prev-link {
   display: flex;
   justify-content: space-between;
-  margin-top: 4rem;
   border-top: 1px solid var(--border-color);
   padding-top: 1rem;
-  padding-bottom: 2rem;
 }
 
-.links-wrapper a {
+.prev,
+.next {
+  display: flex;
+  flex-shrink: 0;
+  width: 50%;
+}
+
+.prev {
+  justify-content: flex-start;
+  padding-right: 12px;
+}
+
+.next {
+  justify-content: flex-end;
+  padding-left: 12px;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  font-size: 1rem;
   font-weight: 500;
 }
 
-.links-wrapper a:hover {
-  text-decoration: none !important;
+.text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+
+.icon {
+  display: block;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  fill: var(--text-color);
+}
+
+.icon-prev { margin-right: 8px; }
+.icon-next { margin-left: 8px; }
 </style>

src/client/theme-default/components/Page.vue

@@ -1,42 +1,39 @@
 <template>
-  <div class="content">
+  <div class="page">
     <slot name="top" />
-    <Content />
+
+    <div class="content">
+      <Content />
+    </div>
+
+    <EditLink />
     <NextAndPrevLinks />
-    <PageEdit />
+
     <slot name="bottom" />
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import EditLink from './EditLink.vue'
 import NextAndPrevLinks from './NextAndPrevLinks.vue'
-import PageEdit from './PageEdit.vue'
-export default {
-  components: { NextAndPrevLinks, PageEdit }
-}
+
+export default defineComponent({
+  components: {
+    EditLink,
+    NextAndPrevLinks
+  }
+})
 </script>
 
-<style>
-.content {
+<style scoped>
+.page {
   margin: 0 auto;
-  padding: 0.025rem 2.5rem 2rem;
-  /* if this is moved to a variable, add it to BuySellAds.vue */
+  padding: 0 1.5rem 4rem;
   max-width: 50rem;
 }
 
-.content a {
-  color: var(--accent-color);
-}
-
-.content a:hover {
-  text-decoration: underline;
-}
-
-.content img {
-  max-width: 100%;
+.content {
+  padding-bottom: 1.5rem;
 }
-/*
-.content div > h1:first-child, .content div > h2:first-child {
-  margin-top: 0;
-} */
 </style>

src/client/theme-default/components/icons/ArrowLeft.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z" />
+  </svg>
+</template>

src/client/theme-default/components/icons/ArrowRight.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z" />
+  </svg>
+</template>