Skip to content

Commit d1c321f

Browse files
author
Alejandro Figueroa
committed
Minor updates and script improvements
1 parent cb632c2 commit d1c321f

File tree

5 files changed

+93
-19
lines changed

5 files changed

+93
-19
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Netlify Functions Workshop
22

3-
This is a simple static website generated with Jekyll and deployed to Netlify, which use a serverless function to fetch some dyamic content.
3+
This is a simple static website generated with Jekyll and deployed to Netlify, which uses a serverless function to fetch some dynamic content.
44

55
It's intended to show basic concepts around the JAMStack on Netlify, such as Static Site Generators, git-based deployment and Netlify functions as APIs.
66

‎_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
# You can create any custom variable you would like, and they will be accessible
1919
# in the templates via {{ site.myvariable }}.
2020

21-
title: "Netlify Functions workshop"
21+
title: "Convoluted Quoter"
2222
email: alexphi@gmail.com
2323
description: >- # this means to ignore newlines until "baseurl:"
2424
Minimal site generated with Jekyll and using Netlify functions

‎functions/quote.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const buildOkResponse = (quote) => {
88
success: true,
99
quote: {
1010
text: quote.quote,
11-
author: quote.author
11+
author: quote.author,
12+
link: quote.permalink
1213
}
1314
})
1415
}

‎pages/about.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: default
3+
permalink: "/about"
4+
---
5+
6+
<div class="bg-gray-700">
7+
<div class="container mx-auto md:flex md:flex-row md:items-center md:justify-center md:h-screen">
8+
<div class="p-8 md:w-1/2 md:max-w-lg md:order-last">
9+
<h1 class="mt-8 text-5xl leading-none tracking-wide text-gray-300 font-display">Convoluted Quoter</h1>
10+
<p class="mt-4 mb-8 text-2xl leading-normal tracking-wide text-gray-300 font-display">Quote of the day using
11+
Jekyll and Netlify functions</p>
12+
<p class="my-4 text-gray-300">
13+
This is a simple static website generated with Jekyll and deployed to Netlify, which uses a serverless
14+
function to fetch dynamic content from an external API.
15+
</p>
16+
<p class="my-4 text-gray-300">
17+
It's intended to show basic concepts around the JAMStack on Netlify, such as Static Site Generators,
18+
git-based deployment and Netlify functions as APIs.
19+
</p>
20+
<p class="my-4 text-gray-300">
21+
Quotes pulled from
22+
<img src="https://theysaidso.com/branding/theysaidso.png" alt="theysaidso.com" class="inline w-4 h-4" />
23+
<a href="https://theysaidso.com" title="Powered by quotes from theysaidso.com"
24+
class="inline text-yellow-300">
25+
They Said So®
26+
</a>
27+
</p>
28+
<p class="my-4">
29+
<a href="https://github.com/alexphi/netlify-functions-workshop" title="Github"
30+
class="text-yellow-300">Github repo</a>
31+
</p>
32+
<p class="my-4">
33+
<a href="/" title="Home" class="text-gray-300">
34+
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
35+
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
36+
<path d="M15 19l-7-7 7-7"></path>
37+
</svg>
38+
</a>
39+
</p>
40+
</div>
41+
<div class="p-8 md:w-1/2 md:max-w-sm">
42+
<img src="/assets/landscape.svg" alt="landscape">
43+
</div>
44+
</div>
45+
</div>
46+
47+
<script>
48+
function quote() {
49+
return {
50+
quote: '',
51+
author: '',
52+
success: false,
53+
isLoaded() {
54+
return this.quote !== ''
55+
},
56+
fetchQuote() {
57+
const url = "/.netlify/functions/quote";
58+
59+
fetch(url)
60+
.then(response => response.json())
61+
.then(data => {
62+
this.success = data.success;
63+
this.quote = this.success ? `${data.quote.text} - ${data.quote.author}` : data.error
64+
65+
console.log('Loaded quote. Success: ' + this.success)
66+
});
67+
}
68+
}
69+
}
70+
</script>

‎pages/index.html

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,14 @@
66
<div class="bg-gray-700">
77
<div class="container mx-auto md:flex md:flex-row md:items-center md:justify-center md:h-screen">
88
<div class="p-8 md:w-1/2 md:max-w-lg md:order-last">
9-
<h1 class="mt-8 text-5xl leading-tight tracking-wide text-gray-300 font-display">Convoluted Quoter</h1>
10-
<p class="mb-8 text-2xl leading-tight tracking-wide text-gray-300 font-display">Quote of the day using Jekyll and Netlify functions</p>
9+
<h1 class="mt-8 text-5xl leading-none tracking-wide text-gray-300 font-display">Convoluted Quoter</h1>
10+
<p class="mt-4 mb-8 text-2xl leading-normal tracking-wide text-gray-300 font-display">Quote of the day using
11+
Jekyll and Netlify functions</p>
1112
<div x-data="quote()" x-init="fetchQuote()">
1213
<template x-if="isLoaded()">
1314
<template x-if="success">
14-
<p class="py-2 pl-4 my-2 text-orange-300 border-l-4 border-orange-300" x-text="quote">
15-
</p>
16-
<span class="text-xs text-gray-300">
17-
Quote from
18-
<img src="https://theysaidso.com/branding/theysaidso.png" alt="theysaidso.com"
19-
class="inline w-4 h-4" />
20-
<a href="https://theysaidso.com" title="Powered by quotes from theysaidso.com"
21-
class="inline text-gray-300">
22-
They Said So®
23-
</a>
24-
</span>
15+
<a :href="link" target="_blank" class="py-2 pl-4 my-2 text-orange-300 border-l-4 border-orange-300" x-text="quote">
16+
</a>
2517
</template>
2618
<template x-if="!success">
2719
<p class="py-2 my-2 text-sm text-red-300" x-text="quote">
@@ -30,23 +22,33 @@ <h1 class="mt-8 text-5xl leading-tight tracking-wide text-gray-300 font-display"
3022
</template>
3123
<template x-if="!isLoaded()">
3224
<p class="py-2 my-2 text-sm text-gray-300">
33-
...
25+
Loading quote of the day...
3426
</p>
3527
</template>
3628
</div>
29+
<p class="my-8">
30+
<a href="/about" title="About" class="text-gray-300">
31+
About this site
32+
<svg class="inline w-4 h-4" fill="none" stroke-linecap="round" stroke-linejoin="round"
33+
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
34+
<path d="M9 5l7 7-7 7"></path>
35+
</svg>
36+
</a>
37+
</p>
3738

3839
</div>
39-
<div class="p-8 text-center md:w-1/2 md:max-w-sm">
40+
<div class="p-8 md:w-1/2 md:max-w-sm">
4041
<img src="/assets/landscape.svg" alt="landscape">
4142
</div>
4243
</div>
4344
</div>
4445

4546
<script>
46-
function quote() {
47+
const quote = () => {
4748
return {
4849
quote: '',
4950
author: '',
51+
link: '',
5052
success: false,
5153
isLoaded() {
5254
return this.quote !== ''
@@ -59,6 +61,7 @@ <h1 class="mt-8 text-5xl leading-tight tracking-wide text-gray-300 font-display"
5961
.then(data => {
6062
this.success = data.success;
6163
this.quote = this.success ? `${data.quote.text} - ${data.quote.author}` : data.error
64+
this.link = this.success ? data.quote.link : ''
6265

6366
console.log('Loaded quote. Success: ' + this.success)
6467
});

0 commit comments

Comments
 (0)