Merge pull request #38 from geoadmin/feat-PB-1946-reorganize-homepage

PB-1946: restructure homepage #patch

Author: pedroslvieira

.vitepress/config.mts

@@ -69,15 +69,15 @@ export default defineConfig({
       },
       {
         text: "Status Page",
-        link: "/page/status",
+        link: "/page/status-page",
       },
       {
         text: "End-of-Life",
         link: "/page/end-of-life",
       },
     ],
     socialLinks: [
-      { icon: "github", link: "https://github.com/geoadmin/doc-techdoc" },
+      { icon: "github", link: "https://github.com/geoadmin/doc-tech" },
     ],
 
     search: {

.vitepress/theme/custom.css

@@ -25,79 +25,152 @@ figcaption {
   color: var(--vp-c-text-2);
 }
 
+.VPLink:hover {
+  background-color: var(--vp-button-alt-hover-bg);
+  border-color: transparent !important;
+}
+
 /* ==========================
    2. Layout Styles
    ========================== */
-.releases-container {
+
+.home-status-container {
+  width: 100%;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 32px;
+  margin-top: 24px;
+}
+
+.home-status-container a {
+  text-decoration: none;
+  color: var(--vp-button-brand-bg);
+  font-weight: normal;
+}
+
+.home-container {
+  width: 100%;
+  margin-top: 48px;
   display: flex;
   flex-direction: column;
-  gap: 50px;
-  width: 100%;
+  gap: 32px;
 }
 
-.status-announcements-container {
+.releases-container {
+  flex: 2;
+}
+
+.releases-container-cols {
   display: flex;
   flex-direction: column;
+  gap: 32px;
 }
 
-.status-container,
 .announcements-container {
-  flex-basis: 50%;
+  flex: 1;
 }
 
-.status-alert {
-  min-height: 150px;
+.home-container-col {
+  width: 100%;
 }
 
-/* ==========================
-   3. Component Styles
-   ========================== */
+#home-container-h2 {
+  margin: 0px;
+}
 
-/* Releases List */
-.releases-list {
-  flex: 1 1 30%;
-  min-width: 0;
+.home-container-col h4 {
+  margin-bottom: 12px;
 }
 
-.releases-list a {
+.home-container-col span {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.home-container-col a {
+  display: block;
   text-decoration: none;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: center;
-  color: var(--vp-c-text-1);
+  padding: 4px 0px;
+  color: var(--vp-button-brand-bg);
+  font-weight: normal;
 }
 
-.releases-list div {
-  height: 80px;
-  border-top: lightgray solid 1px;
+@media (min-width: 768px) {
+  .releases-container-cols {
+    flex-direction: row;
+  }
 }
 
-.releases-list div:last-child {
-  border-bottom: lightgray solid 1px;
+@media (min-width: 960px) {
+  .home-container {
+    flex-direction: row;
+  }
 }
 
-.releases-list p {
-  margin: 0;
-  font-weight: bold;
+.status-container {
+  width: 100%;
 }
 
-.releases-preview {
-  flex: 1 1 70%;
-  min-width: 0;
+.status-warning {
+  background-color: var(--vp-custom-block-warning-bg);
+  color: var(--vp-custom-block-warning-text);
+  width: 100%;
 }
 
-.releases-preview-content {
-  max-height: 400px;
-  overflow: hidden;
+.status-warning:hover {
+  background-color: var(--vp-c-yellow-3);
+  color: white;
+}
+
+.status-danger {
+  background-color: var(--vp-custom-block-danger-bg);
+  color: var(--vp-custom-block-warning-text);
   width: 100%;
 }
 
-.releases-preview p {
-  margin: 0 0 10px 0;
+.status-danger:hover {
+  background-color: var(--vp-c-red-2);
+  color: white;
+}
+
+.status-content {
+  padding: 10px 30px;
+  width: 100%;
+  height: 64px;
+  display: flex;
+  align-items: center;
+}
+
+.status-content-title {
+  font-weight: bold;
+}
+
+.status-content-text {
+  font-weight: normal;
+}
+
+@media (min-width: 960px) {
+  .status-danger,
+  .status-warning {
+    margin-top: 64px;
+  }
+
+  .item.grid-4 {
+    width: calc(100% / 5) !important;
+  }
+}
+
+@media (min-width: 1456px) {
+  .status-content {
+    max-width: 1376px;
+    margin: auto;
+    padding: 0;
+  }
 }
 
+/* ==========================
+   3. Component Styles
+   ========================== */
+
 .api-block {
   background-color: var(--vp-code-block-bg);
   border-radius: 8px;
@@ -133,17 +206,3 @@ figcaption {
 #link-with-icon:hover {
   color: #d8232a;
 }
-
-/* ==========================
-   5. Media Queries
-   ========================== */
-@media (min-width: 768px) {
-  .releases-container {
-    flex-direction: row;
-  }
-
-  .status-announcements-container {
-    flex-direction: row;
-    gap: 50px;
-  }
-}

README.md

@@ -40,27 +40,19 @@ To add a release note, follow these steps:
 
 6. Save the file and commit your changes.
 
-## How to Edit the Status Page Preview
+## How to Edit the Status Banner
 
-1. To edit the status page preview, use the following variables located in the `status.md` file:
+1. To edit the status banner, use the following variables located in the `status.md` file:
    ```YAML
    previewType: "info"
    previewTitle: "Issues in services"
    previewContent: "Our systems are experiencing issues"
    ```
-2. Update the `previewType` variable to one of the following values based on the desired message type `info`, `warning` or `danger`:
+2. Update the `previewType` variable (`info` or `warning`) to control the color and the position in the page :
 
-   ::: info
-   This is an info box.
-   :::
-
-   ::: warning
-   This is a warning.
-   :::
-
-   ::: danger
-   This is a dangerous warning.
-   :::
+   - `info`: bottom of the page, just text without backgound color
+   - `warning`: top of the page, yellow banner
+   - `danger`: top of the page, red banner
 
 3. Save the file and commit your changes.
 

components/StatusBanner.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  interface StatusBannerProps {
+    type: string;
+    title: string;
+    content: string;
+  }
+
+  const props = defineProps<{
+    status: StatusBannerProps;
+  }>();
+
+  const isWarning = props.status.type === "warning";
+</script>
+<template>
+  <div :class="[isWarning ? 'status-warning' : 'status-danger']">
+    <a href="/page/status-page" class="status-content">
+      <p>
+        <span class="status-content-title">{{ props.status.title }} - </span>
+        <span class="status-content-text">{{ props.status.content }}</span>
+      </p>
+    </a>
+  </div>
+</template>