so://phie

blob: ae018220a7e9985c1e916362a909516a7117700d (5265 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, shape)",
 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, new Shape.Rect(50, 50));",
 70					"\t}",
 71					"\tupdate() {",
 72					"\t\tthis.x += 1;",
 73					"\t}",
 74					"\trender(g) {",
 75					"\t\tconst {x, y, shape: {width, height}} = this;",
 76					"\t\tg.fillRect(x, y, width, height);",
 77					"\t}",
 78					"}",
 79					"",
 80					"// Collision (in combination with a Group):",
 81					"this.collided // if surface collides with another",
 82					"this.items // all colliding surfaces"
 83				]
 84			},
 85			{
 86				"id": "js.group",
 87				"name": "Group",
 88				"syntax": "Group()",
 89				"description": "Can be used to group specific elements for update and rendering purposes.",
 90				"import": "import { Group } from 'https://git.typable.dev/std/js/game.js';",
 91				"code": [
 92					"const group = new Group();",
 93					"group.add(...);",
 94					"",
 95					"group.collide(); // call in update method for collision",
 96					"group.update();",
 97					"group.render(g);"
 98				]
 99			},
100			{
101				"id": "js.shape.rect",
102				"name": "Shape.Rect",
103				"syntax": "Shape.Rect(width, height)",
104				"description": "Represents a rectangular hitbox.",
105				"import": "import { Shape } from 'https://git.typable.dev/std/js/game.js';"
106			},
107			{
108				"id": "js.shape.circle",
109				"name": "Shape.Circle",
110				"syntax": "Shape.Circle(radius)",
111				"description": "Represents a circular hitbox.",
112				"import": "import { Shape } from 'https://git.typable.dev/std/js/game.js';"
113			},
114			{
115				"id": "js.scalecanvas",
116				"name": "scaleCanvas",
117				"syntax": "scaleCanvas(canvas, width, height)",
118				"description": "Scales a canvas to the device related pixel ratio.",
119				"import": "import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';"
120			}
121		]
122	},
123	{
124		"id": "less",
125		"name": "Less",
126		"url": "/less",
127		"posts": [
128			{
129				"id": "less.normalize",
130				"name": "Normalize",
131				"description": "Normalizes spacing and interactive elements and adds additional alignment classes.",
132				"import": "@import url('https://git.typable.dev/std/less/normalize.less');",
133				"code": [
134					"// Required variables (define before import)",
135					"@gap: px - Space between column elements",
136					"@full-width: px - Maximum width for centered container elements",
137					"",
138					"// Alignment classes",
139					".col - Horizontal spacing",
140					".row - Inverts horziontal spacing",
141					".container - Align centered with horizontal spacing",
142					".container-fluid - Align full width with horizontal spacing",
143					"",
144					"// Structure",
145					".container-fluid {",
146					"\t.row {",
147					"\t\t.container {",
148					"\t\t\t...",
149					"\t\t}",
150					"\t}",
151					"}"
152				]
153			},
154			{
155				"id": "less.color",
156				"name": "Color",
157				"syntax": "@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]",
158				"description": "A collection of material colors inspired by the Google Material Colors.",
159				"import": "@import url('https://git.typable.dev/std/less/color.less');",
160				"code": [
161					"@color-black;",
162					"@color-teal-50;",
163					"@color-blue-500;"
164				]
165			},
166			{
167				"id": "less.icons",
168				"name": "Icons",
169				"syntax": ".ico",
170				"description": "Imports the Google Material Icons Fonts.",
171				"import": "@import url('https://git.typable.dev/std/less/icons.less');",
172				"code": [
173					"<span class=\"ico\">close</span>"
174				]
175			}
176		]
177	}