fix css not loading

This commit is contained in:
partisan 2024-08-14 13:55:29 +02:00
parent 0165c7e6f7
commit a22c9ffa97
6 changed files with 256 additions and 248 deletions

256
main.go
View file

@ -85,14 +85,26 @@ func main() {
go watchForChanges(dataDir)
// Serve static files (CSS, JS, etc.) from the /assets directory
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir))))
// Route Handlers
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
if r.URL.Path == "/" {
renderIndex(w)
return
}
if r.URL.Path == "/download" {
renderTemplate(w, "download.html", nil)
return
}
if r.URL.Path == "/download-linux" {
renderTemplate(w, "download-linux.html", nil)
return
}
pathParts := strings.Split(r.URL.Path, "/")
if len(pathParts) < 2 {
http.NotFound(w, r)
@ -140,6 +152,116 @@ func main() {
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
}
func renderTemplate(w http.ResponseWriter, tmpl string, data interface{}) {
tmplPath := filepath.Join(templateDir, tmpl)
t, err := template.ParseFiles(tmplPath)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error parsing template %s: %v", tmpl, err)
return
}
err = t.Execute(w, data)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error executing template %s: %v", tmpl, err)
}
}
func renderIndex(w http.ResponseWriter) {
renderTemplate(w, "index.html", nil)
}
func renderBlogEntry(w http.ResponseWriter, blogName string, entryNumber int) {
var blog Blog
for _, b := range blogs {
if b.Name == blogName {
blog = b
break
}
}
var entry BlogEntry
var prevLink, nextLink string
for i, e := range blog.Entries {
if e.Number == entryNumber {
entry = e
if i > 0 {
prevLink = fmt.Sprintf("/%s/%d", blog.Name, blog.Entries[i-1].Number)
}
if i < len(blog.Entries)-1 {
nextLink = fmt.Sprintf("/%s/%d", blog.Name, blog.Entries[i+1].Number)
}
break
}
}
htmlContent := blackfriday.Run([]byte(entry.Content))
content := fmt.Sprintf("<div class=\"blog-entry\"><div>%s</div></div>", htmlContent)
pageData := PageData{
Title: "",
Description: "",
BlogLinks: getBlogLinks(),
Content: template.HTML(content),
PrevLink: prevLink,
NextLink: nextLink,
}
// Use the existing renderTemplate to render with a specific PageData type.
renderTemplate(w, "news.html", pageData)
}
func renderAllBlogs(w http.ResponseWriter, r *http.Request, page int) {
var allEntries []BlogEntry
for _, blog := range blogs {
allEntries = append(allEntries, blog.Entries...)
}
sort.Slice(allEntries, func(i, j int) bool {
return allEntries[i].Date.After(allEntries[j].Date)
})
totalEntries := len(allEntries)
startIndex := (page - 1) * pageSize
endIndex := startIndex + pageSize
if startIndex >= totalEntries {
http.NotFound(w, r)
return
}
if endIndex > totalEntries {
endIndex = totalEntries
}
pagedEntries := allEntries[startIndex:endIndex]
var content strings.Builder
for _, entry := range pagedEntries {
htmlContent := blackfriday.Run([]byte(entry.Content))
content.WriteString(fmt.Sprintf("<div class=\"blog-entry\"><div>%s</div></div>", htmlContent))
}
var prevLink, nextLink string
if startIndex > 0 {
prevLink = fmt.Sprintf("/all?page=%d", page-1)
}
if endIndex < totalEntries {
nextLink = fmt.Sprintf("/all?page=%d", page+1)
}
pageData := PageData{
Title: "All Blogs",
Description: "Combined blog entries from all blogs.",
BlogLinks: getBlogLinks(),
Content: template.HTML(content.String()),
PrevLink: prevLink,
NextLink: nextLink,
}
renderTemplate(w, "news.html", pageData)
}
func getBlogs(dir string) ([]Blog, error) {
var blogs []Blog
@ -161,6 +283,14 @@ func getBlogs(dir string) ([]Blog, error) {
return blogs, nil
}
func getBlogLinks() []string {
var links []string
for _, blog := range blogs {
links = append(links, blog.Name)
}
return links
}
func getBlogEntries(dir string) (Blog, error) {
var entries []BlogEntry
@ -344,132 +474,6 @@ func updateBlogEntries(blogName, path string) {
log.Printf("Created new blog %s with entry %d", blogName, number)
}
func renderBlogEntry(w http.ResponseWriter, blogName string, entryNumber int) {
var blog Blog
for _, b := range blogs {
if b.Name == blogName {
blog = b
break
}
}
var entry BlogEntry
var prevLink, nextLink string
for i, e := range blog.Entries {
if e.Number == entryNumber {
entry = e
if i > 0 {
prevLink = fmt.Sprintf("/%s/%d", blog.Name, blog.Entries[i-1].Number)
}
if i < len(blog.Entries)-1 {
nextLink = fmt.Sprintf("/%s/%d", blog.Name, blog.Entries[i+1].Number)
}
break
}
}
htmlContent := blackfriday.Run([]byte(entry.Content))
content := fmt.Sprintf("<div class=\"blog-entry\"><div>%s</div></div>", htmlContent)
pageData := PageData{
Title: "",
Description: "",
BlogLinks: getBlogLinks(),
Content: template.HTML(content),
PrevLink: prevLink,
NextLink: nextLink,
}
renderTemplate(w, pageData)
}
func getBlogLinks() []string {
var links []string
for _, blog := range blogs {
links = append(links, blog.Name)
}
return links
}
func renderTemplate(w http.ResponseWriter, pageData PageData) {
tmpl, err := template.ParseFiles(filepath.Join(templateDir, "news.html"))
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error parsing template: %v", err)
return
}
err = tmpl.Execute(w, pageData)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error executing template: %v", err)
}
}
func renderIndex(w http.ResponseWriter) {
tmpl, err := template.ParseFiles(filepath.Join(templateDir, "index.html"))
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error parsing template: %v", err)
return
}
err = tmpl.Execute(w, nil)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
log.Printf("Error executing template: %v", err)
}
}
func renderAllBlogs(w http.ResponseWriter, r *http.Request, page int) {
var allEntries []BlogEntry
for _, blog := range blogs {
allEntries = append(allEntries, blog.Entries...)
}
sort.Slice(allEntries, func(i, j int) bool {
return allEntries[i].Date.After(allEntries[j].Date)
})
totalEntries := len(allEntries)
startIndex := (page - 1) * pageSize
endIndex := startIndex + pageSize
if startIndex >= totalEntries {
http.NotFound(w, r)
return
}
if endIndex > totalEntries {
endIndex = totalEntries
}
pagedEntries := allEntries[startIndex:endIndex]
var content strings.Builder
for _, entry := range pagedEntries {
htmlContent := blackfriday.Run([]byte(entry.Content))
content.WriteString(fmt.Sprintf("<div class=\"blog-entry\"><div>%s</div></div>", htmlContent))
}
var prevLink, nextLink string
if startIndex > 0 {
prevLink = fmt.Sprintf("/all?page=%d", page-1)
}
if endIndex < totalEntries {
nextLink = fmt.Sprintf("/all?page=%d", page+1)
}
renderTemplate(w, PageData{
Title: "All Blogs",
Description: "Combined blog entries from all blogs.",
BlogLinks: getBlogLinks(),
Content: template.HTML(content.String()),
PrevLink: prevLink,
NextLink: nextLink,
})
}
func getFileModTime(path string) (time.Time, error) {
info, err := os.Stat(path)
if err != nil {

26
static/css/extras.css Normal file
View file

@ -0,0 +1,26 @@
#wrapper {
position: relative;
z-index: 1;
}
.logo img {
width: 64px;
height: auto;
}
.icon-security {
width: 48px;
height: 48px;
fill: white;
display: inline-block;
object-fit: contain;
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
overflow: visible;
}

View file

@ -16,16 +16,9 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/stars.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<style>
/* Ensure the wrapper content remains above the background */
#wrapper {
position: relative;
z-index: 1;
}
</style>
<link rel="stylesheet" href="static/css/main.css" />
<link rel="stylesheet" href="static/css/stars.css" />
<noscript><link rel="stylesheet" href="static/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
@ -36,6 +29,10 @@
<div id="stars3"></div>
</div>
<!-- Top Floater Footer -->
<div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
</div>
<!-- Wrapper -->
<div id="wrapper">
@ -126,13 +123,13 @@ sudo apk add --allow-untrusted spitfire-browser.apk</code></pre>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js" defer></script>
<script src="assets/js/jquery.scrollex.min.js" defer></script>
<script src="assets/js/jquery.scrolly.min.js" defer></script>
<script src="assets/js/browser.min.js" defer></script>
<script src="assets/js/breakpoints.min.js" defer></script>
<script src="assets/js/util.js" defer></script>
<script src="assets/js/main.js" defer></script>
<script src="static/js/jquery.min.js" defer></script>
<script src="static/js/jquery.scrollex.min.js" defer></script>
<script src="static/js/jquery.scrolly.min.js" defer></script>
<script src="static/js/browser.min.js" defer></script>
<script src="static/js/breakpoints.min.js" defer></script>
<script src="static/js/util.js" defer></script>
<script src="static/js/main.js" defer></script>
</body>
</html>

