@salesforcedevs/dw-components 1.3.285 → 1.3.287

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.285",
+    "version": "1.3.287",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
     },
-    "gitHead": "7b141c2210175998f0a17bd2c4d2684a5cd5a3ac"
+    "gitHead": "7846795e360372acdc10ed88d1f3a8aa99a90aa7"
 }

package/src/modules/dw/blogsGrid/blogsGrid.css

@@ -24,10 +24,6 @@ dx-section.section-reduced-padding {
         line-height: 32px;
         width: 500px;
     }
-
-    .box {
-        height: 162px;
-    }
 }
 
 @media only screen and (max-width: 640px) {
@@ -40,7 +36,6 @@ dx-section.section-reduced-padding {
     }
 
     .box {
-        height: 162px;
         background-position: 0% 25%, 90% 75%;
     }
 }

package/src/modules/dw/blogsGrid/blogsGrid.html

@@ -5,10 +5,8 @@
         <div class="subscription-box">
             <div class="box">
                 <div class="content">
-                    <h2 class="title">
-                        Get the latest Salesforce Developer blog posts and
-                        podcast episodes via Slack or RSS.
-                    </h2>
+                    <h2 class="title">{rssTitle}</h2>
+                    <p lwc:if={rssBody}>{rssBody}</p>
                     <div class="cta-container">
                         <dx-button
                             size="small"
@@ -19,7 +17,7 @@
                             href="/slack/install"
                             class="button"
                         >
-                            Add to Slack
+                            {rssBtnOneLabel}
                         </dx-button>
                         <dx-button
                             size="small"
@@ -31,7 +29,7 @@
                             class="button"
                             onclick={rssOnClick}
                         >
-                            Subscribe to RSS
+                            {rssBtnTwoLabel}
                         </dx-button>
                     </div>
                 </div>
@@ -65,14 +63,14 @@
             if:true={showLoadMore}
             onclick={onClick}
             variant="load-more"
-            text="SHOW MORE"
+            text={showMoreLabel}
         ></dx-hr>
         <dx-hr
             if:true={showArchives}
             onclick={onClick}
             variant="link"
             href="/content-archive?content-type=Blogs"
-            text="VIEW ARCHIVES"
+            text={viewArchivesLabel}
         ></dx-hr>
     </div>
 </template>

package/src/modules/dw/blogsGrid/blogsGrid.ts

@@ -1,3 +1,4 @@
+import { api } from "lwc";
 import { normalizePost } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 import { WordpressBlogPost, NormalizedPost } from "typings/custom";
