better settings and new demo

docs/settings.md

@@ -1,6 +1,11 @@
 A list of all the available settings including detailed explanations for each one.
 
 ## General settings
+
+??? info "Screenshot"
+
+    ![general settings screenshot](assets/general-settings.png)
+
 ### Language
 Select the default Wikipedia (as in language of the Wikipedia) to search. See [languages.ts](https://github.com/StrangeGirlMurph/obsidian-wikipedia-search/blob/master/src/utils/languages.ts) for a list of all available languages.
 Note: Some features might not work with all languages. (Some APIs might not have all the necessary functionality.)
@@ -29,6 +34,10 @@ The settings for a template can be separated into the following three parts:
 
 *Note: You can only have up to 20 templates. It's a limitation that isn't really justified. I just thought adding this would be a good idea for your own good. If you need more than 20 leave a message.*
 
+??? info "Screenshot"
+
+    ![template settings screenshot](assets/tempalte-settings.png)
+
 ### Template name
 The first field of each template sets the name of the template.The name of the default template can't be changed (that's why that field is disabled) while the additional templates can have any name.
 
@@ -55,6 +64,11 @@ The last and most important part of any template is its template string. You can
 Default: `[{title}]({url})` for inline templates and `{thumbnail}\n[{title}]({url}): {intro}` for note templates
 
 ## Workflow optimization settings
+
+??? info "Screenshot"
+
+    ![workflow optimization settings screenshot](assets/workflow-optimizations.png)
+
 ### Cursor placement
 Whether or not the cursor is placed infront of the insert instead of after it. For longer inserts it might make it easier to keep the cursor at the start of the insert.
 
