> ## Documentation Index
> Fetch the complete documentation index at: https://hm-95ec977f.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Val Town

> Collection of vals and web applications built on Val Town platform

export const CodeRunner = props => {
  const code = props.code;
  const language = props.language || "bash";
  const filename = props.filename;
  const [hasRun, setHasRun] = React.useState(false);
  const copyToClipboard = async text => {
    try {
      await navigator.clipboard.writeText(text);
    } catch (err) {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
    }
  };
  const handleCopy = async () => {
    await copyToClipboard(code);
  };
  const handleRun = async () => {
    setHasRun(true);
    await copyToClipboard(code);
    try {
      window.location.href = 'kmtrigger://macro=web_2_terminal';
    } catch (err) {
      console.error('Could not trigger URL scheme:', err);
    }
  };
  const highlightCode = (code, language) => {
    if (typeof window !== "undefined" && window.Prism && window.Prism.languages[language]) {
      return window.Prism.highlight(code, window.Prism.languages[language], language);
    }
    return code;
  };
  if (typeof document === "undefined") {
    return null;
  }
  const highlightedCode = highlightCode(code, language);
  return <div className="hover:!border-primary dark:hover:!border-primary-light" style={{
    margin: "20px 0",
    borderRadius: "12px",
    overflow: "hidden",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    backdropFilter: "blur(10px)",
    WebkitBackdropFilter: "blur(10px)",
    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
    filter: hasRun ? "grayscale(1) blur(2px)" : "none",
    opacity: hasRun ? 0.6 : 1,
    transition: "all 0.3s ease"
  }}>
      <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "8px 16px",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
  }}>
        {filename && <span style={{
    fontSize: "13px",
    color: "rgba(255, 255, 255, 0.8)",
    fontWeight: "500",
    fontFamily: "monospace"
  }}>
            {filename}
          </span>}
        
        <div style={{
    display: "flex",
    gap: "4px",
    marginLeft: "auto"
  }}>
          <button onClick={handleCopy} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "32px",
    height: "32px",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
    backgroundColor: "transparent",
    color: "rgba(255, 255, 255, 0.6)",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
    e.target.style.color = "rgba(255, 255, 255, 0.9)";
    e.target.style.transform = "scale(1.05)";
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = "transparent";
    e.target.style.color = "rgba(255, 255, 255, 0.6)";
    e.target.style.transform = "scale(1)";
  }} title="Copy code">
            <Icon icon="copy" size={16} />
          </button>
          
          <button onClick={handleRun} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "32px",
    height: "32px",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
    backgroundColor: "transparent",
    color: "rgba(34, 197, 94, 0.8)",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.target.style.backgroundColor = "rgba(34, 197, 94, 0.1)";
    e.target.style.color = "rgba(34, 197, 94, 1)";
    e.target.style.transform = "scale(1.05)";
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = "transparent";
    e.target.style.color = "rgba(34, 197, 94, 0.8)";
    e.target.style.transform = "scale(1)";
  }} title="Run in terminal">
            <Icon icon="play" size={16} />
          </button>
        </div>
      </div>

      <div style={{
    padding: "16px",
    backgroundColor: "rgba(0, 0, 0, 0.2)"
  }}>
        <pre style={{
    margin: "0",
    padding: "0",
    fontSize: "14px",
    lineHeight: "1.5",
    fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
    overflowX: "auto",
    color: "#f8f8f2",
    backgroundColor: "transparent"
  }}>
          <code className={`language-${language}`} dangerouslySetInnerHTML={{
    __html: highlightedCode
  }} />
        </pre>
      </div>
    </div>;
};

<Card title="Val Town Development" icon="code" href="https://val.town">
  A collection of vals and web applications built on the Val Town platform for rapid prototyping and deployment.
</Card>

<Card
  title="Val Town Development"
  href="https://val.town"
  style={{
backgroundImage: "url('https://cdn.midjourney.com/91ae2b50-77a6-417c-bf1e-c82c4ebc20b8/0_1.png')",
backgroundSize: "cover",
backgroundPosition: "center",
color: "white",
padding: "2rem",
}}
>
  A collection of vals and web applications built on the Val Town platform for rapid prototyping and deployment.
</Card>

<Card>
  <img src="https://cdn.midjourney.com/91ae2b50-77a6-417c-bf1e-c82c4ebc20b8/0_1.png" style={{ width: '200px', height: 'auto' }} noZoom />

  Here is an example of a card with an image
</Card>

<Card title="Image Card" img="https://cdn.midjourney.com/91ae2b50-77a6-417c-bf1e-c82c4ebc20b8/0_1.png">
  Here is an example of a card with an image
</Card>

## Vals

### Summer Notes v1

A note-taking application built with Val Town for quick summer project notes and documentation.

<CodeRunner code="cd ~/Developer/local/vt-cli/summer-notes-v1/" language="bash" />

<CodeRunner
  code={`cd ~/Developer/local/vt-cli/
vt clone https://www.val.town/x/arfan/summer-notes-v1
cd ~/Developer/local/vt-cli/summer-notes-v1/
vt status`}
  language="bash"
  filename="clone.sh"
/>

<CodeRunner
  code={`print("Hello, World!")
for i in range(5):
print(f"Line {i + 1}: This is a random line of Python code."}`}
  language="python"
  filename="clone.py"
/>

<CardGroup cols={2}>
  <Card title="Val Town Code" icon="code" href="https://www.val.town/x/arfan/summer-notes-v1">
    View the source code and implementation on Val Town
  </Card>

  <Card title="Live Application" icon="globe" href="https://arfan-notes.val.run/">
    Access the deployed summer notes application
  </Card>
</CardGroup>

<iframe src="https://www.val.town/x/arfan/summer-notes-v1" />