View file

@ -16,9 +16,9 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/stars.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<link rel="stylesheet" href="static/css/main.css" />
<link rel="stylesheet" href="static/css/stars.css" />
<noscript><link rel="stylesheet" href="static/css/noscript.css" /></noscript>
<style>
.download-section {
text-align: center;
@ -55,12 +55,6 @@
margin-top: 0.5em;
font-size: 1.2em;
}
/* Ensure the wrapper content remains above the background */
#wrapper {
position: relative;
z-index: 1;
}
</style>
</head>
<body class="is-preload">
@ -72,6 +66,11 @@
<div id="stars3"></div>
</div>
<!-- Top Floater Footer -->
<div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
</div>
<!-- Wrapper -->
<div id="wrapper">
@ -95,7 +94,7 @@
<img src="static/images/icons/brands/apple.svg" alt="MacOS">
<span>MacOS</span>
</a>
<a href="download-linux.html" class="download-button button">
<a href="download-linux" class="download-button button">
<img src="static/images/icons/brands/linux.svg" alt="Linux">
<span>Linux</span>
<!-- </a>
@ -158,13 +157,13 @@
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js" defer></script>
<script src="assets/js/jquery.scrollex.min.js" defer></script>
<script src="assets/js/jquery.scrolly.min.js" defer></script>
<script src="assets/js/browser.min.js" defer></script>
<script src="assets/js/breakpoints.min.js" defer></script>
<script src="assets/js/util.js" defer></script>
<script src="assets/js/main.js" defer></script>
<script src="static/js/jquery.min.js" defer></script>
<script src="static/js/jquery.scrollex.min.js" defer></script>
<script src="static/js/jquery.scrolly.min.js" defer></script>
<script src="static/js/browser.min.js" defer></script>
<script src="static/js/breakpoints.min.js" defer></script>
<script src="static/js/util.js" defer></script>
<script src="static/js/main.js" defer></script>
</body>
</html>

