GitHub like repo home page

options/locale/locale_en-US.ini

@@ -144,6 +144,10 @@ confirm_delete_selected = Confirm to delete all selected items?
 name = Name
 value = Value
 
+readme = Readme
+contributors = Contributors
+latest = Latest
+
 filter = Filter
 filter.clear = Clear Filter
 filter.is_archived = Archived
@@ -1019,7 +1023,7 @@ generate_repo = Generate Repository
 generate_from = Generate From
 repo_desc = Description
 repo_desc_helper = Enter short description (optional)
-repo_lang = Language
+repo_lang = Languages
 repo_gitignore_helper = Select .gitignore templates.
 repo_gitignore_helper_desc = Choose which files not to track from a list of templates for common languages. Typical artifacts generated by each language's build tools are included on .gitignore by default.
 issue_labels = Issue Labels

routers/web/repo/view.go

@@ -1054,6 +1054,7 @@ func renderHomeCode(ctx *context.Context) {
 	}
 
 	ctx.Data["Paths"] = paths
+	ctx.Data["IsHomePage"] = len(paths) == 0
 
 	branchLink := ctx.Repo.RepoLink + "/src/" + ctx.Repo.BranchNameSubURL()
 	treeLink := branchLink

services/context/repo.go

@@ -533,7 +533,7 @@ func RepoAssignment(ctx *Context) context.CancelFunc {
 		ctx.ServerError("GetReleaseCountByRepoID", err)
 		return nil
 	}