@@ -13,6 +14,14 @@ const ANALYTICS_INFO = {
 };
 
 export default class BlogsGrid extends PostsGrid {
+    @api showMoreLabel = "SHOW MORE";
+    @api viewArchivesLabel = "VIEW ARCHIVES";
+    @api rssTitle =
+        "Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.";
+    @api rssBody?: string;
+    @api rssBtnOneLabel = "Add to Slack";
+    @api rssBtnTwoLabel = "Subscribe to RSS";
+
     _loadMoreAmount = 21;
 
     normalizePost(post: WordpressBlogPost): NormalizedPost {

package/src/modules/dw/contentArchive/contentArchive.html

@@ -39,6 +39,12 @@
                         filters-dates-loading={filtersDatesLoading}
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
+                    <dx-filter-menu
+                        name="languages"
+                        title={languageTitle}
+                        options={languagesList}
+                        onchange={handleFiltersEvent}
+                    ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
@@ -87,6 +93,12 @@
                         variant="nested"
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
+                    <dx-filter-menu
+                        name="languages"
+                        title={languageTitle}
+                        options={languagesList}
+                        onchange={handleFiltersEvent}
+                    ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"

package/src/modules/dw/contentArchive/contentArchive.ts

@@ -15,6 +15,7 @@ const MOBILE_MATCH = "767px";
 enum FilterNames {
     QUERY_CONTENT_FILTER = "contentType",
     QUERY_AUTHOR_FILTER = "authors",
+    QUERY_LANGUAGE_FILTER = "language",
     QUERY_DATES_FILTER = "dates",
     QUERY_CATEGORIES_FILTER = "categories"
 }
@@ -38,6 +39,7 @@ export default class ContentArchive extends LightningElement {
     private postsByDate: {} = {};
     private dateList: any[] = [];
     private authorList: any[] = [];
+    private languagesList: any[] = [];
     private categoryList: any[] = [];
 
     private isMobile: boolean = false;
@@ -47,7 +49,8 @@ export default class ContentArchive extends LightningElement {
         contentType: [],
         dates: [],
         authors: [],
-        categories: []
+        categories: [],
+        languages: []
     };
 
     private posts: any[] = [];
@@ -147,6 +150,15 @@ export default class ContentArchive extends LightningElement {
                 : ""
         }`;
     }
+
+    get languageTitle() {
+        return `Language ${
+            this.selectedFilterMenuData.languages.length > 0
+                ? `(${this.selectedFilterMenuData.languages.length})`
+                : ""
+        }`;
+    }
+
     get categoryTitle() {
         return `Topic ${
             this.selectedFilterMenuData.categories.length > 0
@@ -244,7 +256,8 @@ export default class ContentArchive extends LightningElement {
                 contentType: [...copy.contentType],
                 categories: [...copy.categories],
                 dates: [...copy.dates],
-                authors: []
+                authors: [],
+                languages: []
             };
         }
 
@@ -255,7 +268,8 @@ export default class ContentArchive extends LightningElement {
                 contentType: [{ id: 1, name: "Blogs" }],
                 categories: [...copy.categories],
                 dates: [...copy.dates],
-                authors: [...copy.authors]
+                authors: [...copy.authors],
+                languages: [...copy.languages]
             };
         }
 
@@ -331,6 +345,7 @@ export default class ContentArchive extends LightningElement {
             contentType: [],
             dates: [],
             authors: [],
+            languages: [],
             categories: []
         };
 
@@ -340,6 +355,7 @@ export default class ContentArchive extends LightningElement {
         setUrlParamValue({
             [FilterNames.QUERY_CONTENT_FILTER]: [],
             [FilterNames.QUERY_AUTHOR_FILTER]: [],
+            [FilterNames.QUERY_LANGUAGE_FILTER]: [],
             [FilterNames.QUERY_CATEGORIES_FILTER]: [],
             [FilterNames.QUERY_DATES_FILTER]: []
         });
@@ -374,6 +390,10 @@ export default class ContentArchive extends LightningElement {
             this.authorList = authors;
             this.categoryList = categories;
             this.filtersLoading = false;
+            this.languagesList = [
+                { id: "english", name: "English" },
+                { id: "japanese", name: "日本語" }
+            ];
 
             // note... this is super hacky... but necessary in order to both
             // 1. actually filter the content
@@ -506,6 +526,7 @@ export default class ContentArchive extends LightningElement {
     private updateAllFiltersFromUrl() {
         const filters: FilterMenuData = {
             [FilterNames.QUERY_AUTHOR_FILTER]: this.authorList,
+            [FilterNames.QUERY_LANGUAGE_FILTER]: this.languagesList,
             [FilterNames.QUERY_DATES_FILTER]: this.dateList,
             [FilterNames.QUERY_CATEGORIES_FILTER]: this.categoryList,
             [FilterNames.QUERY_CONTENT_FILTER]: this.contentTypeList

package/src/modules/dw/contentArchive/contentArchive.types.ts

@@ -13,6 +13,9 @@ export type ArchivePost = {
     title: {
         rendered: string;
     };
+    acf: {
+        language: string;
+    };
     type: string;
     link: string;
     excerpt: string;
@@ -69,7 +72,8 @@ export type FilterMenuNames =
     | "contentType"
     | "dates"
     | "authors"
-    | "categories";
+    | "categories"
+    | "language";
 
 export type Filters = {
     [key in FilterMenuNames]: any[];
@@ -94,4 +98,5 @@ export type FilterMenuData = {
     dates: Array<FilterMenuItem>;
     categories: Array<FilterMenuItem>;
     authors: Array<FilterMenuItem>;
+    language: Array<FilterMenuItem>;
 };

package/src/modules/dw/contentArchive/utils.ts

@@ -6,6 +6,7 @@ import {
     FilterMenuItem
 } from "./contentArchive.types";
 import altData from "./altData.js";
+import { normalizePostLink } from "../languageSelector/languageSelector";
 
 let postsController: AbortController | null = null;
 let filtersController: AbortController | null = null;
@@ -61,7 +62,7 @@ function normalizePosts(posts: Array<ArchivePost>, contentType: string) {
         title: post.title.rendered,
         date: post.date,
         contentType: post.sitename.toLowerCase(),
-        href: post.link,
+        href: normalizePostLink(post),
         ...(contentType === "expanded" && {
             excerpt: post.excerpt,
             duration: getAudioDuration(post.podcast_audio.duration),
@@ -83,7 +84,8 @@ export async function getArchivePosts({
         contentType: [],
         dates: [],
         authors: [],
-        categories: []
+        categories: [],
+        language: []
     }
 }: {
     count: number;
@@ -103,6 +105,9 @@ export async function getArchivePosts({
         ),
         category: filterMenuData.categories.map(
             (category: FilterMenuItem) => category.id
+        ),
+        language: filterMenuData.language.map(
+            (language: FilterMenuItem) => language.id
         )
     };
 
@@ -112,6 +117,7 @@ export async function getArchivePosts({
         "date",
         "sitename",
         "link",
+        "acf",
         "podcast_audio",
         "authors"
     ];
@@ -124,7 +130,7 @@ export async function getArchivePosts({
 
     const query: any = {
         ...filterQuery,
-        _fields: ["id", "title", "date", "sitename", "link"],
+        _fields: ["id", "title", "date", "sitename", "link", "acf"],
         per_page: count,
         page
     };

package/src/modules/dw/languageSelector/languageSelector.html

@@ -1,5 +1,6 @@
 <template>
     <dx-select
+        if:false={noTranslationsAvailable}
         options={languages}
         onchange={handleLanguageChange}
         placement="bottom-end"

package/src/modules/dw/languageSelector/languageSelector.ts

@@ -9,7 +9,19 @@ const ANALYTICS_INFO = {
 
 const language_local_names_map: any = {
     japanese: "日本語",
-    english: "english"
+    english: "English"
+};
+
+export const normalizePostLink = (post: {
+    acf: { language: string };
+    link: string;
+}) => {
+    switch (post.acf.language) {
+        case "japanese":
+            return post.link.replace("/blogs/", "/jpblogs/");
+        default:
+            return post.link;
+    }
 };
 
 export default class LanguageSelector extends LightningElement {
@@ -39,7 +51,8 @@ export default class LanguageSelector extends LightningElement {
                     const localLanguageName =
                         language_local_names_map[post.acf.language] ||
                         language_local_names_map.english;
-                    this._languageMap[localLanguageName] = post.link;
+                    this._languageMap[localLanguageName] =
+                        normalizePostLink(post);
                 }
             );
 
@@ -81,6 +94,6 @@ export default class LanguageSelector extends LightningElement {
     }
 
     get noTranslationsAvailable() {
-        return this.languages.length === 0;
+        return this.languages.length <= 1;
     }
 }