🔖 Release v1.1.0

2021-11-06 17:55:02 +11:00 · 2021-11-06 17:55:02 +11:00 · 02593c926c
commit 02593c926c
parent 5b8e93a5a9 d777065d8d
33 changed files with 435 additions and 47 deletions
--- a/.gitignore
+++ b/.gitignore
@ -135,6 +135,7 @@ dist
 # Generated files by hugo
 /public/
 /resources/_gen/
+.hugo_build.lock

 # Executable may be added to repository
 hugo.exe
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [1.1.0] - 2021-11-06
+
+### Added
+
+- Support for Amazon, Apple, Flickr, Google, Kickstarter, Microsoft, Patreon, Telegram, Tumblr and WhatsApp
+- Ability to override individual link parameters
+- Support for basic content pages
+- French translation ([#2](https://github.com/jpanther/lynx/pull/2))
+
+### Fixed
+
+- Typo in GitLab link text
+- Minor styling issues
+
+## [1.0.0] - 2021-11-01
+
 ### Added

 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
@ -16,3 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - HTML and Emoji support
 - Fathom Analytics and Google Analytics support
 - Favicons support
+
+[unreleased]: https://github.com/jpanther/lynx/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/jpanther/lynx/compare/v1.0.0...v1.1.0
+[1.0.0]: https://github.com/jpanther/lynx/releases/tags/v1.0.0
--- a/README.md
+++ b/README.md
@ -47,7 +47,7 @@ Below is a quick start guide using Hugo modules.

 4. In the root folder of your website, replace the `config.toml` file that was generated by Hugo with the one from Lynx. You will find the theme config file in the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/lynx/tree/stable/config.toml) from GitHub.

-5. Edit the settings in the `config.toml` file to suit your needs. You can also create a `content/_index.md` file to add additional text to your site.
+5. Follow the [configuration instructions](#configuration) below.

 ### Installing theme updates

@ -55,6 +55,78 @@ As new releases are posted, you can update the theme using Hugo. Simply run `hug

 ---

+## Configuration
+
+The main theme configuration is managed in the `config.toml` file. Most parameters are self explanatory and the default config contains some basic examples.
+
+The author name and image are displayed at the top of the page. Both are optional and will default to the site title with no image when not provided.
+
+Links can either be a simple string containing the URL for the link, or an object that defines the link parameters. Links are displayed in the order provided in the config file.
+
+Acceptable link parameters are:
+
+- `href` = the URL the link should point to (required)
+- `icon` = the name of the icon to use for this link
+- `text` = the link text
+- `target` = the target of the link (default: `_blank`)
+- `title` = the HTML title of the link
+
+```toml
+[author]
+links = {
+   # Simple link
+   { github = "https://github.com/jpanther/lynx" }
+
+   # Custom link
+   { github = { href = "https://github.com/jpanther/lynx", text = "GitHub Project" } }
+}
+```
+
+Additional page content can be provided by creating a Markdown file at `content/_index.md`. The contents of this file will be displayed between the title and links. Check out the exampleSite to see this in practice.
+
+Basic content pages can also be created by placing Markdown files in the `content` directory. These can then be linked to using links in the config file or through the homepage content.
+
+### Adding custom icons and link styles
+
+Lynx supports adding your own SVG icons and link styles to fully customise your links page. In the **root of your Hugo project**, simply create an `assets` folder and add your assets. Icons should be placed in an `icons` folder and any CSS should be in a file named `css/custom.css`.
+
+The custom CSS file will automatically be included and minified when the site is built. The styles can be as creative as you wish and anything in your custom CSS will override the default theme.
+
+If you need icons, you can find free SVG icons for many services at [FontAwesome](https://fontawesome.com/icons?d=gallery&p=2&s=brands).
+
+#### Example
+
+Let's make a custom link for FontAwesome using the FA flag as the link icon and a gradient background as the link style.
+
+> If you prefer to inspect the code, the exampleSite contains a custom link to FontAwesome that demonstrates this process.
+
+1. Place the SVG icon in the icons folder `/assets/icons/font-awesome.svg`.
+2. Create the CSS file at `/assets/css/custom.css` and add in a rule to style the link:
+
+   ```css
+   .link-font-awesome {
+     background: rgb(131, 58, 180);
+     background: linear-gradient(
+       90deg,
+       rgba(131, 58, 180, 1) 0%,
+       rgba(253, 29, 29, 1) 50%,
+       rgba(252, 176, 69, 1) 100%
+     );
+   }
+   ```
+
+   _Note: The CSS class name should be the icon name prefixed with `link-`._
+
+3. Finally, in the `config.toml` file, create the link by referencing the new icon:
+
+   ```toml
+   font-awesome = { href = "https://fontawesome.com", text = "FontAwesome" }
+   ```
+
+When the site is rebuilt, the new custom link will appear.
+
+---
+
 ## Contributing

 Lynx is expected to evolve over time. I intend to keep adding features and making changes as required.
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -1,4 +1,4 @@
-/*! Lynx v1.0.0 | MIT License | https://github.com/jpanther/lynx */
+/*! Lynx v1.1.0 | MIT License | https://github.com/jpanther/lynx */

 /*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */

@ -782,7 +782,7 @@ video {
 }

 .prose code {
-  color: #111827;
+  color: #6b21a8;
  font-weight: 600;
  font-size: 0.875em;
 }
@ -1003,15 +1003,11 @@ video {
 }

 .prose mark {
+  background-color: #e9d5ff;
  padding: 0.1rem 0.2rem;
  border-radius: 0.12rem;
 }

-body a,
-body button {
-  /* @apply transition; */
-}
-
 /* Scale SVG icons to text size */

 .icon svg {
@ -1033,6 +1029,16 @@ body button {
  filter: var(--tw-filter);
 }

+.link-amazon {
+  --tw-text-opacity: 1;
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
+  background-color: #ff9900;
+}
+
+.link-apple {
+  background-color: #333;
+}
+
 .link-codepen {
  background-color: #1e1f26;
 }
@ -1053,6 +1059,10 @@ body button {
  background-color: #1877f2;
 }

+.link-flickr {
+  background-color: #ff0184;
+}
+
 .link-foursquare {
  background-color: #0732a2;
 }
@ -1065,6 +1075,10 @@ body button {
  background-color: #554488;
 }

+.link-google {
+  background-color: #4285f4;
+}
+
 .link-instagram {
  background-color: #c13584;
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
@ -1074,6 +1088,12 @@ body button {
  background-color: #33a0ff;
 }

+.link-kickstarter {
+  --tw-text-opacity: 1;
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
+  background-color: #06ce78;
+}
+
 .link-lastfm {
  background-color: #d51007;
 }
@ -1090,10 +1110,18 @@ body button {
  background-color: #00ab6c;
 }

+.link-microsoft {
+  background-color: #08a6f0;
+}
+
 .link-orcid {
  background-color: #a6ce39;
 }

+.link-patreon {
+  background-color: #ff434d;
+}
+
 .link-pinterest {
  background-color: #e60023;
 }
@ -1125,10 +1153,18 @@ body button {
  background-color: #000;
 }

+.link-telegram {
+  background-color: #25a3e1;
+}
+
 .link-tiktok {
  background-color: #fe2d55;
 }

+.link-tumblr {
+  background-color: #001935;
+}
+
 .link-twitch {
  background-color: #9146ff;
 }
@ -1137,10 +1173,39 @@ body button {
  background-color: #1da1f2;
 }

+.link-whatsapp {
+  background-color: #45d82c;
+  background: linear-gradient(120deg, #12990b, #45d82c);
+}
+
 .link-youtube {
  background-color: #ff0000;
 }

+/* -- Chroma Highlight -- */
+
+/* Background */
+
+.prose .chroma {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(63, 63, 70, var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .prose .chroma {
+    --tw-bg-opacity: 1;
+    background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
+  }
+
+  .prose .chroma {
+    --tw-text-opacity: 1;
+    color: rgba(228, 228, 231, var(--tw-text-opacity));
+  }
+}
+
 .relative {
  position: relative;
 }
@ -1169,6 +1234,14 @@ body button {
  margin-right: 0.25rem;
 }

+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .\!mb-9 {
  margin-bottom: 2.25rem !important;
 }
@ -1229,6 +1302,10 @@ body button {
  justify-content: center;
 }

+.place-self-start {
+  place-self: start;
+}
+
 .rounded-full {
  border-radius: 9999px;
 }
@ -1302,6 +1379,16 @@ body button {
  color: rgba(24, 24, 27, var(--tw-text-opacity));
 }

+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgba(113, 113, 122, var(--tw-text-opacity));
+}
+
+.text-neutral-800 {
+  --tw-text-opacity: 1;
+  color: rgba(39, 39, 42, var(--tw-text-opacity));
+}
+
 .text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgba(161, 161, 170, var(--tw-text-opacity));
@ -1374,6 +1461,7 @@ body button {
  }

  .dark\:prose-light code {
+    color: #a855f7;
  }

  .dark\:prose-light a code {
@ -1404,6 +1492,7 @@ body button {
  }

  .dark\:prose-light mark {
+    background-color: #c084fc;
  }

  .dark\:bg-neutral-800 {
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -1,13 +1,8 @@
-/*! Lynx v1.0.0 | MIT License | https://github.com/jpanther/lynx */
+/*! Lynx v1.1.0 | MIT License | https://github.com/jpanther/lynx */

@tailwind base;
@tailwind components;

-body a,
-body button {
-  /* @apply transition; */
-}
-
 /* Scale SVG icons to text size */
 .icon svg {
  height: 1em;
@ -19,6 +14,13 @@ body button {
  @apply text-white bg-primary-700 hover:brightness-90;
 }

+.link-amazon {
+  @apply text-neutral-900;
+  background-color: #ff9900;
+}
+.link-apple {
+  background-color: #333;
+}
 .link-codepen {
  background-color: #1e1f26;
 }
@ -34,6 +36,9 @@ body button {
 .link-facebook {
  background-color: #1877f2;
 }
+.link-flickr {
+  background-color: #ff0184;
+}
 .link-foursquare {
  background-color: #0732a2;
 }
@ -43,6 +48,9 @@ body button {
 .link-gitlab {
  background-color: #554488;
 }
+.link-google {
+  background-color: #4285f4;
+}
 .link-instagram {
  background-color: #c13584;
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
@ -50,6 +58,10 @@ body button {
 .link-keybase {
  background-color: #33a0ff;
 }
+.link-kickstarter {
+  @apply text-neutral-900;
+  background-color: #06ce78;
+}
 .link-lastfm {
  background-color: #d51007;
 }
@ -62,9 +74,15 @@ body button {
 .link-medium {
  background-color: #00ab6c;
 }
+.link-microsoft {
+  background-color: #08a6f0;
+}
 .link-orcid {
  background-color: #a6ce39;
 }
+.link-patreon {
+  background-color: #ff434d;
+}
 .link-pinterest {
  background-color: #e60023;
 }
@ -88,17 +106,33 @@ body button {
 .link-steam {
  background-color: #000;
 }
+.link-telegram {
+  background-color: #25a3e1;
+}
 .link-tiktok {
  background-color: #fe2d55;
 }
+.link-tumblr {
+  background-color: #001935;
+}
 .link-twitch {
  background-color: #9146ff;
 }
 .link-twitter {
  background-color: #1da1f2;
 }
+.link-whatsapp {
+  background-color: #45d82c;
+  background: linear-gradient(120deg, #12990b, #45d82c);
+}
 .link-youtube {
  background-color: #ff0000;
 }

+/* -- Chroma Highlight -- */
+/* Background */
+.prose .chroma {
+  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+}
+
@tailwind utilities;
--- a/assets/icons/amazon.svg
+++ b/assets/icons/amazon.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="amazon" class="svg-inline--fa fa-amazon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"></path></svg>
--- a/assets/icons/apple.svg
+++ b/assets/icons/apple.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple" class="svg-inline--fa fa-apple fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path></svg>
--- a/assets/icons/flickr.svg
+++ b/assets/icons/flickr.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="flickr" class="svg-inline--fa fa-flickr fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"></path></svg>
--- a/assets/icons/google.svg
+++ b/assets/icons/google.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" class="svg-inline--fa fa-google fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>
--- a/assets/icons/kickstarter.svg
+++ b/assets/icons/kickstarter.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="kickstarter-k" class="svg-inline--fa fa-kickstarter-k fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M147.3 114.4c0-56.2-32.5-82.4-73.4-82.4C26.2 32 0 68.2 0 113.4v283c0 47.3 25.3 83.4 74.9 83.4 39.8 0 72.4-25.6 72.4-83.4v-76.5l112.1 138.3c22.7 27.2 72.1 30.7 103.2 0 27-27.6 27.3-67.4 7.4-92.2l-90.8-114.8 74.9-107.4c17.4-24.7 17.5-63.1-10.4-89.8-30.3-29-82.4-31.6-113.6 12.8L147.3 185v-70.6z"></path></svg>
--- a/assets/icons/microsoft.svg
+++ b/assets/icons/microsoft.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="microsoft" class="svg-inline--fa fa-microsoft fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"></path></svg>
--- a/assets/icons/patreon.svg
+++ b/assets/icons/patreon.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="patreon" class="svg-inline--fa fa-patreon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z"></path></svg>
--- a/assets/icons/telegram.svg
+++ b/assets/icons/telegram.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram-plane" class="svg-inline--fa fa-telegram-plane fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>
--- a/assets/icons/tumblr.svg
+++ b/assets/icons/tumblr.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr" class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
--- a/assets/icons/whatsapp.svg
+++ b/assets/icons/whatsapp.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>
--- a/config.toml
+++ b/config.toml
@ -10,33 +10,44 @@ disableKinds = ["taxonomy", "term"]

 [author]
  # name = "Your name here"
-  # image = "img/author.jpg"
+  # image = "img/author.jpg"  # path relative to static directory
+
  links = [
    # { email = "mailto:hello@your_domain.com" },
    # { link = "https://link-to-some-website.com/" },
+    # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" },
+    # { apple = "https://www.apple.com" },
    # { codepen = "https://codepen.io/username" },
    # { dev = "https://dev.to/username" },
    # { discord = "https://discord.gg/invitecode" },
    # { dribbble = "https://dribbble.com/username" },
    # { facebook = "https://facebook.com/username" },
+    # { flickr = "https://www.flickr.com/photos/username/" },
    # { foursquare = "https://foursquare.com/username" },
    # { github = "https://github.com/username" },
    # { gitlab = "https://gitlab.com/username" },
+    # { google = "https://www.google.com/" },
    # { instagram = "https://instagram.com/username" },
    # { keybase = "https://keybase.io/username" },
+    # { kickstarter = "https://www.kickstarter.com/profile/username" },
    # { lastfm = "https://lastfm.com/user/username" },
    # { linkedin = "https://linkedin.com/in/username" },
    # { mastodon = "https://mastodon.instance/@username" },
    # { medium = "https://medium.com/username" },
+    # { microsoft = "https://www.microsoft.com/" },
+    # { patreon = "https://www.patreon.com/username" },
    # { pinterest = "https://pinterest.com/username" },
    # { reddit = "https://reddit.com/user/username" },
    # { slack = "https://workspace.url/team/userid" },
    # { snapchat = "https://snapchat.com/add/username" },
    # { soundcloud = "https://soundcloud.com/username" },
    # { steam = "https://steamcommunity.com/profiles/userid" },
+    # { telegram = "https://t.me/username" },
    # { tiktok = "https://tiktok.com/@username" },
+    # { tumblr = "https://username.tumblr.com" },
    # { twitch = "https://twitch.tv/username" },
    # { twitter = "https://twitter.com/username" },
+    # { whatsapp = "https://wa.me/phone-number" },
    # { youtube = "https://youtube.com/username" },
  ]

--- a/exampleSite/assets/css/custom.css
+++ b/exampleSite/assets/css/custom.css
@ -0,0 +1,9 @@
+.link-font-awesome {
+  background: rgb(131, 58, 180);
+  background: linear-gradient(
+    90deg,
+    rgba(131, 58, 180, 1) 0%,
+    rgba(253, 29, 29, 1) 50%,
+    rgba(252, 176, 69, 1) 100%
+  );
+}
--- a/exampleSite/assets/icons/font-awesome.svg
+++ b/exampleSite/assets/icons/font-awesome.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="font-awesome-flag" class="svg-inline--fa fa-font-awesome-flag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 48V384c-63 23-82 32-119 32-63 0-87-32-150-32-20 0-36 4-51 8V328c15-4 31-8 51-8 63 0 87 32 150 32 20 0 35-3 55-9V135c-20 6-35 9-55 9-63 0-87-32-150-32-51 0-75 21-115 29V448a31.6 31.6 0 0 1-32 32A31.6 31.6 0 0 1 0 448V64A31.6 31.6 0 0 1 32 32 31.6 31.6 0 0 1 64 64V77c40-8 64-29 115-29 63 0 87 32 150 32C366 80 385 71 448 48Z"></path></svg>
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -1,9 +1,5 @@
 theme = "lynx"
-languageCode = "en-au"
-defaultContentLanguage = "en"
-
 title = "Lynx"
-# copyright = "Copy, _right?_ :thinking_face:"

 enableEmoji = true
 disableKinds = ["taxonomy", "term"]
@ -12,9 +8,16 @@ disableKinds = ["taxonomy", "term"]
  name = "Lynx"
  image = "author.jpg"
  links = [
+    { link = { href = "https://github.com/jpanther/lynx/blob/stable/README.md", text = "View the readme", icon = "github" } },
+    { link = { href = "styles/", text = "All the link styles", target = "_self" } },
    { github = "https://github.com/jpanther/lynx" },
-    { discord = "https://discord.gg/invitecode" },
-    { instagram = "https://instagram.com/username" },
-    { soundcloud = "https://soundcloud.com/username" },
-    { twitter = "https://twitter.com/username" },
+    { twitter = "https://twitter.com/jpanther" },
+    { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } },
  ]
+
+[markup.highlight]
+  noClasses = false
+
+[markup.goldmark]
+[markup.goldmark.renderer]
+  unsafe = true
--- a/exampleSite/content/styles.md
+++ b/exampleSite/content/styles.md
@ -0,0 +1,45 @@
+---
+title: Link styles
+---
+
+These are all the built-in link styles available in Lynx. Don't forget that you can also create your own styles --- check the [readme](https://github.com/jpanther/lynx/blob/stable/README.md) for more details.
+<br><br>
+
+</section>
+<section class="flex flex-col flex-wrap min-w-full mt-4 sm:min-w-0">
+{{< link email >}}
+{{< link link >}}
+{{< link amazon >}}
+{{< link apple >}}
+{{< link codepen >}}
+{{< link dev >}}
+{{< link discord >}}
+{{< link dribbble >}}
+{{< link facebook >}}
+{{< link flickr >}}
+{{< link foursquare >}}
+{{< link github >}}
+{{< link gitlab >}}
+{{< link google >}}
+{{< link instagram >}}
+{{< link keybase >}}
+{{< link kickstarter >}}
+{{< link lastfm >}}
+{{< link linkedin >}}
+{{< link mastodon >}}
+{{< link medium >}}
+{{< link microsoft >}}
+{{< link patreon >}}
+{{< link pinterest >}}
+{{< link reddit >}}
+{{< link slack >}}
+{{< link snapchat >}}
+{{< link soundcloud >}}
+{{< link steam >}}
+{{< link telegram >}}
+{{< link tiktok >}}
+{{< link tumblr >}}
+{{< link twitch >}}
+{{< link twitter >}}
+{{< link whatsapp >}}
+{{< link youtube >}}
--- a/exampleSite/layouts/shortcodes/link.html
+++ b/exampleSite/layouts/shortcodes/link.html
@ -0,0 +1,8 @@
+<a
+  class="link link-{{ .Get 0 }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded text-center"
+  href="#"
+  onclick="navigator.clipboard.writeText({{ .Get 0 }})"
+>
+  <span class="mr-1">{{ partial "icon.html" (.Get 0) }}</span>
+  {{ .Get 0 }}
+</a>
--- a/exampleSite/static/author.jpg
+++ b/exampleSite/static/author.jpg
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,21 +1,28 @@
 link:
+  amazon: Amazon
+  apple: Apple
  codepen: CodePen
  dev: DEV
  discord: Discord
  dribbble: Dribbble
  email: Email
  facebook: Facebook
+  flickr: Flickr
  foursquare: Foursquare
  github: GitHub
-  gitlab: Gitlab
+  gitlab: GitLab
+  google: Google
  instagram: Instagram
  keybase: Keybase
+  kickstarter: Kickstarter
  lastfm: Last.fm
  link: Website
  linkedin: LinkedIn
  mastodon: Mastodon
  medium: Medium
+  microsoft: Microsoft
  orcid: ORCiD
+  patreon: Patreon
  pinterest: Pinterest
  reddit: Reddit
  researchgate: ResearchGate
@ -23,10 +30,16 @@ link:
  snapchat: Snapchat
  soundcloud: Soundcloud
  steam: Steam
+  telegram: Telegram
  tiktok: TikTok
+  tumblr: Tumblr
  twitch: Twitch
  twitter: Twitter
+  whatsapp: WhatsApp
  youtube: YouTube

+nav:
+  home: Home
+
 footer:
  powered_by: "Powered by {{ .Hugo }} &amp; {{ .Lynx }}"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -0,0 +1,45 @@
+link:
+  amazon: Amazon
+  apple: Apple
+  codepen: CodePen
+  dev: DEV
+  discord: Discord
+  dribbble: Dribbble
+  email: Email
+  facebook: Facebook
+  flickr: Flickr
+  foursquare: Foursquare
+  github: GitHub
+  gitlab: GitLab
+  google: Google
+  instagram: Instagram
+  keybase: Keybase
+  kickstarter: Kickstarter
+  lastfm: Last.fm
+  link: "Site internet"
+  linkedin: LinkedIn
+  mastodon: Mastodon
+  medium: Medium
+  microsoft: Microsoft
+  orcid: ORCiD
+  patreon: Patreon
+  pinterest: Pinterest
+  reddit: Reddit
+  researchgate: ResearchGate
+  slack: Slack
+  snapchat: Snapchat
+  soundcloud: Soundcloud
+  steam: Steam
+  telegram: Telegram
+  tiktok: TikTok
+  tumblr: Tumblr
+  twitch: Twitch
+  twitter: Twitter
+  whatsapp: WhatsApp
+  youtube: YouTube
+
+# nav:
+#   home: Home
+
+footer:
+  powered_by: "Propulsé par {{ .Hugo }} &amp; {{ .Lynx }}"
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -2,7 +2,7 @@
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
  {{- partial "head.html" . -}}
  <body
-    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
+    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-white max-w-7xl"
  >
    <main class="flex-grow">{{- block "main" . }}{{- end }}</main>
    {{- partial "footer.html" . -}}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,15 @@
+{{ define "main" }}
+  <article class="flex flex-col items-center justify-center mt-10">
+    <nav class="place-self-start">
+      <a href="{{ "/" | relURL }}" class="text-neutral-500">&larr; {{ i18n "nav.home" }}</a>
+    </nav>
+    <header>
+      <h1 class="mt-2 mb-6 text-4xl font-extrabold text-center text-neutral-800 dark:text-white">
+        {{ .Title | emojify }}
+      </h1>
+    </header>
+    <section class="prose dark:prose-light">
+      {{ .Content | emojify }}
+    </section>
+  </article>
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -14,22 +14,34 @@
    {{ with .Site.Author.links }}
      <div class="flex flex-col flex-wrap min-w-full mt-4 sm:min-w-0">
        {{ range $links := . }}
-          {{ range $name, $url := $links }}
+          {{ range $type, $data := $links }}
+            {{ $href := $data }}
+            {{ $icon := $type }}
+            {{ $text := i18n (printf "link.%s" $type) }}
+            {{ $target := "_blank" }}
+            {{ $title := "" }}
+            {{ if reflect.IsMap $data }}
+              {{ with $data.href }}{{ $href = . }}{{ end }}
+              {{ with $data.icon }}{{ $icon = . }}{{ end }}
+              {{ with $data.text }}{{ $text = . }}{{ end }}
+              {{ with $data.target }}{{ $target = . }}{{ end }}
+              {{ with $data.title }}{{ $title = . }}{{ end }}
+            {{ end }}
            <a
-              class="link link-{{ $name }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded"
-              href="{{ $url }}"
-              target="_blank"
-              alt="{{ $name | title }}"
+              class="link link-{{ $type }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded"
+              href="{{ $href }}"
+              target="{{ $target }}"
+              {{ with $title }}title="{{ . }}"{{ end }}
              rel="me noopener noreferrer"
-              ><div class="">
-                <span class="mr-1">{{ partial "icon.html" $name }}</span
-                >{{ i18n (printf "link.%s" $name) }}
-              </div></a
            >
+              {{- with $icon -}}
+                <span class="mr-1">{{ partial "icon.html" . }}</span>
+              {{- end -}}
+              {{ $text | emojify }}
+            </a>
          {{ end }}
        {{ end }}
      </div>
    {{ end }}
-
  </article>
 {{ end }}
--- a/layouts/partials/icon.html
+++ b/layouts/partials/icon.html
@ -1,6 +1,6 @@
-<span class="relative inline-block align-text-bottom icon">
-  {{ $icon := resources.Get (print "icons/" . ".svg") }}
-  {{ if $icon }}
+{{ $icon := resources.Get (print "icons/" . ".svg") }}
+{{ if $icon }}
+  <span class="relative inline-block align-text-bottom icon">
    {{ $icon.Content | safeHTML }}
-  {{ end }}
-</span>
+  </span>
+{{ end }}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "hugo-lynx-theme",
-  "version": "1.4.0",
+  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "hugo-lynx-theme",
-      "version": "1.4.0",
+      "version": "1.0.0",
      "license": "MIT",
      "devDependencies": {
        "@tailwindcss/typography": "^0.4.1",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "hugo-lynx-theme",
-  "version": "0.0.1",
+  "version": "1.1.0",
  "description": "Lynx theme for Hugo",
  "scripts": {
    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -68,7 +68,7 @@ module.exports = {
                position: "relative",
              },
              code: {
-                color: theme("colors.secondary.700"),
+                color: theme("colors.primary.800"),
              },
              "pre code": {
                color: theme("colors.neutral.700"),
@ -95,7 +95,7 @@ module.exports = {
                fontWeight: "600",
              },
              mark: {
-                backgroundColor: theme("colors.secondary.200"),
+                backgroundColor: theme("colors.primary.200"),
                padding: "0.1rem 0.2rem",
                borderRadius: "0.12rem",
              },
@ -142,7 +142,7 @@ module.exports = {
                color: theme("colors.neutral.400"),
              },
              code: {
-                color: theme("colors.secondary.400"),
+                color: theme("colors.primary.500"),
              },
              "a code": {
                color: theme("colors.white"),
@ -166,7 +166,7 @@ module.exports = {
                color: theme("colors.neutral.300"),
              },
              mark: {
-                backgroundColor: theme("colors.secondary.400"),
+                backgroundColor: theme("colors.primary.400"),
              },
            },
          ],
				`@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="amazon" class="svg-inline--fa fa-amazon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" class="svg-inline--fa fa-google fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>`