From 702bfc49cf8084f3f9706cd05677dd3fda3fd947 Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Wed, 10 Apr 2024 04:15:04 +0800
Subject: [PATCH] optimize legacyindex

---
 _includes/main-mirror-list.html    | 71 ++++++++++++++++++------------
 _src/components/MainMirrorList.vue |  8 +---
 _src/components/UpdateField.vue    |  5 +--
 _src/entrypoints/legacyapp.js      |  2 +
 _src/styles/badge-new.scss         |  7 +++
 _src/styles/badge-status.scss      |  4 ++
 6 files changed, 59 insertions(+), 38 deletions(-)
 create mode 100644 _src/styles/badge-new.scss
 create mode 100644 _src/styles/badge-status.scss

diff --git a/_includes/main-mirror-list.html b/_includes/main-mirror-list.html
index 17c56dc..c97efd3 100644
--- a/_includes/main-mirror-list.html
+++ b/_includes/main-mirror-list.html
@@ -12,47 +12,64 @@
 		</tr>
 	</thead>
 	<tbody class="table-group-divider">
-		{% if include.legacy %}
-		{% raw %}
+    {% if include.legacy %}{% raw %}
 		{{mirs}}
-		<tr class="row status-{{status}}">
-			<td>
-				<a class="mirror-item-label" href="{{url}}" title="{{description}}">
-					{{name}}
-				</a>
-				{{if is_new}}
-				<span class="badge badge-new">new</span>
-				{{/if}}
-				{{if help_url}}
-				<a href="{{help_url}}"><i aria-hidden="true" class="question-circle" title="Help">{% endraw %}{% fa_svg fas.fa-circle-question %}{% raw %}</i><span class="visually-hidden">[Help]</span></a>
-				{{/if}}
-			</td>
-			<td>
-				{{last_update}}{{if show_status}}<span class="badge badge-status {{label}}">{{status}}</span>{{/if}}
-			</td>
-		</tr>
-		{{/mirs}}
-		{% endraw %}
-		{% else %}
-		{% raw %}
+    <tr class="row status-{{status}}">
+    {% endraw %}{% else %}{% raw %}
 		<tr v-for="mir in filteredMirrorList" :class="['row', 'status-'+mir.status]" :key="mir.name">
+    {% endraw %}{% endif %}
 			<td class="col-8 col-lg-7 col-xl-8">
-				<a class="mirror-item-label"  data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right"
+
+				<a class="mirror-item-label"
+          {% if include.legacy %}{% raw %}
+          href="{{url}}" title="{{description}}"
+          {% endraw %}{% else %}{% raw %}
+          data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right"
 					:data-bs-content="mir.description" :href="getURL(mir)" :aria-label="mir.name + ', ' + mir.description"
 					v-with-popover
+          {% endraw %}{% endif %}
 				>
+          {% if include.legacy %}{% raw %}
+          {{name}}
+          {% endraw %}{% else %}{% raw %}
 					{{mir.name}}
+          {% endraw %}{% endif %}
 				</a>
-				<span class="badge badge-new" v-if='mir.is_new'>new</span>
-				<a v-if='mir.help_url' :href="mir.help_url"><i aria-hidden="true" class="question-circle" title="Help">{% endraw %}{% fa_svg fas.fa-circle-question %}{% raw %}</i><span class="visually-hidden">[Help]</span></a>
+        {% if include.legacy %}{% raw %}
+        {{if is_new}}
+        <span
+        {% endraw %}{% else %}{% raw %}
+				<span v-if='mir.is_new'
+        {% endraw %}{% endif %}
+        class="badge badge-new" >new</span>
+        {% if include.legacy %}{% raw %}
+        {{/if}}
+        {% endraw %}{% endif %}
+        {% if include.legacy %}{% raw %}
+        {{if help_url}}
+        <a href="{{help_url}}"
+        {% endraw %}{% else %}{% raw %}
+				<a v-if='mir.help_url' :href="mir.help_url"
+        {% endraw %}{% endif %}
+        ><i aria-hidden="true" class="question-circle" title="Help">{% fa_svg fas.fa-circle-question %}</i><span class="visually-hidden">[Help]</span></a>
+        {% if include.legacy %}{% raw %}
+        {{/if}}
+        {% endraw %}{% endif %}
+        {% unless include.legacy %}{% raw %}
 				<a v-if='mir.github_release' href="javascript:void(0)"><i aria-hidden="true" title="GitHub Release">{% endraw %}{% fa_svg fab.fa-github %}{% raw %}</i><span class="visually-hidden">[GitHub Release]</span></a>
