@kompasid/lit-web-components 0.6.8 → 0.7.0

package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts

@@ -0,0 +1,342 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { Post, Navigation } from './types.js'
+
+@customElement('kompasid-widget-recirculations-default')
+export class KompasWidgetRecirculationsDefault extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  @property({ type: Array }) posts: Post[][] = []
+  @property({ type: Object }) navigation: Navigation | undefined = undefined
+  @property({ type: String }) accessToken = ''
+  @property({ type: String }) permalinkArticle = ''
+  @property({ type: String }) userGuid = '0'
+  @property({ type: String }) slugs = ''
+  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =
+    'relatedArticle'
+  @property({ type: String }) mainCategory = ''
+
+  /**
+   * Getters
+   */
+  get navigationPermalink(): string | undefined {
+    return this.navigation?.permalink
+  }
+
+  /**
+   * Fetch Data
+   */
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchAccessToken()
+      if (this.type === 'relatedArticle') {
+        await this.relatedArticles()
+      } else if (this.type === 'otherArticle') {
+        await this.otherArticles()
+      }
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+
+  async fetchAccessToken() {
+    const response = await fetch(
+      'https://api.kompas.id/account/api/v1/login/guest',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: 'anonynous.user@kompas.id',
+        }),
+      }
+    )
+
+    const result = await response.json()
+
+    if (result?.data?.accessToken) {
+      this.accessToken = result.data.accessToken
+    } else {
+      throw new Error('Token akses tidak tersedia dalam respons')
+    }
+  }
+
+  async relatedArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiAi = 'https://ai.kompas.id/api/v1'
+
+    // Constructing parameters
+    const params = new URLSearchParams()
+    params.append('page_url', this.permalinkArticle)
+    params.append('page_type', 'read')
+    params.append('item_type', 'articles')
+    params.append('guid', this.userGuid)
+    params.append('slugs', this.slugs)
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('related article:', this.posts)
+    } else {
+      throw new Error('Data artikel terkait tidak ditemukan')
+    }
+  }
+
+  async otherArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('other article:', this.posts)
+    } else {
+      throw new Error('Data artikel lainnya tidak ditemukan')
+    }
+  }
+
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  /**
+   * Function to format date
+   */
+  formatDate(date: string) {
+    return format(new Date(date), 'dd MMMM yyyy', { locale: id })
+  }
+
+  /**
+   * Render widget components
+   */
+
+  private WidgetTitle() {
+    if (this.navigationPermalink) {
+      return html`
+        <a
+          href="${this.navigationPermalink}"
+          class="flex font-sans uppercase items-start mb-6 mt-8"
+        >
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </a>
+      `
+    }
+
+    return html`
+      <div class="flex font-sans uppercase items-start mb-6 mt-8">
+        <div>
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </div>
+      </div>
+    `
+  }
+
+  renderChips(post: Post) {
+    const chips = []
+    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')
+    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')
+    const isFreemium = post.isFreemium === true
+
+    if (isEksklusif) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `
+      )
+    } else if (isFreemium) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `
+      )
+    } else if (isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
+    }
+
+    return chips
+  }
+
+  renderImage(post: Post) {
+    const { thumbnailMedium } = post.thumbnails?.sizes || {}
+    if (!thumbnailMedium) return ''
+
+    const { permalink, width, height } = thumbnailMedium
+    return html`
+      <img
+        src="${permalink}"
+        width="${width}"
+        height="${height}"
+        alt="${post.title}"
+        class="aspect-video object-cover w-full"
+      />
+    `
+  }
+
+  render() {
+    return html`
+      <div class="w-full">
+        <!-- start: widget title -->
+        ${this.WidgetTitle()}
+        <!-- end: widget title -->
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          <!-- start: left-post-loop -->
+          <div class="grid grid-cols-1 gap-6">
+            ${this.posts[0]
+              ? this.posts[0].map(
+                  post => html`
+                    <div class="w-full">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : 'Belum ada artikel'}
+          </div>
+          <!-- end: left-post-loop -->
+
+          <!-- start: right-post-loop -->
+          <div class="flex flex-col w-full">
+            ${this.posts[1]
+              ? this.posts[1].map(
+                  post => html`
+                    <div class="mb-6">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : ''}
+            <!-- start: ads -->
+            <slot></slot>
+            <!-- end: ads -->
+          </div>
+          <!-- end: right-post-loop -->
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/kompasid-widget-recirculations-default/readme.md

@@ -0,0 +1,57 @@
+# kompasid-widget-recirculations-list
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan daftar aliran artikel dari Kompas.id.
+
+### Contoh Implementasi
+
+```javascript
+const widgetRelatedPost = {
+  navigation: {
+    name: 'Artikel Terkait',
+    permalink: undefined
+  },
+  permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
+  slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
+}
+
+const widgetOtherPost = {
+  navigation: {
+    name: 'Lainnya Dalam Opini',
+    permalink: '/kategori/opini'
+  }
+}
+
+<div>
+<kompasid-widget-recirculations-default
+  .navigation=${widgetRelatedPost.navigation}
+  .permalinkArticle=${widgetRelatedPost.permalinkArticle}
+  .slugs=${widgetRelatedPost.slugs}
+></kompasid-widget-recirculations-default>
+
+<kompasid-widget-recirculations-default
+  .navigation=${widgetOtherPost.navigation}
+  type='otherArticle'
+  mainCategory='opini'
+></kompasid-widget-recirculations-default>
+</div>
+```
+
+## Properti
+
+| Property           | Attribute       | Deskripsi                                                                                           | Tipe     | Default         | Konten                                      |
+| ------------------ | --------------- | -------------------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------- |
+| `navigation`       | `navigation`    | Navigasi yang berisi nama dan tautan ke kategori atau halaman terkait.  Mengecek value `name` dan `permalink`                            | `Object` | `undefined`     | `Navigation`                                |
+| `userGuid`         | `userGuid`      | GUID pengguna yang sedang menggunakan aplikasi untuk fetch data artikel terkait.                                                    | `String` | `'0'`           |                                             |
+| `slugs`            | `slugs`         | Daftar slug kategori atau tag yang terkait dengan artikel untuk artikel terkait.                                          | `String` | `''`            |                                             |
+| `permalinkArticle` | `permalinkArticle` | Tautan kategori artikel yang sedang ditampilkan atau dibaca untuk rekomendasi artikel terkait.                                     | `String` | `''`            |                                             |
+| `type`             | `type`          | Tipe widget untuk membedakan antara pengambilan data artikel terkait (`relatedArticle`) atau lainnya dalam kategori (`otherArticle`). | `String` | `'relatedArticle'` | `"relatedArticle" \| "otherArticle"` |
+| `mainCategory`     | `mainCategory`  | Kategori utama artikel yang akan ditampilkan jika menggunakan tipe `otherArticle` untuk lainnya dalam kategori.                  | `String` | `''`            |                                             |
+
+
+### Digunakan oleh
+
+- [kompasid-widget-recirculations-default](../kompasid-widget-recirculations-default)
+
+## Kontributor
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/src/components/kompasid-widget-recirculations-default/types.ts

@@ -0,0 +1,28 @@
+interface PostTag {
+  slug: string
+}
+
+export interface Post {
+  title: string
+  isAnalisis?: boolean
+  isEksklusif?: boolean
+  isFreemium?: boolean
+  featuredImageThumbnailMedium: string
+  permalink: string
+  publishedDate: string
+  postTag?: PostTag[]
+  thumbnails: {
+    sizes: {
+      thumbnailMedium: {
+        permalink: string
+        width: number
+        height: number
+      }
+    }
+  }
+}
+
+export interface Navigation {
+  name: string
+  permalink: string
+}

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -0,0 +1,230 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+
+interface PostTag {
+  slug: string
+}
+
+interface ListItem {
+  title: string
+  isAnalisis?: boolean
+  isEksklusif?: boolean
+  isFreemium?: boolean
+  permalink: string
+  publishedDate?: string
+  postTag?: PostTag[]
+}
+
+@customElement('kompasid-widget-recirculations-list')
+export class KompasWidgetRecirculationsList extends LitElement {
+  @property({ type: String }) widgetTitle = ''
+  @property({ type: Array }) articleList: ListItem[] = []
+  @property({ type: String }) accessToken = ''
+  @property({ type: String }) apiSlug = ''
+
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchAccessToken()
+      await this.fetchArticles()
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+
+  async fetchAccessToken() {
+    const response = await fetch(
+      'https://api.kompas.id/account/api/v1/login/guest',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: 'anonynous.user@kompas.id',
+        }),
+      }
+    )
+
+    const result = await response.json()
+
+    if (result?.data?.accessToken) {
+      this.accessToken = result.data.accessToken
+    } else {
+      throw new Error('Token akses tidak tersedia dalam respons')
+    }
+  }
+
+  async fetchArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      this.articleList = result.result.map(
+        (article: {
+          postTag?: never[] | undefined
+          isFreemium?: false | undefined
+          title: any
+          permalink: any
+          publishedDate: any
+        }) => {
+          const {
+            postTag = [],
+            isFreemium = false,
+            title,
+            permalink,
+            publishedDate,
+          } = article
+
+          const isAnalisis = postTag.some(
+            (tag: { slug: string }) => tag.slug === 'analisis'
+          )
+          const isEksklusif = postTag.some(
+            (tag: { slug: string }) => tag.slug === 'eksklusif'
+          )
+
+          return {
+            isAnalisis,
+            isEksklusif,
+            isFreemium,
+            title,
+            permalink,
+            publishedDate,
+          }
+        }
+      )
+    } else {
+      throw new Error('Data artikel populer tidak ditemukan')
+    }
+  }
+
+  formatDate(date: string) {
+    return format(new Date(date), "dd MMMM yyyy' · 'HH:mm' WIB", { locale: id })
+  }
+
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  renderChips(item: ListItem) {
+    const chips = []
+
+    if (item.isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
+    }
+
+    if (item.isEksklusif) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `
+      )
+    }
+
+    if (item.isFreemium) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `
+      )
+    }
+
+    return chips
+  }
+
+  render() {
+    return html`
+      <div>
+        <div class="mb-6">
+          <h5 class="capitalize font-bold text-grey-600 font-sans">
+            ${this.widgetTitle}
+          </h5>
+        </div>
+
+        <ul class="flex flex-col">
+          ${this.articleList.slice(0, 5).map(
+            item =>
+              html`
+                <li class="flex flex-col items-start mb-3">
+                  <div class="flex w-full">
+                    <div class="flex flex-col w-full">
+                      ${this.renderChips(item)}
+                      <a
+                        href="${item.permalink}"
+                        class="font-bold font-sans hover:underline leading-tight text-base text-grey-600"
+                      >
+                        ${item.title}
+                      </a>
+                      <div
+                        class="flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2"
+                      >
+                        ${item.publishedDate
+                          ? this.formatDate(item.publishedDate)
+                          : 'Tanggal tidak tersedia'}
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              `
+          )}
+        </ul>
+      </div>
+    `
+  }
+}

package/src/components/kompasid-widget-recirculations-list/readme.md

@@ -0,0 +1,27 @@
+# kompasid-widget-recirculations-list
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan daftar aliran artikel dari Kompas.id.
+
+### Element
+
+```javascript
+<kompasid-widget-recirculations-list
+  widgetTitle="Terpopuler"
+  apiSlug="popular-article"
+></kompasid-widget-recirculations-list>
+```
+
+## Properties
+
+| Property      | Attribute    | Description                                       | Tipe     | Default | Content |
+| -------------| -------------| ----------------------------------------------- | -------- | ------- | ---------------- |
+| `widgetTitle`| `widgetTitle`| Judul untuk widget.                             | `string` | `''`    | `"Terbaru" \| "Terpopuler"` |
+| `apiSlug`    | `apiSlug`    | Slug yang digunakan untuk mengidentifikasi endpoint API untuk mengambil daftar artikel. | `string` | `''`    | `"list" \| "popular-article"` |
+
+### Used by
+
+- [kompasid-widget-recirculations-list](../kompasid-widget-recirculations-list)
+
+## Contributors
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/src/index.ts

@@ -1,3 +1,5 @@
+export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
+export { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
 export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'
 export { KompasFooter } from './components/kompasid-footer/KompasFooter.js'
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'