diff --git a/CHANGELOG.md b/CHANGELOG.md
index be3085c..89176e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
Added:
- `Report Bugs` and `Changelog` buttons to `Settings > About`
+- Markdown parsing for settings descriptions
Fixed:
- Fonts looking blurry
\ No newline at end of file
diff --git a/package.json b/package.json
index 598b8dc..ec830e3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"chroma-js": "^2.1.2",
"jquery": "^3.6.0",
+ "markdown-it": "^12.2.0",
"moment": "^2.29.1",
"node-vibrant": "3.1.4",
"raw-loader": "^4.0.2"
diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js
index 4e8b6ca..8778d1b 100644
--- a/src/js/ConfigMenu.js
+++ b/src/js/ConfigMenu.js
@@ -1,3 +1,5 @@
+import MarkdownIt from "markdown-it";
+
import svgUndo from "../svg/undo.svg";
const IGNORED_TYPES = ["button"];
@@ -57,6 +59,11 @@ export default class ConfigMenu {
this.#config = {};
this.configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open());
this.configButton.register();
+ this.md = MarkdownIt({
+ html: true,
+ breaks: true,
+ linkify: true
+ });
const container = document.createElement("div");
container.id = "dribbblish-config";
@@ -108,7 +115,7 @@ export default class ConfigMenu {
${options.name}
${IGNORED_TYPES.includes(options.type) ? "" : /* html */ ``}
-
+
`
: ""
diff --git a/src/js/main.js b/src/js/main.js
index 799dd8e..80aa65a 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -47,7 +47,7 @@ DribbblishShared.config.register({
type: "number",
key: "sidebarGapLeft",
name: "Left Sidebar Gap Size",
- description: "Set gap size between sidebar icons (in pixels).",
+ description: "Set gap size between sidebar icons (in `pixels`).",
defaultValue: 5,
data: {
min: 0
@@ -60,7 +60,7 @@ DribbblishShared.config.register({
type: "number",
key: "sidebarGapRight",
name: "Right Sidebar Gap Size",
- description: "Set gap size between sidebar icons (in pixels).",
+ description: "Set gap size between sidebar icons (in `pixels`).",
defaultValue: 32,
data: {
min: 0
@@ -120,7 +120,7 @@ waitForElement(["#main"], () => {
type: "checkbox",
key: "hideAds",
name: "Hide Ads",
- description: `Hide ads / premium features (see: SpotifyNoPremium)`,
+ description: `Hide ads / premium features (see: [SpotifyNoPremium](https://github.com/Daksh777/SpotifyNoPremium))`,
defaultValue: false,
onChange: (val) => $("#main").attr("hide-ads", val)
});
@@ -347,14 +347,14 @@ waitForElement(["#main"], () => {
key: "aboutDribbblishInfo",
name: "Info",
description: `
- OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
- Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
- Spicetify: ${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}
- Dribbblish: v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}
+ OS: \`${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}\`
+ Spotify: \`v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}\`
+ Spicetify: \`${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}\`
+ Dribbblish: \`v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}\`
`,
data: "Copy",
- onChange: () => {
- copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblishInfo").description);
+ onChange: function () {
+ copyToClipboard(this.description.replace(/\`/g, ""));
Spicetify.showNotification("Copied Versions");
}
});
diff --git a/src/styles/Markdown.scss b/src/styles/Markdown.scss
new file mode 100644
index 0000000..6df1fa6
--- /dev/null
+++ b/src/styles/Markdown.scss
@@ -0,0 +1,3 @@
+*[markdown] {
+ // This would be where we change any styles associated with markdown
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 41bfcaa..77bc9f2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -9,6 +9,7 @@
@import "ConfigMenu";
@import "ContextMenu.scss";
@import "NoAds";
+@import "Markdown";
:root {
--bar-height: 70px;