+        {% endraw %}{% endunless %}
 			</td>
 			<td class="col-4 col-lg-5 col-xl-4">
+        {% if include.legacy %}{% raw %}
+        {{last_update}}{{if show_status}}<span class="badge badge-status {{label}}">{{status}}</span>{{/if}}
+        {% endraw %}{% else %}{% raw %}
 				<UpdateField :mir="mir"></UpdateField>
+        {% endraw %}{% endif %}
 			</td>
 		</tr>
-		{% endraw %}
-		{% endif %}
+    {% if include.legacy %}{% raw %}
+    {{/mirs}}
+    {% endraw %}{% endif %}
 	</tbody>
 </table>
 {% unless include.legacy %}
diff --git a/_src/components/MainMirrorList.vue b/_src/components/MainMirrorList.vue
index 62f18e9..1548e60 100644
--- a/_src/components/MainMirrorList.vue
+++ b/_src/components/MainMirrorList.vue
@@ -62,6 +62,7 @@ const vWithPopover = {
 <style lang="scss" scoped>
 @use "../styles/3-wave.scss" as wave;
 @use "../styles/sync-status.scss";
+@use "../styles/badge-new.scss";
 
 a.mirror-item-label::after {
   content: " ";
@@ -73,13 +74,6 @@ tbody {
     border-style: none;
   }
   font-size: 12pt;
-  .badge.badge-new {
-    padding: 0.1em 0.2em;
-    vertical-align: 40%;
-    text-shadow: 1px 1px #888;
-    margin-right: 4px;
-    background-color: #3aa0e6;
-  }
 }
 #mirror-title {
   margin-top: 10px;
diff --git a/_src/components/UpdateField.vue b/_src/components/UpdateField.vue
index eaf6f49..68c9367 100644
--- a/_src/components/UpdateField.vue
+++ b/_src/components/UpdateField.vue
@@ -13,8 +13,5 @@ const props = defineProps(["mir"]);
   </span>
 </template>
 <style lang="scss" scoped>
-.badge.badge-status {
-  vertical-align: 20%;
-  margin-left: 0.5em;
-}
+@use "../styles/badge-status.scss";
 </style>
diff --git a/_src/entrypoints/legacyapp.js b/_src/entrypoints/legacyapp.js
index eb791c8..705220d 100644
--- a/_src/entrypoints/legacyapp.js
+++ b/_src/entrypoints/legacyapp.js
@@ -1,2 +1,4 @@
 import "./default";
 import "../styles/sync-status.scss";
+import "../styles/badge-new.scss";
+import "../styles/badge-status.scss";
diff --git a/_src/styles/badge-new.scss b/_src/styles/badge-new.scss
new file mode 100644
index 0000000..e8e40eb
--- /dev/null
+++ b/_src/styles/badge-new.scss
@@ -0,0 +1,7 @@
+.badge.badge-new {
+  padding: 0.1em 0.2em;
+  vertical-align: 40%;
+  text-shadow: 1px 1px #888;
+  margin-right: 4px;
+  background-color: #3aa0e6;
+}
diff --git a/_src/styles/badge-status.scss b/_src/styles/badge-status.scss
new file mode 100644
index 0000000..43d69d8
--- /dev/null
+++ b/_src/styles/badge-status.scss
@@ -0,0 +1,4 @@
+.badge.badge-status {
+  vertical-align: 20%;
+  margin-left: 0.5em;
+}