cthed2 / app-metadat

Landing page

Landing page

Basado en un template de adrinlol.

app-metadat's Issues

Cambio imagotipo a logotipo de metadat

Modificar template de index.html.

La idea agregar la metadata de la web (Creo que es por temas de SEO)

Actualizar dependencias npm

Cambiar icono

Cambiarlo con logo de metadat.

Hacer una prueba de backend con python y despliegue en GCP

Codigo Enviar correo

/******************************************************************************

• This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey *
• But has been simplified and cleaned up to make it more beginner friendly *
• All credit still goes to Martin and any issues/complaints/questions to me. *
  ******************************************************************************/

// if you want to store your email server-side (hidden), uncomment the next line
var TO_ADDRESS = "[email protected]";

// spit out all the keys/values from the form in HTML for email
// uses an array of keys if provided or the object to determine field order
function formatMailBody(obj, order) {
var result = "";
if (!order) {
order = Object.keys(obj);
}

// loop over all keys in the ordered form data
for (var idx in order) {
var key = order[idx];
result += "

" + key + "

" + sanitizeInput(obj[key]) + "

";
// for every key, concatenate an <h4 />/<div /> pairing of the key name and its value,
// and append it to the result string created at the start.
}
return result; // once the looping is done, result will be one long string to put in the email body
}

// sanitize content from the user - trust no one
// ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
function sanitizeInput(rawInput) {
var placeholder = HtmlService.createHtmlOutput(" ");
placeholder.appendUntrusted(rawInput);

return placeholder.getContent();
}

function doPost(e) {

try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);

// shorter name for form data
var mailData = e.parameters;

// names and order of form elements (if set)
var orderParameter = e.parameters.formDataNameOrder;
var dataOrder;
if (orderParameter) {
  dataOrder = JSON.parse(orderParameter);
}

// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;

// send email if to address is set
if (sendEmailTo) {
  MailApp.sendEmail({
    to: String(sendEmailTo),
    subject: "Alguien quiere ponerse en contacto",
    // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
    htmlBody: formatMailBody(mailData, dataOrder)
  });
}

return ContentService    // return json success results
      .createTextOutput(
        JSON.stringify({"result":"success",
                        "data": JSON.stringify(e.parameters) }))
      .setMimeType(ContentService.MimeType.JSON);

} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}

/**

• record_data inserts the data received from the html form submission
• e is the data received from the POST
  */
  function record_data(e) {
  var lock = LockService.getDocumentLock();
  lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing

try {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it

// select the 'responses' sheet by default
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheetName = e.parameters.formGoogleSheetName || "responses";
var sheet = doc.getSheetByName(sheetName);

var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var newHeader = oldHeader.slice();
var fieldsFromForm = getDataColumns(e.parameters);
var row = [new Date()]; // first element in the row should always be a timestamp

// loop through the header columns
for (var i = 1; i < oldHeader.length; i++) { // start at 1 to avoid Timestamp column
  var field = oldHeader[i];
  var output = getFieldFromData(field, e.parameters);
  row.push(output);
  
  // mark as stored by removing from form fields
  var formIndex = fieldsFromForm.indexOf(field);
  if (formIndex > -1) {
    fieldsFromForm.splice(formIndex, 1);
  }
}

// set any new fields in our form
for (var i = 0; i < fieldsFromForm.length; i++) {
  var field = fieldsFromForm[i];
  var output = getFieldFromData(field, e.parameters);
  row.push(output);
  newHeader.push(field);
}

// more efficient to set values as [][] array than individually
var nextRow = sheet.getLastRow() + 1; // get next row
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

// update header row with any new data
if (newHeader.length > oldHeader.length) {
  sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
}

}
catch(error) {
Logger.log(error);
}
finally {
lock.releaseLock();
return;
}

}

function getDataColumns(data) {
return Object.keys(data).filter(function(column) {
return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
});
}

function getFieldFromData(field, data) {
var values = data[field] || '';
var output = values.join ? values.join(', ') : values;
return output;
}

Agregar endpoint de Google Apps Script

Crear instancia para bbdd de psql - para probar strapi

Cambiar logo.svg con logo de metadat

./app-metadar/public/img/svg/logo.svg

Quitar boton de "buy me a pizza "

en Footer

NOTAS en general

NOTAS

1 - index.html (./app-metadat/index.html)

Este es un archivo HTML básico utilizado en la mayoría de los proyectos de React creados con Create React App. Actúa como la "carcasa" para tu aplicación React. El contenido principal de tu aplicación se insertará en el <div id="root"></div>, que es donde React "monta" la aplicación.

Meta tags:

Estas etiquetas proporcionan metadatos sobre el documento HTML que son utilizados por los navegadores y otros servicios (como los motores de búsqueda).

• charset="utf-8": Define la codificación de caracteres del documento.
• viewport: Asegura que la página sea responsive y se vea bien en todos los dispositivos.
• theme-color: Define el color del tema para las barras de dirección del navegador.
• description, keywords, og:, y twitter:: Estas etiquetas son útiles para SEO y cuando la página se comparte en redes sociales como Facebook y Twitter.

Vínculo a Favicon:

Esto vincula el favicon (el pequeño ícono que ves en la pestaña del navegador) a tu página web. %PUBLIC_URL% es una variable especial que apunta al directorio público de tu proyecto.
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Cambiar colores a botones

#2E186A -> Azul default
#FF825C -> Naranja default

4FC2F0 -> Celeste Metadat
173245 -> Azul marino Metadat
rgb(57,102,124) -> Verde Metadat

Cambiar tipo de letra para la web

Arboria-Medium

Probar Strapi como backend. Para tener un endpoint en el cual mandar y luego almacenar los datos.

https://www.youtube.com/watch?v=BHly5BDJ04s

Ajustar la posición del logo en la web

buscar plantilla de react con typescript

Adaptar el archivo manifest.json

Cambiar short_name y name

cambiar imagenes .svg

Hacer backend (API) para "ContactForm"

Voy hacer una api en la VM donde tengo desplegado la pagina web, para que reciba y almacene los datos en un sqlite, o excel, o alguan bbdd.

Cambiar colores a letra