ci: DLT-1479 send blog post notification to #dialtone channel

.github/workflows/send-email.yml → .github/workflows/send-blog-communications.yml

@@ -1,5 +1,8 @@
-name: Send communications
+name: Send blog communications
 on:
+  pull_request:
+    types:
+      - synchronize
   push:
     branches:
       - production
@@ -9,6 +12,10 @@ on:
 env:
   HUSKY: 0
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   added-posts:
     name: Get added posts
@@ -31,6 +38,7 @@ jobs:
         run: echo '${{ steps.changed-files.outputs.added_files }}'
 
   send-email:
+    if: false
     name: Send email
     runs-on: ubuntu-latest
     needs: [added-posts]
@@ -95,3 +103,48 @@ jobs:
           # Optional nodemailer debug: true/false
           # if true log nodemailer will also be set true
           nodemailerdebug: true
+
+  send-sms:
+    name: Send SMS
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    needs: [ added-posts ]
+    strategy:
+      matrix:
+        files: ${{ fromJSON(needs.added-posts.outputs.added_posts) }}
+    env:
+      FILE_PATH: ${{ matrix.files }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get link from file name
+        id: get-post-url
+        run: |
+          PREFIX="https:\/\/dialtone.dialpad.com"
+          echo "POST_URL=$(echo $FILE_PATH | sed -e "s/apps\/dialtone-documentation\/docs/$PREFIX/" -e 's/md/html/')" >> $GITHUB_ENV
+
+      - name: Get heading from blog post
+        id: get-heading
+        run: |
+          echo "BLOG_POST_HEADING=$(sed -n 's/^heading: *//p' $FILE_PATH)" >> $GITHUB_ENV
+
+      - id: auth
+        name: Authenticate to Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          workload_identity_provider: ${{ secrets.DIALTONE_GCP_WIP }}
+          service_account: ${{ secrets.DIALTONE_GCP_SA }}
+          token_format: "id_token"
+          id_token_audience: "https://us-central1-dp-dialtone-design-system.cloudfunctions.net/send-sms-to-dialtone-channel"
+
+      - name: Send sms
+        run: |
+          curl -m 70 -X POST https://us-central1-dp-dialtone-design-system.cloudfunctions.net/send-sms-to-dialtone-channel \
+          -H "Authorization: bearer ${{ steps.auth.outputs.id_token }}" \
+          -H "Content-Type: application/json" \
+          -d '{
+            "message": "New blog post: \"${{ env.BLOG_POST_HEADING }}\". Read full article: ${{ env.POST_URL }}"
+          }'

apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md

