Added my name to the bottom

golangServer/go.mod

@@ -9,14 +9,17 @@ require (
 	cloud.google.com/go/compute/metadata v0.6.0 // indirect
 	cloud.google.com/go/longrunning v0.6.2 // indirect
 	cloud.google.com/go/translate v1.12.3 // indirect
+	github.com/aymerick/douceur v0.2.0 // indirect
 	github.com/felixge/httpsnoop v1.0.4 // indirect
 	github.com/go-logr/logr v1.4.2 // indirect
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/google/s2a-go v0.1.8 // indirect
 	github.com/googleapis/enterprise-certificate-proxy v0.3.4 // indirect
 	github.com/googleapis/gax-go/v2 v2.14.0 // indirect
+	github.com/gorilla/css v1.0.1 // indirect
 	github.com/jmoiron/sqlx v1.4.0 // indirect
 	github.com/mattn/go-sqlite3 v1.14.24 // indirect
+	github.com/microcosm-cc/bluemonday v1.0.27 // indirect
 	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.54.0 // indirect
 	go.opentelemetry.io/otel v1.29.0 // indirect

golangServer/go.sum

@@ -11,6 +11,8 @@ cloud.google.com/go/longrunning v0.6.2/go.mod h1:k/vIs83RN4bE3YCswdXC5PFfWVILjm3
 cloud.google.com/go/translate v1.12.3 h1:XJ7LipYJi80BCgVk2lx1fwc7DIYM6oV2qx1G4IAGQ5w=
 cloud.google.com/go/translate v1.12.3/go.mod h1:qINOVpgmgBnY4YTFHdfVO4nLrSBlpvlIyosqpGEgyEg=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
+github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
+github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
 github.com/felixge/httpsnoop v1.0.4 h1:NFTV2Zj1bL4mc9sqWACXbQFVBBg2W3GPvqp8/ESS2Wg=
 github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
 github.com/go-logr/logr v1.2.2/go.mod h1:jdQByPbusPIv2/zmleS9BjJVeZ6kBagPoEUsqbVz/1A=
@@ -25,12 +27,16 @@ github.com/googleapis/enterprise-certificate-proxy v0.3.4 h1:XYIDZApgAnrN1c855gT
 github.com/googleapis/enterprise-certificate-proxy v0.3.4/go.mod h1:YKe7cfqYXjKGpGvmSg28/fFvhNzinZQm8DGnaburhGA=
 github.com/googleapis/gax-go/v2 v2.14.0 h1:f+jMrjBPl+DL9nI4IQzLUxMq7XrAqFYB7hBPqMNIe8o=
 github.com/googleapis/gax-go/v2 v2.14.0/go.mod h1:lhBCnjdLrWRaPvLWhmc8IS24m9mr07qSYnHncrgo+zk=
+github.com/gorilla/css v1.0.1 h1:ntNaBIghp6JmvWnxbZKANoLyuXTPZ4cAMlo6RyhlbO8=
+github.com/gorilla/css v1.0.1/go.mod h1:BvnYkspnSzMmwRK+b8/xgNPLiIuNZr6vbZBTPQ2A3b0=
 github.com/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
 github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mattn/go-sqlite3 v1.14.24 h1:tpSp2G2KyMnnQu99ngJ47EIkWVmliIizyZBfPrBWDRM=
 github.com/mattn/go-sqlite3 v1.14.24/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/microcosm-cc/bluemonday v1.0.27 h1:MpEUotklkwCSLeH+Qdx1VJgNqLlpY2KXwXFM08ygZfk=
+github.com/microcosm-cc/bluemonday v1.0.27/go.mod h1:jFi9vgW+H7c3V0lb6nR74Ib/DIB5OBs92Dimizgw2cA=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0 h1:r6I7RJCN86bpD/FQwedZ0vSixDpwuWREjW9oRMsmqDc=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0/go.mod h1:B9yO6b04uB80CzjedvewuqDhxJxi11s7/GtiGa8bAjI=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.54.0 h1:TT4fX+nBOA/+LUkobKGW1ydGcn+G3vRw9+g5HwCphpk=

golangServer/testing.go

@@ -16,6 +16,8 @@ import (
 
 	translate "cloud.google.com/go/translate/apiv3"
 	"cloud.google.com/go/translate/apiv3/translatepb"
+
+	"github.com/microcosm-cc/bluemonday"
 )
 
 const project_id string = "india-translate-testing-452100"
@@ -72,6 +74,7 @@ var lang_codes []string = []string{
 }
 
 var db *sqlx.DB
+var p *bluemonday.Policy
 
 func cleanup() {
 	db.Close()
@@ -149,6 +152,7 @@ func translateTextHelper(projectID string, sourceLang string, targetLang string,
 func handler(w http.ResponseWriter, r *http.Request) {
 	queries := r.URL.Query()
 	toTranslate := queries["query"][0]
+	toTranslate = p.Sanitize(toTranslate)
 
 	if ok, translation := getCachedTranslation(toTranslate); ok {
 		translationJson, _ := json.Marshal(translation)
@@ -182,6 +186,10 @@ func main() {
 		panic(err)
 	}
 	defer db.Close()
+
+	// HTML sanitization
+	p = bluemonday.UGCPolicy()
+
 	// Catch signal
 	sigs := make(chan os.Signal, 1)
 	signal.Notify(sigs)

index.html

@@ -115,7 +115,8 @@
 
          section#textStuff {
             min-width: 30em;
-            flex: 0 1 0;
+/*            flex: 0 1 0; */
+	    flex: 0 0 auto;
          }
 
 	 section#textStuff ul {
@@ -128,6 +129,62 @@
 		 margin: 1em 0;
 	 }
 
+	 #query {
+		 font-size: 1em;
+		 padding: 6px 8px;
+		 margin-right: 1em;
+	 }
+
+	 #submitButton {
+		 appearance: none;
+		 background-color: #2ea44f;
+		 border: 1px solid rgba(27, 31, 35, .15);
+		 border-radius: 6px;
+		 box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+		 box-sizing: border-box;
+		 color: #fff;
+		 cursor: pointer;
+		 display: inline-block;
+		 font-size: 1em;
+		 font-weight: 600;
+		 line-height: 1.2em;
+		 padding: 6px 16px;
+		 position: relative;
+		 text-align: center;
+		 text-decoration: none;
+		 user-select: none;
+		 -webkit-user-select: none;
+		 touch-action: manipulation;
+		 vertical-align: middle;
+		 white-space: nowrap;
+	 }
+
+#submitButton:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+#submitButton:hover {
+  background-color: #2c974b;
+}
+
+#submitButton:focus {
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
+#submitButton:disabled {
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
+#submitButton:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
+
 			/* Position map load spinner in the middle of the SVG */
 			#svgContainer {
 					position: relative;
