create new html views
This commit is contained in:
@@ -3,6 +3,7 @@ package api
|
|||||||
import (
|
import (
|
||||||
"database/sql"
|
"database/sql"
|
||||||
"duhweb/internal/store"
|
"duhweb/internal/store"
|
||||||
|
"fmt"
|
||||||
"html/template"
|
"html/template"
|
||||||
"net/http"
|
"net/http"
|
||||||
)
|
)
|
||||||
@@ -20,25 +21,35 @@ func (h *ProjectHandler) Render(w http.ResponseWriter, tmpl string, data interfa
|
|||||||
}
|
}
|
||||||
|
|
||||||
func NewProjectHandler(db *sql.DB) *ProjectHandler {
|
func NewProjectHandler(db *sql.DB) *ProjectHandler {
|
||||||
|
tmpl := template.Must(template.New("").ParseGlob("views/*.html"))
|
||||||
|
template.Must(tmpl.ParseGlob("views/partials/*.html"))
|
||||||
|
|
||||||
return &ProjectHandler{
|
return &ProjectHandler{
|
||||||
Templates: template.Must(template.ParseGlob("views/*.html")),
|
Templates: tmpl,
|
||||||
ProjectStore: store.NewSQLiteProjectStore(db),
|
ProjectStore: store.NewSQLiteProjectStore(db),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func (h *ProjectHandler) InitPage(w http.ResponseWriter, r *http.Request) {
|
func (h *ProjectHandler) InitPage(w http.ResponseWriter, r *http.Request) {
|
||||||
|
var hxRequest = r.Header.Get("HX-Request")
|
||||||
|
if hxRequest != "true" {
|
||||||
h.Render(w, "index", nil)
|
h.Render(w, "index", nil)
|
||||||
}
|
return
|
||||||
|
}
|
||||||
func (h *ProjectHandler) AboutPage(w http.ResponseWriter, r *http.Request) {
|
h.Render(w, "about-partial", nil)
|
||||||
h.Render(w, "about", nil)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func (h *ProjectHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
|
func (h *ProjectHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
|
||||||
|
var hxRequest = r.Header.Get("HX-Request")
|
||||||
|
fmt.Println(hxRequest)
|
||||||
projects, err := h.ProjectStore.GetAllProjects()
|
projects, err := h.ProjectStore.GetAllProjects()
|
||||||
if err != nil {
|
if err != nil {
|
||||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if hxRequest != "true" {
|
||||||
h.Render(w, "projects", projects)
|
h.Render(w, "projects", projects)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
h.Render(w, "projects-partial", projects)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ func SetupRoutes(app *app.Application) *chi.Mux {
|
|||||||
r := chi.NewRouter()
|
r := chi.NewRouter()
|
||||||
|
|
||||||
r.Get("/", app.ProjectHandler.InitPage)
|
r.Get("/", app.ProjectHandler.InitPage)
|
||||||
r.Get("/about", app.ProjectHandler.AboutPage)
|
|
||||||
r.Get("/projects", app.ProjectHandler.ProjectsPage)
|
r.Get("/projects", app.ProjectHandler.ProjectsPage)
|
||||||
return r
|
return r
|
||||||
}
|
}
|
||||||
28
views/footer.html
Normal file
28
views/footer.html
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{{ block "footer" .}}
|
||||||
|
<footer id="contact" class="bg-gray-100 mt-auto py-10">
|
||||||
|
<div class="container mx-auto text-center">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Feel free to reach out via email or connect on my socials.
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center gap-6">
|
||||||
|
<a href="mailto:your@email.com" class="text-blue-600 hover:underline"
|
||||||
|
>Email</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/in/yourprofile"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-600 hover:underline"
|
||||||
|
>LinkedIn</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://github.com/yourusername"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-600 hover:underline"
|
||||||
|
>GitHub</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{{ end }}
|
||||||
33
views/header.html
Normal file
33
views/header.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{{ block "header" .}}
|
||||||
|
<header class="bg-white shadow-md">
|
||||||
|
<nav class="container mx-auto flex justify-between items-center py-4 px-6">
|
||||||
|
<a href="#" class="text-xl font-bold text-blue-600">Your Name</a>
|
||||||
|
<div class="space-x-6">
|
||||||
|
<a
|
||||||
|
id="aboutNavLink"
|
||||||
|
hx-get="/"
|
||||||
|
hx-target="#content"
|
||||||
|
hx-push-url="true"
|
||||||
|
class="nav-link active"
|
||||||
|
>About</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="projectsNavLink"
|
||||||
|
hx-get="/projects"
|
||||||
|
hx-target="#content"
|
||||||
|
hx-push-url="true"
|
||||||
|
class="nav-link"
|
||||||
|
>Projects</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="experiencesNavLink"
|
||||||
|
hx-get="/experience"
|
||||||
|
hx-target="#content"
|
||||||
|
hx-push-url="true"
|
||||||
|
class="nav-link"
|
||||||
|
>Experience</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
{{ end }}
|
||||||
160
views/index.html
160
views/index.html
@@ -11,159 +11,13 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
|
<body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
|
||||||
<!-- Navbar -->
|
<!-- Header Section -->
|
||||||
<header class="bg-white shadow-md">
|
{{ template "header" }}
|
||||||
<nav
|
<!-- About Section -->
|
||||||
class="container mx-auto flex justify-between items-center py-4 px-6"
|
<div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
|
||||||
>
|
<!-- Footer Section -->
|
||||||
<a href="#" class="text-xl font-bold text-blue-600">Your Name</a>
|
{{ template "footer" }}
|
||||||
<div class="space-x-6">
|
|
||||||
<a
|
|
||||||
id="aboutNavLink"
|
|
||||||
hx-get="/about"
|
|
||||||
hx-target="#content"
|
|
||||||
hx-push-url="/"
|
|
||||||
class="nav-link active"
|
|
||||||
>About</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
id="projectsNavLink"
|
|
||||||
hx-get="/projects"
|
|
||||||
hx-target="#content"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="nav-link"
|
|
||||||
>Projects</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
id="experiencesNavLink"
|
|
||||||
hx-get="/experience"
|
|
||||||
hx-target="#content"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="nav-link"
|
|
||||||
>Experience</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.querySelectorAll('.nav-link').forEach((link) => {
|
|
||||||
link.addEventListener('click', function (e) {
|
|
||||||
document
|
|
||||||
.querySelectorAll('.nav-link')
|
|
||||||
.forEach((l) => l.classList.remove('active'));
|
|
||||||
this.classList.add('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="flex-grow">{{ template "about" . }}</div>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<footer id="contact" class="bg-gray-100 mt-auto py-10">
|
|
||||||
<div class="container mx-auto text-center">
|
|
||||||
<h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
|
|
||||||
<p class="mb-6">
|
|
||||||
Feel free to reach out via email or connect on my socials.
|
|
||||||
</p>
|
|
||||||
<div class="flex justify-center gap-6">
|
|
||||||
<a href="mailto:your@email.com" class="text-blue-600 hover:underline"
|
|
||||||
>Email</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://linkedin.com/in/yourprofile"
|
|
||||||
target="_blank"
|
|
||||||
class="text-blue-600 hover:underline"
|
|
||||||
>LinkedIn</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://github.com/yourusername"
|
|
||||||
target="_blank"
|
|
||||||
class="text-blue-600 hover:underline"
|
|
||||||
>GitHub</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
|
{{ template "script" }}
|
||||||
<script>
|
|
||||||
function updateActiveNav() {
|
|
||||||
const url = window.location.pathname;
|
|
||||||
console.log(url);
|
|
||||||
document.querySelectorAll('.nav-link').forEach((link) => {
|
|
||||||
link.classList.remove('active');
|
|
||||||
if (
|
|
||||||
link.getAttribute('hx-get') === url ||
|
|
||||||
(url == '/' && link.id == 'aboutNavLink')
|
|
||||||
) {
|
|
||||||
console.log('Innnnnn', link.id);
|
|
||||||
link.classList.add('active');
|
|
||||||
// e.preventDefault();
|
|
||||||
// e.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document.addEventListener('DOMContentLoaded', (event) => {
|
|
||||||
document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
|
|
||||||
console.log('htmx:pushedIntoHistory', evt);
|
|
||||||
updateActiveNav();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.body.addEventListener('htmx:historyRestore', function () {
|
|
||||||
console.log('htmx:historyRestore');
|
|
||||||
updateActiveNav();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
{{ end }} {{ block "about" . }}
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section
|
|
||||||
class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
|
|
||||||
>
|
|
||||||
<h1 class="text-4xl md:text-6xl font-bold mb-4">
|
|
||||||
Hi, I'm <span class="text-blue-600">Your Name</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-lg md:text-xl mb-6 max-w-2xl">
|
|
||||||
A <span class="font-semibold">[Your Role]</span> who loves building
|
|
||||||
[something about what you do].
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<a
|
|
||||||
id="projectButton"
|
|
||||||
hx-get="/projects"
|
|
||||||
hx-target="#content"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
|
|
||||||
>View Projects</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
|
|
||||||
>Contact Me</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- About Section -->
|
|
||||||
<section id="about" class="container mx-auto py-16 px-6">
|
|
||||||
<h2 class="text-3xl font-bold mb-6">About Me</h2>
|
|
||||||
<p class="text-lg leading-relaxed max-w-3xl">
|
|
||||||
I’m a [Your Profession] with experience in [key skills]. I enjoy solving
|
|
||||||
problems, learning new technologies, and building applications that make an
|
|
||||||
impact. Currently exploring
|
|
||||||
<span class="text-blue-600 font-semibold">Go</span>,
|
|
||||||
<span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
{{ end }} {{ block "projects" . }}
|
|
||||||
<h2 class="text-3xl font-bold mb-6">Projects</h2>
|
|
||||||
{{ range . }} {{ template "project" . }} {{ end}} {{ end }} {{ block "project" .
|
|
||||||
}}
|
|
||||||
<div class="mb-4">
|
|
||||||
<a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
|
|
||||||
{{ .Description }}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
41
views/partials/about-partial.html
Normal file
41
views/partials/about-partial.html
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{{ block "about-partial" . }}
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section
|
||||||
|
class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
|
||||||
|
>
|
||||||
|
<h1 class="text-4xl md:text-6xl font-bold mb-4">
|
||||||
|
Hi, I'm <span class="text-blue-600">Your Name</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl mb-6 max-w-2xl">
|
||||||
|
A <span class="font-semibold">[Your Role]</span> who loves building
|
||||||
|
[something about what you do].
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a
|
||||||
|
id="projectButton"
|
||||||
|
hx-get="/projects"
|
||||||
|
hx-target="#content"
|
||||||
|
hx-push-url="true"
|
||||||
|
class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
|
||||||
|
>View Projects</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#contact"
|
||||||
|
class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
|
||||||
|
>Contact Me</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="container mx-auto py-16 px-6">
|
||||||
|
<h2 class="text-3xl font-bold mb-6">About Me</h2>
|
||||||
|
<p class="text-lg leading-relaxed max-w-3xl">
|
||||||
|
I’m a [Your Profession] with experience in [key skills]. I enjoy solving
|
||||||
|
problems, learning new technologies, and building applications that make an
|
||||||
|
impact. Currently exploring
|
||||||
|
<span class="text-blue-600 font-semibold">Go</span>,
|
||||||
|
<span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
9
views/partials/projects-partial.html
Normal file
9
views/partials/projects-partial.html
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{{ block "projects-partial" . }}
|
||||||
|
<h2 class="text-3xl font-bold mb-6">Projects</h2>
|
||||||
|
{{ range . }} {{ template "project-partial-range" . }} {{ end}} {{ end }} {{
|
||||||
|
block "project-partial-range" . }}
|
||||||
|
<div class="mb-4">
|
||||||
|
<a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
|
||||||
|
{{ .Description }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
23
views/projects.html
Normal file
23
views/projects.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{{ block "projects" . }}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>My CV Website</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
|
||||||
|
<link rel="stylesheet" href="/css/index.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
|
||||||
|
<!-- Header Section -->
|
||||||
|
{{ template "header" }}
|
||||||
|
<!-- Projects Section -->
|
||||||
|
<div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
|
||||||
|
<!-- Footer Section -->
|
||||||
|
{{ template "footer" }}
|
||||||
|
</body>
|
||||||
|
{{ template "script" }}
|
||||||
|
</html>
|
||||||
|
{{ end }}
|
||||||
35
views/script.html
Normal file
35
views/script.html
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{{ block "script" .}}
|
||||||
|
<script>
|
||||||
|
function updateActiveNav() {
|
||||||
|
const url = window.location.pathname;
|
||||||
|
document.querySelectorAll('.nav-link').forEach((link) => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('hx-get') === url) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
updateActiveNav();
|
||||||
|
document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
|
||||||
|
updateActiveNav();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.addEventListener('htmx:historyRestore', function () {
|
||||||
|
updateActiveNav();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.addEventListener('htmx:beforeRequest', function (evt) {
|
||||||
|
const elt = evt.target;
|
||||||
|
if (
|
||||||
|
elt.classList &&
|
||||||
|
elt.classList.contains('nav-link') &&
|
||||||
|
elt.classList.contains('active')
|
||||||
|
) {
|
||||||
|
evt.preventDefault();
|
||||||
|
evt.stopPropagation();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{{ end }}
|
||||||
Reference in New Issue
Block a user