add stripImg for card description

CHANGELOG.md

@@ -21,6 +21,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Security
 
+## [0.8.1] - 2023-06-20
+
+### Added
+
+-   utils stripImg to remove <img > tag
+
+### Fixed
+
+-   remove img tag in cards description (usefull for News card)
+-   utils definition
+
 ## [0.8.0] - 2023-06-13
 
 ### Added

gatsby-config.js

@@ -91,6 +91,16 @@ module.exports = {
         // `gatsby-plugin-offline`,
     ],
     proxy: [
+        {
+            // Access Geoserver API
+            prefix: "/geoserver",
+            url: PF_URL,
+        },
+        {
+            // Access Metabase API
+            prefix: "/metabase",
+            url: PF_URL,
+        },
         {
             // Access OGS Explorer API
             prefix: "/fr",

index.d.ts

@@ -172,7 +172,8 @@ interface ItitleComponent {
     className?: string
     options?: any
 }
-export function Data(props: ItitleComponent): JSX.Element
+export function TitleComponent(props: ItitleComponent): JSX.Element
+
 interface PartnersProps {
     className?: string
     delay?: number
@@ -343,12 +344,14 @@ interface IText {
 export function Text(props: IText): JSX.Element
 
 export const isBrowser: boolean
-export function isArray(): boolean
-export function isBoolean(): boolean
-export function isObject(): boolean
-export function isString(): boolean
-export function merge(): object
+export function isArray(val: any): boolean
+export function isNotEmptyArray(val: any): boolean
+export function isBoolean(val: any): boolean
+export function isObject(val: any): boolean
+export function isString(val: any): boolean
+export function merge(obj1: object, obj2: object): object
 export function cleanHtml(strHtml: string): string
+export function stripImg(strHtml: string): string
 
 export function usePageContext(): any
 

index.js

@@ -68,8 +68,10 @@ export { default as Text } from "./src/components/Text"
 
 export {
     cleanHtml,
+    stripImg,
     isBrowser,
     isArray,
+    isNotEmptyArray,
     isBoolean,
     isObject,
     isString,

src/components/News.tsx

 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
-
-import CardList from "./core/CardList"
-import Button from "./core/Button"
 import { twMerge } from "tailwind-merge"
 
-import TitleComponent from "./core/TitleComponent"
+import {
+    CardList,
+    Button,
+    TitleComponent,
+} from "@onegeo-suite/gatsby-theme-onegeo"
 
 // Ineherit type from cardlist ?
 interface INews {
@@ -33,6 +34,7 @@ const News = (props: INews) => {
                     id
                     slug
                     content
+                    abstract
                     title
                     date_published
                     image {
@@ -69,7 +71,7 @@ const News = (props: INews) => {
     const news = data.directus.news.map((dtNew) => {
         return {
             name: dtNew.title,
-            description: dtNew.content,
+            description: dtNew.abstract || dtNew.content,
             image: dtNew.image?.imageFile,
             url: "/news/" + dtNew.slug,
             size: size,

src/components/core/Card.tsx

 import React from "react"
 import Image, { Iimage } from "./Image"
-import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
+import { Link, stripImg } from "@onegeo-suite/gatsby-theme-onegeo"
 import { twMerge } from "tailwind-merge"
 
 export interface ICard extends Iimage {
@@ -144,7 +144,9 @@ const CardContent = (props: ICard) => {
                             lClass.description,
                             oClass.description
                         )}
-                        dangerouslySetInnerHTML={{ __html: description }}
+                        dangerouslySetInnerHTML={{
+                            __html: stripImg(description),
+                        }}
                     />
                 ) : null}
                 {children}

src/pages/index.tsx

@@ -36,8 +36,11 @@ export const query = graphql`
     query {
         directus {
             site {
-                sections(sort: "sort") {
-                    sections_id(filter: { status: { _eq: "published" } }) {
+                sections(
+                    sort: "sort"
+                    filter: { sections_id: { status: { _eq: "published" } } }
+                ) {
+                    sections_id {
                         id
                     }
                     sort

src/utils.ts

 export const cleanHtml = (strHtml) => {
     if (!strHtml) return ""
     if (!isString(strHtml)) return ""
+
+    // if (isNotEmptyArray(tags)) {
+    //     var tagsRegex = tags.join("|")
+    //     var regex = new RegExp(
+    //         "<(?:" + tagsRegex + ")[^>]*>[\\s\\S]*?<\\/(?:" + tagsRegex + ")>",
+    //         "gi"
+    //     )
+    //     return strHtml.replace(regex, "")
+    // }
+
     return strHtml.replace(/<\/?[^>]+(>|$)/g, "")
 }
 
+export const stripImg = (strHtml) => {
+    if (!strHtml) return ""
+    if (!isString(strHtml)) return ""
+
+    return strHtml.replace(/<img[^>]*>/g, "")
+}
+
 export const isBrowser = typeof window !== "undefined"
 
 export const isBoolean = (val) => "boolean" === typeof val
@@ -12,12 +29,15 @@ export const isString = (val) => {
     return Object.prototype.toString.call(val) === "[object String]"
 }
 
-export const isArray = (obj) => {
-    return Object.prototype.toString.call(obj) === "[object Array]"
+export const isArray = (val) => {
+    return Object.prototype.toString.call(val) === "[object Array]"
+}
+export const isNotEmptyArray = (val) => {
+    return isArray(val) && val.length > 0
 }
 
-export const isObject = (obj) => {
-    return Object.prototype.toString.call(obj) === "[object Object]"
+export const isObject = (val) => {
+    return Object.prototype.toString.call(val) === "[object Object]"
 }
 
 // Thanks ChatGPT ;)