View file

@ -16,39 +16,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="static/css/main.css" />
<link rel="stylesheet" href="static/css/stars.css" />
<link rel="stylesheet" href="static/css/fancy-gallery.css" />
<noscript><link rel="stylesheet" href="static/css/noscript.css" /></noscript>
<style>
/* Ensure the wrapper content remains above the background */
#wrapper {
position: relative;
z-index: 1;
}
.logo img {
width: 64px;
height: auto;
}
.icon-security {
width: 48px;
height: 48px;
fill: white;
display: inline-block;
object-fit: contain;
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
overflow: visible;
}
</style>
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/stars.css" />
<link rel="stylesheet" href="/static/css/fancy-gallery.css" />
<link rel="stylesheet" href="/static/css/extras.css" />
<noscript><link rel="stylesheet" href="/static/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
@ -59,15 +31,20 @@
<div id="stars3"></div>
</div>
<!-- Top Floater Footer -->
<div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
</div>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="static/images/logo.svg" alt="Spitfire Logo" /></span>
<span class="logo"><img src="/static/images/logo.svg" alt="Spitfire Logo" /></span>
<h1>Spitfire Browser</h1>
<p>Fast. Secure. Elegant.</p>
<a href="download.html" class="button">Download Now</a>
<a href="download" class="button">Download Now</a>
</header>
<!-- Nav -->
@ -91,8 +68,8 @@
<p>Spitfire Browser is your gateway to a fast, secure, and elegant browsing experience. Built on Firefox, Spitfire includes essential features like ad blocking, enhanced security, and anonymous browsing with Warp search engine.</p>
<div class="box alt">
<div class="fancy-gallery">
<div class="gallery-item"><img src="static/images/screenshots/1.png" alt="Screenshot 1" /></div>
<div class="gallery-item"><img src="static/images/screenshots/1.png" alt="Screenshot 2" /></div>
<div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 1" /></div>
<div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 2" /></div>
</div>
</div>
<ul class="actions">
@ -148,31 +125,31 @@
<ul class="statistics">
<li class="style1">
<a class="icon icon-security">
<img src="static/images/icons/solid/lock.svg" alt="Lock">
<img src="/static/images/icons/solid/lock.svg" alt="Lock">
</a>
<strong>0</strong> Telemetry
</li>
<li class="style2">
<a class="icon icon-security">
<img src="static/images/icons/regular/eye-slash.svg" alt="Eye-slash">
<img src="/static/images/icons/regular/eye-slash.svg" alt="Eye-slash">
</a>
<strong>100%</strong> Privacy
</li>
<li class="style3">
<a class="icon icon-security">
<img src="static/images/icons/solid/arrows-rotate.svg" alt="arrows-rotate">
<img src="/static/images/icons/solid/arrows-rotate.svg" alt="arrows-rotate">
</a>
<strong>Auto</strong> Updates
</li>
<li class="style4">
<a class="icon icon-security">
<img src="static/images/icons/brands/firefox-browser.svg" alt="Firefox">
<img src="/static/images/icons/brands/firefox-browser.svg" alt="Firefox">
</a>
<strong>Based</strong>on Firefox
</li>
<li class="style5">
<a class="icon icon-security">
<img src="static/images/icons/solid/code.svg" alt="code">
<img src="/static/images/icons/solid/code.svg" alt="code">
</a>
<strong>Open</strong> Source
</li>
@ -193,7 +170,7 @@
<footer class="major">
<ul class="actions special">
<li><a href="#header" class="button primary">Get Started</a></li>
<li><a href="#header" class="button">Learn More</a></li>
<li><a href="/news" class="button primary">Read News</a></li>
</ul>
</footer>
</section>
@ -207,19 +184,19 @@
<ul class="icons">
<li>
<a href="#" class="icon alt">
<img src="static/images/icons/regular/heart.svg" alt="LibrePay">
<img src="/static/images/icons/regular/heart.svg" alt="LibrePay">
<span class="label">LibrePay</span>
</a>
</li>
<li>
<a href="#" class="icon alt">
<img src="static/images/icons/brands/git-alt.svg" alt="Forgejo">
<img src="/static/images/icons/brands/git-alt.svg" alt="Forgejo">
<span class="label">Forgejo</span>
</a>
</li>
<li>
<a href="#" class="icon alt">
<img src="static/images/icons/brands/youtube.svg" alt="YouTube">
<img src="/static/images/icons/brands/youtube.svg" alt="YouTube">
<span class="label">YouTube</span>
</a>
</li>
@ -233,13 +210,13 @@
</div>
<!-- Scripts -->
<script src="static/js/jquery.min.js" defer></script>
<script src="static/js/jquery.scrollex.min.js" defer></script>
<script src="static/js/jquery.scrolly.min.js" defer></script>
<script src="static/js/browser.min.js" defer></script>
<script src="static/js/breakpoints.min.js" defer></script>
<script src="static/js/util.js" defer></script>
<script src="static/js/main.js" defer></script>
<script src="/static/js/jquery.min.js" defer></script>
<script src="/static/js/jquery.scrollex.min.js" defer></script>
<script src="/static/js/jquery.scrolly.min.js" defer></script>
<script src="/static/js/browser.min.js" defer></script>
<script src="/static/js/breakpoints.min.js" defer></script>
<script src="/static/js/util.js" defer></script>
<script src="/static/js/main.js" defer></script>
</body>
</html>

