Refactor ErlangDBG documentation and code structure

- Changed layout of BasicScenario.md and Cleanup.md to use 'erldbg' layout.
- Removed TypeScript files for BasicScenario and Cleanup as they are no longer needed.
- Added new markdown files for Cleanup, Conclusion, CustomHandler, CustomHandlerMessageFilter, CustomHandlerSignals, FindCaller, RegisteredProcessesTracking, Setup, Timestamps, and TraceFunction to enhance documentation.
- Updated Svelte configuration to correctly map the 'erldbg' layout.
- Improved examples and explanations in the new markdown files for better clarity and usability.

Author: flmath

src/lib/assets/mdlayouts/erldbg.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Erldbg from './erldbg.svelte';
 	export let children: () => any;
 </script>
 

src/routes/posts/ErlangDBG/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-    import { CustomHandler } from "./CustomHandler";
-    import { Timestamps } from "./Timestamps";
-    import { TraceFunction } from "./TraceFunction";
-    import { BasicScenario } from "./BasicScenario";
-    import { FindCaller } from "./FindCaller";
-    import { Setup } from "./Setup";
-    import { CustomHandlerMessageFilter } from "./CustomHandlerMessageFilter";
-    import { CustomHandlerMessageSignals } from "./CustomHandlerSignals";
-    import { RegisteredProcessesTracking } from "./RegisteredProcessesTracking";
-    import { Cleanup } from "./Cleanup";
+    import CustomHandler from "./CustomHandler.md";
+    import Timestamps from "./Timestamps.md";
+    import TraceFunction from "./TraceFunction.md";
+    import FindCaller from "./FindCaller.md";
+    import Setup from "./Setup.md";
+    import CustomHandlerMessageFilter from "./CustomHandlerMessageFilter.md";
+    import CustomHandlerMessageSignals from "./CustomHandlerSignals.md";
+    import RegisteredProcessesTracking from "./RegisteredProcessesTracking.md";
+    import Cleanup from "./Cleanup.md";
     import HeaderShort from "./HeaderShort.svelte";
     import Header from "./Header.svelte";
-    import BS from "./BasicScenario.md";
-    import { Conclusion } from "./Conclusion";
- 
+    import BasicScenario from "./BasicScenario.md";
+    import Conclusion from "./Conclusion.md";
+
 </script>
 
 <div class="container">
@@ -38,28 +37,30 @@
         <Header>Setup</Header>
 
           <div class="glass">
-            <BS></BS>
+            <Setup> </Setup>
         </div>
 
     </section>
-    <!-- <section id="Basic Scenario">
+    <section id="Basic Scenario">
         <Header>Basic Scenario</Header>
 
-        <div class="glass"><SvelteMarkdown source={BasicScenario} /></div>
+          <div class="glass">
+        <BasicScenario> </BasicScenario>
+        </div>
     </section>
 
     <section id="Trace Function">
         <Header>Trace Function</Header>
-        <div class="glass"><SvelteMarkdown source={TraceFunction} /></div>
+        <div class="glass"><TraceFunction /></div>
     </section>
 
     <section id="Function Caller Finding">
         <Header>Function Caller Finding</Header>
-        <div class="glass"><SvelteMarkdown source={FindCaller} /></div>
+        <div class="glass"><FindCaller   /></div>
     </section>
     <section id="Timestamps">
         <Header>Timestamps</Header>
-        <div class="glass"><SvelteMarkdown source={Timestamps} /></div>
+        <div class="glass"><Timestamps  /></div>
     </section>
 
     <div class="glass"></div>
@@ -69,35 +70,35 @@
 
     <section id="Custom Handler: Introduction">
         <HeaderShort>Introduction</HeaderShort>
-        <div class="glass"><SvelteMarkdown source={CustomHandler} /></div>
+        <div class="glass"><CustomHandler /></div>
     </section>
     <section id="CustomHandlerMessageFilter">
         <HeaderShort>Message Filter</HeaderShort>
         <div class="glass">
-            <SvelteMarkdown source={CustomHandlerMessageFilter} />
+            <CustomHandlerMessageFilter />
         </div>
     </section>
     <section id="Custom Handler: Signals">
         <HeaderShort>Signals</HeaderShort>
         <div class="glass">
-            <SvelteMarkdown source={CustomHandlerMessageSignals} />
+            <CustomHandlerMessageSignals />
         </div>
     </section>
     <section id="Registered Process Tracking">
         <Header>Registered Process Tracking</Header>
         <div class="glass">
-            <SvelteMarkdown source={RegisteredProcessesTracking} />
+            <RegisteredProcessesTracking />
         </div>
     </section>
     <section id="Cleanup">
         <Header>Cleanup</Header>
-        <div class="glass"><SvelteMarkdown source={Cleanup} /></div>
+        <div class="glass"><Cleanup /></div>
     </section>
 
     <section id="Conclusion">
         <Header>Conclusion</Header>
-        <div class="glass"><SvelteMarkdown source={Conclusion} /></div>
-    </section> -->
+        <div class="glass"><Conclusion /></div>
+    </section> 
 </div>
 
 <style>
@@ -106,7 +107,6 @@
         margin: 0;
         /* -webkit-backdrop-filter: blur(3px);
     backdrop-filter: blur(3px); */
-
         overflow-x: clip;
     }
 

src/routes/posts/ErlangDBG/BasicScenario.md

@@ -1,5 +1,5 @@
 ---
