Versions

  • v7

    10/1/2024
    Open: Version
    Changes from v6 to v7
    +63
    -10
    ⦚ 38 unchanged lines ⦚
    placeholder="Untitled"
    />
    <button onClick={() => toggleWrap(index)} className="wrap-toggle">
    {snippet.wrap ? '⇟' : '⇢'}
    </button>
    </div>
    <div className="snippet-content">
    ⦚ 108 unchanged lines ⦚
    }
    .wrap-toggle {
    background: transparent;
    border: none;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin: 0;
    }
    ⦚ 34 unchanged lines ⦚
    ⦚ 38 unchanged lines ⦚
    placeholder="Untitled"
    />
    <div className="wrap-control">
    <span className="wrap-icon"></span>
    <label className="toggle-switch">
    <input
    type="checkbox"
    checked={snippet.wrap}
    onChange={() => toggleWrap(index)}
    />
    <span className="toggle-slider"></span>
    </label>
    </div>
    </div>
    <div className="snippet-content">
    ⦚ 108 unchanged lines ⦚
    }
    .wrap-control {
    display: flex;
    align-items: center;
    }
    .wrap-icon {
    margin-right: 5px;
    font-size: 14px;
    }
    .toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
  • v6

    10/1/2024
    Open: Version
    Changes from v5 to v6
    +8
    -40
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    ⦚ 38 unchanged lines ⦚
    </div>
    <div className="snippet-content">
    <SyntaxHighlighter
    language="javascript"
    style={vscDarkPlus}
    className="syntax-highlighter"
    customStyle={{
    margin: 0,
    padding: '10px 10px 10px 0',
    height: '100%',
    boxSizing: 'border-box',
    whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',
    wordBreak: snippet.wrap ? 'break-all' : 'normal',
    background: 'transparent',
    position: 'absolute',
    left: 0,
    top: 0,
    pointerEvents: 'none',
    fontSize: '12px',
    lineHeight: '1.5',
    }}
    >
    {snippet.content}
    </SyntaxHighlighter>
    <textarea
    value={snippet.content}
    onChange={(e) => updateSnippet(index, e.target.value, 'content')}
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";

    function App() {
    ⦚ 38 unchanged lines ⦚
    </div>
    <div className="snippet-content">
    <textarea
    value={snippet.content}
    onChange={(e) => updateSnippet(index, e.target.value, 'content')}
    ⦚ 3 unchanged lines ⦚
    autoCorrect="off"
    autoCapitalize="off"
    style={{whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre'}}
    />
    </div>
    ⦚ 108 unchanged lines ⦚
    .snippet-content {
    flex-grow: 1;
    position: relative;
    }
    .snippet-textarea {
    position: absolute;
    ⦚ 4 unchanged lines ⦚
    border: none;
    background-color: transparent;
    color: #e0e0e0;
    resize: none;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
  • v5

    10/1/2024
    Open: Version
    Changes from v4 to v5
    +15
    -6
    ⦚ 51 unchanged lines ⦚
    customStyle={{
    margin: 0,
    padding: '10px',
    height: '100%',
    boxSizing: 'border-box',
    ⦚ 5 unchanged lines ⦚
    top: 0,
    pointerEvents: 'none',
    }}
    >
    ⦚ 125 unchanged lines ⦚
    }
    .snippet-textarea {
    position: absolute;
    top: 0;
    ⦚ 9 unchanged lines ⦚
    font-size: 12px;
    line-height: 1.5;
    padding: 10px;
    box-sizing: border-box;
    z-index: 1;
    }
    .syntax-highlighter {
    z-index: 0;
    }
    ⦚ 7 unchanged lines ⦚
    ⦚ 51 unchanged lines ⦚
    customStyle={{
    margin: 0,
    padding: '10px 10px 10px 0',
    height: '100%',
    boxSizing: 'border-box',
    ⦚ 5 unchanged lines ⦚
    top: 0,
    pointerEvents: 'none',
    fontSize: '12px',
    lineHeight: '1.5',
    }}
    >
    ⦚ 125 unchanged lines ⦚
    }
    .syntax-highlighter {
    z-index: 0;
    }

    .syntax-highlighter code {
    font-family: 'Fira Code', monospace !important;
    }

    .snippet-textarea {
    position: absolute;
    top: 0;
    ⦚ 9 unchanged lines ⦚
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 10px 10px 40px;
    box-sizing: border-box;
    z-index: 1;
  • v4

    10/1/2024
    Open: Version
    Changes from v3 to v4
    +13
    -6
    ⦚ 48 unchanged lines ⦚
    language="javascript"
    style={vscDarkPlus}
    customStyle={{
    margin: 0,
    padding: '10px',
    ⦚ 3 unchanged lines ⦚
    wordBreak: snippet.wrap ? 'break-all' : 'normal',
    background: 'transparent',
    }}
    >
    {snippet.content}
    </SyntaxHighlighter>
    <textarea
    value={snippet.content}
    onChange={(e) => updateSnippet(index, e.target.value, 'content')}
    placeholder="Enter your code here"
    className="snippet-textarea"
    spellCheck="false"
    ⦚ 114 unchanged lines ⦚
    position: relative;
    flex-grow: 1;
    }
    .snippet-textarea {
    ⦚ 4 unchanged lines ⦚
    height: 100%;
    border: none;
    background: transparent;
    color: #e0e0e0;
    resize: none;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    ⦚ 48 unchanged lines ⦚
    language="javascript"
    style={vscDarkPlus}
    className="syntax-highlighter"
    customStyle={{
    margin: 0,
    padding: '10px',
    ⦚ 3 unchanged lines ⦚
    wordBreak: snippet.wrap ? 'break-all' : 'normal',
    background: 'transparent',
    position: 'absolute',
    left: 0,
    top: 0,
    pointerEvents: 'none',
    }}
    >
    {snippet.content}
    </SyntaxHighlighter>
    <textarea
    value={snippet.content}
    onChange={(e) => updateSnippet(index, e.target.value, 'content')}
    placeholder="// Enter your code here"
    className="snippet-textarea"
    spellCheck="false"
    ⦚ 114 unchanged lines ⦚
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    }
    .snippet-textarea {
    ⦚ 4 unchanged lines ⦚
    height: 100%;
  • v3

    10/1/2024
    Open: Version
    Changes from v2 to v3
    +31
    -27
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { tomorrow } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    ⦚ 21 unchanged lines ⦚
    return (
    <div className="app">
    <h1>Code Snippet Clipboard</h1>
    <div className="grid">
    {snippets.map((snippet, index) => (
    ⦚ 14 unchanged lines ⦚
    <SyntaxHighlighter
    language="javascript"
    style={tomorrow}
    customStyle={{
    margin: 0,
    ⦚ 35 unchanged lines ⦚
    <html>
    <head>
    <title>Code Snippet Clipboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
    <style>${css}</style>
    </head>
    ⦚ 15 unchanged lines ⦚
    body {
    margin: 0;
    font-family: 'Fira Code', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    ⦚ 21 unchanged lines ⦚
    return (
    <div className="app">
    <h1>CodeShelf</h1>
    <div className="grid">
    {snippets.map((snippet, index) => (
    ⦚ 14 unchanged lines ⦚
    <SyntaxHighlighter
    language="javascript"
    style={vscDarkPlus}
    customStyle={{
    margin: 0,
    ⦚ 35 unchanged lines ⦚
    <html>
    <head>
    <title>CodeShelf</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>${css}</style>
    </head>
    ⦚ 15 unchanged lines ⦚
    body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  • v2

    10/1/2024
    Open: Version
    Changes from v1 to v2
    +19
    -43
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { atomDark } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    ⦚ 40 unchanged lines ⦚
    <SyntaxHighlighter
    language="javascript"
    style={atomDark}
    customStyle={{
    margin: 0,
    ⦚ 3 unchanged lines ⦚
    whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',
    wordBreak: snippet.wrap ? 'break-all' : 'normal',
    }}
    >
    ⦚ 13 unchanged lines ⦚
    ))}
    </div>
    <footer>
    <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank" rel="noopener noreferrer">View Source</a>
    </footer>
    </div>
    );
    ⦚ 32 unchanged lines ⦚
    body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { tomorrow } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    ⦚ 40 unchanged lines ⦚
    <SyntaxHighlighter
    language="javascript"
    style={tomorrow}
    customStyle={{
    margin: 0,
    ⦚ 3 unchanged lines ⦚
    whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',
    wordBreak: snippet.wrap ? 'break-all' : 'normal',
    background: 'transparent',
    }}
    >
    ⦚ 13 unchanged lines ⦚
    ))}
    </div>
    </div>
    );
    ⦚ 32 unchanged lines ⦚
    body {
    margin: 0;
    font-family: 'Fira Code', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
    background-image: radial-gradient(#000000 1px, transparent 1px);
    background-size: 20px 20px;
  • v1

    10/1/2024
    Open: Version
    Changes from v0 to v1
    +95
    -33
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    const [snippets, setSnippets] = useState(Array(6).fill('// Your code here'));

    useEffect(() => {
    ⦚ 4 unchanged lines ⦚
    }, []);

    const updateSnippet = (index, newValue) => {
    const updatedSnippets = [...snippets];
    updatedSnippets[index] = newValue;
    setSnippets(updatedSnippets);
    localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));
    };

    return (
    <div className="app">
    <h1>Code Snippet Grid</h1>
    <div className="grid">
    {snippets.map((snippet, index) => (
    <div key={index} className="snippet-container">
    <SyntaxHighlighter
    language="javascript"
    style={vscDarkPlus}
    customStyle={{
    margin: 0,
    padding: '10px',
    borderRadius: '8px',
    height: '100%',
    boxSizing: 'border-box',
    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { atomDark } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    const [snippets, setSnippets] = useState(Array(6).fill({ title: 'Untitled', content: '', wrap: false }));

    useEffect(() => {
    ⦚ 4 unchanged lines ⦚
    }, []);

    const updateSnippet = (index, newValue, field) => {
    const updatedSnippets = snippets.map((snippet, i) =>
    i === index ? { ...snippet, [field]: newValue } : snippet
    );
    setSnippets(updatedSnippets);
    localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));
    };

    const toggleWrap = (index) => {
    updateSnippet(index, !snippets[index].wrap, 'wrap');
    };

    return (
    <div className="app">
    <h1>Code Snippet Clipboard</h1>
    <div className="grid">
    {snippets.map((snippet, index) => (
    <div key={index} className="snippet-container">
    <div className="snippet-titlebar">
    <input
    type="text"
    value={snippet.title}
  • v0

    10/1/2024
    Open: Version
    +173
    -0

    /** @jsxImportSource https://esm.sh/react */
    import React, { useState, useEffect } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
    import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';

    function App() {
    const [snippets, setSnippets] = useState(Array(6).fill('// Your code here'));

    useEffect(() => {
    const storedSnippets = localStorage.getItem('codeSnippets');
    if (storedSnippets) {
    setSnippets(JSON.parse(storedSnippets));
    }
    }, []);

    const updateSnippet = (index, newValue) => {
    const updatedSnippets = [...snippets];
    updatedSnippets[index] = newValue;
    setSnippets(updatedSnippets);
    localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));
    };

    return (
    <div className="app">
    <h1>Code Snippet Grid</h1>
    <div className="grid">
    {snippets.map((snippet, index) => (
    <div key={index} className="snippet-container">
    <SyntaxHighlighter
    language="javascript"
    style={vscDarkPlus}
    customStyle={{
    margin: 0,
    padding: '10px',
    borderRadius: '8px',
3
Next
janu-codeshelf.web.val.run
Updated: October 1, 2024