@@ -219,6 +276,12 @@
 						font-size: 0.6em;
 					}
          } */
+			p.bottom-of-page {
+				padding-top: 1em;
+				text-align: center;
+				font-size: 1.15em;
+				color: #3D3C3A;
+			}
 		</style>
 	</head>
 	<body>
@@ -227,8 +290,8 @@
 			<h1>Indian Translate</h1>
 			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideTranslationsAndShowText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
-				<input type="text" name="query" id="query" required/>
-				<input type="submit" value="Translate"/>
+				<input type="text" maxlength="20" name="query" id="query" required/>
+				<input type="submit" id="submitButton" value="Translate"/>
 			</form>
 		<progress id="loading-screen" class="loading-indicator"></progress>
 		<h3 id="fetchingText">Fetching translations...</h3>
@@ -240,8 +303,9 @@
 			<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.</li>
 			<li>Translations are retrieved from Google Translate - they may be innacurate.</li>
 			<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.</li>
-				
+			<li>This project was inspired by the <a href="https://ukdataexplorer.com/european-translator/">European Translation Map</a>, as seen on Hacker News.</li>			
 		</ul>
+		<p class="bottom-of-page">Made with love by <a href="https://twomorecents.org">Aadhavan Srinivasan</a></p>
 
 		</section>