### GET /tags - Usage Example Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md Example of how to navigate to the tags index page. ```http GET /tags ``` -------------------------------- ### MDX Input Example Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md Example of MDX JSX input for syntax highlighting. ```jsx 
  const x = 42;
``` -------------------------------- ### Example: New Blog Post Frontmatter Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md Example frontmatter for a new blog post in MDX format, including title, date, slug, tags, series, description, and featured image details. ```yaml --- title: My New Post date: 2024-05-28 slug: my-new-post tags: - javascript - typescript series: advanced-patterns description: A description of my post featuredImage: /images/hero.png featuredImageDesc: Alt text --- # Content here ``` -------------------------------- ### Input MDX Example Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md An example of MDX input with a `
` component and a TypeScript code block.

```jsx

const x: number = 42;


```

--------------------------------

### createDeepSignal Example for Resource Storage

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/solid-resource-storage.mdx

An example implementation of `createDeepSignal` demonstrating how to use the `storage` option with `createResource` to store fetched data in a SolidJS store, enabling reactive updates based on changed properties.

```ts
function createDeepSignal(value: T): Signal {
  const [store, setStore] = createStore({ value });
  return [
    () => store.value,
    (v: T) => {
      const unwrapped = unwrap(store.value);
      typeof v === "function" && (v = v(unwrapped));
      setStore("value", reconcile(v));
      return store.value;
    }
  ] as Signal;
}
```

--------------------------------

### Configuring remark-frontmatter in app.config.ts

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

Example of how to install remark-frontmatter and add it to the remarkPlugins in app.config.ts to exclude frontmatter from HTML output.

```ts
export default defineConfig({
  ...
	vite: {
		plugins: [
			mdx.withImports({})({
				remarkPlugins: [remarkFrontmatter], // Add it here
			}),
		],
	},
  ...
});

```

--------------------------------

### Homepage Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

Example of accessing the homepage route.

```http
GET /

```

--------------------------------

### Example Frontmatter in MDX

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

Example of frontmatter written in YAML at the top of an MDX file, including title, date, and tags.

```md
---
title: This is my first post!
date: 2024-09-04
tags:
  - solidjs
  - solid-start
---

```

--------------------------------

### Initial jayson.js setup

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/javascript-dsl.mdx

Initial setup for the jayson.js file, including a sample JSON object and the jayson query string.

```javascript
const o = {
  name: "My cool object",
  isItCool: true,
}

const jayson = "grab name"
```

--------------------------------

### Using the posts list

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

Example of how to import and use the posts list in a Solid component to render links to blog posts.

```tsx

  {post => {post.slug}}

