From fa414e9425f257ec0d4e0a8560c220bcdc3df48f Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Wed, 3 Nov 2021 11:48:08 +1100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20support=20for=20basic=20conte?= =?UTF-8?q?nt=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + README.md | 2 + assets/css/compiled/main.css | 18 +++++- exampleSite/config.toml | 11 ++-- exampleSite/content/readme.md | 101 ++++++++++++++++++++++++++++++++++ layouts/_default/single.html | 12 ++++ tailwind.config.js | 8 +-- 7 files changed, 144 insertions(+), 9 deletions(-) create mode 100644 exampleSite/content/readme.md create mode 100644 layouts/_default/single.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 2737126..24f959c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Ability to override individual link parameters +- Support for basic content pages - French translation ([#2](https://github.com/jpanther/lynx/pull/2)) ## [1.0.0] - 2021-11-01 diff --git a/README.md b/README.md index faa7d2d..3ec1066 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,8 @@ links = { 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. + --- ## Contributing diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 163d8b8..a64f146 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -782,7 +782,7 @@ video { } .prose code { - color: #111827; + color: #6b21a8; font-weight: 600; font-size: 0.875em; } @@ -1003,6 +1003,7 @@ video { } .prose mark { + background-color: #e9d5ff; padding: 0.1rem 0.2rem; border-radius: 0.12rem; } @@ -1169,6 +1170,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; } @@ -1302,6 +1311,11 @@ body button { color: rgba(24, 24, 27, 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 +1388,7 @@ body button { } .dark\:prose-light code { + color: #a855f7; } .dark\:prose-light a code { @@ -1404,6 +1419,7 @@ body button { } .dark\:prose-light mark { + background-color: #c084fc; } .dark\:bg-neutral-800 { diff --git a/exampleSite/config.toml b/exampleSite/config.toml index c22aa37..386bd98 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -8,9 +8,12 @@ disableKinds = ["taxonomy", "term"] name = "Lynx" image = "author.jpg" links = [ + { link = { href = "readme/", text = "View the readme" } }, { 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" }, + { instagram = "#" }, + { soundcloud = "#" }, ] + +[markup.highlight] + noClasses = false diff --git a/exampleSite/content/readme.md b/exampleSite/content/readme.md new file mode 100644 index 0000000..e49387c --- /dev/null +++ b/exampleSite/content/readme.md @@ -0,0 +1,101 @@ +--- +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 = { href = "https://github.com/jpanther/lynx", text = "Visit my website" }} + + # Custom link + { link = { href = "https://github.com/jpanther/lynx", text = "GitHub Project", icon = "github" }} +} +``` + +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. + +--- + +## 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/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..326ef9c --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,12 @@ +{{ define "main" }} +
+
+

+ {{ .Title | emojify }} +

+
+
+ {{ .Content | emojify }} +
+
+{{ end }} diff --git a/tailwind.config.js b/tailwind.config.js index 50759a8..1545014 100644 --- 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"), }, }, ],