19 |
20 | [Watch the video](https://www.youtube.com/watch?v=meofoNuK3vo)
21 |
--------------------------------------------------------------------------------
/templates/simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
17 | 
12 |
13 | [Clean Modern](templates/clean-modern/README.md)
14 |
15 | **Simple Template:**
16 |
17 | 
18 |
19 | [Simple Template](templates/simple/index.html)
20 |
21 | **Simple Dynamic Templates:**
22 |
23 | 
24 |
25 | [Simple Gravatar Dynamic Template](templates/simple-gravatar-dynamic/README.md)
26 |
27 | [Simple CloudFlare Dynamic Template](templates/simple-cloudflare-dynamic/README.md)
28 |
29 | **Glass Modern Template:**
30 |
31 | 
32 |
33 | [Glass Modern Template:](templates/glass-modern/readme.md)
34 |
35 | ## Hosting
36 |
37 | Host your Quick Bio Link page using a free tier or low cost service by following our help [hosting guides](HOSTING.md).
38 |
39 | Quick Bio Link pages are simple HTML, CSS, and JavaScript pages which means that they can be hosted nearly anywhere with free and low cost
40 | options.
41 |
42 | ## Users
43 |
44 | [Mackenly Jones - @mackenlyjones](https://links.mackenly.com/)
45 |
46 | 
15 |
16 | **Keys and Values:**
17 |
18 | ***backgroundColor***
19 |
20 | Here you can specify a background color for your page. This color is also used as the theme color which may appear in some browsers. The key name should be "backgroundColor" and the value should be a color code such as #000000 (which is black.
21 |
22 | ***backgroundImage***
23 |
24 | Here your specify a background image to be used on your site. This should be a publicly accessible URL to the image file. The key name should be "backgroundImage" and the key should be a URL pointed to an image.
25 |
26 | ***description***
27 |
28 | The description is the short bio that displays below your name. Note, you can add any HTML here that you want, so if you want to add a link from your bio text or do some sort of special formatting this is the place to do it. The key name should be "description" and the value can be any text you want.
29 |
30 | ***disableCredit***
31 |
32 | This allows you to hide the small credit link that appears on the bottom of the page. To hide the link simply set the value to "true". The key name should be "disableCredit" and the value can be "true" or "false".
33 |
34 | ***displayName***
35 |
36 | Your display name is the name you want to appear on your link page. This can be your personal name, your username, or your business name. It's up to you! The key name should be "displayName" and the value text should be your preferred display name.
37 |
38 | ***emailAddress***
39 |
40 | This field allows you to add an email link to the bottom of your links. To disable the link simply set the value to "hide" and it won't be shown. Note, that if you do choose to show your email address it will be publicly accessible. The key name should be "emailAddress" and the value should either be your email address or "hide".
41 |
42 | ***linkData***
43 | This is the place where you add links. The syntax can be a bit difficult when freetyping it so feel free to copy and paste the following as a template. The key name should be "linkData" and the value should be JSON formatted like the following:
44 |
45 | ```json
46 | [
47 | {
48 | "label": "GitHub - @mackenly",
49 | "url": "https://github.com/mackenly/",
50 | "emojiIcon": "👨💻"
51 | },
52 | {
53 | "label": "Schedule a 15-minute Meeting",
54 | "url": "https://calendly.com",
55 | "emojiIcon": "📆"
56 | }
57 | ]
58 | ```
59 |
60 | Note: You can have as many links as you'd like. Just copy and paste the blocks.
61 |
62 | ***location***
63 |
64 | The location field allow you to add a location. It doesn't have to be accurate and you can also use it for your job title or slogan. The key name should be "location" and the value can be anything you want to appear in the sub heading.
65 |
66 | ***profileImage***
67 |
68 | Here your specify a profile image to be used on your site. This should be a publicly accessible URL to the image file. The key name should be "profileImage" and the key should be a URL pointed to an image.
69 |
70 |
71 | ## Hosting
72 | - To host this webpage your simply need to create a CloudFlare Worker and paste in the contents of [worker.js](worker.js).
73 | - Next, go to the KV tab and create a new KV namespace. It can be called anything you'd like. Then create keys and values matching the options discussed in the Customization section of this page.
74 | - After your keys and values are created go back to your Worker, navigate to the Settings tab, and bind your KV namespace to your worker. That will give your worker access to your namespace.
75 | - Now your page should be accessible and working as expected from your workers.dev subdomain. But if you're like me you likely want to attach it to your own domain. To do that jump over to your domain's dashboard in CloudFlare. Once you're there select the Workers tab. On that page there should be a button labled Add Route. Select it and follow the steps to point your route to your Worker.
76 | - Great! You did it. 🎉
--------------------------------------------------------------------------------
/templates/pastel/pastelcolor template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
30 | 
31 |
35 | `
36 |
37 | // Display custom links by looping over a JSON object:
38 | var links = `` + displayName + `
32 |` + location + `
33 |` + description + `
34 |- \n`;
39 | var urlToLinkTo = JSON.parse(linkData);
40 |
41 | for (var i = 0; i < urlToLinkTo.length; i++) {
42 | links += "\t\t\t\t
" + urlToLinkTo[i]["emojiIcon"] + " " + urlToLinkTo[i]["label"] + "
\n";
43 | }
44 |
45 | // Email address link:
46 | if (emailAddress != "hide") {
47 | links += `\t\t\t\t✉ Email Me
\n\t\t\t