```

--------------------------------

### Virtual Module Plugin Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/drafts/solid-start-enumerate-routes.mdx

This code snippet demonstrates how to create a Vite plugin to define a virtual module.

```javascript
export default function myPlugin() {
  const virtualModuleId = 'virtual:my-module'
  const resolvedVirtualModuleId = '\0' + virtualModuleId

  return {
    name: 'my-plugin', // required, will show up in warnings and errors
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export const msg = "from virtual module"`
      }
    },
  }
}
```

--------------------------------

### Running the Print Function

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

Example of evaluating a print call with string arguments.

```js
EVALUATE(["print", "hello", "world"]);
```

--------------------------------

### App Configuration with Vite Plugin

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

Example of how to add the custom Vite plugin to the SolidStart app configuration.

```typescript
export default defineConfig({
  ...
	vite: {
		plugins: [
            ...
			blogPostsPlugin(), // Add it here
		],
	},
  ...
});

```

--------------------------------

### Nested list example

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

An example of a nested list structure in the custom language.

```js
["-", 25, ["+", 4, 6]]
```

--------------------------------

### GET /series/:id - Example Route

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

Example of how to access a specific series page.

```http
GET /series/weekend-series
```

--------------------------------

### Step 1: Setup for Syntax Highlighting

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Registers TSX as a supported language for syntax highlighting using Refractor.

```typescript
import { refractor } from "refractor";
import tsx from "refractor/lang/tsx.js";

refractor.register(tsx);
```

--------------------------------

### Integration with Components

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Example of the `Pre` component used in Markdown.tsx, which works with mdxPrism.

```typescript
const Pre: ParentComponent<{ lang: string; lines?: string; file?: string }> = (props) => {
  // ... copy button, file name display
  return (
    
      {props.children}  {/* mdxPrism highlights this */}
    

  );
};
```

--------------------------------

### Usage in app.config.ts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Example of how to integrate the mdxPrism plugin into the Vite configuration.

```typescript
import { mdxPrism } from "./build-helpers/mdxPrism";

export default defineConfig({
  vite: {
    plugins: [
      mdx.withImports({})({
        rehypePlugins: [
          rehypeMdxCodeProps,
          mdxPrism,  // Apply syntax highlighting
        ],
        // ...
      }),
    ],
  }
})
```

--------------------------------

### Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

An example of how to use the DSLNestingProps component within a React article.

```typescript
import { DSLNestingProps } from "~/components/javascript-dsl/DSLNestingProp";



  
Understanding Property Nesting

  


```

--------------------------------

### Get Posts by Tag

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Example of how to retrieve posts associated with a specific tag.

```typescript
import { posts } from "~/data/posts";
import { tags } from "~/data/tags";

const tagPosts = tags["javascript"].posts.map(i => posts[i]);
```

--------------------------------

### Parser output example

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

So the parser could take the text and translate it to a list that the interpreter can then go over and execute.

```javascript
[2, "+", 5, "-", 3]
```

--------------------------------

### Posts Component Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Examples of how to use the Posts component to display all or filtered blog posts.

```typescript
import { Posts } from "~/components/Posts";
import { posts } from "~/data/posts";

// Show all posts


// Show filtered posts
 p.tags.includes("typescript"))} />
```

--------------------------------

### Math interpreter example

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

An interpreter for math would take this text input and execute it so that it results in 4.

```javascript
2 + 5 - 3
```

--------------------------------

### Navigation Examples - Data-driven navigation

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

Examples of creating navigation links dynamically based on data, such as tags or series.

```typescript
// Get current post's tags as links
post.tags.map(tag => (
  {tag}
))

// Get all series as links
Object.values(series).map(s => (
  {s.id}
))
```

--------------------------------

### Display Posts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Example of how to display posts using the Posts component.

```typescript
import { Posts } from "~/components/Posts";
import { posts } from "~/data/posts";


```

--------------------------------

### Series Index Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

Example of accessing the series index route.

```http
GET /series

```

--------------------------------

### Running Locally

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Common npm commands for managing dependencies, starting the development server, building for production, and previewing the production build.

```bash
npm install          # Install dependencies
npm run dev          # Start dev server (with HMR)
npm run build        # Build for production
npm run preview      # Preview production build
```

--------------------------------

### Using post title for links

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

Corrected example showing how to use the post's title instead of its slug for rendering links in a blog post list.

```tsx
{post.title}
```

--------------------------------

### Querying a list of objects

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/javascript-dsl.mdx

Example demonstrating how to query a list of objects using the DSL.

```javascript
query(
  [
    {label: "object 1", value: 23},
    {label: "object 2", value: 57},
  ],
  "grab value"
)
```

--------------------------------

### Aliased Path Imports Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Illustrates the use of aliased path imports with '~/' pointing to the 'src/' directory.

```typescript
// Equivalent:
import { posts } from "~/data/posts";
import { posts } from "src/data/posts";
import { posts } from "./../../data/posts"; // (depending on location)

```

--------------------------------

### Jayson query example

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/javascript-dsl.mdx

Example of how to query a list of objects using the jayson DSL.

```plaintext
scores
  score > 1000
  desc name.firstName
  grab name.lastName
```

--------------------------------

### Parsing frontmatter in SolidStart

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

TypeScript code snippet demonstrating how to parse frontmatter from MDX files using to-vfile and vfile-matter in a SolidStart blog setup.

```ts
const processFiles = () => {
	const outputFile = resolve("src/data/posts.json");
	const blogDir = resolve("src/routes/blog");
	const files = readdirSync(blogDir);

	const blogPosts = files
		.filter((file) => 
        statSync(join(blogDir, file)).isFile() && file.endsWith(".mdx")
      )
		.map((file) => {

      // Turn each of the post files into vfiles
			const vfile = readSync(resolve("src/routes/blog", file));
      // Parse their frontmatter
			matter(vfile);

      return { 
        // Add the frontmatter properties to each post's metadata
				...(f.data.matter as object),
        slug: file.replace(".mdx", "")
      }
    });
    
	writeFileSync(outputFile, JSON.stringify(blogPosts, null, 2), "utf-8");
};

```

--------------------------------

### Layout Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Illustrates how to use the Layout component to wrap page content.

```typescript
import { Layout } from "~/components/Layout";


  
Page title

  
Page content here


```

--------------------------------

### Usage in app.config.ts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Example of how to register the blogPostsPlugin within the Vite configuration in app.config.ts.

```typescript
import { blogPostsPlugin } from "./build-helpers/blogPostsPlugin";

export default defineConfig({
  vite: {
    plugins: [
      mdx.withImports({})({...}),
      blogPostsPlugin(), // Register the plugin
    ],
  },
})

```

--------------------------------

### Aside Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Shows how to use the Aside component for supplementary content.

```jsx

```

--------------------------------

### Combining Print with Math Operations

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

Example of evaluating a print call with nested math operations.

```js
EVALUATE(["print", ["+", 4, ["-", 3, 10]]]) // should log -3
```

--------------------------------

### More complex nested list

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

A more complex example demonstrating deeper nesting and mixed operations.

```js
const program = ["-", ["+", 10, 5],
                      ["+", 3,
                            ["-", 12, 6]]];
// translates as (10 + 5) - 3 + (12 - 6)
```

--------------------------------

### Generated Blog Post JSON Structure

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Example structure of the JSON file generated by the blogPostsPlugin.

```json
[
  {
    "date": "2024-05-28",
    "slug": "my-article",
    "title": "My Article Title",
    "tags": ["tag1", "tag2"],
    "series": "series-name",
    "description": "Article description",
    "featuredImage": "/images/hero.png",
    "featuredImageDesc": "Image description"
  }
]
```

--------------------------------

### Implicit return in functional languages

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

An example of a function in an imaginary language demonstrating implicit return of the last evaluated expression.

```js
function test() {
	"a string";
	someFunctionCall();
	10;
}
```

--------------------------------

### Customizing Post Extraction

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Example of how to customize metadata extraction in the `processFiles` function by modifying the mapping.

```typescript
.map((file) => {
  const f = readSync(resolve("src/routes/blog", file));
  matter(f);
  return {
    ...(f.data.matter as object),  // Frontmatter fields
    slug: file.replace(".mdx", ""), // Custom slug generation
  } as { date: string; slug: string };
})
```

--------------------------------

### Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/hooks.md

An example demonstrating how to use the useRouteTransitionTiming hook in a SolidJS component to manage transition animations and loading states.

```typescript
import { useRouteTransitionTiming } from "~/useRouteTransitionTiming";

export const TransitionController = () => {
  const [isTransitioning, setIsTransitioning] = createSignal(false);
  const [isLoading, setIsLoading] = createSignal(false);

  useRouteTransitionTiming(
    300, // 300ms transition duration
    () => {
      console.log("Transition started - start animation");
      setIsTransitioning(true);
    },
    () => {
      console.log("Transition in progress - page loading");
      setIsLoading(true);
    },
    () => {
      console.log("Transition complete - stop animation");
      setIsTransitioning(false);
      setIsLoading(false);
    }
  );

  return (
    
      

        
          
Loading...

        
      

    
  );
};
```

--------------------------------

### PostImage Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Demonstrates the usage of the PostImage component with source, alt text, class, and caption.

```typescript
import { PostImage } from "~/components/Markdown";

Image caption}
/>
```

--------------------------------

### Render Markdown

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Example of how to render Markdown content using MDXProvider.

```typescript
import { MDXProvider } from "solid-mdx";
import { markdownComponents } from "~/components/Markdown";


  {mdxContent}

```

--------------------------------

### Blockquote Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Shows how to use the Blockquote component for important notes.

```jsx

This is an important note

```

--------------------------------

### Button Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Demonstrates how to use the Button component, both as a basic button and with an onClick handler.

```typescript
import { Button } from "~/components/Button";

// Basic button


// With click handler

```

--------------------------------

### Evaluating an array of statements

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

An example showing how an evaluator could accept an array of statements instead of a single function call.

```js
EVALUATE([
	["print", "hi"],
	["print", "this is another statement"],
]) // the 2 print statements are unrelated to each other
```

--------------------------------

### Add Page Transition

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Example of how to implement page transitions using the useRouteTransitionTiming hook.

```typescript
import { useRouteTransitionTiming } from "~/useRouteTransitionTiming";

useRouteTransitionTiming(
  300,
  () => startAnimation(),
  () => loadPage(),
  () => finishAnimation()
);
```

--------------------------------

### Program definition as JS list

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

Taking the math example, we'd define the program directly as a JS list, instead of a string input.

```javascript
const program = [2, "+", 5, "-", 3];
```

--------------------------------

### Generated Metadata JSON

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

The resulting JSON object generated from the example frontmatter, including slug, title, date, and tags.

```json
{
  "slug": "post-1",
  "title": "This is my first post!",
  "date": "2024-09-04",
  "tags": ["solidjs", "solid-start"]
}

```

--------------------------------

### Usage Example: Posts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/data.md

Demonstrates how to use the 'posts' data export to display, find, and filter blog posts.

```typescript
import { posts } from "~/data/posts";

// Display all posts
posts.forEach(post => {
  console.log(`${post.title} - ${post.date.toLocaleDateString()}`);
});

// Find a specific post
const post = posts.find(p => p.slug === "my-article");

// Filter by tag
const javascriptPosts = posts.filter(p => 
  p.tags.includes("javascript")
);

// Get most recent post
const latest = posts[0];
```

--------------------------------

### Preview/Serve Production Build Command

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Command to preview the production build locally.

```bash
npm start
```

--------------------------------

### Usage Example: Tags

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/data.md

Demonstrates how to use the 'tags' data export to retrieve tag information and associated posts.

```typescript
import { tags } from "~/data/tags";

// Get all tags
Object.values(tags).forEach(tag => {
  console.log(`${tag.id}: ${tag.posts.length} posts`);
});

// Get posts for a specific tag
const javascriptTag = tags["javascript"];
const javascriptPosts = javascriptTag.posts.map(i => posts[i]);

// Filter tags by post count
const popularTags = Object.values(tags).filter(t => t.posts.length > 3);

// Check if tag exists
if (tags["typescript"]) {
  console.log("TypeScript tag exists");
}
```

--------------------------------

### SubscribeForm Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Example of how to embed the SubscribeForm component.

```typescript
import { SubscribeForm } from "~/components/SubscribeForm";



  
Subscribe

  


```

--------------------------------

### Preview with HTTP Server Command

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Alternative command to serve the production build using http-server.

```bash
npm run preview
```

--------------------------------

### Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/hooks.md

Example of how to use the useDitherAnimation hook in a SolidJS component.

```typescript
import { useDitherAnimation } from "~/useDitherAnimation";
import { createSignal } from "solid-js";

export const MyComponent = () => {
  let divRef: HTMLDivElement | undefined;
  
  useDitherAnimation(() => divRef);

  return (
    

      {/* Page content */}
    

  );
};

```

--------------------------------

### TextHoverJump Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Examples of using TextHoverJump for an email link and site title.

```typescript
import { TextHoverJump } from "~/components/TextHoverJump";

// In email link

  


// In site title

  

```

--------------------------------

### Tree Component Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Example of how to use the Tree component with a file structure object.

```typescript
import { Tree } from "~/components/Tree";

const fileStructure = {
  l: "src/",
  c: [
    { l: "components/", c: ["Button.tsx", "Layout.tsx"] },
    "index.ts"
  ]
};


```

--------------------------------

### Importing a Virtual Module

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/drafts/solid-start-enumerate-routes.mdx

This code snippet shows how to import a virtual module after it has been defined by a Vite plugin.

```javascript
import {msg} from "virtual:my-module"
```

--------------------------------

### Navigation Examples - Cross-route links

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

Examples of internal navigation links between different routes in the application.

```typescript
// Homepage -> Blog post
Read article

// Blog post -> Tag
View all typescript posts

// Blog post -> Series
View series

// Series page -> Specific series
View advanced-typescript series

// Blog post -> Previous/next post
Next post
```

--------------------------------

### Hook Composition Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/hooks.md

An example demonstrating the composition of useDitherAnimation and useRouteTransitionTiming for a complete page transition experience.

```typescript
import { createSignal } from "solid-js";
import { useDitherAnimation } from "~/useDitherAnimation";
import { useRouteTransitionTiming } from "~/useRouteTransitionTiming";

export const TransitionProvider = () => {
  let containerRef: HTMLDivElement | undefined;

  useDitherAnimation(() => containerRef);

  useRouteTransitionTiming(
    300,
    () => console.log("Nav started"),
    () => console.log("Page loading"),
    () => console.log("Page ready")
  );

  return (
    

      {/* Dither overlays will be appended here */}
    

  );
};
```

--------------------------------

### Vite Plugin for Blog Post Generation

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

This Vite plugin hooks into the build process and dev server to automatically generate a JSON file listing all blog posts.

```typescript
import type { Plugin } from "vite";

export const blogPostsPlugin = (): Plugin => {
  return {
    name: "blog-posts-gen",
    async buildStart() {
      processFiles();
    },
    configureServer(server) {
      server.watcher.on("change", (filePath) => {
        if (filePath.includes("/src/routes/blog")) {
          processFiles();
        }
      });
    },
  };
};

```

--------------------------------

### Building for Production Command

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Command to build the project for production.

```bash
npm run build
```

--------------------------------

### EVALUATE function argument mapping

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

Illustrates how to map and evaluate all arguments of a list, handling potential nested lists.

```js
// in the EVALUATE function
const [fn, ...rawArguments] = input;
const arguments = rawArguments.map(arg => EVALUATE(arg));
```

--------------------------------

### Get Posts in a Series

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Retrieves posts belonging to a specific series.

```typescript
import { posts } from "~/data/posts";
import { series } from "~/data/series";

const getSeriesPosts = (seriesId: string) => {
  const s = series[seriesId];
  return s ? s.posts.map(i => posts[i]) : [];
};
```

--------------------------------

### Dependencies

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

List of external packages and their specific functions used by the blogPostsPlugin.

```typescript
import type { Plugin } from "vite";
import { readSync } from "to-vfile";
import { matter } from "vfile-matter";
import { resolve, join } from "node:path";
import { readdirSync, statSync, writeFileSync } from "node:fs";
import { exec } from "node:child_process";

```

--------------------------------

### Using a 'run' function for multiple statements

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

An alternative approach using a dedicated 'run' function to execute multiple instructions, simplifying the evaluator.

```js
EVALUATE(["run",
	["print", "hi"],
	["print", "this is another statement"],
])
```

--------------------------------

### Basic Math Operation

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

Demonstrates a standard mathematical expression in JavaScript.

```javascript
12 + 3 + 5 - 8 * 12
```

--------------------------------

### DarkModeToggle Usage Example

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/components.md

Shows the usage of the DarkModeToggle component, which automatically manages dark mode state.

```typescript
import { DarkModeToggle } from "~/components/DarkModeToggle";

// Component automatically manages dark mode state

```

--------------------------------

### Full code implementation up to Part 1

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

The complete code for the custom language interpreter, including sum, std functions, and the EVALUATE function, ready for variable implementation in Part 2.

```js
const sum = (numbers) =>
	numbers.reduce((sum, n) => sum + n, 0);

const std = {
	"+": (args) => sum(args),
	"-": ([first, ...rest]) => first - sum(rest),
	last: (args) => args[args.length - 1],
	print: (args) => {
		console.log(...args);
		return std.last(args);
	},
	run: (args) => std.last(args)
}

const EVALUATE = (input) => {
	if(!Array.isArray(input)) {
		return input;
	}

	const [fn, ...rawArguments] = input;
	const arguments = rawArguments.map(arg => EVALUATE(arg));

	if(std[fn]) {
		return std[fn](arguments);
	}

	throw Error("Function not supported:", fn);
}
```

--------------------------------

### Get Most Recent Posts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Retrieves the first 5 posts, assuming they are sorted with the newest first.

```typescript
import { posts } from "~/data/posts";

const recentPosts = posts.slice(0, 5);  // First 5 (sorted newest first)
```

--------------------------------

### Solid-Start Integration

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/solid-resource-storage.mdx

Note that this pattern is compatible with Solid-Start's `createRouteData` and other route data functions.

```plaintext
For people using `solid-start`, this pattern works just as well for `createRouteData` and the other route data functions, since they all wrap around resources and expose the `storage` option.
```

--------------------------------

### Static Site Generation (SSG) Configuration

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Configuration for SolidStart's static site generation, enabling automatic crawling and prerendering of links.

```typescript
server: {
  prerender: {
    crawlLinks: true,
  }
}
```

--------------------------------

### Create a Transition Animation

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Sets up dither animation and route transition timing.

```typescript
import { useDitherAnimation } from "~/useDitherAnimation";
import { useRouteTransitionTiming } from "~/useRouteTransitionTiming";

export const TransitionContainer = () => {
  let containerRef: HTMLDivElement | undefined;

  useDitherAnimation(() => containerRef);
  useRouteTransitionTiming(
    300,
    () => console.log("Transition start"),
    () => console.log("Transition loading"),
    () => console.log("Transition end")
  );

  return 
{/* content */}
;
};
```

--------------------------------

### Jayson query function setup

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/javascript-dsl.mdx

Setting up the basic structure for the query function in jayson.js.

```javascript
const o = {
  name: "My cool object",
  isItCool: true,
};
const jayson = "grab name";
const query = (json, input) => {
  // logic will go here
}
query(o, jayson); // will return "My cool object"
```

--------------------------------

### Get Posts by Series

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Retrieves posts belonging to a specific series by mapping over the series' post indices.

```typescript
import { posts } from "~/data/posts";
import { series } from "~/data/series";

const weekendSeries = series["weekend-series"];
const seriesPosts = weekendSeries.posts.map(i => posts[i]);
```

--------------------------------

### Vite and SolidStart Configuration

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

The main configuration file for Vite and SolidStart, including imports for MDX processing and custom build helpers.

```typescript
import { defineConfig } from "@solidjs/start/config";
import mdx from "@vinxi/plugin-mdx";
import { blogPostsPlugin } from "./build-helpers/blogPostsPlugin";
import remarkFrontmatter from "remark-frontmatter";
import rehypeMdxCodeProps from "rehype-mdx-code-props";
import { mdxPrism } from "./build-helpers/mdxPrism";
import remarkToc from "remark-toc";

export default defineConfig({...})
```

--------------------------------

### GET /tags/:id - Data Lookups

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/routes.md

TypeScript code for looking up tag data and associated posts.

```typescript
const tag = tags[params.id]
const posts = tag.posts.map(i => posts[i])
```

--------------------------------

### Step 2: Tree Traversal

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Uses `unist-util-visit` to traverse the HAST (HTML Abstract Syntax Tree).

```typescript
visit(tree, "element" as any, visitor);
```

--------------------------------

### Function-like Addition

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

Represents addition as a function call with multiple arguments.

```javascript
addition(12, 5, 3)
```

--------------------------------

### Usage Example: Series

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/data.md

Demonstrates how to use the 'series' data export to retrieve series information and associated posts.

```typescript
import { series } from "~/data/series";

// Get all series
Object.values(series).forEach(s => {
  console.log(`${s.id}: ${s.posts.length} posts`);
});

// Get posts in a specific series
const weekendSeries = series["weekend-series"];
const weekendPosts = weekendSeries.posts.map(i => posts[i]);

// Navigate series
const firstPost = weekendSeries.posts[0];
const lastPost = weekendSeries.posts[weekendSeries.posts.length - 1];

// Check series membership
if (series["advanced-typescript"]) {
  console.log("Advanced TypeScript series exists");
}
```

--------------------------------

### Nested Operations

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

Demonstrates how to represent multiple operations like subtraction and addition using nested lists.

```javascript
["-", 25, ["+", 4, 6]]
```

```javascript
["-", 25,
      ["+", 4, 6]]
```

--------------------------------

### Import Paths

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/README.md

Demonstrates the use of the '~/' alias for importing modules, which maps to the 'src/' directory in SolidStart projects configured with Vite.

```typescript
import { posts } from "~/data/posts";
import { Button } from "~/components/Button";
import type { Post } from "~/types";
```

--------------------------------

### Integration with Data Exports

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Example of how the generated src/data/posts.json is imported and processed in src/data/posts.ts to convert date strings to Date objects.

```typescript
// src/data/posts.ts
import Posts from "./posts.json";

export const posts: Post[] = Posts.map((p: Post) => ({
  ...p,
  date: new Date(p.date), // Convert string to Date
}));

```

--------------------------------

### Step 5: Syntax Highlighting

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Highlights the code content using Refractor and replaces the node's children with the highlighted tokens.

```typescript
const result = refractor.highlight(nodeToString(node), lang);
node.children = result.children;
```

--------------------------------

### Create a Navigation Menu

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

This snippet demonstrates how to create a navigation menu for series using '@solidjs/router'.

```typescript
import { series } from "~/data/series";
import { A } from "@solidjs/router";

export const SeriesMenu = () => {
  return (
    
  );
};

```

--------------------------------

### Updating Global Store Directly

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/solid-resource-storage.mdx

Example of directly modifying the global store, which will automatically update the resource and component.

```typescript
setState("songs", []);
```

--------------------------------

### Display All Posts

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Imports the posts data and the Posts component to display them.

```typescript
import { posts } from "~/data/posts";
import { Posts } from "~/components/Posts";

export const MyComponent = () => {
  return ;
};
```

--------------------------------

### Build Process - Production

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Steps involved in the production build process.

```text
Production Build (npm run build)
  ├── Extract blog post metadata
  ├── Process MDX to JSX
  ├── Apply syntax highlighting
  ├── Prerender all pages
  └── Output static HTML/.output/public/

```

--------------------------------

### Example: Coordinating Multiple Data Exports

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/data.md

Shows how to combine data from posts, tags, and series exports for complex filtering and analysis.

```typescript
import { posts } from "~/data/posts";
import { tags } from "~/data/tags";
import { series } from "~/data/series";

// Get all JavaScript posts
const jsPosts = posts.filter(p => 
  p.tags.includes("javascript")
);

// Get posts in the "weekend-series" series that also have JavaScript tag
const weekendJsPosts = posts
  .filter((_, i) => series["weekend-series"].posts.includes(i))
  .filter(p => p.tags.includes("javascript"));

// Get most popular tag
const mostPopularTag = Object.values(tags).reduce((max, tag) =>
  tag.posts.length > max.posts.length ? tag : max
);

// Find series with most posts
const largestSeries = Object.values(series).reduce((max, s) =>
  s.posts.length > max.posts.length ? s : max
);
```

--------------------------------

### File Structure Reference

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

This is a detailed breakdown of the project's directory and file organization.

```tree
src/
  ├── app.tsx                          # Root app component
  ├── entry-client.tsx                 # Client hydration
  ├── entry-server.tsx                 # Server rendering
  ├── types.ts                         # Type definitions
  ├── app.css                          # Main styles
  ├── global.d.ts                      # TypeScript globals
  ├── useDitherAnimation.tsx           # Hook
  ├── useRouteTransitionTiming.tsx     # Hook
  ├── components/
  │   ├── Layout.tsx
  │   ├── Button.tsx
  │   ├── Posts.tsx
  │   ├── Markdown.tsx                 # All markdown components
  │   ├── DarkModeToggle.tsx
  │   ├── SubscribeForm.tsx
  │   ├── TextHoverJump.tsx
  │   ├── Tree.tsx
  │   └── javascript-dsl/
  │       ├── DSLNestingProp.tsx
  │       └── dsl1.js
  ├── data/
  │   ├── posts.ts                     # posts[] export
  │   ├── posts.json                   # Generated by plugin
  │   ├── tags.ts                      # tags export
  │   └── series.ts                    # series export
  ├── routes/
  │   ├── (home).tsx
  │   ├── blog.tsx
  │   ├── [...404].mdx
  │   ├── blog/                        # Blog posts here
  │   ├── series/
  │   │   ├── (series).tsx
  │   │   └── weekend-series.tsx
  │   └── tags/
  │       ├── (tags).tsx
  │       └── [id].tsx
  └── css/
      └── prism-theme.css

build-helpers/
  ├── blogPostsPlugin.ts
  └── mdxPrism.ts

app.config.ts                          # SolidStart config
package.json                           # Dependencies

```

--------------------------------

### Full EVALUATE function implementation

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1.mdx

The complete code for the EVALUATE function, including handling addition and subtraction, and supporting nested structures.

```js
const sum = (numbers) =>
	numbers.reduce((sum, n) => sum + n, 0);

const EVALUATE = (input) => {
	// Handling base case of numbers being evaluated
	if(!Array.isArray(input)) {
		return input;
	}

	const [fn, ...rawArguments] = input;
	// evaluating all arguments to handle nested lists
	const arguments = rawArguments.map(arg => EVALUATE(arg));


	// handling supported functions
	if(fn === "+") {
		return sum(arguments);
	}
	if(fn === "-") {
		const [first, ...rest] = arguments;
		return first - sum(rest);
	}

	throw Error("Function not supported:", fn);
}

console.log(EVALUATE(["+", 4, ["-", 3, 10]])) // should log -3
```

--------------------------------

### Object with nested property

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/javascript-dsl.mdx

An example JSON object with a nested property, demonstrating the need for handling nested property access.

```js
const o = {
  name: "My cool object",
  isItCool: true,
  metadata: {
    coolnessScore: 100,
  }
};
```

--------------------------------

### File Processing Logic

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/how-solid-start-blog.mdx

The function that reads the blog directory, filters for .mdx files, and writes a JSON list of post slugs.

```typescript
import { resolve, join } from "node:path";
import { readdirSync, statSync, writeFileSync } from "node:fs";

const processFiles = () => {
	const outputFile = resolve("src/data/posts.json");
	const blogDir = resolve("src/routes/blog");
	const files = readdirSync(blogDir);

	const blogPosts = files
		.filter((file) => 
        statSync(join(blogDir, file)).isFile() && file.endsWith(".mdx")
      )
		.map((file) => ({slug: file.replace(".mdx", "")}));
    
	writeFileSync(outputFile, JSON.stringify(blogPosts, null, 2), "utf-8");
};

```

--------------------------------

### Server Entry

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Server-side rendering configuration.

```typescript
export default createHandler(() => (
   (
      
        {/* Server-rendered HTML document */}
      
    )}
  />
));
```

--------------------------------

### Distinguishing nested arrays

Source: https://github.com/andi23rosca/andi.dev/blob/main/src/routes/blog/shitty-language-part-1-5.mdx

Illustrates the potential complexity in distinguishing between arrays of instructions and nested function calls.

```js
["print", ["+", 1, 2], ["-", 6, 8]]
```

```js
[["print", ["+", 1, 2]], ["print", ["-", 6, 8]]]
```

--------------------------------

### Build Process - Development

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/api-overview.md

Steps involved in the development build process.

```text
Development (npm run dev)
  ├── Watch MDX files
  ├── blogPostsPlugin generates posts.json
  ├── mdxPrism highlights code blocks
  └── HMR updates

```

--------------------------------

### Development Server Command

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/configuration.md

Command to run the development server with hot reload.

```bash
npm run dev
```

--------------------------------

### File Watching Logic

Source: https://github.com/andi23rosca/andi.dev/blob/main/_autodocs/build-helpers.md

Code snippet demonstrating how the plugin watches for changes in blog post files and the plugin file itself during development.

```typescript
server.watcher.on("change", (filePath) => {
  if (!filePath.includes("/src/routes/blog") &&
      !filePath.includes("blogPostsPlugin.ts")) return;
  processFiles();
});

```