Skip to content

Commit aa33d41

Browse files
AchoArnoldCopilot
AchoArnold
and
Copilot
committed
refactor(web): update blog pages to MD3 typography classes
Replace Vuetify 2 typography classes with Material Design 3 equivalents: - text-h3/text-md-h2 → text-display-small/text-display-medium (responsive via useDisplay) - text-h4 → text-headline-large - text-subtitle-1 → text-body-large Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 48d32cd commit aa33d41

7 files changed

Lines changed: 111 additions & 47 deletions

‎web/app/pages/blog/end-to-end-encryption-to-sms-messages.vue‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script setup lang="ts">
2+
import { useDisplay } from "vuetify";
3+
4+
const { mdAndUp } = useDisplay();
5+
26
import { mdiLanguageGo, mdiLanguageJavascript } from "@mdi/js";
37
import { ref } from "vue";
48
@@ -28,12 +32,16 @@ useHead({
2832
<VContainer class="pt-8">
2933
<VRow class="mt-16">
3034
<VCol cols="12" md="9">
31-
<h1 class="text-h3 text-md-h2 mt-1">
35+
<h1
36+
:class="
37+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
38+
"
39+
>
3240
Secure your conversations by encrypting your SMS messages end-to-end
3341
</h1>
3442
<BlogInfo date="January 21, 2024" readTime="10 min read" />
3543

36-
<p class="text-subtitle-1 mt-2">
44+
<p class="text-body-large mt-2">
3745
We have added support for end-to-end encryption for SMS messages so
3846
that no one can see the content of the messages you send using httpSMS
3947
except you.
@@ -55,7 +63,7 @@ useHead({
5563
encryption algorithm to encrypt and decrypt the messages.
5664
</p>
5765

58-
<h3 class="text-h4 mt-8 mb-2">Setup your encryption key</h3>
66+
<h3 class="text-headline-large mt-8 mb-2">Setup your encryption key</h3>
5967
<p>
6068
<a
6169
class="text-decoration-none"
@@ -72,7 +80,7 @@ useHead({
7280
src="/img/blog/end-to-end-encryption-to-sms-messages/encryption-key-android.png"
7381
/>
7482

75-
<h3 class="text-h4 mb-4 mt-16">Encrypt your SMS message</h3>
83+
<h3 class="text-headline-large mb-4 mt-16">Encrypt your SMS message</h3>
7684
<p>
7785
We use the AES-256 encryption algorithm to encrypt the SMS messages.
7886
This algorithm requires a an encryption key which is 256 bits to work
@@ -132,7 +140,7 @@ encryptedMessage := client.Cipher.Encrypt(key, "This is a test text message")
132140
</VTabsWindowItem>
133141
</VTabsWindow>
134142

135-
<h3 class="text-h4 mt-6">Send an encrypted message</h3>
143+
<h3 class="text-headline-large mt-6">Send an encrypted message</h3>
136144
<p>
137145
After generating the encrypted message payload, you can send it
138146
directly using the httpSMS API. Make sure to set
@@ -193,7 +201,9 @@ client.Messages.Send(context.Background(), &amp;httpsms.MessageSendParams{
193201
src="/img/blog/end-to-end-encryption-to-sms-messages/send-sms-message.png"
194202
/>
195203

196-
<h3 class="text-h4 mb-4 mt-16">Receiving an encrypted message</h3>
204+
<h3 class="text-headline-large mb-4 mt-16">
205+
Receiving an encrypted message
206+
</h3>
197207
<p>
198208
When your android phone receives a new message, it will be encrypted
199209
with the encryption Key on your Android phone before it is delivered
@@ -289,7 +299,7 @@ decryptedMessage := client.Cipher.Decrypt(encryptionkey, encryptedMessage)
289299
</VTabsWindowItem>
290300
</VTabsWindow>
291301

292-
<h3 class="text-h4 mt-12">Conclusion</h3>
302+
<h3 class="text-headline-large mt-12">Conclusion</h3>
293303
<p>
294304
Congratulations, you have successfully configured your Android phone
295305
to send and receive SMS messages with end-to-end encryption. Don't

‎web/app/pages/blog/forward-incoming-sms-from-phone-to-webhook.vue‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script setup lang="ts">
2+
import { useDisplay } from "vuetify";
3+
4+
const { mdAndUp } = useDisplay();
5+
26
definePageMeta({ layout: "website" });
37
48
useHead({
@@ -43,21 +47,25 @@ useHead({
4347
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/header.png"
4448
/>
4549

46-
<h1 class="text-h3 text-md-h2 mt-1">
50+
<h1
51+
:class="
52+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
53+
"
54+
>
4755
How to forward a text message (SMS) from an android phone into your
4856
webhook
4957
</h1>
5058
<BlogInfo date="April 08, 2023" readTime="5 min read" />
5159

52-
<p class="text-subtitle-1 mt-2">
60+
<p class="text-body-large mt-2">
5361
You can now program your android phone to forward messages received on
5462
your phone to your server and trigger powerful automations with tools
5563
like Zapier and IFTTT. I created an open source application called
5664
<NuxtLink class="text-decoration-none" to="/">httpSMS</NuxtLink>
5765
that helps you to set this up with ease
5866
</p>
5967

60-
<h3 class="text-h4 mt-2">Step 1: Get your API_KEY</h3>
68+
<h3 class="text-headline-large mt-2">Step 1: Get your API_KEY</h3>
6169
<p>
6270
Create an account on the httpSMS web application and copy your API key
6371
from the settings page.
@@ -71,7 +79,9 @@ useHead({
7179
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/settings.png"
7280
/>
7381

74-
<h3 class="text-h4 mt-12">Step 2: Install the httpSMS android app</h3>
82+
<h3 class="text-headline-large mt-12">
83+
Step 2: Install the httpSMS android app
84+
</h3>
7585
<p>
7686
<a
7787
class="text-decoration-none"
@@ -89,7 +99,7 @@ useHead({
8999
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/android-app.png"
90100
/>
91101

92-
<h3 class="text-h4 mt-12">Step 3: Set up a webhook</h3>
102+
<h3 class="text-headline-large mt-12">Step 3: Set up a webhook</h3>
93103
<p>
94104
Once the application has been installed, it will be listening for SMS
95105
messages received on the android phone. You can configure the
@@ -106,7 +116,7 @@ useHead({
106116
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/webhook.png"
107117
/>
108118

109-
<h3 class="text-h4 mt-12">Conclusion</h3>
119+
<h3 class="text-headline-large mt-12">Conclusion</h3>
110120
<p>
111121
Congratulations, you have successfully set up SMS forwarding from your
112122
Android phone to a webhook! This powerful automation tool can help you

‎web/app/pages/blog/grant-send-and-read-sms-permissions-on-android.vue‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,16 @@ useHead({
2828
<VContainer class="pt-8">
2929
<VRow class="mt-16">
3030
<VCol cols="12" md="9">
31-
<h1 class="text-h3 text-md-h2 mt-1">
31+
<h1
32+
:class="
33+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
34+
"
35+
>
3236
How to grant SMS permissions on Android 15+
3337
</h1>
3438
<BlogInfo date="February 18, 2025" read-time="5 min read" />
3539

36-
<p class="text-subtitle-1 mt-2">
40+
<p class="text-body-large mt-2">
3741
In Android 15 (Vanilla Ice Cream), the
3842
<code>android.permission.SEND_SMS</code> and
3943
<code>android.permission.RECEIVE_SMS</code> permissions are now hard
@@ -52,7 +56,7 @@ useHead({
5256
the application before allowing these permissions.
5357
</VAlert>
5458

55-
<h3 class="text-h4 mt-8 mb-2">Step1: Open App Info</h3>
59+
<h3 class="text-headline-large mt-8 mb-2">Step1: Open App Info</h3>
5660
<p>
5761
Long press the icon of the android app which you want to grant the
5862
permission and select <b>"App info"</b>
@@ -64,7 +68,9 @@ useHead({
6468
src="/img/blog/grant-send-and-read-sms-permissions-on-android/app-info.png"
6569
/>
6670

67-
<h3 class="text-h4 mb-4 mt-16">Step 2: Allow Restricted Permissions</h3>
71+
<h3 class="text-headline-large mb-4 mt-16">
72+
Step 2: Allow Restricted Permissions
73+
</h3>
6874
<p>
6975
On the App Info page, click on the menu button
7076
<VIcon :icon="mdiDotsVertical" /> and select the
@@ -77,7 +83,9 @@ useHead({
7783
src="/img/blog/grant-send-and-read-sms-permissions-on-android/allow-restricted-settings.png"
7884
/>
7985

80-
<h3 class="text-h4 mb-4 mt-16">Step 3: Allow SMS Permissions</h3>
86+
<h3 class="text-headline-large mb-4 mt-16">
87+
Step 3: Allow SMS Permissions
88+
</h3>
8189
<p>
8290
Once you have allowed the restricted settings from step 2 above, You
8391
can navigate to <b>Permissions ➡️ SMS</b> and tap the Allow button to
@@ -90,7 +98,7 @@ useHead({
9098
src="/img/blog/grant-send-and-read-sms-permissions-on-android/allow.png"
9199
/>
92100

93-
<h3 class="text-h4 mt-12">Conclusion</h3>
101+
<h3 class="text-headline-large mt-12">Conclusion</h3>
94102
<p>
95103
Congratulations, you have successfully configured SMS permissions on
96104
your Android app. Don't hesitate to contact us if you face any

‎web/app/pages/blog/how-to-send-sms-messages-from-excel.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script setup lang="ts">
2+
import { useDisplay } from "vuetify";
3+
4+
const { mdAndUp } = useDisplay();
5+
26
import { mdiCommentTextMultipleOutline } from "@mdi/js";
37
48
definePageMeta({ layout: "website" });
@@ -32,25 +36,29 @@ useHead({
3236
<VContainer class="pt-8">
3337
<VRow class="mt-16">
3438
<VCol cols="12" md="9">
35-
<h1 class="text-h3 text-md-h2 mt-1">
39+
<h1
40+
:class="
41+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
42+
"
43+
>
3644
How to send SMS messages to multiple phone numbers from Excel
3745
</h1>
3846
<BlogInfo date="October 29, 2023" readTime="5 min read" />
3947

40-
<p class="text-subtitle-1 mt-2">
48+
<p class="text-body-large mt-2">
4149
Send personalized SMS messages to multiple phone numbers for less than
4250
<b>$0.002 </b> per SMS message. You can also configure every SMS
4351
message in your Excel spreadsheet so they are unique for each
4452
recipient phone number.
4553
</p>
4654

47-
<h3 class="text-h4 mt-8 mb-2">Prerequisites</h3>
55+
<h3 class="text-headline-large mt-8 mb-2">Prerequisites</h3>
4856
<ul>
4957
<li>Basic understanding of Microsoft Excel or Google Sheets.</li>
5058
<li>An Android phone.</li>
5159
</ul>
5260

53-
<h3 class="text-h4 mt-8 mb-2">Step 1: Get your API Key</h3>
61+
<h3 class="text-headline-large mt-8 mb-2">Step 1: Get your API Key</h3>
5462
<p>
5563
Create an account on
5664
<NuxtLink class="text-decoration-none" to="/">httpsms.com</NuxtLink>
@@ -65,7 +73,7 @@ useHead({
6573
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/settings.png"
6674
/>
6775

68-
<h3 class="text-h4 mb-4 mt-16">
76+
<h3 class="text-headline-large mb-4 mt-16">
6977
Step 2: Install the httpSMS android app
7078
</h3>
7179
<p>
@@ -89,7 +97,7 @@ useHead({
8997
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/android-app.png"
9098
/>
9199

92-
<h3 class="text-h4 mt-12">Step 3: Edit your Excel file</h3>
100+
<h3 class="text-headline-large mt-12">Step 3: Edit your Excel file</h3>
93101
<p>
94102
Download the
95103
<a
@@ -116,7 +124,7 @@ useHead({
116124
src="/img/blog/send-bulk-sms-from-csv-file-with-no-code/httpms-spreedsheet.png"
117125
/>
118126

119-
<h3 class="text-h4 mt-12">Step 3: Send the SMS Messages</h3>
127+
<h3 class="text-headline-large mt-12">Step 3: Send the SMS Messages</h3>
120128
<p>
121129
Visit the
122130
<NuxtLink class="text-decoration-none" to="/bulk-messages">

‎web/app/pages/blog/send-bulk-sms-from-csv-file-with-no-code.vue‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script setup lang="ts">
2+
import { useDisplay } from "vuetify";
3+
4+
const { mdAndUp } = useDisplay();
5+
26
import { mdiCommentTextMultipleOutline } from "@mdi/js";
37
48
definePageMeta({ layout: "website" });
@@ -32,19 +36,23 @@ useHead({
3236
<VContainer class="pt-8">
3337
<VRow class="mt-16">
3438
<VCol cols="12" md="9">
35-
<h1 class="text-h3 text-md-h2 mt-1">
39+
<h1
40+
:class="
41+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
42+
"
43+
>
3644
Send multiple SMS messages from a CSV file with no code
3745
</h1>
3846
<BlogInfo date="October 29, 2023" readTime="7 min read" />
3947

40-
<p class="text-subtitle-1 mt-2">
48+
<p class="text-body-large mt-2">
4149
Send personalized SMS messages to your users in bulk using your
4250
Android phone. The good news is, you don't have to write a single
4351
piece of code, just upload your CSV file and we will take care of the
4452
rest.
4553
</p>
4654

47-
<h3 class="text-h4 mt-8 mb-2">What is a CSV file</h3>
55+
<h3 class="text-headline-large mt-8 mb-2">What is a CSV file</h3>
4856
<p>
4957
CSV is an abbreviation for comma-separated values. A CSV file allows
5058
data to be saved in a table structured format using a comma
@@ -54,13 +62,13 @@ useHead({
5462
Google Sheets.
5563
</p>
5664

57-
<h3 class="text-h4 mt-8 mb-2">Prerequisites</h3>
65+
<h3 class="text-headline-large mt-8 mb-2">Prerequisites</h3>
5866
<ul>
5967
<li>Basic understanding of CSV files.</li>
6068
<li>An Android phone.</li>
6169
</ul>
6270

63-
<h3 class="text-h4 mt-8 mb-2">Step 1: Get your API Key</h3>
71+
<h3 class="text-headline-large mt-8 mb-2">Step 1: Get your API Key</h3>
6472
<p>
6573
Create an account on
6674
<NuxtLink class="text-decoration-none" to="/">httpsms.com</NuxtLink>
@@ -75,7 +83,7 @@ useHead({
7583
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/settings.png"
7684
/>
7785

78-
<h3 class="text-h4 mb-4 mt-16">
86+
<h3 class="text-headline-large mb-4 mt-16">
7987
Step 2: Install the httpSMS android app
8088
</h3>
8189
<p>
@@ -99,7 +107,7 @@ useHead({
99107
src="/img/blog/forward-incoming-sms-from-phone-to-webhook/android-app.png"
100108
/>
101109

102-
<h3 class="text-h4 mt-12">Step 3: Edit your CSV file</h3>
110+
<h3 class="text-headline-large mt-12">Step 3: Edit your CSV file</h3>
103111
<p>
104112
Download the
105113
<a
@@ -127,7 +135,7 @@ useHead({
127135
src="/img/blog/send-bulk-sms-from-csv-file-with-no-code/httpms-spreedsheet.png"
128136
/>
129137

130-
<h3 class="text-h4 mt-12">Step 3: Send the SMS Messages</h3>
138+
<h3 class="text-headline-large mt-12">Step 3: Send the SMS Messages</h3>
131139
<p>
132140
Visit the
133141
<NuxtLink class="text-decoration-none" to="/bulk-messages">

0 commit comments

Comments
 (0)