a component that print itself

---
title: quine
layout: '@/layouts/Blog.astro'
---
import Quine from '@/components/quine.astro'

## a component that print itself

<Quine path="pages/sink/quine.mdx"  />

pretty neat for writing blogs, docs that need both source code and 
component available.

like this `Quine` component <Quine path="components/quine.astro"/>

and `Quine` can also take an `optional range` for more specific
explaination

I use `node:fs` to fetch the file and print it in `Shiki` code block
<Quine path="components/quine.astro" line="7-14" lang="js"/>

pretty neat for writing blogs, docs that need both source code and component available.

like this Quine component

---
import fs from "node:fs/promises";
import { Code } from "astro/components";
const { path, line, lang } = Astro.props;
const relativePath = `${process.cwd()}/src/`;
const url = new URL(`${relativePath}${path}`, import.meta.url);
const [start, end] = line ? line.split("-") : [undefined];
const text = await fs.readFile(url, "utf-8");
const splicedText = start
  ? text
      .split("\n")
      .splice(Number(start) - 1, Number(end) - Number(start))
      .join("\n")
  : text;
---

<Code
  code={splicedText}
  lang={lang ?? path.split(".").at(-1)}
  theme="github-light"
/>

and Quine can also take an optional range for more specific explaination

I use node:fs to fetch the file and print it in Shiki code block

const [start, end] = line ? line.split("-") : [undefined];
const text = await fs.readFile(url, "utf-8");
const splicedText = start
  ? text
      .split("\n")
      .splice(Number(start) - 1, Number(end) - Number(start))
      .join("\n")