-layout: blog
+layout: erldbg
 ---
 Let us start with a basic scenario. I will omit some of the messages printed out by the shell for clarity. 
 ```erlang

src/routes/posts/ErlangDBG/BasicScenario.ts

@@ -0,0 +1,17 @@
+---
+layout: erldbg
+---
+Let us purge the tracing from the system.
+First, clean up the process flags.
+```erlang
+ > dbg:p(all,clear).
+```
+Remove function tracing.
+```erlang
+ > dbg:ctp(\'_\').
+```
+Shutdown the debug tracer.
+```erlang
+ > dbg:stop().
+```
+

src/routes/posts/ErlangDBG/Cleanup.md

@@ -0,0 +1,27 @@
+---
+layout: erldbg
+---
+First, try to check other sources of information, in most cases, the erlang dump file should be enough.
+
+If it is possible to install some debug/test framework instead, for example:
+- https://massemanet.github.io/eper/redbug\n
+- https://ferd.github.io/recon/\n
+
+If you are a consultant check your insurance.
+
+Since the <bold>return_trace</bold> (and <bold>exception_trace</bold>) flag is potentially behavior-changing we'd better avoid it.
+
+I have omitted <bold>seq_trace</bold> utilities, on purpose, I do not feel well when a single press of the tab key can hang your shell.
+
+But if you are comfortable with sequence tracing on production nodes, then why have you read through this document in the first place?
+
+If you still see need to use dbg on live node start from writing 
+a processing function that has message counter as an accumulator and 
+safeguards to <bold>dbg:stop/0</bold> after a specific number of printed messages.
+
+It is good when the number of messages is safeguarded in the first header of the defined function (see [<bold>Fun25</bold>](#CustomHandlerMessageFilter)).
+
+Alternatively just run <bold>dbg:stop/0</bold> after the first match if you don\'t need to catch more than one message.
+
+You can mail me: flmathematic at gmail.com.
+

src/routes/posts/ErlangDBG/Cleanup.ts

@@ -0,0 +1,78 @@
+---
+layout: erldbg
+---
+The problem with all of the commands above is, ' +
+that all the messages are printed out to the shell. What ' +
+in case of tracing very active function ends up blocking the shell by spamming it with a continuous unreadable amount of printouts.
+
+The classic example provided on https://massemanet.github.io/eper/redbug
+is: 
+(Caution: it will hang the shell, run it in separate only to see how it looks like).
+```erlang
+ > dbg:tracer(),dbg:p(all,[m]).
+ {ok,[{matched,nonode@nohost,71}]}
+```
+To deal with that we need to customize the way we are reading our messages. 
+Instead of the <bold>dbg:trace/0</bold> we use the <bold>dbg:trace/2</bold> which takes as first argument an atom. Possible values are:
+port - the trace messages are sent to port
+process - we handle trace messages with custom function
+module - we implement trace module
+
+Since we consider here scenario with limited options ' +
+(otherwise it is just better to install one of the mentioned frameworks), we will use the process case. ' +
+In that scenario, the second argument of the <bold>dbg:trace/2</bold> has a form of a tuple: <bold>{Fun, InitData}</bold>. ' +
+The Fun is a function that takes two arguments. ' +
+The first is the received message and the second is the accumulator returned from the previous iteration. ' +
+The <bold>InitData</bold> is a starting value of the accumulator. ' +
+In other words, it works like <bold>lists:foldl/3</bold> with the difference that instead input list we process received trace messages.
+
+Let us start with a Fun that will assure that dbg will stop after receiving exactly one message, ' +
+eliminating the possibility that we hang the shell by flooding it with a continuous stream of messages.
+
+```erlang
+ > Fun = fun(X, Acc) ->
+ > io:format("Value X:~p Value Acc: ~p~n", [X, Acc]), 
+ > dbg:stop(),
+ > [X|Acc]
+ > end.
+ #Fun<erl_eval.12.128620087> 
+```
+
+```erlang
+ > dbg:ctp(\'_\').
+ {ok,[]} 
+```
+
+```erlang
+ > dbg:tracer(process,{Fun,[]}),
+ > dbg:p(all,[c]),
+ > dbg:tpl({tracing_experiments, traced_function, 2},[{\'_\', [], []}]).
+ {ok,[{matched,nonode@nohost,1},{saved,1}]} 
+```
+
+```erlang
+ > tracing_experiments:switch_state().
+ tracing_experiments.erl:86:<0.134.0>: io:format called from state enter_heavy_state number 56
+ Value X:{trace,<0.134.0>,call,
+ {tracing_experiments,traced_function,[enter_heavy_state,56]}} Value Acc: [] 
+ ok 
+
+ > tracing_experiments.erl:86:<0.134.0>: io:format called from state keep_heavy_state number 57 
+
+ > tracing_experiments.erl:86:<0.134.0>: io:format called from state keep_heavy_state number 58 
+ ...
+```
+
+```erlang
+ > tracing_experiments:switch_state().
+ ok 
+```
+From hard-coded debug messages, you can see that <bold>traced_function/2</bold> is called continuously, ' +
+but only the traces for state 56 are printed out. So we have a working safe switch.
+Lets see what will happened if we go for classical example:
+```erlang
+ > dbg:tracer(process,{Fun,[]}). {ok,<0.655.0>}
+ > dbg:p(all,[m]). 
+ ... long but finite output ...
+```
+The shell is operational.