📝 Add custom link example and docs

README.md

@@ -84,6 +84,43 @@ Additional page content can be provided by creating a Markdown file at `content/
 
 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).
+
+As an example, to make a custom link for FontAwesome...
+
+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.
+
+> If you prefer to inspect the code, the exampleSite contains a custom link to FontAwesome that demonstrates this process.
+
 ---
 
 ## Contributing

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%
+  );
+}

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>

exampleSite/config.toml

@@ -11,8 +11,7 @@ disableKinds = ["taxonomy", "term"]
     { link = { href = "readme/", text = "View the readme" } },
     { github = "https://github.com/jpanther/lynx" },
     { twitter = "https://twitter.com/jpanther" },
-    { instagram = "#" },
+    { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } },
-    { soundcloud = "#" },
   ]
 
 [markup.highlight]

exampleSite/content/readme.md

@@ -2,7 +2,7 @@
 title: Lynx
 ---
 
-Lynx is designed to be a simple links page powered by [Hugo](https://gohugo.io). It's built using Tailwind CSS and inspired by services like Linktree.
+Lynx is designed to be a simple links page powered by [Hugo](https://gohugo.io). It's built using Tailwind CSS and inspired by services like LinkTree.
 
 🌏 [Demo site](https://jpanther.github.io/lynx/)  
 🐛 [Bug reports & issues](https://github.com/jpanther/lynx/issues)  
@@ -75,7 +75,7 @@ Acceptable link parameters are:
 [author]
 links = {
    # Simple link
-   { github = { href = "https://github.com/jpanther/lynx", text = "Visit my website" }}
+   { github = "https://github.com/jpanther/lynx" }
 
    # Custom link
    { link = { href = "https://github.com/jpanther/lynx", text = "GitHub Project", icon = "github" }}
@@ -86,6 +86,43 @@ Additional page content can be provided by creating a Markdown file at `content/
 
 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).
+
+As an example, to make a custom link for FontAwesome...
+
+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.
+
+> If you prefer to inspect the code, the exampleSite contains a custom link to FontAwesome that demonstrates this process.
+
 ---
 
 ## Contributing