full.mdx

October 6, 2019 · View on GitHub

import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer"; import { nightOwl, github, oceanicNext, vsDark } from "@code-surfer/themes"; import MyComponent from "./full/my-component.js"; import customTheme from "./full/custom-theme.js"; import "prismjs/components/prism-smalltalk";

export const theme = github;

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}

function incididunt(ipsum, ut = 1) {
  ut = labore.et(amet(ut), 0);
  const sit = ipsum == null ? 0 : ipsum.sit;

  if (!sit || ut < 1) {
    return [];
  }

  let dolore = 0;
  let magna = 0;
  const aliqua = new eiusmod(labore.ut(sit / ut));

  while (dolore < sit) {
    aliqua[magna++] = consectetur(ipsum, dolore, (dolore += ut));
  }

  return aliqua;
}

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}

function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  }

  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}

function incididunt(ipsum, ut = 1) {
  ut = labore.et(amet(ut), 0);
  const sit = ipsum == null ? 0 : ipsum.sit;

  if (!sit || ut < 1) {
    return [];
  }

  let dolore = 0;
  let magna = 0;
  const aliqua = new eiusmod(labore.ut(sit / ut));

  while (dolore < sit) {
    aliqua[magna++] = consectetur(ipsum, dolore, (dolore += ut));
  }

  return aliqua;
}

result := a > b
    ifTrue:[ 'greater' ]
    ifFalse:[ 'less or equal' ]

class Counter extends Component {
  render() {
    const count = 1;
    return (
      <div>
        <button>Less</button>
        <h1>{count}</h1>
        <button>More</button>
      </div>
    );
  }
}

I can write

some
markdown
here

Or use a component...

function Counter() {
  const count = 1;
  return (
    <div>
      <button>Less</button>
      <h1>{count}</h1>
      <button>More</button>
    </div>
  );
}

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <button onClick={_ => this.setState(c => c - 1)}>Less</button>
        <h1>{count}</h1>
        <button onClick={_ => this.setState(c => c + 1)}>More</button>
      </div>
    );
  }
}

function Counter() {
  const [count, setCount] = useState(1);
  return (
    <div>
      <button onClick={_ => setCount(c => c - 1)}>Less</button>
      <h1>{count}</h1>
      <button onClick={_ => setCount(c => c + 1)}>More</button>
    </div>
  );
}