@@ -0,0 +1,198 @@
+---
+heading: Added Tree-shaking support for dialtone-vue and dialtone-icons
+author: Tico Ortega
+posted: '2024-4-15'
+---
+
+<BlogPost :author="$frontmatter.author" :posted="parse($frontmatter.posted, 'y-M-d', new Date())" :heading="$frontmatter.heading">
+
+# TL;DR:
+
+- Improved dialtone-vue **bundle size**.
+- Added **tree-shaking** support for dialtone-vue and dialtone icons.
+- **Updated mono-package exports** (migration guide included)
+- Now it's possible to **use icons from @dialpad/dialtone-icons directly**
+
+<br/>
+
+___
+
+<br/>
+
+**👋 Hey there,** we're excited to share some updates regarding the bundle size of dialtone-vue,
+how to migrate to latest dialtone version as the exports changed and how can you use @dialpad/dialtone-icons library to
+use isolated icons to avoid bundling a bunch of icons you're not using.
+
+## Dialtone-vue bundle size
+
+We've improved the dialtone-vue bundle size by externalizing all the dependencies that are not part of the library.
+
+### Before
+
+![dialtone vue bundle analysis before](/assets/images/bundle-analysis-before.png)
+![dialtone vue bundle size before](/assets/images/bundle-size-before.png)
+
+### After (without tree shaking)
+
+![dialtone vue bundle analysis after, without tree shaking](/assets/images/bundle-analysis-after-without-treeshaking.png)
+![dialtone vue bundle size after, without tree shaking](/assets/images/bundle-size-after-without-treeshaking.png)
+
+### After (with tree shaking)
+
+![dialtone vue bundle size after, with tree shaking](/assets/images/dialtone-vue-bundle-size-after-tree-shaking.png)
+
+```bash
+✓ 281 modules transformed.
+dist/style.css                                    34.04 kB │ gzip: 5.80 kB
+dist/chunks/dropdown_constants-EUcDxBrX.js         0.14 kB │ gzip: 0.15 kB │ map:  0.41 kB
+dist/lib/emoji.js                                  0.35 kB │ gzip: 0.24 kB │ map:  0.10 kB
+...
+✓ built in 2.15s
+```
+
+## Migration to dialtone >=9.27.1
+
+With the recent improvements, there are two ways of importing component from dialtone.
+
+### Directly from the bundle.
+
+- Pros
+  - Improved code readability as you can include multiple components on a single line.
+  - Treeshake works on vite+rollup with default config and can be improved with small changes to your [rollup config](https://rollupjs.org/configuration-options/#treeshake).
+- Cons
+  - Doesn't treeshake the library if you're using webpack.
+
+```js
+import { DtButton, DtInput } from '@dialpad/dialtone/vue2'
+```
+
+### Importing the individual component.
+
+- Pros
+  - Treeshake works on most bundlers without additional config as you're importing just what you need by default.
+- Cons
+  - Makes the code a bit less readable and harder to maintain as you need to import every component individually.
+
+```js
+import { DtButton } from '@dialpad/dialtone/vue2/lib/button'
+import { DtInput } from '@dialpad/dialtone/vue2/lib/input'
+```
+
+<small>Note: You can use [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) to import the components automatically
+to avoid having to import them manually.</small>
+
+To migrate, replace any instances of the old imports with the corresponding new imports, please refer to the examples table below for clarity.
+
+<div class="d-bb d-bc-default d-of-x-scroll">
+  <table class="d-table">
+      <thead>
+          <tr>
+              <th>Previous 👎</th>
+              <th>New 👍</th>
+              <th>Enable Tree shaking (best) ✨</th>
+          </tr>
+      </thead>
+      <tbody>
+          <tr>
+              <td>
+                <code>import { DtEmoji } from '@dialpad/dialtone/vue2/emoji'</code>
+              </td>
+              <td>
+                <code>import { DtEmoji } from '@dialpad/dialtone/vue2'</code>
+              </td>
+              <td>
+                <code>import { DtEmoji } from '@dialpad/dialtone/vue2/lib/emoji.js'</code>
+              </td>
+          </tr>
+          <tr>
+              <td>
+                <code>import { DtMessageInput } from '@dialpad/dialtone/vue2/message_input'</code>
+              </td>
+              <td>
+                <code>import { DtMessageInput } from '@dialpad/dialtone/vue2'</code>
+              </td>
+              <td>
+                <code>import { DtMessageInput } from '@dialpad/dialtone/vue2/lib/message-input.js'</code>
+              </td>
+          </tr>
+          <tr>
+              <td>
+                <code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/directives'</code>
+              </td>
+              <td>
+                <code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2'</code>
+              </td>
+              <td>
+                <code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/lib/tooltip-directive.js'</code>
+              </td>
+          </tr>
+          <tr>
+              <td>
+                <code>import SpotBlankSpace from '@dialpad/dialtone/dist/css/vue/spot/SpotBlankSpace'</code>
+              </td>
+              <td>
+                <code>import SpotBlankSpace from '@dialpad/dialtone/css/vue/spot/SpotBlankSpace.vue';</code>
+              </td>
+              <td>
+                -
+              </td>
+          </tr>
+          <tr>
+              <td>
+                <code>import { DtIcon } from '@dialpad/dialtone/vue2'</code>
+              </td>
+              <td>
+                <code>import { DtIcon } from '@dialpad/dialtone/vue2/icon';</code>
+              </td>
+              <td>
+                <code>import { DtIconAccessibility } from '@dialpad/dialtone-icons';</code>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+</div>
+
+## Using dialtone-icons
+
+Backwards-compatible support for DtIcon will remain for the near-term. However, we encourage you to begin updating your projects to the new dialtone-icons usage for a seamless and better experience.
+
+Previously, to use an icon on your app you had to do:
+
+```jsx
+import { DtIcon } from '@dialpad/dialtone'
+
+<dt-icon name="accessibility" size="300" />
+```
+
+This is going to change going forward to enable better tree shaking capabilities and a possible lazy-loading in the future to improve even more the load of your app.
+
+As of dialtone components, there's also two ways of importing icons, with the same caveats and advantages as [importing components](#directly-from-the-bundle):
+
+```jsx
+import { DtIconAccessibility } from '@dialpad/dialtone-icons/vue2'
+import { DtIconApple } from '@dialpad/dialtone-icons/vue2/apple'
+```
+
+use it as follows:
+
+```jsx
+<dt-icon-accessibility size="300" />
+<dt-icon-apple size="600" />
+```
+
+This way, only the icons you import are going to be bundled on your package, improving bundle size, build and runtime performance.
+
+## Got questions?
+
+For more detailed information, read our [README.md](https://github.com/dialpad/dialtone/blob/staging/README.md#import-packages).
+
+We're here to help! Reach out us in the `#dialtone` channel for any assistance you need.
+
+Thanks for your patience and understanding,
+Dialtone Team 💜
+</BlogPost>
+
+<script setup>
+import BlogPost from '@baseComponents/BlogPost.vue';
+import { parse } from 'date-fns';
+</script>