add tutorials

website/src/app/about/page.mdx

@@ -1,111 +0,0 @@
-# Contribute to noogle
-
-# Documentation Guide.
-
-- Describe what the function does.
-- Provide examples for different scenarios when this function might be useful. -> ` # Example(s) `
-- Provide a (single) type signature -> `# Type `
-  - What types does the function expect?
-  - Try to follow the [typednix](https://typednix.dev) convention for best compatibility with noogle
-- Describe the purpose of all arguments.-> `# Arguments`
-  - Positional Arguments
-  - Attributes
-- Maybe describe edge cases or what else should be taken into account
-- References to other functions
-
-# How References (will) work
-
-Noogle uses tagref. For rendering and source agnostic references.
-
-Every lambda is tagged by automatically with `[tag:name]`.
-e.g. `lib.lists.count` is tagged with `[tag:lib.lists.count]`.
-
-Reference to `lib.lists.count` can appear everywhere.
-
-e.g.
-
-```md
-
-See [ref:lib.lists.count]
-
-```
-
-This will be rendered into
-
-> ...  
->
-> See <a href="/f/lib/lists/count">lib.lists.count</a>
- 
-
-## Understanding how noogle uses doc-comments
-
-As specified per RFC-145. Doc-comments use `/** */` syntax. There are rules for the relationship beteween a doc-comment and the static expression.
-
-```nix
-# simple.nix
-{
-  /** 
-    Markdown
-  */
-  mapThings = x: x;
-}
-```
-
-Usually the nix compiler uses an expression to produce some value. The relationship between expression and value is non trivial.
-
-Expression ( let a = 1; in a ) -> Value(1)
-
-Some Values have source position tracking, which means they know the original nix file (line & cloumn), where they came from.
-
-Noogle uses this source position tracking to move in the other direction. From Value to SourcePosition.
-
-Value(Lambda) -> Expression( let id = x: x; in id)
-
-From a given Expression position we can now do a static lookup and extract the doc-comment.
-
-```nix
-# source.nix
-let 
-  /**
-   Docs
-  */
-  id = x: x; 
-in id
-```
-
-## How aliases work
-
-Considering the following three files, that represent how the lib functions in `nixpkgs.lib` are aliased.
-
-```nix
-# ops.nix
-{
-  /** 
-    Docs for do
-  */
-  do = x: x;
-}
-```
-
-```nix
-# lib.nix
-let
-  ops = import ./ops.nix;
-in
-{
-  lib = {
-    inherit ops;
-    inherit (ops) do;
-  };
-}
-```
-
-When evaluating the `lib.nix` file we end up with
-
-```nix
-nix-repl> { lib = { ops = { do = <lambda @ ops.nix>; }, do = <lambda @ ops.nix>; } } 
-```
-
-We can observe that both lambdas point to the exact same SourcePosition in `ops.nix`
-
-This is basically how aliases are detected. It gets a little more complex with primops and partially applied lambdas.

website/src/app/tutorials/documentation/page.mdx

@@ -0,0 +1,44 @@
+# Contribute Documentation
+
+Writing good documentation is hard. Any contribution towards having a better documentation is highly profitable. Thank you a lot for reading this tutorial.
+
+## Doc-comments
+
+Doc-comments, short for documentation comments, are special comments in source code that are specifically formatted to provide documentation for the 
+associated code. 
+
+These comments serve as a source of reference documentation for noogle, 
+offering valuable information about the purpose, functionality, and usage of the code elements they document. 
+
+## Checklist for writers
+
+- [ ] Describe what the function does.
+- [ ] Provide examples for different scenarios when this function might be useful. -> ` # Example(s) `
+- [ ] Provide a (single) type signature -> `# Type `
+  - [ ] What types does the function expect?
+  - [ ] Try to follow the [typednix](https://typednix.dev) convention for best compatibility with noogle
+- [ ] Describe the purpose of all arguments.-> `# Arguments`
+  - [ ] Positional Arguments
+  - [ ] All known Attributes
+- [ ] Maybe describe edge cases or what else should be taken into account
+- [ ] References to other functions
+
+## Placement
+
+Please place your doc-comments as shown below.
+
+```nix
+/**Doc comment for foo*/
+foo = x: x;
+```
+
+Sometimes the placement shown above wont work out.
+In any case you can place the documentation directly before the lamba. (only whitespace allowed)
+
+```nix
+/**Doc comment*/
+x: x;
+```
+
+> TIP: Open up the file in your editor and go to the exact `line` `column` marker that noogle gave you.
+

website/src/app/tutorials/layout.tsx

@@ -1,3 +1,4 @@
+import { HighlightBaseline } from "@/components/HighlightBaseline";
 import { FilterProvider } from "@/components/layout/filterContext";
 import { Header } from "@/components/layout/header";
 import { Container } from "@mui/material";
@@ -11,6 +12,7 @@ export default function SearchLayout({ children }: { children: ReactNode }) {
           <Header />
         </FilterProvider>
       </Suspense>
+      <HighlightBaseline />
       <Container
         maxWidth="lg"
         sx={{