From b276d32a04b4fe7424502c70a19ce7b9671413b3 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Sat, 6 Nov 2021 17:44:29 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Add=20ability=20to=20change=20li?= =?UTF-8?q?nk=20targets=20and=20titles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 +- assets/css/compiled/main.css | 29 ++++- assets/css/main.css | 11 +- exampleSite/config.toml | 4 +- exampleSite/content/readme.md | 140 ----------------------- exampleSite/content/styles.md | 6 +- exampleSite/layouts/shortcodes/link.html | 2 +- layouts/index.html | 7 +- 8 files changed, 46 insertions(+), 161 deletions(-) delete mode 100644 exampleSite/content/readme.md diff --git a/README.md b/README.md index 7eacee7..c876c01 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,11 @@ Links can either be a simple string containing the URL for the link, or an objec Acceptable link parameters are: -- `href` = the URL the link should point to -- `icon` = the name of the icon to use for this link (optional) -- `text` = the link text (optional) +- `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] diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4366b2e..425b2bd 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1008,11 +1008,6 @@ video { border-radius: 0.12rem; } -body a, -body button { - /* @apply transition; */ -} - /* Scale SVG icons to text size */ .icon svg { @@ -1187,6 +1182,30 @@ body button { 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; } diff --git a/assets/css/main.css b/assets/css/main.css index af9b74d..d259fde 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -3,11 +3,6 @@ @tailwind base; @tailwind components; -body a, -body button { - /* @apply transition; */ -} - /* Scale SVG icons to text size */ .icon svg { height: 1em; @@ -134,4 +129,10 @@ body button { 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; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index baac176..b116a9c 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -8,8 +8,8 @@ disableKinds = ["taxonomy", "term"] name = "Lynx" image = "author.jpg" links = [ - { link = { href = "readme/", text = "View the readme" } }, - { link = { href = "styles/", text = "All the link styles" } }, + { link = { href = "https://github.com/jpanther/lynx/blob/stable/README.md", text = "View the readme" } }, + { link = { href = "styles/", text = "All the link styles", target = "_self" } }, { github = "https://github.com/jpanther/lynx" }, { twitter = "https://twitter.com/jpanther" }, { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } }, diff --git a/exampleSite/content/readme.md b/exampleSite/content/readme.md deleted file mode 100644 index f45d0c0..0000000 --- a/exampleSite/content/readme.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -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. - -🌏 [Demo site](https://jpanther.github.io/lynx/) -🐛 [Bug reports & issues](https://github.com/jpanther/lynx/issues) -💡 [Questions & feature requests](https://github.com/jpanther/lynx/discussions) - -![Screenshot](https://raw.githubusercontent.com/jpanther/lynx/stable/images/screenshot.png) - -## Features - -- Built with Tailwind CSS JIT for minified stylesheets without any excess code -- Fully responsive layout -- Dark mode (auto-switching based upon browser) -- SVG icons from FontAwesome 5 -- HTML and Emoji support -- Fathom Analytics and Google Analytics support -- Favicons support - ---- - -## Installation - -Lynx supports several installation methods - as a Hugo Module (easiest), a git submodule, or as a completely manual install. - -Below is a quick start guide using Hugo modules. - -### Quick start using Hugo - -> **Note:** Ensure you have **Go** and **Hugo** installed, and that you have created a new Hugo project before proceeding. - -1. From your project directory, initialise Hugo Modules: - - ```shell - hugo mod init github.com// - ``` - -2. Create `config/_default/module.toml` and add the following: - - ```toml - [[imports]] - path = "github.com/jpanther/lynx" - ``` - -3. Start your server using `hugo server` and the theme will be downloaded automatically. - -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. Follow the [configuration instructions](#configuration) below. - -### Installing theme updates - -As new releases are posted, you can update the theme using Hugo. Simply run `hugo mod get -u` from your project directory and the theme will automatically update to the latest release. - ---- - -## 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 -- `icon` = the name of the icon to use for this link (optional) -- `text` = the link text (optional) - -```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. - -Feel free to get in touch with any issues or suggestions for new features you'd like to see. - -- 🐛 **Bug reports & issues:** Use [GitHub Issues](https://github.com/jpanther/lynx/issues) -- 💡 **Ideas for new features:** Open a discussion on [GitHub Discussions](https://github.com/jpanther/lynx/discussions) -- 🙋‍♀️ **General questions:** Head to [GitHub Discussions](https://github.com/jpanther/lynx/discussions) - -If you're able to fix a bug or implement a new feature, I welcome PRs for this purpose. Learn more in the [contributing guidelines](https://github.com/jpanther/lynx/blob/dev/CONTRIBUTING.md). diff --git a/exampleSite/content/styles.md b/exampleSite/content/styles.md index a370f0a..a9d6f46 100644 --- a/exampleSite/content/styles.md +++ b/exampleSite/content/styles.md @@ -2,12 +2,11 @@ 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]({{< ref "readme#adding-custom-icons-and-link-styles" >}}) for more details. +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.

-
-
+
{{< link email >}} {{< link link >}} {{< link amazon >}} @@ -44,4 +43,3 @@ These are all the built-in link styles available in Lynx. Don't forget that you {{< link twitter >}} {{< link whatsapp >}} {{< link youtube >}} -
diff --git a/exampleSite/layouts/shortcodes/link.html b/exampleSite/layouts/shortcodes/link.html index 552b1d1..09789bd 100644 --- a/exampleSite/layouts/shortcodes/link.html +++ b/exampleSite/layouts/shortcodes/link.html @@ -1,5 +1,5 @@ diff --git a/layouts/index.html b/layouts/index.html index 5f5a37a..d444ff8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -18,15 +18,20 @@ {{ $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 }} {{- with $icon -}}