Initial commit for website source, hosted on: small-js.org

Small-JS · Mar 7, 2024 · 56b7527 · 56b7527
1 parent 2f36f2e
commit 56b7527
Show file tree

Hide file tree

Showing 33 changed files with 653 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,14 +1,31 @@
-*.js
 *.map
 *.env
 *.lnk
 *.cmd
 *.vsix
+.DS_Store
 **/node_modules
 **/out
-!/Browser/web/Test/ScriptFunction.js
-/Test/
+/Browser/web/App.js
+/Browser/web/Smalltalk
+/Examples/Benchmark/web/App.js
+/Examples/Benchmark/web/Smalltalk
+/Examples/Benchmark/web/Script
+/Examples/Counter/web/App.js
+/Examples/Counter/web/Smalltalk
 /Examples/Love/
-/Website
+/Examples/Shop/Client/web/App.js
+/Examples/Shop/Client/web/Smalltalk
+/Examples/Shop/Client/web/Tools
+/Examples/Shop/ClientSpa/web/App.js
+/Examples/Shop/ClientSpa/web/Smalltalk
+/Examples/Todo/web/App.js
+/Examples/Todo/web/Smalltalk
+/Test/
 todo.txt
-.DS_Store
+/Website/web/App.js
+/Website/web/Smalltalk
+/Website/web/Examples/Benchmark
+/Website/web/Examples/Counter
+/Website/web/Examples/Todo
+/Website/web/Tools
diff --git a/Browser/web/favicon.ico b/Browser/web/favicon.ico
diff --git a/Documentation/Why_SmallJS.pptx b/Documentation/Why_SmallJS.pptx
diff --git a/Examples/Todo/web/App.css b/Examples/Todo/web/App.css
@@ -10,28 +10,32 @@ body {
 	margin-left: auto;
 	margin-right: auto;
 	border: solid;
-	border-width: 1px;
+	border-width: 2px;
 	border-spacing: 16px;
 	border-radius: 10px;
 	text-align: center;
 	width: 400px;
-	box-shadow: 10px 10px 5px;
+	color: grey;
+	box-shadow: 10px 10px 5px grey;
 }
 
 .title {
 	font-size: X-Large;
 	font-weight: bold;
 	text-align: center;
+	color: black;
 	background-color: lightblue;
 	margin-top: 0px;
 	margin-bottom: 0px;
 }
 
 #languageLabel {
+	color: black;
 	font-weight: bold;
 }
 
 #languageInput {
+	border: 1px solid;
 	border-color: grey;
 	width: 100px;
 }
@@ -55,9 +59,15 @@ body {
 }
 
 #newTaskTable th, td {
+	color: black;
 	padding: 4px;
 }
 
+.newTaskLabel {
+	color: black;
+	font-weight: bold;
+}
+
 #taskTable {
 	margin-left: auto;
 	margin-right: auto;

diff --git a/Examples/Todo/web/index.html b/Examples/Todo/web/index.html
@@ -12,7 +12,7 @@
 
 <body>
 	<table id="formTable" >
-		<tr>
+		<tr>	<!-- ============== Title -->
 			<td class="title">
 				<div class="vertical-center">
 					<img id="todoImage" src="Todo.png" height="40"></img>
@@ -21,17 +21,17 @@
 				</div>
 			</td>
 		</tr>
-		<tr>
+		<tr>	<!-- ============== Language -->
 			<td>
-				<label id="languageLabel">Language: </label>
+				<label id="languageLabel">Language </label>
 				<input id="languageInput" value="" list="languageDataList" onmouseover="this.focus();" onfocus="this.value=''" oninput="this.blur();"/>
 				<datalist id="languageDataList">
 					<option value="English">
 					<option value="Española">
 				</datalist>
 			</td>
 		</tr>
-		<tr>
+		<tr>	<!-- ============== New Task -->
 			<td>
 				<table id="newTaskTable">
 					<thead>
@@ -44,14 +44,14 @@
 					<tbody>
 						<tr>
 							<td>
