Skip to content

Commit d18be8d

Browse files
AchoArnoldAchoArnold
committed
Fix all other pages except login
1 parent a6cbedd commit d18be8d

14 files changed

Lines changed: 157 additions & 48 deletions

‎web/app/components/BackButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function goBack() {
3131

3232
<template>
3333
<v-btn
34-
color="default"
34+
variant="tonal"
3535
:size="smAndDown ? 'small' : 'default'"
3636
:block="block"
3737
@click="goBack"

‎web/app/components/BlogAuthorBio.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { mdiTwitter, mdiGithub } from "@mdi/js";
55
<template>
66
<div class="d-flex mb-6 mt-8">
77
<v-avatar image="/img/arnold.png" />
8-
<div class="ml-2">
8+
<div class="ml-2 mt-n7">
99
<p class="text-title-large mb-n1">Acho Arnold</p>
1010
<a
1111
class="mb-n4 text-decoration-none text-on-surface"

‎web/app/components/BlogSidebar.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import { mdiBookOpenVariant } from "@mdi/js";
3+
4+
const appStore = useAppStore();
5+
</script>
6+
7+
<template>
8+
<div>
9+
<NuxtLink to="/" class="text-decoration-none d-flex align-center">
10+
<VAvatar color="#121212" class="pa-1" size="36" rounded="0">
11+
<VImg height="33" width="33" :src="'/img/logo.svg'" />
12+
</VAvatar>
13+
<h3 class="text-headline-large ml-1 mb-3 mt-3 text-white">httpSMS</h3>
14+
</NuxtLink>
15+
<p class="mt-0">
16+
httpSMS is an
17+
<a
18+
class="text-decoration-none"
19+
href="https://github.com/NdoleStudio/httpsms"
20+
>open source</a>
21+
application that converts your android phone into an SMS gateway so you
22+
can send and receive SMS messages using a simple HTTP API.
23+
</p>
24+
<VBtn variant="tonal" :href="appStore.appData.documentationUrl">
25+
<VIcon start :icon="mdiBookOpenVariant" />
26+
Documentation
27+
</VBtn>
28+
</div>
29+
</template>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ useHead({
115115
<VTabsWindow v-model="encryptTab">
116116
<VTabsWindowItem value="javascript">
117117
<pre
118-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
118+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
119119
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
120120

121121
const client = new HttpSms("" /* API Key from https://httpsms.com/settings */);
@@ -129,7 +129,7 @@ const encryptedMessage = client.cipher.encrypt(key, "This is a sample text messa
129129
</VTabsWindowItem>
130130
<VTabsWindowItem value="go">
131131
<pre
132-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
132+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
133133
><code class="language-go text-body-medium">import "github.com/NdoleStudio/httpsms-go"
134134

135135
client := htpsms.New(htpsms.WithAPIKey(""/* API Key from https://httpsms.com/settings */))
@@ -164,7 +164,7 @@ encryptedMessage := client.Cipher.Encrypt(key, "This is a test text message")
164164
<VTabsWindow v-model="sendTab">
165165
<VTabsWindowItem value="javascript">
166166
<pre
167-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
167+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
168168
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
169169

170170
client.messages.postSend({
@@ -179,7 +179,7 @@ client.messages.postSend({
179179
</VTabsWindowItem>
180180
<VTabsWindowItem value="go">
181181
<pre
182-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
182+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
183183
><code class="language-go text-body-medium">import "github.com/NdoleStudio/httpsms-go"
184184

185185
client.Messages.Send(context.Background(), &amp;httpsms.MessageSendParams{
@@ -231,7 +231,7 @@ client.Messages.Send(context.Background(), &amp;httpsms.MessageSendParams{
231231
<VTabsWindow v-model="receiveTab">
232232
<VTabsWindowItem value="javascript">
233233
<pre
234-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
234+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
235235
><code class="language-javascript text-body-medium">import HttpSms from "httpsms"
236236

237237
const client = new HttpSms("" /* API Key from https://httpsms.com/settings */);
@@ -266,7 +266,7 @@ const decryptedMessage = client.cipher.decrypt(encryptionkey, encryptedMessage)
266266
</VTabsWindowItem>
267267
<VTabsWindowItem value="go">
268268
<pre
269-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
269+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
270270
><code class="language-go text-body-medium">import "github.com/NdoleStudio/httpsms-go"
271271

272272
client := htpsms.New(htpsms.WithAPIKey(/* API Key from https://httpsms.com/settings */))
@@ -315,6 +315,9 @@ decryptedMessage := client.Cipher.Decrypt(encryptionkey, encryptedMessage)
315315
<BackButton />
316316
</div>
317317
</VCol>
318+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
319+
<BlogSidebar />
320+
</VCol>
318321
</VRow>
319322
</VContainer>
320323
</template>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,9 @@ useHead({
137137
<BackButton />
138138
</div>
139139
</VCol>
140+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
141+
<BlogSidebar />
142+
</VCol>
140143
</VRow>
141144
</VContainer>
142145
</template>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ useHead({
4949
>.
5050
</p>
5151

52-
<VAlert type="warning" variant="outlined" class="my-4">
52+
<VAlert type="warning" variant="tonal" class="my-4">
5353
Granting the <code>SEND_SMS</code> and
5454
<code>RECEIVE_SMS</code> permissions will allow an Android app to be
5555
able to read and send SMS messages on your phone. Make sure you trust
@@ -111,6 +111,9 @@ useHead({
111111
<BackButton />
112112
</div>
113113
</VCol>
114+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
115+
<BlogSidebar />
116+
</VCol>
114117
</VRow>
115118
</VContainer>
116119
</template>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ useHead({
8686
which you copied above. This app listens for SMS messages received on
8787
your android phone.
8888
</p>
89-
<VAlert type="info" variant="outlined">
89+
<VAlert type="info" variant="tonal">
9090
Make sure to enter your phone number in the international format e.g
9191
+18005550199 when authenticating with the httpSMS Android app.
9292
</VAlert>
@@ -113,7 +113,7 @@ useHead({
113113
<code>ToPhoneNumber</code> column. Also add the SMS which you want to
114114
send in the message in the <code>Content</code> column.
115115
</p>
116-
<VAlert type="info" variant="outlined" class="mt-2 mb-4">
116+
<VAlert type="info" variant="tonal" class="mt-2 mb-4">
117117
Make sure to use the correct <code>FromPhoneNumber</code> from step 2
118118
above in your Excel file
119119
</VAlert>
@@ -162,6 +162,9 @@ useHead({
162162
<BackButton />
163163
</div>
164164
</VCol>
165+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
166+
<BlogSidebar />
167+
</VCol>
165168
</VRow>
166169
</VContainer>
167170
</template>

‎web/app/pages/blog/index.vue‎

Lines changed: 88 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
const {mdAndUp} = useDisplay();
3+
24
definePageMeta({
35
layout: "website",
46
});
@@ -100,39 +102,96 @@ const sortedArticles = computed(() =>
100102
<template>
101103
<VContainer>
102104
<VRow>
103-
<VCol cols="12" md="8" offset-md="2">
104-
<h1 class="text-display-small mb-4">Blog</h1>
105-
<p class="text-body-large mb-8">
106-
Learn more about httpSMS through our blog!
107-
</p>
108-
109-
<div class="d-flex flex-column ga-4">
110-
<NuxtLink
105+
<VCol cols="12" md="9">
106+
<VRow>
107+
<VCol cols="12">
108+
<h1 class="text-display-large mb-2">Blog</h1>
109+
<h2 class="text-medium-emphasis mt-2 mb-n4 text-title-large font-weight-light">
110+
Learn more about httpSMS through our blog!
111+
</h2>
112+
</VCol>
113+
</VRow>
114+
<VRow>
115+
<VCol
111116
v-for="article in sortedArticles"
112117
:key="article.slug"
113-
:to="`/blog/${article.slug}`"
114-
class="text-decoration-none"
118+
cols="12"
119+
xl="6"
115120
>
116-
<VCard variant="outlined" class="pa-2">
117-
<VCardTitle class="text-headline-small text-wrap">{{
118-
article.title
119-
}}</VCardTitle>
120-
<VCardSubtitle class="pt-2">
121-
<div class="d-flex flex-wrap ga-2 text-body-medium">
122-
<span>{{ article.date }}</span>
123-
<span aria-hidden="true">•</span>
124-
<span>{{ article.author }}</span>
125-
<span aria-hidden="true">•</span>
126-
<span>{{ article.readTime }}</span>
127-
</div>
128-
</VCardSubtitle>
129-
<VCardText class="text-body-large">{{
130-
article.description
131-
}}</VCardText>
132-
</VCard>
133-
</NuxtLink>
134-
</div>
121+
<NuxtLink
122+
:to="`/blog/${article.slug}`"
123+
class="text-decoration-none"
124+
>
125+
<VHover v-slot="{ isHovering, props: hoverProps }">
126+
<VCard
127+
v-bind="hoverProps"
128+
:elevation="isHovering ? 8 : 2"
129+
:color="isHovering ? 'blue-darken-4' : undefined"
130+
class="blog-card"
131+
>
132+
<VCardTitle class="text-headline-large text-wrap title-clamp">{{
133+
article.title
134+
}}</VCardTitle>
135+
<VCardSubtitle>
136+
<span class="text-uppercase text-blue">{{
137+
article.date
138+
}}</span>
139+
•
140+
<span class="text-uppercase">{{ article.readTime }}</span>
141+
</VCardSubtitle>
142+
<VCardText class="mt-n2">
143+
<p class="text-title-medium description-clamp">
144+
{{ article.description }}
145+
</p>
146+
</VCardText>
147+
</VCard>
148+
</VHover>
149+
</NuxtLink>
150+
</VCol>
151+
</VRow>
152+
</VCol>
153+
<VCol v-if="mdAndUp" md="3" class="pt-6">
154+
<BlogSidebar />
135155
</VCol>
136156
</VRow>
137157
</VContainer>
138158
</template>
159+
160+
<style scoped>
161+
.blog-card {
162+
transition: all 0.3s ease;
163+
}
164+
165+
.title-clamp {
166+
display: -webkit-box;
167+
-webkit-box-orient: vertical;
168+
overflow: hidden;
169+
}
170+
171+
@media (min-width: 1280px) {
172+
.title-clamp {
173+
-webkit-line-clamp: 2;
174+
height: calc(2.7rem * 2);
175+
}
176+
}
177+
178+
.description-clamp {
179+
display: -webkit-box;
180+
-webkit-box-orient: vertical;
181+
overflow: hidden;
182+
}
183+
184+
@media (min-width: 1280px) {
185+
.description-clamp {
186+
-webkit-line-clamp: 3;
187+
height: calc(1.5rem * 3);
188+
}
189+
}
190+
191+
@media (min-width: 2560px) {
192+
.description-clamp {
193+
-webkit-line-clamp: 2;
194+
height: calc(1.5rem * 2);
195+
}
196+
}
197+
</style>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ useHead({
9696
which you copied above. This app listens for SMS messages received on
9797
your android phone.
9898
</p>
99-
<VAlert type="info" variant="outlined">
99+
<VAlert type="info" variant="tonal">
100100
Make sure to enter your phone number in the international format e.g
101101
+18005550199 when authenticating with the httpSMS Android app.
102102
</VAlert>
@@ -124,7 +124,7 @@ useHead({
124124
add the SMS which you want to send in the message in the
125125
<code>Content</code> column.
126126
</p>
127-
<VAlert type="info" variant="outlined" class="mt-2 mb-4">
127+
<VAlert type="info" variant="tonal" class="mt-2 mb-4">
128128
Make sure to use the correct <code>FromPhoneNumber</code> from step 2
129129
above in your CSV file
130130
</VAlert>
@@ -173,6 +173,9 @@ useHead({
173173
<BackButton />
174174
</div>
175175
</VCol>
176+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
177+
<BlogSidebar />
178+
</VCol>
176179
</VRow>
177180
</VContainer>
178181
</template>

‎web/app/pages/blog/send-sms-from-android-phone-with-python.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ useHead({
134134
the <code>payload</code> variable.
135135
</VAlert>
136136
<pre
137-
class="pa-4 mb-6 rounded bg-surface-variant overflow-x-auto"
137+
class="pa-4 mb-6 rounded bg-surface overflow-x-auto"
138138
><code class="language-python text-body-medium">import requests
139139
import json
140140

@@ -193,6 +193,9 @@ print(json.dumps(response.json(), indent=4))</code></pre>
193193
<BackButton />
194194
</div>
195195
</VCol>
196+
<VCol v-if="$vuetify.display.mdAndUp" md="3">
197+
<BlogSidebar />
198+
</VCol>
196199
</VRow>
197200
</VContainer>
198201
</template>

0 commit comments

Comments
 (0)