Superhero

1/**
2 * Token sample for judging color themes.
3 * Block comment, with a JSDoc tag: @param name - the user's name
4 */
5// Line comment: TODO check italics on comments
6
7import React, { useState } from "react";
8import type { ReactNode } from "react";
9
10// ---------- namespaces, enums, interfaces, types ----------
11namespace Geometry {
12  export const PI_ISH = 3.14159;
13}
14
15enum Status {
16  Idle,
17  Loading = "loading",
18  Done = 0x2a,
19}
20
21interface Theme {
22  readonly name: string;
23  dark?: boolean;
24  colors: Record<string, `#${string}`>;
25}
26
27type Pair<T, U = T> = [first: T, second: U];
28
29// ---------- constants, numbers, language constants ----------
30const MAX_THEMES = 26;
31const ratio = 4.5e0;
32const big = 1_000_000n;
33const flags = [true, false, null, undefined, NaN, Infinity];
34
35// ---------- strings, templates, escapes, regex ----------
36const single = 'single quoted';
37const double = "double quoted with \"escapes\" and \n newline \t tab é";
38const template = `Theme ${MAX_THEMES} of ${Geometry.PI_ISH.toFixed(2)}`;
39const hex = /^#(?:[0-9a-f]{3}){1,2}$/gi;
40
41// ---------- classes, inheritance, this, methods, properties ----------
42abstract class Base {
43  protected static count = 0;
44  abstract describe(): string;
45}
46
47export class ThemeCard extends Base implements Theme {
48  readonly name: string;
49  colors: Theme["colors"] = {};
50  #secret = Symbol("private");
51
52  constructor(name: string, public dark = false) {
53    super();
54    this.name = name;
55    ThemeCard.count++;
56  }
57
58  get label(): string {
59    return this.name.toUpperCase();
60  }
61
62  describe(): string {
63    return `${this.label}${this.dark ? " (dark)" : ""}`;
64  }
65}
66
67// ---------- functions, parameters, operators, control flow ----------
68function contrast(foreground: string, background: string, ...rest: number[]): number {
69  const [a, b] = [foreground.length, background.length];
70  if (a === b && !rest.length) return 1;
71  else if (a > b || a <= 0) return a / b;
72  for (let i = 0; i < rest.length; i += 1) {
73    if (typeof rest[i] !== "number") continue;
74  }
75  while (false) break;
76  switch (a % 3) {
77    case 0:
78      return a ** 2 >> 1;
79    default:
80      return (a & b) | (~a ^ b);
81  }
82}
83
84const arrow = async (items: readonly Pair<number>[]): Promise<number> => {
85  try {
86    const total = items.reduce((sum, [x, y]) => sum + x * y, 0);
87    await new Promise((resolve) => setTimeout(resolve, 10));
88    return total ?? 0;
89  } catch (err: unknown) {
90    console.error(err instanceof Error ? err.message : String(err));
91    throw err;
92  } finally {
93    Math.max(1, 2);
94  }
95};
96
97function* ids(): Generator<number, void, unknown> {
98  let id = 0;
99  while (true) yield id++;
100}
101
102// ---------- object literals, destructuring, optional chaining ----------
103const settings = {
104  theme: "Bootswatch Flatly",
105  "editor.fontSize": 14,
106  nested: { deep: { value: [1, 2, 3] } },
107  method() {
108    return this.nested?.deep?.value.at(-1);
109  },
110};
111const { theme, ...others } = settings;
112delete (others as any).method;
113void others;
114
115// ---------- JSX: tags, attributes, components ----------
116export function Swatch({ color, children }: { color: string; children?: ReactNode }) {
117  const [active, setActive] = useState<boolean>(false);
118  return (
119    <div className="swatch" style={{ background: color }} data-active={active}>
120      <button type="button" onClick={() => setActive(!active)} disabled={false}>
121        {children ?? "Toggle"}
122      </button>
123      <ThemeLabel name={theme} />
124    </div>
125  );
126}
127
128const ThemeLabel = ({ name }: { name: string }) => <span aria-label={name}>{name}</span>;
129
130export default Status;