-								<label id="newTaskTitleLabel" for="newTaskTitleInput"><b>Title</b></label>
+								<label id="newTaskTitleLabel" class="newTaskLabel" for="newTaskTitleInput"><b>Title</b></label>
 							<td>
 								<input id="newTaskTitleInput"></input>
 							</td>
 						</tr>
 						<tr>
 							<td>
-								<label id="newTaskDueLabel" for="newTaskDueInput"><b>Due</b></label>
+								<label id="newTaskDueLabel" class="newTaskLabel" for="newTaskDueInput"><b>Due</b></label>
 							</td>
 							<td>
 								<input id="newTaskDueInput" type="date"></input>
@@ -66,7 +66,7 @@
 				</table>
 			</td>
 		</tr>
-		<tr>
+		<tr>	<!-- ============== Tasks -->
 			<td>
 				<table id="taskTable" class="taskTableClass">
 					<thead>

diff --git a/README.md b/README.md
@@ -1,20 +1,26 @@
 # SmallJS README
 
-## What is SmallJS?
+<img id="SmallJSLogo" src="Documentation/SmallJS.png" alt="SmallJS logo" width="300" height="300" style="margin:auto"/>
 
-SmallJS is a compiler (transpiler) from the Smalltalk (ST) language to JavaScript (JS).
-The generated JS code runs in all modern browsers or in Node.js.
-SmallJS has full syntax support for the simple and elegant Smalltalk-80 language.
+## Introducing SmallJS
+
+SmallJS is a free and open source implementation of the elegant and powerful Smalltalk-80 (ST) language.
+It compiles to JavaScript (JS) than runs in modern browsers or in Node.js.
 
 SmallJS is file based, not image based, so you can develop in your favorite IDE.
-The default setup is for Visual Studio Code, with ST syntax coloring and step debugging! You code separately from the SmallJS base libraries (image) and only the parts you use are imported automatically when running your app.
+The default setup is for Visual Studio Code, with ST syntax coloring and step debugging!
+You code separately from the SmallJS base libraries (image) and only the parts you use are imported automatically when running your app.
 
-SmallJS is *fully* object oriented, so customizable on every level.
+SmallJS is _fully_ object oriented, so customizable on every level.
 For usability, ST class and method names are kept mostly equal to their familiar JS counterparts.
+
 JS libraries already encapsulated in ST are:
-- Browser: Document, Window, HTML elements, events, CSS, streams.
+
+- Browsers: Document, Window, HTML elements, events, CSS, streams.
 - Node.js: HTTP server, Express, 3 databases, files.
 
+To get you started quickly, there are several example projects for development in the browser and a Node.js back-end.<
+
 To get you started quickly, are several example projects\
 for development in the browser and / or a Node.js back-end.
 

