diff --git a/README.md b/README.md index e1621ea..42ddc7a 100644 --- a/README.md +++ b/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 diff --git a/exampleSite/assets/css/custom.css b/exampleSite/assets/css/custom.css new file mode 100644 index 0000000..357abab --- /dev/null +++ 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% + ); +} diff --git a/exampleSite/assets/icons/font-awesome.svg b/exampleSite/assets/icons/font-awesome.svg new file mode 100644 index 0000000..14a465d --- /dev/null +++ b/exampleSite/assets/icons/font-awesome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 386bd98..fc2c119 100644 --- a/exampleSite/config.toml +++ b/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 = "#" }, - { soundcloud = "#" }, + { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } }, ] [markup.highlight] diff --git a/exampleSite/content/readme.md b/exampleSite/content/readme.md index e49387c..1f688fd 100644 --- a/exampleSite/content/readme.md +++ b/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