read more

package-lock.json

@@ -26,6 +26,7 @@
         "ionicons": "^7.0.0",
         "swiper": "^9.2.0",
         "vue": "^3.2.45",
+        "vue-read-more": "^1.1.1",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -37,7 +38,10 @@
         "eslint": "^8.35.0",
         "eslint-plugin-vue": "^9.9.0",
         "jsdom": "^21.1.0",
+        "markdown-truncate": "^1.1.0",
+        "marked": "^4.3.0",
         "node-sass": "^8.0.0",
+        "readmore-js": "^2.2.1",
         "sass": "^1.61.0",
         "sass-loader": "^13.2.2",
         "typescript": "^4.9.3",
@@ -4982,6 +4986,12 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
+      "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==",
+      "dev": true
+    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -5483,6 +5493,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdown-truncate": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-truncate/-/markdown-truncate-1.1.0.tgz",
+      "integrity": "sha512-totIV8266I//yl7sxCW6xv08T28Yva6a1czpnHlE6scwFOr9yoIbLvzeIp64M3MMyOwo3WX4MVQ+lMQHXAP/ow==",
+      "dev": true
+    },
+    "node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -7011,6 +7039,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/readmore-js": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readmore-js/-/readmore-js-2.2.1.tgz",
+      "integrity": "sha512-hbPP0nQpYYkAywCEZ8ozHivvhWyHic37KJ2IXrHES4qzjp0+nmw8R33MeyMAtXBZfXX4Es8cpd5JBVf9qj47+Q==",
+      "dev": true,
+      "dependencies": {
+        "jquery": ">2.1.4"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -8537,6 +8574,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-read-more": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-read-more/-/vue-read-more-1.1.1.tgz",
+      "integrity": "sha512-FFv0y5Pg1763fsLo6MA5RSpibThNEoJG6teSRH+rRIQe8O0LAeU4juEn6MRHZN0qOwtXOlbOjO8oit7YSd1NcA=="
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@@ -12595,6 +12637,12 @@
         "supports-color": "^8.0.0"
       }
     },
+    "jquery": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
+      "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -12985,6 +13033,18 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true
     },
+    "markdown-truncate": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-truncate/-/markdown-truncate-1.1.0.tgz",
+      "integrity": "sha512-totIV8266I//yl7sxCW6xv08T28Yva6a1czpnHlE6scwFOr9yoIbLvzeIp64M3MMyOwo3WX4MVQ+lMQHXAP/ow==",
+      "dev": true
+    },
+    "marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "dev": true
+    },
     "meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -14160,6 +14220,15 @@
         "picomatch": "^2.2.1"
       }
     },
+    "readmore-js": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readmore-js/-/readmore-js-2.2.1.tgz",
+      "integrity": "sha512-hbPP0nQpYYkAywCEZ8ozHivvhWyHic37KJ2IXrHES4qzjp0+nmw8R33MeyMAtXBZfXX4Es8cpd5JBVf9qj47+Q==",
+      "dev": true,
+      "requires": {
+        "jquery": ">2.1.4"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -15238,6 +15307,11 @@
         }
       }
     },
+    "vue-read-more": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-read-more/-/vue-read-more-1.1.1.tgz",
+      "integrity": "sha512-FFv0y5Pg1763fsLo6MA5RSpibThNEoJG6teSRH+rRIQe8O0LAeU4juEn6MRHZN0qOwtXOlbOjO8oit7YSd1NcA=="
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",

package.json

@@ -30,6 +30,7 @@
     "ionicons": "^7.0.0",
     "swiper": "^9.2.0",
     "vue": "^3.2.45",
+    "vue-read-more": "^1.1.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
@@ -41,7 +42,10 @@
     "eslint": "^8.35.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
+    "markdown-truncate": "^1.1.0",
+    "marked": "^4.3.0",
     "node-sass": "^8.0.0",
+    "readmore-js": "^2.2.1",
     "sass": "^1.61.0",
     "sass-loader": "^13.2.2",
     "typescript": "^4.9.3",

src/api_config.ts

@@ -1,3 +1,3 @@
-export const API_URL = "http://192.168.1.35:8000/api/"
+export const API_URL = "http://192.168.100.180:8000/api/"
 //export const API_URL = "https://kacee.simplico.net/api/"
 

src/components/ProductDetail.vue

@@ -33,11 +33,14 @@
             </ion-col>
         </ion-row>
       </ion-grid>
-      <ion-text>
-        <h1>{{ product.name }}</h1>
-        <vue-showdown :markdown="product.description" />
- 
-      </ion-text>
+      <h1>{{ product.name }} {{ product.id }}</h1>
+      <!--
+        {{ readmore }} -->
+      <ion-text v-html="short_desc" v-if="!readmore" />
+      
+      <ion-text v-html="description" v-if="readmore" />
+      <ion-button expand="full" @click="readmore = true" v-if="!readmore" color="medium">Read More</ion-button>
+      <ion-button expand="full" @click="readmore = false" v-if="readmore" color="medium">Read Less</ion-button>
     </template>
   </ion-content>
 </template>
@@ -64,10 +67,15 @@ import {
 } from '@ionic/vue';
 
 import { VueShowdown } from 'vue-showdown';
+import { ReadMore } from 'vue-read-more';
 import { ref, onMounted } from 'vue'
 
 import axios from 'axios';
 import { API_URL } from '@/api_config';
+import { marked }  from 'marked';
+import truncateMarkdown from 'markdown-truncate'
+
+
 
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
@@ -76,6 +84,10 @@ import '@ionic/vue/css/ionic-swiper.css';
 const props = defineProps(['pid'])
 let pid = ref(0)
 let product = ref(null)
+let description = ref(null)
+let short_desc = ref(null)
+let readmore = ref(false)
+
 //console.log(pid)
 
 let name = ref("xxx")
@@ -92,6 +104,15 @@ onMounted(async () => {
   const res = await axios.get(API_URL + `fn_products/${props.pid}/?format=json`)
   product.value = res.data
   pid.value  = props.pid
+  console.log("description")
+  console.log(description)
+  //readmore(description)
+  console.log(res.data)
+  description.value = marked(res.data.description)
+  short_desc.value = truncateMarkdown(res.data.description, { limit: 300, ellipsis: true })
+  let sd  = truncateMarkdown(res.data.description, { limit: 300, ellipsis: true })
+  short_desc.value = marked(sd)
+  console.log(description.value)
 })
 
 </script>

src/views/ProductListPage.vue

@@ -49,6 +49,7 @@ onMounted( async() => {
   console.log(cat)
   const res = await axios.get(API_URL+`fn_products/?format=json&cat=${cat}`)
   prods.value = res.data.results
+  console.log("prods")
   console.log(prods)
 })