@@ -79,16 +93,15 @@ intro.replaceAll("\\displaystyle ", "") // removes all occurrences of '\displays
     .replaceAll(/\.\w/g, (e: string) => e.split("").join(" "));   // adds a space between any dot directly followed by a letter
 ```
 
-<details>
-  <summary>Example</summary>
+
+??? example "Example"
 
-  <pre style="white-space:pre-wrap;">In mathematics, a total order or linear order is a partial order in which any two elements are comparable.  That is, a total order is a binary relation \n  \n    \n      \n        ≤\n      \n    \n    {\\displaystyle \\leq }\n   on some set \n  \n    \n      \n        X\n      \n    \n    {\\displaystyle X}\n  , which satisfies the following for all \n  \n    \n      \n        a\n        ,\n        b\n      \n    \n    {\\displaystyle a,b}\n   and \n  \n    \n      \n        c\n      \n    \n    {\\displaystyle c}\n   in \n  \n    \n      \n        X\n      \n    \n    {\\displaystyle X}\n  :\n\n  \n    \n      \n        a\n        ≤\n        a\n      \n    \n    {\\displaystyle a\\leq a}\n   (reflexive).\nIf \n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   and \n  \n    \n      \n        b\n        ≤\n        c\n      \n    \n    {\\displaystyle b\\leq c}\n   then \n  \n    \n      \n        a\n        ≤\n        c\n      \n    \n    {\\displaystyle a\\leq c}\n   (transitive).\nIf \n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   and \n  \n    \n      \n        b\n        ≤\n        a\n      \n    \n    {\\displaystyle b\\leq a}\n   then \n  \n    \n      \n        a\n        =\n        b\n      \n    \n    {\\displaystyle a=b}\n   (antisymmetric).\n\n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   or \n  \n    \n      \n        b\n        ≤\n        a\n      \n    \n    {\\displaystyle b\\leq a}\n   (strongly connected, formerly called total).Reflexivity (1.) already follows from connectedness (4.), but is required explicitly by many authors nevertheless, to indicate the kinship to partial orders.\nTotal orders are sometimes also called simple, connex, or full orders.A set equipped with a total order is a totally ordered set; the terms simply ordered set, linearly ordered set, and loset are also used. The term chain is sometimes defined as a synonym of totally ordered set, but refers generally to some sort of totally ordered subsets of a given partially ordered set.\nAn extension of a given partial order to a total order is called a linear extension of that partial order.</pre>
+    <pre style="white-space:pre-wrap;">In mathematics, a total order or linear order is a partial order in which any two elements are comparable.  That is, a total order is a binary relation \n  \n    \n      \n        ≤\n      \n    \n    {\\displaystyle \\leq }\n   on some set \n  \n    \n      \n        X\n      \n    \n    {\\displaystyle X}\n  , which satisfies the following for all \n  \n    \n      \n        a\n        ,\n        b\n      \n    \n    {\\displaystyle a,b}\n   and \n  \n    \n      \n        c\n      \n    \n    {\\displaystyle c}\n   in \n  \n    \n      \n        X\n      \n    \n    {\\displaystyle X}\n  :\n\n  \n    \n      \n        a\n        ≤\n        a\n      \n    \n    {\\displaystyle a\\leq a}\n   (reflexive).\nIf \n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   and \n  \n    \n      \n        b\n        ≤\n        c\n      \n    \n    {\\displaystyle b\\leq c}\n   then \n  \n    \n      \n        a\n        ≤\n        c\n      \n    \n    {\\displaystyle a\\leq c}\n   (transitive).\nIf \n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   and \n  \n    \n      \n        b\n        ≤\n        a\n      \n    \n    {\\displaystyle b\\leq a}\n   then \n  \n    \n      \n        a\n        =\n        b\n      \n    \n    {\\displaystyle a=b}\n   (antisymmetric).\n\n  \n    \n      \n        a\n        ≤\n        b\n      \n    \n    {\\displaystyle a\\leq b}\n   or \n  \n    \n      \n        b\n        ≤\n        a\n      \n    \n    {\\displaystyle b\\leq a}\n   (strongly connected, formerly called total).Reflexivity (1.) already follows from connectedness (4.), but is required explicitly by many authors nevertheless, to indicate the kinship to partial orders.\nTotal orders are sometimes also called simple, connex, or full orders.A set equipped with a total order is a totally ordered set; the terms simply ordered set, linearly ordered set, and loset are also used. The term chain is sometimes defined as a synonym of totally ordered set, but refers generally to some sort of totally ordered subsets of a given partially ordered set.\nAn extension of a given partial order to a total order is called a linear extension of that partial order.</pre>
 
-  gets turned into
+    gets turned into
+
+    <pre style="white-space:pre-wrap;">In mathematics, a total order or linear order is a partial order in which any two elements are comparable. That is, a total order is a binary relation ≤ {\\leq } on some set X {X} , which satisfies the following for all a , b {a,b} and c {c} in X {X} : a ≤ a {a\\leq a} (reflexive). If a ≤ b {a\\leq b} and b ≤ c {b\\leq c} then a ≤ c {a\\leq c} (transitive). If a ≤ b {a\\leq b} and b ≤ a {b\\leq a} then a = b {a=b} (antisymmetric). a ≤ b {a\\leq b} or b ≤ a {b\\leq a} (strongly connected, formerly called total). Reflexivity (1.) already follows from connectedness (4.), but is required explicitly by many authors nevertheless, to indicate the kinship to partial orders. Total orders are sometimes also called simple, connex, or full orders. A set equipped with a total order is a totally ordered set; the terms simply ordered set, linearly ordered set, and loset are also used. The term chain is sometimes defined as a synonym of totally ordered set, but refers generally to some sort of totally ordered subsets of a given partially ordered set. An extension of a given partial order to a total order is called a linear extension of that partial order.</pre>
 
-  <pre style="white-space:pre-wrap;">In mathematics, a total order or linear order is a partial order in which any two elements are comparable. That is, a total order is a binary relation ≤ {\\leq } on some set X {X} , which satisfies the following for all a , b {a,b} and c {c} in X {X} : a ≤ a {a\\leq a} (reflexive). If a ≤ b {a\\leq b} and b ≤ c {b\\leq c} then a ≤ c {a\\leq c} (transitive). If a ≤ b {a\\leq b} and b ≤ a {b\\leq a} then a = b {a=b} (antisymmetric). a ≤ b {a\\leq b} or b ≤ a {b\\leq a} (strongly connected, formerly called total). Reflexivity (1.) already follows from connectedness (4.), but is required explicitly by many authors nevertheless, to indicate the kinship to partial orders. Total orders are sometimes also called simple, connex, or full orders. A set equipped with a total order is a totally ordered set; the terms simply ordered set, linearly ordered set, and loset are also used. The term chain is sometimes defined as a synonym of totally ordered set, but refers generally to some sort of totally ordered subsets of a given partially ordered set. An extension of a given partial order to a total order is called a linear extension of that partial order.</pre>
-
-</details>
 
 Default: `false`
 

mkdocs.yml

@@ -56,6 +56,8 @@ markdown_extensions:
   - pymdownx.inlinehilite
   - pymdownx.snippets
   - pymdownx.superfences
+  - pymdownx.details
+  - admonition
 
 nav:
   - "index.md"

src/settings.ts

@@ -83,7 +83,10 @@ export class WikipediaSearchSettingTab extends PluginSettingTab {
 
 		containerEl.empty();
 
-		new Setting(containerEl).setName("Wikipedia Search Settings").setHeading();
+		const fragment = new DocumentFragment();
+		fragment.createEl("span").innerHTML =
+			"Wikipedia Search Settings > Read the <a href='https://strangegirlmurph.github.io/obsidian-wikipedia-search/'>documentation</a>!";
+		new Setting(containerEl).setName(fragment).setHeading();
 
 		new Setting(containerEl)
 			.setName("Language")
@@ -341,8 +344,8 @@ export class WikipediaSearchSettingTab extends PluginSettingTab {
 			);
 
 		new Setting(containerEl).setName("Feedback, bug reports and feature requests 🌿").setHeading();
-		const appendix = `<p style="border-top:1px solid var(--background-modifier-border); padding: 0.75em 0; margin: unset;">If you have any kind of feedback, please let me know! No matter how small! I also obsess a lot about small details. I want to make this plugin as useful as possible for everyone. I love to hear about your ideas for new features, all the bugs you found and everything that annoys you. Don't be shy! Just create an issue <a href="https://github.com/StrangeGirlMurph/obsidian-wikipedia-search">on GitHub</a> and I'll get back to you ASAP. ~ Murphy :)</p>
-		<p>PS: Wikipedia also has a dark mode for everyone with an account.</p>`;
+		const appendix = `<p style="border-top:1px solid var(--background-modifier-border); padding: 0.75em 0; margin: unset;">If you have any kind of feedback, please let me know! No matter how small! I also obsess a lot about small details. I want to make this plugin as useful as possible for everyone. I love to hear about your ideas for new features, all the bugs you found and everything that annoys you. Don't be shy! Just create an issue on <a href="https://github.com/StrangeGirlMurph/obsidian-wikipedia-search">GitHub</a> and I'll get back to you ASAP. ~ Murphy :)</p>
+		<p style="margin: unset;">PS: Wikipedia also has a dark mode for everyone with an account.</p>`;
 		const div = containerEl.createEl("div");
 		div.innerHTML = appendix;
 	}