GitHub like repo home page

options/locale/locale_en-US.ini

@@ -145,6 +145,7 @@ confirm_delete_selected = Confirm to delete all selected items?
 
 name = Name
 value = Value
+readme = Readme
 
 filter = Filter
 filter.clear = Clear Filter
@@ -1045,7 +1046,8 @@ generate_repo = Generate Repository
 generate_from = Generate From
 repo_desc = Description
 repo_desc_helper = Enter short description (optional)
-repo_lang = Language
+repo_no_desc = No description provided
+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

@@ -887,6 +887,26 @@ func renderLanguageStats(ctx *context.Context) {
 	ctx.Data["LanguageStats"] = langs
 }
 
+func renderLatestRelease(ctx *context.Context) {
+	if !ctx.Repo.Repository.UnitEnabled(ctx, unit_model.TypeReleases) || unit_model.TypeReleases.UnitGlobalDisabled() {
+		return
+	}
+
+	release, err := repo_model.GetLatestReleaseByRepoID(ctx, ctx.Repo.Repository.ID)
+	if err != nil && !repo_model.IsErrReleaseNotExist(err) {
+		ctx.ServerError("GetLatestReleaseByRepoID", err)
+		return
+	}
+
+	if release != nil {
+		if err = release.LoadAttributes(ctx); err != nil {
+			ctx.ServerError("release.LoadAttributes", err)
+			return
+		}
+		ctx.Data["LatestRelease"] = release
+	}
+}
+
 func renderRepoTopics(ctx *context.Context) {
 	topics, err := db.Find[repo_model.Topic](ctx, &repo_model.FindTopicOptions{
 		RepoID: ctx.Repo.Repository.ID,
@@ -999,6 +1019,11 @@ func renderHomeCode(ctx *context.Context) {
 		return
 	}
 
+	renderLatestRelease(ctx)
+	if ctx.Written() {
+		return
+	}
+
 	if entry.IsDir() {
 		renderDirectory(ctx)
 	} else {

templates/repo/home_search_code.tmpl

@@ -0,0 +1,6 @@
+<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
+	<div class="ui small action input tw-flex-1">
+		<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
+		{{template "shared/search/button"}}
+	</div>
+</form>

templates/repo/home_share_sidebar.tmpl

@@ -0,0 +1,56 @@
+<div class="flex-item">
+	<div class="flex-item-main">
+		<div class="flex-item-title">
+			{{ctx.Locale.Tr "repo.repo_desc"}}
+		</div>
+		{{if and (not .HideRepoInfo) (not .IsBlame)}}
+			<div class="flex-item-body repo-description tw-break-anywhere tw-gap-2 tw-mt-2">
+				{{- $description := .Repository.DescriptionHTML ctx -}}
+				{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
+				{{if .Repository.Website}}{{svg "octicon-link"}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
+			</div>
+			<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
+				{{/* it should match the code in issue-home.js */}}
+				{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+			</div>
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+		{{end}}
+		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
+			<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit">
+				<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
+					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
+					{{range .Topics}}
+						{{/* keep the same layout as Fomantic UI generated labels */}}
+						<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+					{{end}}
+					<div class="text"></div>
+				</div>
+				<div>
+					<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
+					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
+				</div>
+			</div>
+		{{end}}
+		{{if .ReadmeExist}}
+			<div class="flex-item-body tw-mt-2">
+				<a class="tw-flex tw-items-center tw-gap-2 muted" href="{{.TreeLink}}/{{.FileName}}">
+					{{svg "octicon-book"}}{{ctx.Locale.Tr "readme"}}
+				</a>
+			</div>
+		{{end}}
+		{{if .DetectedRepoLicenses}}
+			<div class="flex-item-body">
+				<a class="tw-flex tw-items-center tw-gap-2 muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" data-tooltip-placement="top" data-tooltip-content="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
+					{{svg "octicon-law"}}{{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
+				</a>
+			</div>
+		{{end}}
+		{{if .CitiationExist}}
+			<div class="flex-item-body">
+				<a class="tw-flex tw-items-center tw-gap-2 muted" id="cite-repo-button">
+					{{svg "octicon-cross-reference"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}
+				</a>
+			</div>
+		{{end}}
+	</div>
+</div>

templates/repo/sub_menu.tmpl

@@ -13,39 +13,12 @@
 					{{svg "octicon-tag"}} <b>{{ctx.Locale.PrettyNumber .NumTags}}</b> {{ctx.Locale.TrN .NumTags "repo.tag" "repo.tags"}}
 				</a>
 			{{end}}
-			{{if .DetectedRepoLicenses}}
-				<a class="item muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" data-tooltip-placement="top" data-tooltip-content="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
-					{{svg "octicon-law"}} <b>{{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}</b>
-				</a>
-			{{end}}
 			<span class="item not-mobile" {{if not (eq .Repository.Size 0)}}data-tooltip-placement="top" data-tooltip-content="{{.Repository.SizeDetailsString}}"{{end}}>
 				{{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}}
 				{{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}}
 				{{svg "octicon-database"}} <b>{{ctx.Locale.PrettyNumber (index $fileSizeFields 0)}}</b> {{index $fileSizeFields 1}}
 			</span>
 		{{end}}
 	</div>
-	{{if and (.Permission.CanRead ctx.Consts.RepoUnitTypeCode) (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}}

templates/repo/view_list.tmpl

@@ -1,4 +1,4 @@
-<table id="repo-files-table" class="ui single line table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
+<table id="repo-files-table" class="ui single line fixed table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
 	<thead>
 		<tr class="commit-list">
 			<th class="tw-overflow-hidden" colspan="2">

web_src/css/index.css

@@ -65,6 +65,7 @@
 @import "./repo/linebutton.css";
 @import "./repo/wiki.css";
 @import "./repo/header.css";
+@import "./repo/home.css";
 @import "./repo/reactions.css";
 
 @import "./editor/fileeditor.css";

web_src/css/modules/flexcontainer.css

@@ -21,6 +21,10 @@
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
+.flex-container-repo {
+  width: 25%;
+}
+
 @media (max-width: 767.98px) {
   .flex-container {
     flex-direction: column;
@@ -30,4 +34,7 @@
     order: -1;
     width: auto;
   }
+  .flex-container-repo {
+    width: auto;
+  }
 }

web_src/css/repo.css

@@ -1822,16 +1822,6 @@ td .commit-summary {
   background: var(--color-secondary);
 }
 
-.repository .repository-summary .segment.language-stats {
-  display: flex;
-  gap: 2px;
-  padding: 0;
-  height: 10px;
-  white-space: nowrap;
-  border-radius: 0 0 3px 3px !important;
-  overflow: hidden;
-}
-
 #cite-repo-modal #citation-panel {
   display: flex;
   width: 100%;
@@ -2176,7 +2166,7 @@ td .commit-summary {
   flex-grow: 0;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 1200px) {
   .repository:not(.wiki) .repo-button-row {
     flex-direction: column;
     align-items: stretch;
@@ -2302,6 +2292,7 @@ tbody.commit-list {
   font-weight: var(--font-weight-normal);
   cursor: pointer;
   margin: 0;
+  display: inline-block !important;
 }
 
 #new-dependency-drop-list.ui.selection.dropdown {
@@ -2820,9 +2811,9 @@ tbody.commit-list {
 /* FIXME: These media selectors are not ideal (just keep them from old code).
     There are many different pages, some need the max-width while some others don't,
     they should be tested and improved in the future. */
-@media (min-width: 768px) and (max-width: 991.98px) {
+@media (min-width: 768px) and (max-width: 1235px) {
   .branch-selector-dropdown .branch-dropdown-button {
-    max-width: 185px;
+    max-width: 301px;
   }
 }
 

web_src/css/repo/home.css

@@ -0,0 +1,37 @@
+.latest-releases {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.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;
+}

web_src/js/features/citation.ts

@@ -30,6 +30,7 @@ export async function initCitationFileCopyContent() {
   const citationCopyApa = document.querySelector<HTMLButtonElement>('#citation-copy-apa');
   const citationCopyBibtex = document.querySelector<HTMLButtonElement>('#citation-copy-bibtex');
   const inputContent = document.querySelector<HTMLInputElement>('#citation-copy-content');
+  const modal = fomanticQuery('#cite-repo-modal');
 
   if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
 
@@ -41,9 +42,9 @@ export async function initCitationFileCopyContent() {
     citationCopyApa.classList.toggle('primary', !isBibtex);
   };
 
-  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e: MouseEvent & {target: HTMLAnchorElement}) => {
-    const dropdownBtn = e.target.closest('.ui.dropdown.button');
-    dropdownBtn.classList.add('is-loading');
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async () => {
+    modal.modal('show');
+    modal.addClass('is-loading');
 
     try {
       try {
@@ -68,9 +69,7 @@ export async function initCitationFileCopyContent() {
         inputContent.select();
       });
     } finally {
-      dropdownBtn.classList.remove('is-loading');
+      modal.removeClass('is-loading');
     }
-
-    fomanticQuery('#cite-repo-modal').modal('show');
   });
 }