✨ Add support for basic content pages

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

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

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 {

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

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/<username>/<repo-name>
+   ```
+
+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).

layouts/_default/single.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+  <article class="flex flex-col items-center justify-center mt-10 ">
+    <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 }}

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"),
               },
             },
           ],