Add Anchored component (#280)

Co-authored-by: kazk <kazk@users.noreply.github.com>

Author: kazk

content/authoring/guidelines/kata.md content/authoring/guidelines/kata.mdx

@@ -3,33 +3,39 @@ title: Kata Authoring Guidelines
 kind: reference
 ---
 
-This article contains a set of guidelines, which can be used by authors to create good, enjoyable, high-quality kata. They were collected to help ensure that kata are of sufficient quality and users' experience will be as good as possible.
+import A from "@components/Anchored";
 
+This article contains a set of guidelines, which can be used by authors to create good, enjoyable, high-quality kata. They were collected to help ensure that kata are of sufficient quality and users' experience will be as good as possible.
 
 ## Idea
-  
-- **Make sure your kata adds some new value to Codewars.** Avoid creating blatant duplicates, and use the idea which has not yet been widely used to create a kata. Note that with so many existing kata, this can be very challenging to achieve, because it's very difficult to find out if your idea has already been used or not. Remember that you can always ask more experienced users if your idea is worthy of creating a new kata, or maybe it has been already exploited sufficiently.
-- **Do not use problems from other sites,** unless it's allowed by that site's licensing policy and/or terms of use. Explicitly give appropriate credit if your kata is based on, or inspired by, someone else's work.
- 
+
+- **<A id="novelty">Make sure your kata adds some new value to Codewars.</A>** Avoid
+  creating blatant duplicates, and use the idea which has not yet been widely used
+  to create a kata. Note that with so many existing kata, this can be very challenging
+  to achieve, because it's very difficult to find out if your idea has already been
+  used or not. Remember that you can always ask more experienced users if your idea
+  is worthy of creating a new kata, or maybe it has been already exploited sufficiently.
+- **<A id="no-copy">Do not use problems from other sites</A>**, unless it's allowed
+  by that site's licensing policy and/or terms of use. Explicitly give
+  appropriate credit if your kata is based on, or inspired by, someone else's
+  work.
 
 ## Task and Requirements
- 
+
 - **Requirements and design should hold to generally accepted and widely recognized guidelines** related to software design, programming, and domain of the kata. Do not require users to do things in a way that is widely recognized as wrong. If any of these guidelines are broken, the description should justify it with a plausible explanation.
 - **Keep kata focused on one task.** Avoid distractions, do not add other, smaller, "side" requirements that do not add too much value to the task itself. Additional "steps" required to solve the task usually do not make the kata more interesting, but are rather seen as tedious and distracting. While things like validation of the input, parsing or stringification, filtering of invalid elements, etc. can be a part of some kata related to specific topics (for example, parsers or interpreters), usually they are just additional nuisance a user has to struggle with, and do not add too much value to the task.
 - **Make requirements very clear.** If the kata is not a puzzle, describe everything that will be tested and leave no surprises. The reason for every failing test case should be evidently visible in the description of the kata.
 - **Use ideas that can be easily translated,** if they are not the main point of the kata. It is generally OK to use code constructs idiomatic for the language of the author's choice, but be aware when such idioms can cause problems to translators. Sooner or later someone will translate the kata to another programming language, and if the translator is not able to efficiently handle the original, idiomatic approach, the quality or consistency of the translation can suffer.
 - **Do not use requirements which cannot be reliably tested, enforced, or expressed in terms of a kata.** Some requirements simply do not translate well into a kata, and code restrictions (_"Do not use X"_, or _"You have to use Y"_) is one example of such.
 
-
 ## Before publishing
 
 - All components of a kata, its description and code snippets, have dedicated sets of authoring guidelines that should be followed.
 - **Kata should be complete.** There should be no excuses of _"I did not know how to do [something]"_ or _"I will add [something] later"_. Published kata should be complete and ready to be solved and reviewed. If you do not know how to do something, keep the kata as a draft and ask others for help.
 - **Ask other users for feedback and for help when needed.** Codewars community is very helpful and will gladly drive you in a direction of improvements and better quality. After all, it's them who will solve the kata after it gets published.
- - Use available forums and chat rooms (for example [Kata authoring chatroom][gitter-kata-authoring] on Gitter) to ask others about your ideas or for help with any problems you encounter.
+- Use available forums and chat rooms (for example [Kata authoring chatroom][gitter-kata-authoring] on Gitter) to ask others about your ideas or for help with any problems you encounter.
 - You can share links to the draft of your kata before publishing, to get early feedback on its quality.
 
-
 ## Maintenance
 
 - **You are responsible for your kata.** As long as you're an active Codewars user, you should address quality issues in kata you authored: fix issues, consider suggestions, answer questions. See [kata curation guidelines][kata-curation-guidelines] for more guidelines on kata maintenance.

docusaurus.config.js

@@ -68,5 +68,5 @@ module.exports = {
       },
     ],
   ],
-  plugins: [],
+  plugins: ["./sitePlugin.js"],
 };

sidebars.js

@@ -43,6 +43,7 @@ module.exports = {
           label: "Guidelines",
           items: [
             "authoring/guidelines",
+            "authoring/guidelines/kata",
             "authoring/guidelines/description",
             "authoring/guidelines/coding",
             "authoring/guidelines/sample-tests",

sitePlugin.js

@@ -0,0 +1,15 @@
+const path = require("path");
+
+// Make `@components/` resolve to `src/components`.
+module.exports = () => {
+  return {
+    name: "site-plugin",
+    configureWebpack: (_config, _isServer) => ({
+      resolve: {
+        alias: {
+          "@components": path.resolve(__dirname, "src/components/"),
+        },
+      },
+    }),
+  };
+};

src/components/Anchored.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Anchored = ({ id, children }) => {
+  return (
+    <div id={`.${id}`} class="anchored">
+      <a class="anchor-link" href={`#.${id}`} aria-hidden="true"></a>
+      {children}
+    </div>
+  );
+};
+export default Anchored;

src/css/custom.css

@@ -14,10 +14,12 @@
   --ifm-color-primary-lighter: #cc3e22;
   --ifm-color-primary-lightest: #dc4d31;
   --ifm-code-font-size: 95%;
+  --cw-anchored-target-bg: rgba(253, 230, 138, 0.5);
 }
 
 html[data-theme="dark"] {
   --ifm-footer-background-color: #262626;
+  --cw-anchored-target-bg: rgb(232, 121, 249, 0.5);
 }
 
 .docusaurus-highlight-code-line {
@@ -44,3 +46,26 @@ html[data-theme="dark"] .header-github-link:before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+.anchored {
+  display: inline;
+  position: relative;
+}
+.anchored:target {
+  background-color: var(--cw-anchored-target-bg);
+}
+.anchored:hover > .anchor-link::before {
+  opacity: 1;
+}
+.anchored > .anchor-link::before {
+  content: "*";
+  /* -ml-2 pr-2 absolute inset-y-0 opacity-0 float-left text-primary */
+  margin-left: -0.5rem;
+  padding-right: 0.5rem;
+  color: var(--ifm-color-primary);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  float: left;
+}