migrate to yml config (so I can comment the config)
Some checks failed
Publish Docker Image / docker (push) Failing after 33s

This commit is contained in:
Lee 2023-07-13 10:12:07 +01:00
parent c0e1bec350
commit b9093d75fe
13 changed files with 3075 additions and 180 deletions

2
.gitignore vendored

@ -145,4 +145,4 @@ dist
.pnp.*
# Config
config.json
config.yml

100
README.md

@ -36,103 +36,3 @@ Just simply remove it from the config and it will not show anymore
## Showing Discord status
You must be in the [lanyard server](https://discord.gg/UrXF2cfJ7F) for it to work.
## Help!!! I'm getting an error when launching it
### Config Issue
If your error looks similar to this you are most likely missing part of the config, as some new things may have been added.
```bash
simple-links | Type error: Property 'theme' does not exist on type '{ name: string; description: string; avatar: string; background: { showBackground: boolean; blur: boolean; darken: { enabled: boolean; amount: number; }; backgroundImage: string; }; infoCard: { transparency: number; }; metadata: { ...; }; options: { ...; }; analytics: { ...; }; links: { ...; }[]; }'.
```
## Config Example
```json
{
"name": "Your Name", // The name you want to display on the site
"description": "A description about yourself", // The description you want to use
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
// or use a local image
"avatar": "/avatar.webp",
// If you want to use a custom (not dark) background
"background": {
"showBackground": true, // Whether it is enabled or not
"blur": true, // Should we blur the background?
"darken": {
// Should we darken the background?
"enabled": true,
"amount": 0.7
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg", // The image to use in the background
// or use a local image
"backgroundImage": "/background.jpg"
},
"theme": "dark", // "dark" or "light" themes
// The card that displays your info and buttons
"infoCard": {
"transparency": 0.85 // How transparent should it be?
},
// Website options
"options": {
"showSourceLink": true // Should we show the "Source Code" link
},
// Show your discord status on the site (You MUST be in the Lanyard server)
// https://discord.gg/UrXF2cfJ7F
"discord": {
"id": "474221560031608833" // Your discord ID
},
// Search engine and embedding metadata (discord, twitter, etc embeds)
"metadata": {
"title": "Your Name", // The title of the embed
"description": "website description", // The description of the embed
"themeColor": "#6441a5", // The color of the embed
"authors": [
// SEO metadata
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
// The buttons to show links for
"links": [
{
"title": "Git", // The shown title of the button
"url": "https://git.fascinated.cc", // Where the button goes to when clicked
"icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
// The color of the icon (tailwindcss colors)
"color": "bg-green-700"
},
{
"title": "Twitch",
"url": "https://twitch.tv/fascinated_",
"icon": "fab fa-twitch",
"color": "bg-[#6441a5]"
},
{
"title": "Documentation",
"url": "https://docs.fascinated.cc",
"color": "bg-neutral-700"
}
],
// Icon only links
"socialLinks": [
{
"icon": "fab fa-twitter", // The icon to use
"color": "#1DA1F2", // An optional color
"url": "https://twitter.com" // The link to go to
},
{
"icon": "fab fa-reddit",
"color": "#FF4300",
"url": "https://www.reddit.com/user/ImFascinatedMC"
},
{
"icon": "fab fa-git-alt",
"url": "https://git.fascinated.cc"
}
]
}
```

@ -1,73 +0,0 @@
{
"configVersion": "0.1.4",
"name": "Your Name",
"description": "A description about yourself",
"avatar": "/avatar.webp",
"background": {
"showBackground": true,
"blur": true,
"darken": {
"enabled": true,
"amount": 0.7
},
"backgroundImage": "/background.jpg"
},
"theme": "dark",
"infoCard": {
"transparency": 0.85
},
"discord": {
"id": "set me"
},
"options": {
"showSourceLink": true
},
"metadata": {
"title": "Your Name",
"description": "website description",
"themeColor": "#6441a5",
"authors": [
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
"links": [
{
"title": "Git",
"url": "https://git.fascinated.cc",
"icon": "fab fa-git-alt",
"color": {
"normal": "bg-green-700"
}
},
{
"title": "Twitch",
"url": "https://twitch.tv/fascinated_",
"icon": "fab fa-twitch",
"color": "bg-[#6441a5]"
},
{
"title": "Documentation",
"url": "https://docs.fascinated.cc",
"color": "bg-neutral-700"
}
],
"socialLinks": [
{
"icon": "fab fa-twitter",
"color": "#1DA1F2",
"url": "https://twitter.com"
},
{
"icon": "fab fa-reddit",
"color": "#FF4300",
"url": "https://www.reddit.com/user/ImFascinatedMC"
},
{
"icon": "fab fa-git-alt",
"url": "https://git.fascinated.cc"
}
]
}

75
config-example.yml Normal file

@ -0,0 +1,75 @@
# The version of the config (DO NOT CHANGE)
configVersion: "0.2.0"
# Your name
name: "Your Name"
# The description shown in the info card
description: "A description about yourself"
# The avatar to show
avatar: "/avatar.webp"
# Background configuration
background:
# Should we use a custom background?
showBackground: true
# Should we blur that background?
blur: true
# Should we darken that background? and by how much
darken:
enabled: true
amount: 0.7
# The image to show when the background is enabled
backgroundImage: "/background.jpg"
# The theme to use (light or dark)
theme: "dark"
# The info card settings
infoCard:
# How transparent should it be?
transparency: 0.85
# Discord settings (Status indicator)
discord:
# Your discord id
id: "set me"
# Global settings for the site
options:
# Should we show the "Website Source" button?
showSourceLink: true
# Metadata for the website (controls embed settings and SEO info)
# see: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
metadata:
title: "Your Name"
description: "website description"
themeColor: "#6441a5"
authors:
- name: "Fascinated"
url: "https://fascinated.cc"
# The links to show (buttons)
links:
# The title of the button
- title: "Git"
# Where the button goes to
url: "https://git.fascinated.cc"
# The icon of the button
# see: https://fontawesome.com/search
icon: "fab fa-git-alt"
# The color of the button (TailwindCSS colors or hex color, see below for hex)
color: "bg-green-700"
- title: "Twitch"
url: "https://twitch.tv/fascinated_"
icon: "fab fa-twitch"
color: "bg-[#6441a5]"
- title: "Documentation"
url: "https://docs.fascinated.cc"
color: "bg-neutral-700"
# The links to show (icons only, below buttons)
socialLinks:
# The icon to use
# see: https://fontawesome.com/search
- icon: "fab fa-twitter"
# The color of the icon
color: "#1DA1F2"
# Where the icon goes to when clicked
url: "https://twitter.com"
- icon: "fab fa-reddit"
color: "#FF4300"
url: "https://www.reddit.com/user/ImFascinatedMC"
- icon: "fab fa-git-alt"
url: "https://git.fascinated.cc"

@ -1,3 +1,5 @@
const withYaml = require("next-plugin-yaml");
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
@ -12,4 +14,4 @@ const nextConfig = {
},
};
module.exports = nextConfig;
module.exports = withYaml(nextConfig);

@ -21,6 +21,7 @@
"eslint": "8.44.0",
"eslint-config-next": "13.4.9",
"next": "13.4.9",
"next-plugin-yaml": "^1.0.1",
"postcss": "8.4.25",
"react": "18.2.0",
"react-dom": "18.2.0",

@ -4,7 +4,7 @@ import Image from "next/image";
import { Fragment } from "react";
import { useLanyardWS } from "use-lanyard";
import Config from "../../../config.json";
import Config from "../../../config.yml";
function LanyardWrapper(props: { children: any }) {
return <Fragment>{props.children}</Fragment>;

@ -3,7 +3,7 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
import { Inter } from "next/font/google";
import "./globals.css";
import Config from "../../config.json";
import Config from "../../config.yml";
config.autoAddCss = false;
const inter = Inter({ subsets: ["latin"] });

@ -4,7 +4,7 @@ import { far } from "@fortawesome/free-regular-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import Config from "../../config.json";
import Config from "../../config.yml";
import Avatar from "./components/Avatar";
library.add(fab, far, fas); // Loading in the icons from FontAwesome

57
src/types/config.d.ts vendored Normal file

@ -0,0 +1,57 @@
import { YAMLMap } from "js-yaml";
export interface Config {
configVersion: string;
name: string;
description: string;
avatar: string;
background: {
showBackground: boolean;
blur: boolean;
darken: {
enabled: boolean;
amount: number;
};
backgroundImage: string;
};
theme: string;
infoCard: {
transparency: number;
};
discord: {
id: string;
};
options: {
showSourceLink: boolean;
};
metadata: {
title: string;
description: string;
themeColor: string;
authors: {
name: string;
url: string;
}[];
};
links: {
title: string;
url: string;
icon: string;
color:
| {
normal: string;
}
| string;
}[];
socialLinks: {
icon: string;
color: string;
url: string;
}[];
}
// Parse the YAML content and convert it to the defined type
declare module "*.yml" {
const content: YAMLMap & Config;
export default content;
}

@ -4,7 +4,7 @@ module.exports = {
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./config.json",
"./config.yml",
],
theme: {},
plugins: [],

@ -23,6 +23,12 @@
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"next-env.d.ts",
"src/types/*.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}

2927
yarn.lock Normal file

File diff suppressed because it is too large Load Diff