diff --git a/Website/.vscode/launch.json b/Website/.vscode/launch.json
@@ -0,0 +1,29 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch Chrome",
+			"request": "launch",
+			"type": "chrome",
+			"url": "http://localhost:3000",
+			"webRoot": "${workspaceFolder}/web"
+		},
+		{
+			"name": "Launch Edge",
+			"request": "launch",
+			"type": "msedge",
+			"url": "http://localhost:3000",
+			"webRoot": "${workspaceFolder}/web"
+		},
+		{
+			"name": "Launch Firefox",
+			"request": "launch",
+			"type": "firefox",
+			"url": "http://localhost:3000",
+			"webRoot": "${workspaceFolder}/web"
+		}
+	]
+}
diff --git a/Website/.vscode/tasks.json b/Website/.vscode/tasks.json
@@ -0,0 +1,19 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "tsc: watch - tsconfig.json",
+			"type": "typescript",
+			"tsconfig": "tsconfig.json",
+			"option": "watch",
+			"problemMatcher": [
+				"$tsc-watch"
+			],
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"runOptions": {	"runOn": "folderOpen" }
+		}
+	]
+}
diff --git a/Website/Website.code-workspace b/Website/Website.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}
diff --git a/Website/Website.md b/Website/Website.md
@@ -0,0 +1,13 @@
+# SmallJS official website
+
+<img src="web/SmallJS.png" alt="SmallJS logo" width="300"/>
+<br>
+<br>
+This folder contains the source of the official SmallJS website, hosted on:
+
+<a href="https://small-js.org" style="font-weight:bold; font-size:x-large">small-js.org</a>
+
+If you want to improve the site, please create a pull-request on GitHub:
+
+<a href="https://github.com/Small-JS/SmallJS" style="font-weight:bold; font-size:x-large">github.com/Small-JS/SmallJS</a>
+
diff --git a/Website/build.sh b/Website/build.sh
@@ -0,0 +1,33 @@
+#!/bin/bash
+# This script builds Website project.
+
+# Exit script if a step fails
+set -e
+# Set working directiry to script directory
+cd "$(dirname "$0")"
+
+echo "==== Website"
+
+# Compile TypeScript
+
+echo "tsc Website"
+tsc
+
+# Copy examples
+# This assumes the selected examples have been built beforehand.
+# Just copy the generated web apps for use in iframes.
+
+echo "Copying example web apps"
+
+# Must remove destination folders first,
+# otherwise "cp -r" will behave differently.
+
+rm -r web/Examples/Benchmark
+cp -r ../Examples/Benchmark/web web/Examples/Benchmark
+
+rm -r web/Examples/Counter
+cp -r ../Examples/Counter/web web/Examples/Counter
+
+rm -r web/Examples/Todo
+cp -r ../Examples/Todo/web web/Examples/Todo
+
diff --git a/Website/src/App.ts b/Website/src/App.ts
@@ -0,0 +1,3 @@
+// Redirect to home page
+
+window.location.replace( "Home/Home.html" + window.location.search );
diff --git a/Website/src/Tools/Include.ts b/Website/src/Tools/Include.ts
@@ -0,0 +1,20 @@
+// Replace tags <include src="<file path>"> with referenced HTML
+
+function loadIncludes()
+{
+	const includeNodes = document.getElementsByTagName( 'include' );
+	for( const includeNode of includeNodes ) {
+		let filePath = includeNode.getAttribute( 'src' );
+		if( filePath )
+			fetch( filePath ).then( file =>
+			{
+				file.text().then( content =>
+				{
+					includeNode.insertAdjacentHTML( 'afterend', content );
+					includeNode.remove();
+				} );
+			} );
+	};
+}
+
+loadIncludes();
diff --git a/Website/startWebServer.sh b/Website/startWebServer.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+# Start static web server.
+
+# Exit script if a step fails
+set -e
+# Set working directory to script directory
+cd "$(dirname "$0")"
+
+echo -n "Directory: "
+pwd
+http-server web -c-1 -p 3000
diff --git a/Website/tsconfig.json b/Website/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esNext",
+	"module": "esNext",
+	"outDir": "web",
+	"strict": true,
+	"sourceMap": true
+  }
+}
diff --git a/Website/web/App.css b/Website/web/App.css
@@ -0,0 +1,54 @@
+
+body {
+    font-family: system-ui;
+    font-size: medium;
+    background-color: #F0F0F0;
+}
+
+#formTable {
+	background-color: white;
+	margin-left: auto;
+	margin-right: auto;
+	border: solid;
+	border-width: 2px;
+	border-spacing: 16px;
+	border-radius: 10px;
+	border-color: grey;
+	width: 800px;
+	box-shadow: 10px 10px 5px grey;
+}
+
+.title {
+	font-size: X-Large;
+	font-weight: bold;
+	text-align: center;
+	background-color: #C5ECF9;
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+.horizontal-center {
+	text-align: center;
+}
+
+.horizontal-left {
+	text-align: left;
+}
+
+.bold-horizontal-center {
+	text-align: center;
+	font-weight: bold;
+}
+
+.vertical-center
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.bold
+{
+	font-weight: bold;
+}
+
diff --git a/Website/web/Examples/Examples.css b/Website/web/Examples/Examples.css
@@ -0,0 +1,2 @@
+@import "../App.css";
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		// Redirect to home page

		window.location.replace( "Home/Home.html" + window.location.search );