View file

@ -16,16 +16,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="../assets/css/stars.css" />
<noscript><link rel="stylesheet" href="../assets/css/noscript.css" /></noscript>
<style>
/* Ensure the wrapper content remains above the background */
#wrapper {
position: relative;
z-index: 1;
}
</style>
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/stars.css" />
<link rel="stylesheet" href="/static/css/extras.css" />
<noscript><link rel="stylesheet" href="/static/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
@ -36,30 +30,41 @@
<div id="stars3"></div>
</div>
<!-- Top Floater Footer -->
<div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
</div>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1>{{.Title}}</h1>
<header id="header" class="alt">
<span class="logo"><img src="/static/images/logo.svg" alt="Spitfire Logo" /></span>
<h1>Spitfire Browser</h1>
<p>News</p>
</header>
<!-- Main -->
<div id="main">
<!-- Stable Release Section -->
<section class="download-section">
<section id="cta" class="main special">
<div class="center-text">
<div class="blog-entries">
{{.Content}}
</div>
<div class="pagination">
<header class="major">
<h2>{{.Title}}</h2>
<p>{{.Content}}</p>
</header>
<footer class="major">
<ul class="actions special">
{{if .PrevLink}}
<a href="{{.PrevLink}}" class="prev">Previous</a>
<li><a href="{{.PrevLink}}" class="button primary small">Previous</a></li>
{{end}}
<li><a href="/" class="button primary small">Home</a></li>
{{if .NextLink}}
<a href="{{.NextLink}}" class="next">Next</a>
<li><a href="{{.NextLink}}" class="button primary small">Next</a></li>
{{end}}
</div>
</ul>
</footer>
</div>
</section>
</div>
@ -71,19 +76,19 @@
<ul class="icons">
<li>
<a href="#" class="icon alt">
<img src="static/images/icons/regular/heart.svg" alt="LibrePay">
<img src="/static/images/icons/regular/heart.svg" alt="LibrePay">
<span class="label">LibrePay</span>
</a>
</li>
<li>
<a href="https://weforgecode.xyz/Spitfire/" class="icon alt">
<img src="static/images/icons/brands/git-alt.svg" alt="Forgejo">
<img src="/static/images/icons/brands/git-alt.svg" alt="Forgejo">
<span class="label">Forgejo</span>
</a>
</li>
<li>
<a href="#" class="icon alt">
<img src="static/images/icons/brands/youtube.svg" alt="YouTube">
<img src="/static/images/icons/brands/youtube.svg" alt="YouTube">
<span class="label">YouTube</span>
</a>
</li>
@ -96,13 +101,13 @@
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js" defer></script>
<script src="assets/js/jquery.scrollex.min.js" defer></script>
<script src="assets/js/jquery.scrolly.min.js" defer></script>
<script src="assets/js/browser.min.js" defer></script>
<script src="assets/js/breakpoints.min.js" defer></script>
<script src="assets/js/util.js" defer></script>
<script src="assets/js/main.js" defer></script>
<script src="/static/js/jquery.min.js" defer></script>
<script src="/static/js/jquery.scrollex.min.js" defer></script>
<script src="/static/js/jquery.scrolly.min.js" defer></script>
<script src="/static/js/browser.min.js" defer></script>
<script src="/static/js/breakpoints.min.js" defer></script>
<script src="/static/js/util.js" defer></script>
<script src="/static/js/main.js" defer></script>
</body>
</html>