Téléverser les fichiers vers "web/templates"

This commit is contained in:
RainbowYoshi 2026-01-31 21:53:20 +00:00
parent 86d2ca7799
commit 40f0a06087
3 changed files with 185 additions and 0 deletions

View File

@ -0,0 +1,14 @@
{{define "custom_styles"}}
<style>
:root {
--bg-color: {{.Config.CustomColors.BgColor}};
--card-bg: {{.Config.CustomColors.CardBg}};
--border-color: {{.Config.CustomColors.BorderColor}};
--accent-color: {{.Config.CustomColors.AccentColor}};
--text-primary: {{.Config.CustomColors.TextPrimary}};
--text-secondary: {{.Config.CustomColors.TextSecondary}};
--text-muted: {{.Config.CustomColors.TextMuted}};
--btn-text: {{.Config.CustomColors.ButtonText}};
}
</style>
{{end}}

View File

@ -0,0 +1,24 @@
{{define "file_list"}}
<div class="file-browser">
{{range .Files}}
<div class="file-row">
<div class="file-icon">{{if .IsDir}}📂{{else}}📄{{end}}</div>
<div class="file-name">
{{if .IsDir}}
<a href="/repo?name={{$.Repository.Name}}&path={{if $.CurrentPath}}{{$.CurrentPath}}/{{end}}{{.Name}}">{{.Name}}</a>
{{else}}
<a href="/repo?name={{$.Repository.Name}}&path={{if $.CurrentPath}}{{$.CurrentPath}}/{{end}}{{.Name}}&type=blob">{{.Name}}</a>
{{end}}
</div>
<div class="file-meta">{{if .IsDir}}-{{else}}{{.Size | humanize}}{{end}}</div>
<div class="file-meta">--</div>
</div>
{{else}}
<div style="padding: 1rem; text-align: center; color: var(--text-muted);">Empty directory.</div>
{{end}}
</div>
{{if .Readme}}
{{template "readme_viewer" (dict "Title" "README.md" "Content" .Readme "ID" "repo-readme")}}
{{end}}
{{end}}

147
web/templates/index.html Normal file
View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Config.Username}}</title>
<link rel="stylesheet" href="/static/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
{{template "custom_styles" .}}
<style>
.readme-content {
padding: 2rem;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 6px;
margin-bottom: 2rem;
overflow-wrap: break-word;
}
.readme-content img {
max-width: 100%;
height: auto;
}
.readme-content pre {
background: #1e1e1e;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
}
</style>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 2rem;">
{{template "sidebar" .}}
<main class="main-content">
{{template "navbar" .}}
<div class="content-wrapper">
{{if eq .ActiveTab "overview"}}
{{if .SpecialReadme}}
{{template "readme_viewer" (dict "Title" (printf "%s / README.md" .Config.GithubUser) "Content"
.SpecialReadme "ID" "special")}}
{{end}}
{{template "contribution_graph" .}}
<div class="section-title">
<span>Popular Repositories</span>
<a href="#" onclick="document.getElementById('pins-modal').style.display='flex'; return false;"
style="font-size: 0.8rem; font-weight: 400; color: var(--accent-color);">Customize your pins</a>
</div>
{{template "repo_grid" .}}
{{else if eq .ActiveTab "repositories"}}
<div class="search-bar-container">
<input type="text" class="form-control" placeholder="Find a repository..."
style="flex: 1; padding: 0.25rem 0.75rem; font-size: 0.9rem; height: auto;">
<a href="/new" class="btn-primary"
style="background: var(--accent-color); width: auto; text-align: center; padding: 0.25rem 1rem; font-size: 0.9rem; display: flex; align-items: center;">New</a>
</div>
{{template "repo_list" .}}
{{end}}
</div>
</main>
</div>
<footer class="footer">
Powered by
<span class="footer-icon"></span>
<a href="https://github.com/ArthurAugis/PortaGit" target="_blank"
style="color: inherit; text-decoration: none; font-weight: 600;">PortaGit</a>
</footer>
<div id="pins-modal"
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000;">
<div
style="background: var(--card-bg); padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); width: 500px; max-width: 90%; max-height: 80vh; display: flex; flex-direction: column;">
<h3 style="margin-top: 0; color: var(--text-primary); margin-bottom: 1rem;">Customize Pins</h3>
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem;">Select up to 6
repositories to pin to your profile.</p>
<form action="/api/pins" method="POST"
style="display: flex; flex-direction: column; overflow: hidden; flex: 1;">
<input type="text" id="pinSearchInput" class="form-control" placeholder="Search repositories..."
style="margin-bottom: 1rem;">
<div id="repoPinList"
style="overflow-y: auto; flex: 1; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 1.5rem; min-height: 200px;">
{{ $pinned := .Config.PinnedRepos }}
{{range .Config.Repositories}}
{{ $repo := . }}
<label
style="display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer;"
class="repo-pin-item">
<input type="checkbox" name="pinned_repos" value="{{.Name}}" {{if $pinned}}{{range $p
:=$pinned}}{{if eq $p $repo.Name}}checked{{end}}{{end}}{{end}} style="margin-right: 1rem;">
<span style="font-weight: 500;">{{.Name}}</span>
{{if .Language}}
<span
style="margin-left: auto; font-size: 0.8rem; color: var(--text-muted);">{{.Language}}</span>
{{end}}
</label>
{{end}}
</div>
<script>
document.getElementById('pinSearchInput').addEventListener('input', function (e) {
const term = e.target.value.toLowerCase();
const items = document.querySelectorAll('.repo-pin-item');
items.forEach(item => {
const name = item.querySelector('span').textContent.toLowerCase(); // Filter based on the repository name found in the first span element.
if (name.includes(term)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
});
</script>
<div style="display: flex; gap: 1rem; justify-content: flex-end;">
<button type="button" onclick="document.getElementById('pins-modal').style.display='none'"
class="btn-primary"
style="background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); width: auto;">Cancel</button>
<button type="submit" class="btn-primary" style="width: auto;">Save Pins</button>
</div>
</form>
</div>
</div>
</body>
</html>