accept tags as well

README.org

@@ -35,6 +35,7 @@ CREATE TABLE sites (
     code   VARCHAR(2),
     title  VARCHAR(35) NOT NULL,
     slogan VARCHAR(100),
+    tags   TEXT,
     banner TEXT,
     raw    JSONB NOT NULL,
     auth   INTEGER,

public/client.js

@@ -154,6 +154,15 @@ function initializeEventListeners() {
         }
     });
 
+  document.getElementById('buyModeDirectoryInput').addEventListener('input', function() {
+    const input = this.value.trim();
+    const sanitizedDirectory = sanitizeDirectoryTitle(input);
+    const previewElement = document.getElementById('checkdir-preview');
+
+    previewElement.style.display = "block"
+    previewElement.innerHTML = `Su sitio se publicará en:<br><a href="#">https://conex.one/${sanitizedDirectory}</a>`;
+  });
+
     document.getElementById("continueToEditModeButton").addEventListener('click', () =>
         editMode(extractSitePath(document.getElementById("editModeDirectoryInput").value))
     );
@@ -372,15 +381,12 @@ function loadLanguage(lang) {
     fetch(`./lang/${lang}.json`)
         .then(response => response.json())
         .then(translations => {
-            // Find all elements with a 'data-translate' attribute
             document.querySelectorAll('[data-translate]').forEach(element => {
                 const translationKey = element.getAttribute('data-translate');
 
-                // Check if the element is an input field (update placeholder)
                 if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea') {
                     element.placeholder = translations[translationKey];
                 } else {
-                    // Update text content for non-input elements
                     element.innerText = translations[translationKey];
                 }
             });
@@ -401,10 +407,25 @@ function dashboardMode() {
 
 function buyMode() {
     localStorage.removeItem('conex_data');
+    title = document.getElementById('buyModeDirectoryInput').value.trim();
+    directory = sanitizeDirectoryTitle(title);
+
+    let tagsInput = document.getElementById('buyModeTagsInput').value.trim();
+    let tags = tagsInput
+        .split(/[\s,]+/)
+        .map(tag => tag.trim().toLowerCase().replace(/[^a-z0-9]/g, ''))
+        .filter(tag => tag.length > 0);
+
+    const tagsString = tags.join(' ');
+
     const dataToSave = {
-        title: document.getElementById('buyModeDirectoryInput').value.trim(),
+        title: title,
+        directory: directory,
+        tags: tagsString
     };
+
     localStorage.setItem('conex_data', JSON.stringify(dataToSave));
+
     loadEditorState();
 
     closeDialog();

public/index.html

@@ -36,7 +36,7 @@
       <input type="file" id="uploadBannerBtn" class="tool-button-input" accept="image/*">
       <label for="uploadBannerBtn" class="tool-button">
         <img src="/static/svg/image.svg" alt="Edit Icon" class="icon">
-        <span class="loader"></span>
+        <span class="loader" style="border: 0.2em solid #fff"></span>
       </label>
     </div>
     <img id="banner" src="/static/svg/banner.svg" class="banner-image"/>
@@ -103,7 +103,10 @@
       <p data-translate="buyDialogParagraph"></p>
       <div class="message success-message" id="checkdir-success-message"></div>
       <div class="message error-message" id="checkdir-error-message"></div>
+      <div class="message neutral-message" id="checkdir-preview"></div>
       <input class="input-dialog" type="text" id="buyModeDirectoryInput" maxlength="35" placeholder="Mi Sitio"><br>
+      <p data-translate="buyDialogTags"></p>
+      <input class="input-dialog" type="text" id="buyModeTagsInput" data-translate="buyModeTagsInput" placeholder=""><br>
       <button id="continueToBuyModeButton" class="right">
         <span data-translate="continueToBuyModeButton"></span>
       </button>

public/lang/es.json

@@ -8,6 +8,8 @@
   "continueEditingModeButton": "Continuar editando",
   "buyDialogHeader": "Diseñar un nuevo sitio web",
   "buyDialogParagraph": "Ingresa el nombre del sitio y revisa el enlace en el que se publicará una vez adquirido.",
+  "buyDialogTags": "Las etiquetas son palabras clave que ayudan a las personas a encontrar tu sitio, por ejemplo, las etiquetas de una página web relacionada al turismo: vacaciones, paseos, viajes, destinos, tours",
+  "buyModeTagsInput": "vacaciones  paseos  viajes  destinos  tours",
   "updateContentDialogHeader": "Actualizar mi sitio",
   "updateContentDialogParagraph": "Para actualizar el sitio web, requerimos confirmar que el sitio es suyo. Para esto, enviaremos un correo electrónico a la cuenta de correo con la que compró este sitio web, con un código temporal de 6 dígitos que expirará en 5 minutos luego de ser enviado. Por favor, presione el botón para enviar el código y luego compruebe su identidad digitándolo en la casilla.",
   "tempCodePlaceholder": "Código de 6 dígitos enviado a su correo",

public/paypal.js

@@ -52,6 +52,7 @@ paypal.Buttons({
                 banner: savedData.banner,
                 title: savedData.title,
                 slogan: savedData.slogan,
+                tags: savedData.tags,
                 editor_data: savedData.editor_data
             };
 

public/static/css/style.css

@@ -466,10 +466,15 @@ a {
   color: #721c24;
 }
 
+.neutral-message {
+  background-color: #d1ecf1;
+  color: #0c5460;
+}
+
 .loader {
   width: 1.5em;
   height: 1.5em;
-  border: 0.2em solid #FFF;
+  border: 0.2em solid var(--color);
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;

server/db.go

@@ -57,6 +57,7 @@ func RegisterSitePayment(db *sql.DB, capture Capture, cart ConexData) error {
 		directory  string
 		title      string
 		slogan     string
+		tags       string
 		banner     string
 		editorData json.RawMessage
 	)
@@ -79,6 +80,7 @@ func RegisterSitePayment(db *sql.DB, capture Capture, cart ConexData) error {
 	directory = cart.Directory
 	title = cart.Title
 	slogan = cart.Slogan
+	tags = cart.Tags
 	banner = cart.Banner
 	editorData = cart.EditorData
 
@@ -90,12 +92,12 @@ func RegisterSitePayment(db *sql.DB, capture Capture, cart ConexData) error {
 	if newSite == sql.ErrNoRows {
 		if err := db.QueryRow(`
 			INSERT INTO sites
-			(folder, status, due, name, sur, email, phone, code, title, slogan, banner, raw)
-			VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+			(folder, status, due, name, sur, email, phone, code, title, slogan, tags, banner, raw)
+			VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13)
 			RETURNING id
 			`, directory, wstatus, due,
 			name, surname, email, phone, country, title, slogan,
-			banner, editorData).Scan(&pkey); err != nil {
+			tags, banner, editorData).Scan(&pkey); err != nil {
 			return fmt.Errorf("%s: %v", errDBRegisterSite, err)
 		}
 	} else {

server/main.go

@@ -54,6 +54,7 @@ type ConexData struct {
 	Banner     string          `json:"banner"`
 	Title      string          `json:"title"`
 	Slogan     string          `json:"slogan"`
+	Tags       string          `json:"tags"`
 	EditorData json.RawMessage `json:"editor_data"`
 }