initial commit

respresso · Dec 14, 2018 · 546a574 · 546a574
commit 546a574
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+/node_modules/
+/respresso/
+respresso.lock
+.cache
+dist
+/.idea/
+target
diff --git a/README.MD b/README.MD
@@ -0,0 +1,30 @@
+# Respresso Vanilla demo.
+
+This demo uses Typescript but it'd be the same in JS.
+
+## Configuration
+
+In *respresso.json* you can customize:
+- projectToken: Change it to you project's token
+- targetDirectory: it should be under src as CRA does not import from elsewhere
+- resources: only import what you need and you can change the version number, too
+
+## Include resources into your web application
+
+To start using Respresso in your app takes almost zero time and effort. After configuring your Respresso project, just issue `npm run sync` and you can start using the resources.
+
+### Localization
+
+Respresso files are imported in *src/messages.ts*.
+
+### SASS
+
+Color definitions from Respresso are imported in *src/index.scss*.
+
+### Images
+
+Just include your svg files as in *index.html*.
+
+### Fonts
+
+TBD
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+		integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="./src/index.scss">
+	<title>Respresso Web Demo</title>
+</head>
+<body>
+	<div class="d-flex justify-content-center">
+		<div class="card">
+			<div class="text-center" data-translate="innerText=title"></div>
+			<div class="card-header">
+				<img src="respresso/image/profile_avatar.svg" class="mx-auto d-block">
+			</div>
+			<div class="card-body">
+				<div class="d-flex justify-content-between bd-highlight mb-3">
+					<div class="p-2 bd-highlight"><img src="respresso/image/profile_minus.svg" ></div>
+					<div class="p-2 bd-highlight"><img src="respresso/image/profile_plus.svg" ></div>
+				</div>
+				<input class="form-control form-control-lg" type="text" data-translate="placeholder=firstname">
+				<input class="form-control form-control-lg mt-2" type="text" data-translate="placeholder=lastname">
+			</div>
+		</div>
+	</div>
+
+
+<script src="src/index.ts"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+	"name": "respresso-vanilla",
+	"version": "1.0.0",
+	"devDependencies": {
+		"cssnano": "^4.1.7",
+		"parcel-bundler": "^1.10.3",
+		"respresso-node-client": "0.0.6",
+		"sass": "^1.15.2",
+		"typescript": "^3.2.2"
+	},
+	"scripts": {
+		"sync": "respresso sync",
+		"start": "parcel serve *.html",
+		"build": "parcel build --no-source-maps *.html"
+	}
+}
diff --git a/respresso.json b/respresso.json
@@ -0,0 +1,26 @@
+{
+	"serverUrl": "https://app.respresso.io",
+	"projectToken": "75ea1c52-6860-4814-bba8-5b07f8a0be15",
+	"resources": [
+		{
+			"category": "localization",
+			"group": "json",
+			"version": "1.0.0"
+		},
+		{
+			"category": "color",
+			"group": "sass",
+			"version": "1.0.0"
+		},
+		{
+			"category": "image",
+			"group": "svg",
+			"version": "1.0.0"
+		},
+		{
+			"category": "font",
+			"group": "simple",
+			"version": "1.0.0"
+		}
+	]
+}
diff --git a/src/index.scss b/src/index.scss
@@ -0,0 +1,19 @@
+@import "../respresso/colors";
+
+
+.card  {
+	.card-header {
+		background-color: $profil_photo_background;
+	}
+
+	.card-body {
+		background-color: $background;
+	}
+}
+
+#title {
+	padding: 5px;
+	font-weight:  400;
+	font-size: 24px;
+
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,9 @@
+import {messages} from "./messages";
+
+document.querySelectorAll("[data-translate]").forEach((element: Element) => {
+	if (element instanceof HTMLElement) {
+		const ex = element.dataset['translate'];
+		const [k, v] = ex.split("=");
+		element[k] = messages.en.profile[v];
+	}
+});
diff --git a/src/json.d.ts b/src/json.d.ts
@@ -0,0 +1,4 @@
+declare module "*.json!" {
+	const content: any;
+	export default content;
+}
diff --git a/src/messages.ts b/src/messages.ts
@@ -0,0 +1,5 @@
+const english = require("../respresso/localization/localization-en.json");
+
+export const messages = {
+	en: english
+};