1/* CSS sample: selectors, properties, values, units, at-rules */
2@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
3
4:root {
5  --primary: #2c3e50;
6  --radius: 0.375rem;
7}
8
9html,
10body {
11  margin: 0;
12  font-family: "Lato", system-ui, sans-serif;
13  line-height: 1.5;
14}
15
16#app > .card:hover::after,
17.btn[type="button"]:not(:disabled) {
18  color: var(--primary);
19  background-color: rgba(44, 62, 80, 0.15);
20  border: 1px solid hsl(210 29% 24%);
21  border-radius: calc(var(--radius) * 2);
22  transform: translateY(-2px) rotate(3deg);
23  transition: opacity 150ms ease-in-out !important;
24  width: min(100%, 48rem);
25  z-index: 10;
26}
27
28@media (prefers-color-scheme: dark) and (min-width: 768px) {
29  .card {
30    color: white;
31    padding: 2em 4vw;
32  }
33}
34
35@keyframes pulse {
36  from { opacity: 1; }
37  50% { opacity: 0.4; }
38  to { opacity: 1; }
39}

1<!DOCTYPE html>
2<!-- HTML sample: tags, attributes, entities, embedded CSS and JS -->
3<html lang="en">
4  <head>
5    <meta charset="utf-8" />
6    <title>Token sample &amp; friends</title>
7    <style>
8      .card { color: #2c3e50; padding: 1rem; }
9    </style>
10  </head>
11  <body class="theme-flatly" data-mode="light">
12    <main id="app">
13      <h1>Hello &mdash; world</h1>
14      <p>Some <strong>bold</strong>, <em>italic</em> and <a href="https://bootswatch.com" target="_blank">link</a> text.</p>
15      <input type="checkbox" checked disabled aria-label="Example" />
16      <img src="swatch.png" alt="A color swatch" width="64" height="64" />
17    </main>
18    <script>
19      const count = 26;
20      document.querySelector("#app").dataset.count = String(count);
21    </script>
22  </body>
23</html>

1# Heading 1
2
3## Heading 2
4
5### Heading 3
6
7A paragraph with **bold text**, *italic text*, ***both***, ~~strikethrough~~,
8and `inline code`. Here's a [link to Bootswatch](https://bootswatch.com) and an
9autolink: <https://code.visualstudio.com>.
10
11> A block quote, with **bold** inside it.
12
13- Unordered item
14- Another item
15  - Nested item
16
171. Ordered item
182. Second item
19
20- [x] Done task
21- [ ] Open task
22
23```ts
24// fenced code block
25const theme = "Bootswatch Flatly";
26```
27
28| Theme  | Mode  |
29| ------ | ----- |
30| Flatly | light |
31| Darkly | dark  |
32
33---
34
35![Image alt text](https://example.com/image.png "Image title")

1{
2  "name": "bootswatch",
3  "version": "1.0.0",
4  "dark": false,
5  "contrast": 4.5,
6  "count": 26,
7  "license": null,
8  "escapes": "quote \" backslash \\ newline \n",
9  "themes": [
10    { "label": "Bootswatch Flatly", "uiTheme": "vs" },
11    { "label": "Bootswatch Darkly", "uiTheme": "vs-dark" }
12  ],
13  "nested": {
14    "deep": {
15      "list": [1, -2, 3.5e2]
16    }
17  }
18}

1"""Python sample: decorators, self, logical keyword operators, f-strings."""
2import re
3from dataclasses import dataclass, field
4
5HEX = re.compile(r"^#[0-9a-f]{6}$", re.I)
6
7
8@dataclass
9class Theme:
10    name: str
11    dark: bool = False
12    colors: dict[str, str] = field(default_factory=dict)
13
14    def label(self) -> str:
15        return f"Bootswatch {self.name.title()}{' (dark)' if self.dark else ''}"
16
17    def valid(self) -> bool:
18        return bool(self.colors) and all(HEX.match(c) for c in self.colors.values())
19
20
21def ratio(a: float, b: float, *, floor=4.5, **extra) -> float | None:
22    if a is None or not b:
23        return None
24    lighter, darker = max(a, b), min(a, b)
25    result = (lighter + 0.05) / (darker + 0.05)
26    return result if result >= floor else None
27
28
29if __name__ == "__main__":
30    t = Theme("flatly", colors={"primary": "#2c3e50"})
31    print(t.label(), t.valid(), ratio(1.0, 0.0), True, False)