DilankaHer/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle browser back button with nav link

Browse Source
This commit is contained in:
DilankaHer
2025-11-04 00:43:23 +07:00
parent 8ea1e78bba
commit 080d49ce59
8 changed files with 203 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@@ -30,4 +30,10 @@ go.work.sum
# Editor/IDE # Editor/IDE
# .idea/ # .idea/
# .vscode/ .vscode/
# Hot reload
*.toml
/tmp

39
Dockerfile Normal file
View File

@@ -0,0 +1,39 @@
# ------------------------------------------------------
# 1. Build Stage
# ------------------------------------------------------
FROM golang:1.25-alpine AS builder
# Install necessary build tools for SQLite (CGO)
RUN apk add --no-cache gcc musl-dev sqlite-dev
WORKDIR /app
# Cache dependencies
COPY go.mod go.sum ./
RUN go mod download
# Copy source files
COPY . .
# Build with CGO enabled for SQLite
RUN CGO_ENABLED=1 GOOS=linux go build -o server main.go
# ------------------------------------------------------
# 2. Runtime Stage
# ------------------------------------------------------
FROM alpine:3.20
# Install SQLite (if your app interacts directly with .db file)
RUN apk add --no-cache sqlite
WORKDIR /app
# Copy binary and required files
COPY --from=builder /app/server .
COPY --from=builder /app/css ./css
COPY --from=builder /app/views ./views
COPY --from=builder /app/my_website.db ./
EXPOSE 8080
CMD ["./server"]

4
go.mod
View File

@@ -1,7 +1,7 @@
module duhweb module duhweb
go 1.24.5 go 1.25.3
require github.com/go-chi/chi/v5 v5.2.3 require github.com/go-chi/chi/v5 v5.2.3
require github.com/mattn/go-sqlite3 v1.14.32 // indirect require github.com/mattn/go-sqlite3 v1.14.32

6
internal/api/project_handler.go
View File

@@ -8,7 +8,7 @@ import (
) )
type ProjectHandler struct { type ProjectHandler struct {
Templates *template.Template Templates *template.Template
ProjectStore *store.SQLiteProjectStore ProjectStore *store.SQLiteProjectStore
} }
@@ -21,7 +21,7 @@ func (h *ProjectHandler) Render(w http.ResponseWriter, tmpl string, data interfa
func NewProjectHandler(db *sql.DB) *ProjectHandler { func NewProjectHandler(db *sql.DB) *ProjectHandler {
return &ProjectHandler{ return &ProjectHandler{
Templates: template.Must(template.ParseGlob("views/*.html")), Templates: template.Must(template.ParseGlob("views/*.html")),
ProjectStore: store.NewSQLiteProjectStore(db), ProjectStore: store.NewSQLiteProjectStore(db),
} }
} }
@@ -41,4 +41,4 @@ func (h *ProjectHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
return return
} }
h.Render(w, "projects", projects) h.Render(w, "projects", projects)
} }

4
internal/store/database.go
View File

@@ -8,7 +8,7 @@ import (
) )
func Open() (*sql.DB, error) { func Open() (*sql.DB, error) {
db, err := sql.Open("sqlite3", "C:/Users/dilan/Documents/Go/my_website_db.db") db, err := sql.Open("sqlite3", "./my_website.db")
if err != nil { if err != nil {
return nil, fmt.Errorf("db open: %w", err) return nil, fmt.Errorf("db open: %w", err)
} }
@@ -19,4 +19,4 @@ func Open() (*sql.DB, error) {
fmt.Println("Connected to Database...") fmt.Println("Connected to Database...")
return db, nil return db, nil
} }

BIN
my_website.db Normal file
View File

Binary file not shown.

257
views/index.html
View File

@@ -1,120 +1,161 @@
{{ block "index" . }} {{ block "index" . }}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My CV Website</title> <title>My CV Website</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.2"></script> <script src="https://unpkg.com/htmx.org@1.9.2"></script>
<link rel="stylesheet" href="/css/index.css"> <link rel="stylesheet" href="/css/index.css" />
</head> </head>
<body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
<!-- Navbar --> <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
<header class="bg-white shadow-md"> <!-- Navbar -->
<nav class="container mx-auto flex justify-between items-center py-4 px-6"> <header class="bg-white shadow-md">
<a href="#" class="text-xl font-bold text-blue-600">Your Name</a> <nav
<div class="space-x-6"> class="container mx-auto flex justify-between items-center py-4 px-6"
<a 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 href="#" class="text-xl font-bold text-blue-600">Your Name</a>
<a class="nav-link">Experience</a> <div class="space-x-6">
<a class="nav-link">Contact</a> <a
</div> id="aboutNavLink"
</nav> hx-get="/about"
</header> 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
>
</div>
</nav>
</header>
<script> <script>
document.querySelectorAll('.nav-link').forEach(link => { document.querySelectorAll('.nav-link').forEach((link) => {
link.addEventListener('click', function (e) { link.addEventListener('click', function (e) {
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); document
this.classList.add('active'); .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>
<script>
function initProjectButton() {
const button = document.getElementById("projectButton");
if (button && !button.dataset.bound) {
button.addEventListener("click", function () {
const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach(link => link.classList.remove("active"));
const projectsNavLink = document.getElementById("projectsNavLink");
projectsNavLink.classList.add("active");
});
button.dataset.bound = "true";
}
}
document.addEventListener("DOMContentLoaded", initProjectButton);
document.addEventListener("DOMContentLoaded", (event) => {
document.body.addEventListener("htmx:afterSwap", function(evt) {
if (evt.detail.target.id === "content") {
initProjectButton();
}
}); });
}); });
</script> </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>
<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 }} {{ end }} {{ block "about" . }}
{{ block "about" . }}
<!-- Hero Section --> <!-- 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"> <section
<h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="text-blue-600">Your Name</span></h1> 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"
<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]. <h1 class="text-4xl md:text-6xl font-bold mb-4">
</p> Hi, I'm <span class="text-blue-600">Your Name</span>
<div class="flex gap-4"> </h1>
<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> <p class="text-lg md:text-xl mb-6 max-w-2xl">
<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> A <span class="font-semibold">[Your Role]</span> who loves building
</div> [something about what you do].
</section> </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 --> <!-- About Section -->
<section id="about" class="container mx-auto py-16 px-6"> <section id="about" class="container mx-auto py-16 px-6">
<h2 class="text-3xl font-bold mb-6">About Me</h2> <h2 class="text-3xl font-bold mb-6">About Me</h2>
<p class="text-lg leading-relaxed max-w-3xl"> <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. I’m a [Your Profession] with experience in [key skills]. I enjoy solving
Currently exploring <span class="text-blue-600 font-semibold">Go</span>, <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools. problems, learning new technologies, and building applications that make an
</p> impact. Currently exploring
</section> <span class="text-blue-600 font-semibold">Go</span>,
{{ end }} <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
</p>
{{ block "projects" . }} </section>
<h2 class="text-3xl font-bold mb-6">Projects</h2> {{ end }} {{ block "projects" . }}
{{ range . }} <h2 class="text-3xl font-bold mb-6">Projects</h2>
{{ template "project" . }} {{ range . }} {{ template "project" . }} {{ end}} {{ end }} {{ block "project" .
{{ end}} }}
<div class="mb-4">
<a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
{{ .Description }}
</div>
{{ end }} {{ end }}
{{ block "project" . }}
<div class="mb-4">
<a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> - {{ .Description }}
</div>
{{ end }}

2
views/test.html
View File

@@ -1,4 +1,4 @@
{{ block "index" . }} {{ block "test" . }}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>