Skip to content

Commit 0985eeb

Browse files
AchoArnoldAchoArnold
committed
Add code snippets
1 parent 875a612 commit 0985eeb

5 files changed

Lines changed: 203 additions & 29 deletions

File tree

‎web/layouts/default.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,5 +117,8 @@ export default class DefaultLayout extends Vue {
117117
border-radius: 8px;
118118
}
119119
}
120+
code.hljs {
121+
font-size: 16px;
122+
}
120123
}
121124
</style>

‎web/nuxt.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,13 @@ export default {
6161
},
6262
},
6363
],
64+
// Simple Usage
65+
[
66+
'nuxt-highlightjs',
67+
{
68+
style: 'AndroidStudio',
69+
},
70+
],
6471
'@nuxtjs/sitemap', // always put it at the end
6572
],
6673

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"firebaseui": "^6.0.1",
3232
"libphonenumber-js": "^1.10.6",
3333
"nuxt": "^2.15.8",
34+
"nuxt-highlightjs": "^1.0.3",
3435
"vue": "^2.6.14",
3536
"vue-class-component": "^7.2.6",
3637
"vue-property-decorator": "^9.1.2",

‎web/pages/index.vue‎

Lines changed: 180 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -249,36 +249,174 @@
249249
</v-timeline>
250250
</v-col>
251251
<v-col
252-
v-if="$vuetify.breakpoint.lgAndUp"
253252
cols="12"
254253
md="7"
255-
class="d-flex align-center"
256-
:class="{ 'min-h-650': $vuetify.breakpoint.lgAndUp }"
254+
:class="{ 'pt-16 pb-16': $vuetify.breakpoint.lgAndUp }"
257255
>
258-
<transition name="fade">
259-
<v-img
260-
v-if="step1Hover"
261-
contain
262-
max-height="600"
263-
:src="require('assets/img/phone-api-key.png')"
264-
></v-img>
265-
</transition>
266-
<transition name="fade">
267-
<v-img
268-
v-if="step2Hover && !step1Hover"
269-
contain
270-
max-height="600"
271-
:src="require('assets/img/phone-login.png')"
272-
></v-img>
273-
</transition>
274-
<transition name="fade">
275-
<v-img
276-
v-if="!step1Hover && !step2Hover"
277-
contain
278-
class="mt-n16"
279-
:src="require('assets/img/code-snippet.png')"
280-
></v-img>
281-
</transition>
256+
<div class="w-full mt-4">
257+
<v-tabs v-model="selectedTab" show-arrows>
258+
<v-tab href="#javascript">
259+
<v-icon color="#efd81d" class="mr-1">{{
260+
mdiLanguageJavascript
261+
}}</v-icon>
262+
Javascript
263+
</v-tab>
264+
<v-tab href="#php">
265+
<v-icon color="#777bb3" class="mr-2">{{
266+
mdiLanguagePhp
267+
}}</v-icon>
268+
PHP
269+
</v-tab>
270+
<v-tab href="#go">
271+
<v-icon color="#00aed8" class="mr-2">{{
272+
mdiLanguageGo
273+
}}</v-icon>
274+
Go
275+
</v-tab>
276+
<v-tab href="#java">
277+
<v-icon color="#0c89c7" class="mr-2">{{
278+
mdiLanguageJava
279+
}}</v-icon>
280+
Java
281+
</v-tab>
282+
<v-tab href="#curl">
283+
<v-icon color="primary" class="mr-2">{{
284+
mdiPowershell
285+
}}</v-icon>
286+
cURL
287+
</v-tab>
288+
<v-tab href="#c-sharp">
289+
<v-icon color="#68217a" class="mr-2">{{
290+
mdiLanguageCsharp
291+
}}</v-icon>
292+
c-sharp
293+
</v-tab>
294+
</v-tabs>
295+
<v-tabs-items v-model="selectedTab">
296+
<v-tab-item value="javascript">
297+
<pre v-highlight class="javascript w-full mt-n2 mb-n13">
298+
<code>let apiKey = "Get API Key from https://httpsms.com/settings";
299+
300+
fetch('https://api.httpsms.com/v1/messages/send', {
301+
method: 'POST',
302+
headers: {
303+
'x-api-key': apiKey,
304+
'Accept': 'application/json',
305+
'Content-Type': 'application/json'
306+
},
307+
body: JSON.stringify({
308+
"content": "This is a sample text message",
309+
"from": "+18005550199",
310+
"to": "+18005550100"
311+
})
312+
})
313+
.then(res => res.json())
314+
.then((data) => console.log(data));
315+
</code>
316+
</pre>
317+
</v-tab-item>
318+
<v-tab-item value="php">
319+
<pre v-highlight class="php w-full mt-n2 mb-n13">
320+
<code>&#60;?php
321+
// initialize guzzle client https://github.com/guzzle/guzzle
322+
$client = new GuzzleHttp\Client();
323+
324+
$apiKey = "Get API Key from https://httpsms.com/settings";
325+
326+
$res = $client->request('POST', 'https://api.httpsms.com/v1/messages/send', [
327+
'headers' => [
328+
'x-api-key' => $apiKey,
329+
],
330+
'json' => [
331+
'content' => 'This is a sample text message',
332+
'from' => "+18005550199",
333+
'to' => '+18005550100'
334+
]
335+
]);
336+
337+
echo $res->getBody();
338+
</code>
339+
</pre>
340+
</v-tab-item>
341+
<v-tab-item value="go">
342+
<pre v-highlight class="go w-full mt-n2 mb-n13">
343+
<code>import "github.com/NdoleStudio/httpsms-go"
344+
345+
client := htpsms.New(htpsms.WithAPIKey(/* API Key from https://httpsms.com/settings */))
346+
347+
client.Messages.Send(context.Background(), &httpsms.MessageSendParams{
348+
Content: "This is a sample text message",
349+
From: "+18005550199",
350+
To: "+18005550100",
351+
})
352+
</code>
353+
</pre>
354+
</v-tab-item>
355+
<v-tab-item value="java">
356+
<pre v-highlight class="java w-full mt-n2 mb-n13">
357+
<code>var client = HttpClient.newHttpClient();
358+
359+
var apiKey = "Get API Key from https://httpsms.com/settings";
360+
361+
JSONObject request = new JSONObject();
362+
request.put("content", "This is a sample text message");
363+
request.put("from", "+18005550199")
364+
request.put("to", "+18005550100")
365+
366+
// create a request
367+
var request = HttpRequest.newBuilder()
368+
.uri(URI.create("https://api.httpsms.com/v1/messages/send"))
369+
.header("accept", "application/json")
370+
.header("x-api-key", apiKey)
371+
.setEntity(new StringEntity(request.toString()))
372+
.POST()
373+
.build();
374+
375+
// use the client to send the request
376+
var response = client.send(request, new JsonBodyHandler<>(APOD.class));
377+
378+
// the response:
379+
System.out.println(response.body().get());
380+
</code>
381+
</pre>
382+
</v-tab-item>
383+
<v-tab-item value="curl">
384+
<pre v-highlight class="bash w-full mt-n2 mb-n13">
385+
<code>curl --location --request POST 'https://api.httpsms.com/v1/messages/send' \
386+
--header 'x-api-key: Get API Key from https://httpsms.com/settings' \
387+
--header 'Content-Type: application/json' \
388+
--data-raw '{
389+
"from": "+18005550199",
390+
"to": "+18005550100",
391+
"content": "This is a sample text message"
392+
}'
393+
</code>
394+
</pre>
395+
</v-tab-item>
396+
<v-tab-item value="c-sharp">
397+
<pre v-highlight class="c-sharp w-full mt-n2 mb-n13">
398+
<code>var client = new HttpClient();
399+
client.DefaultRequestHeaders.Add("x-api-key", ""/* Get API Key from https://httpsms.com/settings */);
400+
401+
var response = await client.PostAsync(
402+
"https://api.httpsms.com/v1/messages/send",
403+
new StringContent(
404+
JsonSerializer.Serialize(new {
405+
from = "+18005550199",
406+
To = "+18005550100",
407+
Content = "This is a sample text message",
408+
}),
409+
Encoding.UTF8,
410+
"application/json"
411+
)
412+
);
413+
414+
Console.WriteLine(await response.Content.ReadAsStringAsync());
415+
</code>
416+
</pre>
417+
</v-tab-item>
418+
</v-tabs-items>
419+
</div>
282420
</v-col>
283421
</v-row>
284422
</v-col>
@@ -291,6 +429,7 @@
291429
<v-btn
292430
text
293431
rounded
432+
outlined
294433
class="my-2"
295434
:href="$store.getters.getAppData.documentationUrl"
296435
>Documentation</v-btn
@@ -299,6 +438,7 @@
299438
text
300439
rounded
301440
class="my-2"
441+
outlined
302442
:href="$store.getters.getAppData.githubUrl"
303443
>Open Source</v-btn
304444
>
@@ -328,6 +468,12 @@ import {
328468
mdiTallyMark1,
329469
mdiTallyMark3,
330470
mdiTallyMark2,
471+
mdiLanguageJavascript,
472+
mdiLanguagePhp,
473+
mdiLanguageCsharp,
474+
mdiLanguageJava,
475+
mdiPowershell,
476+
mdiLanguageGo,
331477
} from '@mdi/js'
332478
333479
export default Vue.extend({
@@ -345,8 +491,13 @@ export default Vue.extend({
345491
mdiTallyMark1,
346492
mdiTallyMark2,
347493
mdiTallyMark3,
348-
step1Hover: false,
349-
step2Hover: false,
494+
mdiLanguageJavascript,
495+
mdiLanguagePhp,
496+
mdiLanguageCsharp,
497+
mdiLanguageJava,
498+
mdiPowershell,
499+
mdiLanguageGo,
500+
selectedTab: 'javascript',
350501
}
351502
},
352503
})

