Skip to content

Commit

Permalink
Deploy CSV to JSON browser script into gh-pages and restyling it (#14)
Browse files Browse the repository at this point in the history 
Co-authored-by: thealphadollar <[email protected]>
  • Loading branch information
@IsmaCortGtz @thealphadollar
IsmaCortGtz and thealphadollar authored Aug 26, 2023
1 parent 3386fb9 commit 7b05fc9
Show file tree
Hide file tree
Showing 16 changed files with 775 additions and 112 deletions.
5 changes: 3 additions & 2 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

The folder contains a demo of vanilla-i18n working on a website.

- language sheet is available [here](https://docs.google.com/spreadsheets/d/1KfPLetq4VUvEApiGtWEUuQUhAYCrocyLmyiHV2cl_ks/edit?usp=sharing)
- The language sheet is available [here](https://docs.google.com/spreadsheets/d/1KfPLetq4VUvEApiGtWEUuQUhAYCrocyLmyiHV2cl_ks/edit?usp=sharing)
- `i18n.csv` is exported from the above sheet
- `assets/vanilla-i18n` folder contains the JSON language files created using the script and the `i18n.csv`
- `index.html` contains the implementation of vanilla-i18n
- `index.html` contains the implementation of vanilla-i18n
- `csv.2.vi18n.html` contains the implementation of `csv_to_vanilla_i18n.browser.js`.
Binary file modified docs/assets/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/assets/vanilla-i18n/Español.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"language":"Idioma","form":{"desc":"Ingresa Tus Datos!","name":"Nombre","age":"Edad","exe":{"desc":"¿Te ejercitas en casa?","yes":"Sí","no":"No"},"topics":{"desc":"¿Cómo te gusta leer sobre tus temas favoritos?","books":"Libros","web":"Recursos en línea","phone":"Apps de teléfono","magazines":"Revistas"},"movies":{"desc":"¿Qué género de películas te gusta?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">Comedia</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">Romance</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">Thriller</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">Horror</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">Biográfica</i18n>\n </option>\n </select>"},"submit":"Enviar"}}
6 changes: 5 additions & 1 deletion docs/assets/vanilla-i18n/français.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
{"language":"Langue","form":{"desc":"Remplissez vos d\u00e9tails!","name":"Nom","age":"\u00c2ge","exe":{"desc":"Exercez-vous \u00e0 la maison?","yes":"Oui","no":"Non"},"topics":{"desc":"Comment aimez-vous lire sur vos sujets favoris?","books":"Livres","web":"Ressources en ligne","phone":"applications t\u00e9l\u00e9phoniques","magazines":"Les magazines"},"movies":{"desc":"Quel genre de films aimez-vous?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">La com\u00e9die</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">Romance</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">Polar</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">Horreur</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">biopic</i18n>\n </option>\n </select>"},"submit":"Soumettre"}}
<<<<<<< HEAD
{"language":"Langue","form":{"desc":"Remplissez vos détails!","name":"Nom","age":"Âge","exe":{"desc":"Exercez-vous à la maison?","yes":"Oui","no":"Non"},"topics":{"desc":"Comment aimez-vous lire sur vos sujets favoris?","books":"Livres","web":"Ressources en ligne","phone":"applications téléphoniques","magazines":"Les magazines"},"movies":{"desc":"Quel genre de films aimez-vous?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">La comédie</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">Romance</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">Polar</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">Horreur</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">biopic</i18n>\n </option>\n </select>"},"submit":"Soumettre"}}
=======
{"language":"Langue","form":{"desc":"Remplissez vos d\u00e9tails!","name":"Nom","age":"\u00c2ge","exe":{"desc":"Exercez-vous \u00e0 la maison?","yes":"Oui","no":"Non"},"topics":{"desc":"Comment aimez-vous lire sur vos sujets favoris?","books":"Livres","web":"Ressources en ligne","phone":"applications t\u00e9l\u00e9phoniques","magazines":"Les magazines"},"movies":{"desc":"Quel genre de films aimez-vous?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">La com\u00e9die</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">Romance</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">Polar</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">Horreur</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">biopic</i18n>\n </option>\n </select>"},"submit":"Soumettre"}}
>>>>>>> master
6 changes: 5 additions & 1 deletion docs/assets/vanilla-i18n/हिन्दी.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
{"language":"\u092d\u093e\u0937\u093e","form":{"desc":"\u0906\u092a\u0915\u093e \u0935\u093f\u0935\u0930\u0923 \u092d\u0930\u0947\u0902!","name":"\u0928\u093e\u092e","age":"\u0909\u092e\u094d\u0930","exe":{"desc":"\u0906\u092a \u0918\u0930 \u092a\u0930 \u0935\u094d\u092f\u093e\u092f\u093e\u092e \u0915\u0930\u0924\u0947 \u0939\u0948\u0902?","yes":"\u0939\u093e\u0901","no":"\u0928\u0939\u0940\u0902 \u0928"},"topics":{"desc":"\u0906\u092a \u0905\u092a\u0928\u0947 \u092a\u0938\u0902\u0926\u0940\u0926\u093e \u0935\u093f\u0937\u092f\u094b\u0902 \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u092a\u0922\u093c\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0915\u0948\u0938\u093e \u0932\u0917\u0924\u093e \u0939\u0948?","books":"\u092a\u0941\u0938\u094d\u0924\u0915\u0947\u0902","web":"\u0911\u0928\u0932\u093e\u0907\u0928 \u0938\u0902\u0938\u093e\u0927\u0928","phone":"\u092b\u093c\u094b\u0928 \u0910\u092a\u094d\u0938","magazines":"\u092a\u0924\u094d\u0930\u093f\u0915\u093e"},"movies":{"desc":"\u0906\u092a \u092b\u093f\u0932\u094d\u092e\u094b\u0902 \u092e\u0947\u0902 \u0938\u0947 \u0915\u093f\u0938 \u0936\u0948\u0932\u0940 \u092a\u0938\u0902\u0926 \u0939\u0948?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">\u0915\u0949\u092e\u0947\u0921\u0940</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">\u0930\u094b\u092e\u093e\u0902\u0938</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">\u0925\u094d\u0930\u093f\u0932\u0930</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">\u0921\u0930\u093e\u0935\u0928\u0940</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">\u092c\u093e\u092f\u094b\u092a\u093f\u0915</i18n>\n </option>\n </select>"},"submit":"\u092a\u094d\u0930\u0938\u094d\u0924\u0941\u0924"}}
<<<<<<< HEAD
{"language":"भाषा","form":{"desc":"आपका विवरण भरें!","name":"नाम","age":"उम्र","exe":{"desc":"आप घर पर व्यायाम करते हैं?","yes":"हाँ","no":"नहीं न"},"topics":{"desc":"आप अपने पसंदीदा विषयों के बारे में पढ़ने के लिए कैसा लगता है?","books":"पुस्तकें","web":"ऑनलाइन संसाधन","phone":"फ़ोन ऐप्स","magazines":"पत्रिका"},"movies":{"desc":"आप फिल्मों में से किस शैली पसंद है?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">कॉमेडी</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">रोमांस</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">थ्रिलर</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">डरावनी</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">बायोपिक</i18n>\n </option>\n </select>"},"submit":"प्रस्तुत"}}
=======
{"language":"\u092d\u093e\u0937\u093e","form":{"desc":"\u0906\u092a\u0915\u093e \u0935\u093f\u0935\u0930\u0923 \u092d\u0930\u0947\u0902!","name":"\u0928\u093e\u092e","age":"\u0909\u092e\u094d\u0930","exe":{"desc":"\u0906\u092a \u0918\u0930 \u092a\u0930 \u0935\u094d\u092f\u093e\u092f\u093e\u092e \u0915\u0930\u0924\u0947 \u0939\u0948\u0902?","yes":"\u0939\u093e\u0901","no":"\u0928\u0939\u0940\u0902 \u0928"},"topics":{"desc":"\u0906\u092a \u0905\u092a\u0928\u0947 \u092a\u0938\u0902\u0926\u0940\u0926\u093e \u0935\u093f\u0937\u092f\u094b\u0902 \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u092a\u0922\u093c\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0915\u0948\u0938\u093e \u0932\u0917\u0924\u093e \u0939\u0948?","books":"\u092a\u0941\u0938\u094d\u0924\u0915\u0947\u0902","web":"\u0911\u0928\u0932\u093e\u0907\u0928 \u0938\u0902\u0938\u093e\u0927\u0928","phone":"\u092b\u093c\u094b\u0928 \u0910\u092a\u094d\u0938","magazines":"\u092a\u0924\u094d\u0930\u093f\u0915\u093e"},"movies":{"desc":"\u0906\u092a \u092b\u093f\u0932\u094d\u092e\u094b\u0902 \u092e\u0947\u0902 \u0938\u0947 \u0915\u093f\u0938 \u0936\u0948\u0932\u0940 \u092a\u0938\u0902\u0926 \u0939\u0948?","options":"<select name=\"moviepref\">\n <option value=1 selected=\"true\">\n <i18n vanilla-i18n=\"form.movies.comedy\">\u0915\u0949\u092e\u0947\u0921\u0940</i18n>\n </option>\n <option value=2>\n <i18n vanilla-i18n=\"form.movies.romance\">\u0930\u094b\u092e\u093e\u0902\u0938</i18n>\n </option>\n <option value=3>\n <i18n vanilla-i18n=\"form.movies.thriller\">\u0925\u094d\u0930\u093f\u0932\u0930</i18n>\n </option>\n <option value=4>\n <i18n vanilla-i18n=\"form.movies.horror\">\u0921\u0930\u093e\u0935\u0928\u0940</i18n>\n </option>\n <option value=5>\n <i18n vanilla-i18n=\"form.movies.biopic\">\u092c\u093e\u092f\u094b\u092a\u093f\u0915</i18n>\n </option>\n </select>"},"submit":"\u092a\u094d\u0930\u0938\u094d\u0924\u0941\u0924"}}
>>>>>>> master
149 changes: 149 additions & 0 deletions docs/css/csv.2.vi18n.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
:root {
--background-color: #fff7f5;
--first-color: #ff3e20;
--second-color: #ff5d45;
/* --third-color: #ffe2db; */
--third-color: #ffb3a0;
--fourth-color: #ff9d85;
--first-text: #000;
--second-text: #fff;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
color: var(--first-text);
transition: background .2s ease-in-out;
}

html {
background-color: var(--background-color);
}

h1, h2 {
text-align: center;
margin: 10px;
}

#languages-container {
position: relative;
left: -200%;
transition: left 0.5s;
}

.language-container {
display: flex;
background-color: var(--third-color);
margin: 15px 10px;
border-radius: 15px;
overflow: hidden;
}

.language-name {
font-weight: bold;
font-size: 1.2rem;
flex: 4;
padding: 10px;
margin-left: 20px;
}

.language-download-button {
flex: 1;
padding: 10px;
background-color: var(--first-color);
text-align: center;
font-size: 1.3rem;
cursor: pointer;
}

.language-download-button:hover {
background-color: var(--second-color);
}

.zip-button {
display: block;
margin: 15px;
padding: 15px;
border-radius: 15px;
background-color: var(--first-color);
color: var(--second-text);
font-weight: bold;
cursor: pointer;
text-align: center;
}

.zip-button:hover {
background-color: var(--second-color);
}

.csv-input-container {
display: flex;
flex-direction: row;
}

.csv-url {
display: flex;
margin: 10px;
flex: 1;
cursor: pointer;
background-color: var(--third-color);
border-radius: 15px;
overflow: hidden;
}

.url-input {
flex: 3;
padding: 30px;
border: 0;
outline: none;
text-align: center;
background-color: var(--third-color);
}

.csv-button {
flex: 1;
border: 0;
background-color: var(--first-color);
color: var(--second-text);
text-decoration: none;
font-weight: bold;
cursor: pointer;
}

.csv-button:hover {
background-color: var(--second-color);
}

.url-input:focus {
background-color: var(--fourth-color);
}

.csv-file-input {
flex: 1;
margin: 10px;
}

input[type=file] {
width: 100%;
padding: 20px;
cursor: pointer;
background-color: var(--third-color);
border-radius: 15px;
}

input[type=file]::file-selector-button {
margin-right: 20px;
border: none;
background: var(--first-color);
padding: 10px 20px;
border-radius: 10px;
color: var(--first-text);
cursor: pointer;
}

input[type=file]::file-selector-button:hover {
background: var(--second-color);
}

207 changes: 207 additions & 0 deletions docs/css/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
:root {
--background-color: #fff7f5;
--first-color: #ff3e20;
--second-color: #ff5d45;
--third-color: #ffe2db;
--fourth-color: #ffb3a0;
--first-text: #000;
--second-text: #fff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background .2s ease-in-out;
}

html {
background-color: var(--background-color);
font-family: sans-serif;
}

body {
margin: auto;
padding: 15px;
max-width: 1000px;
}

.vanilla-i18n-logo {
width: 100%;
object-fit: cover;
margin: auto;
max-height: 300px;
}

.introduction-text {
text-align: center;
margin-top: 20px;
}

.csv-yo-vi18n-json-button-container {
display: block;
text-decoration: none;
background-color: var(--first-color);
color: var(--second-text);
padding: 10px;
margin: 20px auto;
border-radius: 15px;
text-align: center;
cursor: pointer;
font-weight: bold;
user-select: none;
max-width: 800px;
}

.csv-yo-vi18n-json-button-container:hover {
background-color: var(--second-color);
color: var(--second-text);
}

/* Example styles */

.vanilla-i18n-example-container {
margin-top: 30px;
}

/* Toggler */

.toggler-container, .text-input-container, .options-input-container, .movie-container {
background-color: var(--third-color);
padding: 5px;
border-radius: 10px;
display: flex;
margin: 20px 0;
justify-content: center;
align-items: center;
}

.toggler-label {
flex: 2;
text-align: center;
font-weight: bold;
}

/* Example */

.example-title {
margin: 15px;
}

.text-input-container {
display: flex;
flex-direction: column;
}

.text-input-container > input {
width: 100%;
max-width: 440px;
background-color: var(--fourth-color);
border: none;
border-radius: 10px;
padding: 5px;
margin: 2px;
text-align: center;
}

.example-input-label, .options-input-label, .movie-label {
padding: 5px;
font-weight: bold;
}

/* options */

.options-input-container {
display: flex;
flex-direction: column;
}

.options-input-menu-container {
padding: 5px;
}

.options-input-item-container {
text-align: left;
left: 10px;
padding: 5px;
}

/* Movies */

.movie-container {
display: flex;
flex-direction: column;
}

.submit-button {
display: block;
border: none;
text-decoration: none;
background-color: var(--first-color);
color: var(--second-text);
padding: 10px;
margin: 20px auto;
border-radius: 15px;
text-align: center;
cursor: pointer;
font-weight: bold;
user-select: none;
max-width: 800px;
width: 100%;
}

.submit-button:hover {
background-color: var(--second-color);
}

/* General */

a {
color: var(--first-color);
font-weight: bold;
}

a:hover {
color: var(--second-color);
}

select {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
outline: none;
border: none;
border-radius: 5px;
padding: 0.5em 3.5em 0.5em 1em;
background-color: var(--first-color);
color: var(--second-text);
font-weight: bold;
background-image: linear-gradient(45deg, transparent 50%, var(--second-text) 50%),
linear-gradient(135deg, var(--second-text) 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
}

input {
accent-color: var(--first-color);
cursor: pointer;
}

input[type="text"], input[type="number"] {
cursor: text;
}

select:hover {
background-color: var(--second-color);
}

hr {
border: 2px solid var(--first-color);;
border-radius: 100px;
color: var(--first-color);
margin: 40px 0;
}
Loading

0 comments on commit 7b05fc9

Please sign in to comment.