so://phie

blob: f7f8c6367222e9fa41c0af0eecc2577f6fe8840a (4779 bytes)[doc][blame][raw]

  1[
  2	{
  3		"id": "js",
  4		"name": "JavaScript",
  5		"url": "/js",
  6		"posts": [
  7			{
  8				"id": "js.html",
  9				"name": "html",
 10				"syntax": "html`...`",
 11				"description": "Creates a DOM element from the given template literal.",
 12				"import": "import { html } from 'https://git.typable.dev/std/js/render.js';",
 13				"code": [
 14					"const Message = props => {",
 15					"\treturn html`<h1>${props.text}</h1>`;",
 16					"};",
 17					"",
 18					"const message = Message({ text: 'Hello World!' });",
 19					"document.body.append(message);"
 20				]
 21			},
 22			{
 23				"id": "js.escape",
 24				"name": "escape",
 25				"syntax": "escape(...)",
 26				"description": "Returns escape xml from the given string.",
 27				"import": "import { escape } from 'https://git.typable.dev/std/js/render.js';",
 28				"code": [
 29					"escape(`<h1>Hello World!</h1>`);"
 30				]
 31			},
 32			{
 33				"id": "js.game",
 34				"name": "Game",
 35				"syntax": "Game(width, height, { fps })",
 36				"description": "By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.",
 37				"import": "import { Game } from 'https://git.typable.dev/std/js/game.js';",
 38				"code": [
 39					"class DinoGame extends Game {",
 40					"\tconstructor() {",
 41					"\t\tsuper(900, 600);",
 42					"\t\tthis.point = { x: 100, y: 100 };",
 43					"\t}",
 44					"\tupdate() {",
 45					"\t\tthis.point.x += 1;",
 46					"\t}",
 47					"\trender(g) {",
 48					"\t\tsuper.render(g); // clear screen",
 49					"\t\tconst {x, y} = this.point;",
 50					"\t\tg.fillRect(x, y, 50, 50);",
 51					"\t}",
 52					"}",
 53					"",
 54					"const game = new DinoGame();",
 55					"document.body.append(game.canvas);",
 56					"",
 57					"game.start();"
 58				]
 59			},
 60			{
 61				"id": "js.surface",
 62				"name": "Surface",
 63				"syntax": "Surface(x, y, width, height)",
 64				"description": "Represents a rectangular surface with its own update and render method.",
 65				"import": "import { Surface } from 'https://git.typable.dev/std/js/game.js';",
 66				"code": [
 67					"class Player extends Surface {",
 68					"\tconstructor(x, y) {",
 69					"\t\tsuper(x, y, 50, 50);",
 70					"\t}",
 71					"\tupdate() {",
 72					"\t\tthis.rect.x += 1;",
 73					"\t}",
 74					"\trender(g) {",
 75					"\t\tconst {x, y, width, height} = this.rect;",
 76					"\t\tg.fillRect(x, y, width, height);",
 77					"\t}",
 78					"}"
 79				]
 80			},
 81			{
 82				"id": "js.group",
 83				"name": "Group",
 84				"syntax": "Group()",
 85				"description": "Can be used to group specific elements for update and rendering purposes.",
 86				"import": "import { Group } from 'https://git.typable.dev/std/js/game.js';",
 87				"code": [
 88					"const group = new Group();",
 89					"group.add(...);",
 90					"",
 91					"group.update();",
 92					"group.render(g);"
 93				]
 94			},
 95			{
 96				"id": "js.rect",
 97				"name": "Rect",
 98				"syntax": "Rect(x, y, width, height)",
 99				"description": "Represents a rectangular hitbox.",
100				"import": "import { Rect } from 'https://git.typable.dev/std/js/game.js';"
101			},
102			{
103				"id": "js.scalecanvas",
104				"name": "scaleCanvas",
105				"syntax": "scaleCanvas(canvas, width, height)",
106				"description": "Scales a canvas to the device related pixel ratio.",
107				"import": "import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';"
108			}
109		]
110	},
111	{
112		"id": "less",
113		"name": "Less",
114		"url": "/less",
115		"posts": [
116			{
117				"id": "less.normalize",
118				"name": "Normalize",
119				"description": "Normalizes spacing and interactive elements and adds additional alignment classes.",
120				"import": "@import url('https://git.typable.dev/std/less/normalize.less');",
121				"code": [
122					"// Required variables (define before import)",
123					"@gap: px - Space between column elements",
124					"@full-width: px - Maximum width for centered container elements",
125					"",
126					"// Alignment classes",
127					".col - Horizontal spacing",
128					".row - Inverts horziontal spacing",
129					".container - Align centered with horizontal spacing",
130					".container-fluid - Align full width with horizontal spacing",
131					"",
132					"// Structure",
133					".container-fluid {",
134					"\t.row {",
135					"\t\t.container {",
136					"\t\t\t...",
137					"\t\t}",
138					"\t}",
139					"}"
140				]
141			},
142			{
143				"id": "less.color",
144				"name": "Color",
145				"syntax": "@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]",
146				"description": "A collection of material colors inspired by the Google Material Colors.",
147				"import": "@import url('https://git.typable.dev/std/less/color.less');",
148				"code": [
149					"@color-black;",
150					"@color-teal-50;",
151					"@color-blue-500;"
152				]
153			},
154			{
155				"id": "less.icons",
156				"name": "Icons",
157				"syntax": ".ico",
158				"description": "Imports the Google Material Icons Fonts.",
159				"import": "@import url('https://git.typable.dev/std/less/icons.less');",
160				"code": [
161					"<span class=\"ico\">close</span>"
162				]
163			}
164		]
165	}