Skip to content

Commit 0678227

Browse files
Gaurav-GosainGaurav-Gosain
committedJun 8, 2024
feat: initial website design
1 parent 68bf5fc commit 0678227

File tree

9 files changed

+534
-18
lines changed

9 files changed

+534
-18
lines changed
 

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@ result/
2323
# Go workspace file
2424
go.work
2525

26-
26+
golang.ae
27+
golang-ae

‎internal/template/template.templ

+118-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,138 @@
11
package template
22

3+
type NavbarItem struct {
4+
Name string
5+
Link templ.SafeURL
6+
}
7+
8+
type Social struct {
9+
Icon string
10+
Link templ.SafeURL
11+
}
12+
313
templ Base(title string) {
414
<html>
515
<head>
616
<meta charset="UTF-8"/>
717
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
818
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
20+
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
21+
<script>
22+
tailwind.config = {
23+
theme: {
24+
extend: {},
25+
},
26+
darkMode: "class"
27+
};
28+
</script>
29+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
30+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
31+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
32+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/>
933
<title>{ title }</title>
1034
<link rel="icon" type="image/x-icon" href="public/favicon.ico"/>
35+
<style>
36+
html, body {
37+
font-family: 'Inter', sans-serif;
38+
margin: 0;
39+
padding: 0;
40+
}
41+
42+
.space-mono {
43+
font-family: 'Space Mono', monospace;
44+
font-weight: 400;
45+
line-height: 1.5;
46+
}
47+
</style>
1148
</head>
12-
<body>
13-
<main class="p-6 grid gap-4">
49+
<body class="bg-[#F5F5F5] dark:bg-[#1E1E1E] dark:text-[#D9D9D9] transition-all duration-500">
50+
<main>
1451
{ children... }
1552
</main>
1653
</body>
1754
</html>
1855
}
1956