-	ctx.Data["NumReleases"], err = db.Count[repo_model.Release](ctx, repo_model.FindReleasesOptions{
+	numReleases, err := db.Count[repo_model.Release](ctx, repo_model.FindReleasesOptions{
 		// only show draft releases for users who can write, read-only users shouldn't see draft releases.
 		IncludeDrafts: ctx.Repo.CanWrite(unit_model.TypeReleases),
 		RepoID:        ctx.Repo.Repository.ID,
@@ -542,6 +542,22 @@ func RepoAssignment(ctx *Context) context.CancelFunc {
 		ctx.ServerError("GetReleaseCountByRepoID", err)
 		return nil
 	}
+	ctx.Data["NumReleases"] = numReleases
+
+	if numReleases > 0 {
+		release, err := repo_model.GetLatestReleaseByRepoID(ctx, ctx.Repo.Repository.ID)
+		if err != nil && !repo_model.IsErrReleaseNotExist(err) {
+			ctx.ServerError("GetLatestReleaseByRepoID", err)
+			return nil
+		}
+		if release != nil {
+			if err = release.LoadAttributes(ctx); err != nil {
+				ctx.ServerError("release.LoadAttributes", err)
+				return nil
+			}
+			ctx.Data["LatestRelease"] = release
+		}
+	}
 
 	ctx.Data["Title"] = owner.Name + "/" + repo.Name
 	ctx.Data["Repository"] = repo

templates/base/head_navbar.tmpl

@@ -44,7 +44,6 @@
 		{{else}}
 			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
 		{{end}}
-
 		{{template "custom/extra_links" .}}
 
 		{{if not .IsSigned}}

templates/repo/cite/cite_buttons.tmpl

@@ -5,7 +5,7 @@ APA
 BibTeX
 </button>
 <!-- the value will be updated by initCitationFileCopyContent, the code below is used to avoid UI flicking  -->
-<input id="citation-copy-content" value="" size="1" readonly>
+<input id="citation-copy-content" class="gt-ellipsis" value="" size="1" readonly>
 <button class="ui icon button" id="citation-clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy"}}" data-clipboard-target="#citation-copy-content">
 	{{svg "octicon-copy"}}
 </button>

templates/repo/clone_buttons.tmpl

@@ -9,7 +9,7 @@
 		SSH
 	</button>
 {{end}}
-<input id="repo-clone-url" size="20" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<input id="repo-clone-url" size="20" class="gt-ellipsis js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
 <button class="ui small icon button" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
 	{{svg "octicon-copy" 14}}
 </button>

templates/repo/sidebar/repo_info.tmpl

@@ -0,0 +1,64 @@
+{{$viewType := "desktop"}}
+{{if .HiddenInMobileView}}
+{{$viewType = "mobile"}}
+{{end}}
+{{if and (not .ctxData.HideRepoInfo) (not .ctxData.IsBlame)}}
+	<div class="flex-item {{if .HiddenInMobileView}}not-mobile{{else}}only-mobile{{end}}">
+		<div class="flex-item-main">
+			{{if .HiddenInMobileView}}
+				<div class="flex-item-title">
+					{{ctx.Locale.Tr "repo.repo_desc"}}
+				</div>
+			{{end}}
+
+			<div class="flex-item-body {{if .HiddenInMobileView}}tw-mt-4{{end}}">
+				<div class="ui repo-description gt-word-break">
+					<div id="repo-desc-{{$viewType}}" class="tw-text-16">
+						{{$description := .ctxData.Repository.DescriptionHTML $.ctxData.Context}}
+						{{if $description}}<span class="description gt-word-break">{{$description | RenderCodeBlock}}</span>{{else if .ctxData.IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
+						<a class="link" href="{{.ctxData.Repository.Website}}">{{.ctxData.Repository.Website}}</a>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex-item-body tw-mt-4 tw-mb-4">
+				<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-1" id="repo-topics-{{$viewType}}">
+					{{range .ctxData.Topics}}<a class="ui repo-topic large label topic tw-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+					{{if and .ctxData.Permission.IsAdmin (not .ctxData.Repository.IsArchived)}}<button class="btn interact-fg tw-text-12 manage-topic" data-view-type="{{$viewType}}">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+				</div>
+				{{if and .ctxData.Permission.IsAdmin (not .ctxData.Repository.IsArchived)}}
+				<div class="ui form tw-hidden tw-flex tw-flex-col tw-mt-4" id="topic_edit_{{$viewType}}">
+					<div class="field tw-flex-1 tw-mb-2">
+						<div class="ui fluid multiple search selection dropdown tw-flex-wrap" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
+							<input type="hidden" name="topics-{{$viewType}}" value="{{range $i, $v := .ctxData.Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.ctxData.Topics)}},{{end}}{{end}}">
+							{{range .ctxData.Topics}}
+								{{/* keey the same layout as Fomantic UI generated labels */}}
+								<a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+							{{end}}
+							<div class="text"></div>
+						</div>
+					</div>
+					<div>
+						<button class="ui basic button" id="cancel_topic_edit_{{$viewType}}">{{ctx.Locale.Tr "cancel"}}</button>
+						<button class="ui primary button" id="save_topic_{{$viewType}}" data-link="{{.ctxData.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
+					</div>
+				</div>
+				{{end}}
+			</div>
+
+			{{if and .ctxData.ReadmeExist .HiddenInMobileView}}
+			<div class="flex-item-body">
+				<a class="tw-flex tw-items-center tw-gap-2 muted" href="{{.ctxData.TreeLink}}/{{.ctxData.FileName}}">
+					{{svg "octicon-book"}}{{ctx.Locale.Tr "readme"}}
+				</a>
+			</div>
+			{{end}}
+
+			{{if .ctxData.CitiationExist}}
+			<div class="flex-item-body">
+				<a class="item cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
+			</div>
+			{{end}}
+		</div>
+	</div>
+{{end}}

templates/repo/sub_menu.tmpl

@@ -20,27 +20,5 @@
 			</span>
 		{{end}}
 	</div>
-	{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-	<div class="ui segment sub-menu language-stats-details tw-hidden">
-		{{range .LanguageStats}}
-		<div class="item">
-			<i class="color-icon" style="background-color: {{.Color}}"></i>
-			<span class="tw-font-semibold">
-				{{if eq .Language "other"}}
-					{{ctx.Locale.Tr "repo.language_other"}}
-				{{else}}
-					{{.Language}}
-				{{end}}
-			</span>
-			{{.Percentage}}%
-		</div>
-		{{end}}
-	</div>
-	<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
-		{{range .LanguageStats}}
-		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
-		{{end}}
-	</a>
-	{{end}}
 </div>
 {{end}}

tests/integration/repo_test.go

@@ -28,13 +28,18 @@ func TestViewRepo(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	noDescription := htmlDoc.doc.Find("#repo-desc").Children()
-	repoTopics := htmlDoc.doc.Find("#repo-topics").Children()
-	repoSummary := htmlDoc.doc.Find(".repository-summary").Children()
 
-	assert.True(t, noDescription.HasClass("no-description"))
-	assert.True(t, repoTopics.HasClass("repo-topic"))
-	assert.True(t, repoSummary.HasClass("repository-menu"))
+	components := map[string]*goquery.Selection{
+		"no-description":  htmlDoc.doc.Find("#repo-desc").Children(),
+		"repo-topic":      htmlDoc.doc.Find("#repo-topics").Children(),
+		"repository-menu": htmlDoc.doc.Find(".repository-summary").Children(),
+	}
+
+	for className, selection := range components {
+		selection.Each(func(_ int, s *goquery.Selection) {
+			assert.True(t, s.HasClass(className))
+		})
+	}
 
 	req = NewRequest(t, "GET", "/org3/repo3")
 	MakeRequest(t, req, http.StatusNotFound)
@@ -191,12 +196,16 @@ func TestViewAsRepoAdmin(t *testing.T) {
 		resp := session.MakeRequest(t, req, http.StatusOK)
 
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		noDescription := htmlDoc.doc.Find("#repo-desc").Children()
-		repoTopics := htmlDoc.doc.Find("#repo-topics").Children()
+		noDescriptionMobile := htmlDoc.doc.Find("#repo-desc-mobile").Children()
+		repoTopicsMobile := htmlDoc.doc.Find("#repo-topics-mobile").Children()
+		noDescriptionDesktop := htmlDoc.doc.Find("#repo-desc-desktop").Children()
+		repoTopicsDesktop := htmlDoc.doc.Find("#repo-topics-desktop").Children()
 		repoSummary := htmlDoc.doc.Find(".repository-summary").Children()
 
-		assert.Equal(t, expectedNoDescription, noDescription.HasClass("no-description"))
-		assert.True(t, repoTopics.HasClass("repo-topic"))
+		assert.Equal(t, expectedNoDescription, noDescriptionMobile.HasClass("no-description"))
+		assert.True(t, repoTopicsMobile.HasClass("repo-topic"))
+		assert.Equal(t, expectedNoDescription, noDescriptionDesktop.HasClass("no-description"))
+		assert.True(t, repoTopicsDesktop.HasClass("repo-topic"))
 		assert.True(t, repoSummary.HasClass("repository-menu"))
 	}
 }

web_src/css/repo.css

@@ -79,6 +79,66 @@
   white-space: nowrap;
 }
 
+.repo-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+@media (max-width: 767.98px) {
+  .repo-content {
+    flex-direction: column;
+  }
+}
+
+.repo-content-main[data-home="true"] {
+  margin: 0 !important;
+  width: calc(100% - 316px);
+}
+
+.repo-content-main[data-home="false"] {
+  margin: 0 !important;
+  width: 100%;
+}
+
+@media (max-width: 767.98px) {
+  .repo-content-main[data-home="true"] {
+    margin: 0 !important;
+    width: 100%;
+  }
+}
+
+.repo-content-sidebar[data-home="true"] {
+  margin: 0 !important;
+  width: 300px;
+}
+
+.repo-content-sidebar[data-home="false"] {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .repo-content-sidebar[data-home="true"] {
+    margin: 0 !important;
+    width: 100%;
+  }
+}
+
+.latest-release {
+  text-decoration-line: none;
+  margin: 1rem;
+}
+
+.latest-release-tag {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+.latest-release .time {
+  margin-left: 1.6rem;
+}
+
 .repository .filter.menu.labels .label-filter .menu .info {
   display: inline-block;
   padding: 0.5rem 0;
@@ -167,7 +227,6 @@
   justify-content: space-between;
   align-items: center;
   gap: 5px;
-  margin-bottom: 5px;
 }
 
 @media (max-width: 767.98px) {
@@ -1999,14 +2058,40 @@
   background: var(--color-secondary);
 }
 
-.repository .repository-summary .segment.language-stats {
+.contributors-stats {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 10px;
+  gap: 5px;
+}
+
+.language-stats {
   display: flex;
   gap: 2px;
   padding: 0;
   height: 10px;
   white-space: nowrap;
   border-radius: 0 0 3px 3px !important;
   overflow: hidden;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 5px;
+}
+
+.language-stats-details {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.language-stats-details .item {
+  height: 30px;
+  line-height: var(--line-height-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
+  text-decoration: none;
 }
 
 #cite-repo-modal #citation-panel {
@@ -3016,3 +3101,8 @@ tbody.commit-list {
   margin-top: -1px;
   border-top: 1px solid var(--color-secondary);
 }
+
+#repo-desc-mobile .description,
+#repo-desc-desktop .description {
+  max-height: 150px;
+}