‎web/yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6069,6 +6069,11 @@ hex-color-regex@^1.1.0:
60696069
version "1.1.0"
60706070
resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
60716071

6072+
highlight.js@^11.5.1:
6073+
version "11.6.0"
6074+
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
6075+
integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
6076+
60726077
hmac-drbg@^1.0.1:
60736078
version "1.0.1"
60746079
resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -8200,6 +8205,13 @@ num2fraction@^1.2.2:
82008205
version "1.2.2"
82018206
resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz"
82028207

8208+
nuxt-highlightjs@^1.0.3:
8209+
version "1.0.3"
8210+
resolved "https://registry.yarnpkg.com/nuxt-highlightjs/-/nuxt-highlightjs-1.0.3.tgz#6a7aa3450f596e1531fc1fd91c2157938dd708ce"
8211+
integrity sha512-3UEEyVYwjN+tg+gFF2fC/K4+xMiGCQlZ+3c19f3MCa5l90JtV7QXfU/2NpTq3yY3BeAgAYSwLVbP1SWOhVsXaw==
8212+
dependencies:
8213+
highlight.js "^11.5.1"
8214+
82038215
nuxt@^2.15.8:
82048216
version "2.15.8"
82058217
resolved "https://registry.npmjs.org/nuxt/-/nuxt-2.15.8.tgz"

0 commit comments

Comments
 (0)