20-
templ Home(title string) {
57+
templ Home(title string, navbar []NavbarItem, socials []Social) {
2158
@Base(title) {
22-
<div>Under Construction</div>
59+
// add dark mode toggle
60+
<div class="fixed bottom-4 right-4 z-50">
61+
<button
62+
class="w-12 h-12 rounded-full text-xl bg-[#D9D9D9] hover:bg-[#98989F] dark:bg-[#2f2f2f] dark:hover:bg-[#464646] transition-all duration-300"
63+
onclick="document.documentElement.classList.toggle('dark')"
64+
>
65+
<i class="fa-solid fa-moon dark:hidden"></i>
66+
<i class="fa-solid fa-sun hidden dark:block"></i>
67+
</button>
68+
</div>
69+
// place hummus.png on the bottom left corner
70+
<img
71+
src="public/hummus.svg"
72+
class="fixed -bottom-8 -left-8 w-40 h-auto transform rotate-[18deg] hover:-bottom-4 hover:rotate-[20deg] hover:-left-4 transition-all duration-300 z-50"
73+
/>
74+
// main content
75+
<div class="max-w-xl mx-auto flex flex-col p-4 md:p-0 space-y-8 md:space-y-12 md:min-h-screen">
76+
<div></div>
77+
<div class="text-lg md:text-2xl text-white">
78+
<p class="p-4 text-center font-medium tracking-wide bg-[#00ADD8] rounded-xl">
79+
Stay tuned for the announcement of
80+
<br class="hidden md:block"/>
81+
the first official GoUAE Meetup!
82+
</p>
83+
</div>
84+
<div class="text-lg md:text-3xl mx-auto flex flex-col items-center justify-center md:items-start">
85+
<div class="space-mono flex flex-wrap items-center justify-center gap-4 dark:text-[#98989F]">
86+
<span>A </span>
87+
// GO logo
88+
<img src="public/go.png" class="h-4 md:h-6 w-auto"/>
89+
<span>User Group </span>
90+
<span>in the 🇦🇪 UAE</span>
91+
<span>For the </span>
92+
// MENA logo
93+
<img src="public/mena.png" class="h-6 rounded-md md:h-16 w-auto md:rounded-xl"/>
94+
<span>MENA Region</span>
95+
</div>
96+
</div>
97+
<div class="flex justify-center md:justify-evenly items-center text-lg flex-wrap gap-4 md:gap-0">
98+
for i, item := range navbar {
99+
<a href={ item.Link } class="no-underline hover:bg-[#00ADD8] hover:text-white rounded-full px-2 py-1">{ item.Name }</a>
100+
if i < len(navbar) - 1 {
101+
<i class="fa-solid fa-xmark hidden md:block text-[#CAC6C6] text-xs"></i>
102+
}
103+
}
104+
</div>
105+
<p class="pt-8 text-md md:text-xl md:text-justify text-[#3D3B3B] dark:text-[#D9D9D9]">
106+
GoUAE is a UAE-based community for anyone
107+
interested in the Go programming language.
108+
GoUAE was founded on Saturday, May 25, 2024,
109+
and since then the group has grown to over 100 members.
110+
</p>
111+
<div class="flex-1"></div>
112+
<div class="flex justify-center md:justify-between items-center flex-col md:flex-row gap-4 md:gap-0 text-center md:text-left">
113+
<div class="text-[#676767] dark:text-[#D9D9D9]">
114+
<div class="font-medium">
115+
&copy; GoUAE 2024
116+
</div>
117+
<div class="font-bold">
118+
A Coders(HQ) Community
119+
</div>
120+
</div>
121+
<div class="flex flex-wrap items-center justify-center gap-x-2 md:grid md:grid-cols-3 md:grid-rows-2">
122+
<div class="hidden md:block"></div>
123+
for _, social := range socials {
124+
<a
125+
href={ social.Link }
126+
target="_blank"
127+
class="w-12 h-12 rounded-full flex items-center justify-center no-underline text-[#464646] dark:text-[#D9D9D9] hover:bg-[#00ADD8] hover:text-white"
128+
>
129+
<i class={ "text-2xl fa-brands", social.Icon }></i>
130+
</a>
131+
}
132+
</div>
133+
</div>
134+
<div></div>
135+
</div>
136+
<div class="h-24 md:h-0"></div>
23137
}
24138
}

‎internal/template/template_templ.go

+94-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎justfile

+6
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ gen: templates
44
run:
55
go run main.go
66

7+
dev:
8+
templ generate --watch --proxy="http://localhost:8080" --cmd="go run ."
9+
10+
deploy:
11+
templ generate && go build && sudo systemctl restart gouae.service
12+
713
templates:
814
templ generate
915

‎main.go

+40-8
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,43 @@ package main
22

33
import (
44
"context"
5+
"flag"
56
"log"
67
"net/http"
7-
"os"
88
"path/filepath"
99

10+
"github.com/a-h/templ"
1011
"github.com/gouae/golang.ae/internal/template"
1112
)
1213

1314
func main() {
1415
port := "8080"
1516

16-
if value, ok := os.LookupEnv("PORT"); ok {
17-
port = value
17+
// parse command line arguments for --port flag if no value, use default
18+
portFlag := flag.String("port", port, "The port to listen on")
19+
20+
flag.Parse()
21+
22+
if portFlag != nil {
23+
port = *portFlag
24+
}
25+
26+
safeURL := templ.SafeURL("/")
27+
28+
navbar := []template.NavbarItem{
29+
{Name: "Organizers", Link: safeURL},
30+
{Name: "Meetups", Link: safeURL},
31+
{Name: "Projects", Link: safeURL},
32+
{Name: "Gallery", Link: safeURL},
33+
{Name: "Contact", Link: safeURL},
34+
}
35+
36+
socials := []template.Social{
37+
{Icon: "fa-twitter", Link: templ.SafeURL("/twitter")},
38+
{Icon: "fa-whatsapp", Link: templ.SafeURL("/whatsapp")},
39+
{Icon: "fa-linkedin", Link: templ.SafeURL("/linkedin")},
40+
{Icon: "fa-discord", Link: templ.SafeURL("/discord")},
41+
{Icon: "fa-github", Link: templ.SafeURL("/github")},
1842
}
1943

2044
mux := http.NewServeMux()
@@ -25,11 +49,7 @@ func main() {
2549
return
2650
}
2751

28-
template.Home("Under Construction").Render(context.TODO(), w)
29-
})
30-
31-
mux.HandleFunc("GET /favicon.ico", func(w http.ResponseWriter, r *http.Request) {
32-
http.ServeFile(w, r, "./public/favicon.ico")
52+
template.Home("golang.ae", navbar, socials).Render(context.TODO(), w)
3353
})
3454

3555
mux.HandleFunc("GET /public/", func(w http.ResponseWriter, r *http.Request) {
@@ -46,6 +66,18 @@ func main() {
4666
http.Redirect(w, r, "https://chat.whatsapp.com/DEmS5AmfJSfBmH40aYLih1", http.StatusMovedPermanently)
4767
})
4868

69+
mux.HandleFunc("GET /github", func(w http.ResponseWriter, r *http.Request) {
70+
http.Redirect(w, r, "https://github.com/gouae", http.StatusMovedPermanently)
71+
})
72+
73+
mux.HandleFunc("GET /linkedin", func(w http.ResponseWriter, r *http.Request) {
74+
http.Redirect(w, r, "https://linkedin.com/company/gouae", http.StatusMovedPermanently)
75+
})
76+
77+
mux.HandleFunc("GET /twitter", func(w http.ResponseWriter, r *http.Request) {
78+
http.Redirect(w, r, "https://twitter.com/gouae", http.StatusMovedPermanently)
79+
})
80+
4981
log.Printf("Server is running on http://localhost:%s\n", port)
5082
log.Fatal(http.ListenAndServe(":"+port, mux))
5183
}

‎public/go.png

1.28 KB
Loading

‎public/hummus.svg

+266
Loading

‎public/mena.png

308 KB
Loading

‎tailwind.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
};

0 commit comments

Comments
 (0)
Please sign in to comment.