Docs about how to generate config for act runner with docker and setup it with docker-compose (#25256)

In this pull request, the following changes are addressed:

- State user should create `config.yaml` before start container to avoid
errors.
- Provided instructions to deploy runners using docker compose.

docs/content/doc/usage/actions/act-runner.en-us.md

@@ -76,6 +76,12 @@ The default configuration is safe to use without any modification, so you can ju
 ./act_runner --config config.yaml [command]
 ```
 
+You could also generate config file with docker:
+
+```bash
+docker run --entrypoint="" --rm -it gitea/act_runner:latest act_runner generate-config > config.yaml
+```
+
 When you are using the docker image, you can specify the configuration file by using the `CONFIG_FILE` environment variable. Make sure that the file is mounted into the container as a volume:
 
 ```bash
@@ -172,6 +178,27 @@ It is because the act runner will run jobs in docker containers, so it needs to
 As mentioned, you can remove it if you want to run jobs in the host directly.
 To be clear, the "host" actually means the container which is running the act runner now, instead of the host machine.
 
+### Set up the runner using docker compose
+
+You could also set up the runner using the following `docker-compose.yml`:
+
+```yml
+version: "3.8"
+services:
+  runner:
+    image: gitea/act_runner:nightly
+    environment:
+      CONFIG_FILE: /config.yaml
+      GITEA_INSTANCE_URL: "${INSTANCE_URL}"
+      GITEA_RUNNER_REGISTRATION_TOKEN: "${REGISTRATION_TOKEN}"
+      GITEA_RUNNER_NAME: "${RUNNER_NAME}"
+      GITEA_RUNNER_LABELS: "${RUNNER_LABELS}"
+    volumes:
+      - ./config.yaml:/config.yaml
+      - ./data:/data
+      - /var/run/docker.sock:/var/run/docker.sock
+```
+
 ### Configuring cache when starting a Runner using docker image
 
 If you do not intend to use `actions/cache` in workflow, you can ignore this section.

docs/content/doc/usage/actions/act-runner.zh-cn.md

@@ -76,6 +76,12 @@ docker pull gitea/act_runner:nightly # for the latest nightly build
 ./act_runner --config config.yaml [command]
 ```
 
+您亦可以如下使用 docker 创建配置文件：
+
+```bash
+docker run --entrypoint="" --rm -it gitea/act_runner:latest act_runner generate-config > config.yaml
+```
+
 当使用Docker镜像时，可以使用`CONFIG_FILE`环境变量指定配置文件。确保将文件作为卷挂载到容器中：
 
 ```bash
@@ -169,6 +175,27 @@ docker run \
 如前所述，如果要在主机上直接运行Job，可以将其移除。
 需要明确的是，这里的 "主机" 实际上指的是当前运行 Act Runner的容器，而不是主机机器本身。
 
+### 使用 Docker compose 运行 Runner
+
+您亦可使用如下的 `docker-compose.yml`:
+
+```yml
+version: "3.8"
+services:
+  runner:
+    image: gitea/act_runner:nightly
+    environment:
+      CONFIG_FILE: /config.yaml
+      GITEA_INSTANCE_URL: "${INSTANCE_URL}"
+      GITEA_RUNNER_REGISTRATION_TOKEN: "${REGISTRATION_TOKEN}"
+      GITEA_RUNNER_NAME: "${RUNNER_NAME}"
+      GITEA_RUNNER_LABELS: "${RUNNER_LABELS}"
+    volumes:
+      - ./config.yaml:/config.yaml
+      - ./data:/data
+      - /var/run/docker.sock:/var/run/docker.sock
+```
+
 ### 当您使用 Docker 镜像启动 Runner，如何配置 Cache
 
 如果你不打算在工作流中使用 `actions/cache`，你可以忽略本段。

templates/repo/commits.tmpl

@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw gt-mb-4 gt-mt-3">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">

templates/repo/home.tmpl

@@ -61,7 +61,7 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac gt-fw gt-gap-y-3">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
@@ -84,8 +84,9 @@
 				{{end}}
 
 				{{if and .CanWriteCode .IsViewBranch (not .Repository.IsArchived)}}
-					<button class="ui basic compact dropdown jump icon button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-						<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
+					<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+						{{.locale.Tr "repo.editor.add_file"}}
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
 								{{.locale.Tr "repo.editor.new_file"}}
@@ -99,7 +100,6 @@
 								{{.locale.Tr "repo.editor.patch"}}
 							</a>
 						</div>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 					</button>
 				{{end}}
 

templates/repo/wiki/view.tmpl

@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
+		<div class="repo-button-row">
 			<div class="gt-df gt-ac">
 				<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
 					<div class="ui basic small button">

web_src/css/base.css

@@ -2099,8 +2099,8 @@ a.ui.basic.label:hover {
 }
 
 /* if a .top.attached.header is followed by a .segment, add some margin */
-.ui.segments ~ .ui.top.attached.header,
-.ui.attached.segment ~ .ui.top.attached.header {
+.ui.segments + .ui.top.attached.header,
+.ui.attached.segment + .ui.top.attached.header {
   margin-top: 1rem;
 }
 

web_src/css/repo.css

@@ -2693,19 +2693,12 @@
 }
 
 .repo-button-row {
-  margin-bottom: 10px;
-}
-
-.repo-button-row > * {
-  margin-top: 8px;
-}
-
-.wiki .repo-button-row {
-  margin-bottom: 0;
-}
-
-.wiki .repo-button-row > * {
-  margin-top: 0;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .repo-button-row .button {
@@ -2713,6 +2706,10 @@
   height: 30px;
 }
 
+.repo-button-row .button.dropdown {
+  padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
+}
+
 .repo-button-row input {
   height: 30px;
 }

web_src/fomantic/_site/globals/site.variables

@@ -9,3 +9,41 @@
 @linkHoverUnderline: underline;
 @variationButtonSocial: false;
 @pageOverflowX: visible;
+
+/* disable all inverted variations */
+@variationAccordionInverted: false;
+@variationBreadcrumbInverted: false;
+@variationButtonAttached: false;
+@variationButtonInverted: false;
+@variationCalendarInverted: false;
+@variationCardInverted: false;
+@variationCheckboxInverted: false;
+@variationCommentInverted: false;
+@variationDimmerInverted: false;
+@variationDividerInverted: false;
+@variationDropdownInverted: false;
+@variationFeedInverted: false;
+@variationFlyoutInverted: false;
+@variationFormInverted: false;
+@variationGridInverted: false;
+@variationHeaderInverted: false;
+@variationIconInverted: false;
+@variationInputInverted: false;
+@variationItemInverted: false;
+@variationLabelInverted: false;
+@variationListInverted: false;
+@variationMenuInverted: false;
+@variationMessageInverted: false;
+@variationModalInverted: false;
+@variationNagInverted: false;
+@variationPlaceholderInverted: false;
+@variationPopupInverted: false;
+@variationProgressInverted: false;
+@variationSegmentInverted: false;
+@variationSliderInverted: false;
+@variationStatisticInverted: false;
+@variationStepInverted: false;
+@variationTableInverted: false;
+@variationTextInverted: false;
+@variationToastInverted: false;
+@variationTransitionInverted: false;

web_src/js/features/contextpopup.js

@@ -34,6 +34,7 @@ export function attachRefIssueContextPopup(refIssues) {
       content: el,
       placement: 'top-start',
       interactive: true,
+      role: 'dialog',
       interactiveBorder: 5,
       onShow: () => {
         el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));

web_src/js/features/repo-commit.js

@@ -65,6 +65,7 @@ export function initCommitStatuses() {
       content: this.nextElementSibling,
       placement: top ? 'top-start' : 'bottom-start',
       interactive: true,
+      role: 'dialog',
     });
   });
 }