stagingbar in pure css (no more tailwind) #165 (#166)

* use pure css in StagingBar * chore: update dependencies
wpnuxt · Jul 26, 2024 · 55fd61b · 55fd61b
1 parent fd75a8b
commit 55fd61b
Show file tree

Hide file tree

Showing 7 changed files with 400 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -70,20 +70,20 @@
     "@types/node": "20.14.12",
     "@vitest/coverage-v8": "^2.0.4",
     "@vue/test-utils": "^2.4.6",
-    "@wordpress/env": "^10.3.0",
+    "@wordpress/env": "^10.4.0",
     "changelogen": "^0.5.5",
     "markdownlint-cli": "^0.41.0",
     "nuxt": "^3.12.4",
     "nuxt-content-twoslash": "^0.1.0",
     "release-it": "^17.6.0",
-    "shiki": "^1.11.1",
+    "shiki": "^1.11.2",
     "twoslash": "^0.2.9",
     "typescript": "^5.5.4",
     "untyped": "1.4.2",
-    "vite": "^5.3.4",
+    "vite": "^5.3.5",
     "vitest": "^2.0.4",
     "vue-docgen-web-types": "^0.1.8",
-    "vue-tsc": "2.0.28"
+    "vue-tsc": "2.0.29"
   },
   "peerDependencies": {
     "consola": "^3.2.3",

diff --git a/playground/package.json b/playground/package.json
@@ -10,7 +10,7 @@
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
-    "@iconify-json/heroicons": "^1.1.22",
+    "@iconify-json/heroicons": "^1.1.23",
     "@iconify-json/mdi": "^1.1.67",
     "@iconify-json/uil": "^1.1.8",
     "@nuxt/eslint": "^0.3.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/module.ts b/src/module.ts
@@ -143,6 +143,7 @@ export default defineNuxtModule<WPNuxtConfig>({
     addComponent({ name: 'BlockRenderer', filePath: resolveRuntimeModule('./components/BlockRenderer') })
     addComponent({ name: 'StagingBanner', filePath: resolveRuntimeModule('./components/StagingBanner') })
     addComponent({ name: 'WPNuxtLogo', filePath: resolveRuntimeModule('./components/WPNuxtLogo') })
+    addComponent({ name: 'WordPressLogo', filePath: resolveRuntimeModule('./components/WordPressLogo') })
 
     const userPreviewPath = '~/pages/preview.vue'
       .replace(/^(~~|@@)/, nuxt.options.rootDir)

diff --git a/src/runtime/components/StagingBanner.vue b/src/runtime/components/StagingBanner.vue
@@ -2,6 +2,8 @@
 import { useWPUri } from '../composables/useWPUri'
 import { getCurrentUserName } from '../composables/user'
 import { useWPContent } from '../composables'
+import WPNuxtLogo from './WPNuxtLogo.vue'
+import WordPressLogo from './WordPressLogo.vue'
 import { useRuntimeConfig, ref, watch, useHead, useRoute } from '#imports'
 
 const config = useRuntimeConfig()
@@ -39,59 +41,168 @@ if (import.meta.client) {
 </script>
 
 <template>
-  <div
-    id="wpadminbar"
-    class="h-[40px] w-full fixed bottom-0 left-0 right-0 bg-gray-100 dark:bg-gray-800 shadow-[0_-1px_10px_-3px_rgb(0,0,0,0.3)]"
-    style="z-index: 9999;"
-  >
-    <UContainer class="p-2">
-      <div class="flex w-full">
-        <div class="grow text-left align-top overflow-hidden">
-          <div class="hidden sm:inline-flex mr-6 sm:mr-10">
-            <WPNuxtLogo class="-mt-2 inline-flex" />
-          </div>
-          <div
-            class="inline-block"
+  <div id="wpNuxtStagingBar">
+    <div class="bar-container">
+      <div class="bar-left">
+        <WPNuxtLogo wp-color="white" />
+        <div class="bar-button-wrapper">
+          <NuxtLink
+            :to="wpUri.admin"
+            class="bar-button"
           >
-            <UButton
-              size="2xs"
-              variant="outline"
-              color="gray"
-              icon="i-mdi-wordpress"
-              :to="wpUri.admin"
-              class="mr-2"
-            >
-              WP<span class="hidden sm:inline-flex"> Admin</span>
-            </UButton>
-          </div>
-          <div
-            v-if="post"
-            class="inline-flex"
+            <WordPressLogo /> Admin
+          </NuxtLink>
+        </div>
+        <div
+          v-if="post"
+          class="bar-button-wrapper"
+        >
+          <NuxtLink
+            :to="wpUri.postEdit('' + post.databaseId)"
+            class="bar-button primary"
           >
-            <UButton
-              size="2xs"
-              icon="i-heroicons-pencil"
-              :to="wpUri.postEdit('' + post.databaseId)"
+            <svg
+              class="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
             >
-              Edit <span class="hidden sm:inline-flex">{{ post.contentTypeName }}</span>
-            </UButton>
-          </div>
+              <path
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+                d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"
+              />
+            </svg>
+            Edit <span class="hidden sm:inline-flex">{{ post.contentTypeName }}</span>
+          </NuxtLink>
         </div>
-        <div class="flex-none justify-end text-right align-top">
-          <UButton
+      </div>
+      <div class="bar-right">
+        <div class="bar-button-wrapper">
+          <NuxtLink
             v-if="frontendUrl"
-            size="2xs"
-            class="shadow-md align-top mr-2"
-            variant="outline"
-            color="gray"
             :to="frontendUrl"
+            class="bar-button"
             target="_blank"
-            trailing-icon="i-uil-external-link-alt"
           >
             Live site
-          </UButton>
+            <svg
+              class="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+            >
+              <path
+                fill="black"
+                d="M18 10.82a1 1 0 0 0-1 1V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h7.18a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-7.18a1 1 0 0 0-1-1m3.92-8.2a1 1 0 0 0-.54-.54A1 1 0 0 0 21 2h-6a1 1 0 0 0 0 2h3.59L8.29 14.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L20 5.41V9a1 1 0 0 0 2 0V3a1 1 0 0 0-.08-.38"
+              />
+            </svg>
+          </NuxtLink>
         </div>
       </div>
-    </UContainer>
+    </div>
   </div>
 </template>
+
+<style scoped>
+#wpNuxtStagingBar {
+  background-color: rgba(23, 23, 23, 1);
+  width: 100%;
+  height: 40px;
+  --tw-shadow: 0 -1px 10px -3px rgb(0,0,0,0.3);
+  --tw-shadow-colored: 0 -1px 10px -3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 9999;
+}
+#wpNuxtStagingBar .bar-container {
+  padding: 7px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 80rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+#wpNuxtStagingBar .bar-left {
+  vertical-align: top;
+  text-align: left;
+  overflow: hidden;
+  display: flex;
+  flex-grow: 1;
+}
+#wpNuxtStagingBar .bar-right {
+  vertical-align: top;
+  text-align: right;
+  overflow: hidden;
+  display: flex;
+  flex-grow: 1;
+  flex: none;
+  justify-content: flex-end;
+}
+.wpnuxt-logo {
+  margin-right: 1.5rem;
+}
+.wordpress-logo {
+  width: 1rem;
+  height: 1rem;
+}
+.bar-button {
+  --tw-ring-color: #ccc;
+  --tw-ring-inset: inset;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-text-opacity: 1;
+  color: black;
+  background-color: #eee;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 0.375rem;
+  column-gap: 0.25rem;
+  align-items: center;
+  flex-shrink: 0;
+  display: inline-flex;
+  margin-right: 0.5rem;
+  stroke: black;
+  text-decoration: none;
+}
+.bar-button:hover {
+  --tw-ring-color: #999;
+  background-color: #aaa;
+  text-decoration: none;
+}
+.bar-button.primary {
+  --tw-ring-color: #999;
+  background-color: rgb(186 175 78 / var(--tw-text-opacity));;
+}
+.bar-button.primary:hover {
+  color: white;
+  stroke: white;
+  --tw-ring-color: #666;
+  background-color: rgb(156 142 27 / var(--tw-text-opacity));;
+  text-decoration: none;
+}
+.bar-button-wrapper {
+  margin-top: 0.25rem;
+  vertical-align: top;
+  display: inline-block;
+}
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: transparent;
+}
+</style>
diff --git a/src/runtime/components/WPNuxtLogo.vue b/src/runtime/components/WPNuxtLogo.vue
@@ -1,5 +1,40 @@
+<script setup lang="ts">
+const props = defineProps<{
+  wpColor?: string
+}>()
+const wpLight = props.wpColor ? props.wpColor : 'back'
+const wpDark = props.wpColor ? props.wpColor : 'white'
+</script>
+
 <template>
-  <div class="text-2xl font-bold">
-    <span class="font-serif ">WP</span><span class="text-primary-400">Nuxt</span>
+  <div class="wpnuxt-logo">
+    <span class="wpnuxt-logo-wp">WP</span><span class="wpnuxt-logo-nuxt">Nuxt</span>
   </div>
 </template>
+
+<style scoped>
+.wpnuxt-logo {
+  display: none;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+@media (min-width: 640px) {
+  .wpnuxt-logo {
+    display: inline-flex;
+  }
+}
+.wpnuxt-logo-wp {
+  color: v-bind(wpLight);
+  font-family: ui-serif, Times, serif;
+}
+html.dark .wpnuxt-logo-wp {
+  color: v-bind(wpDark);
+  font-family: ui-serif, Times, serif;
+}
+.wpnuxt-logo-nuxt {
+  margin-top: -1px;
+  --tw-text-opacity: 1;
+  color: rgb(186 175 78 / var(--tw-text-opacity));
+}
+</style>
diff --git a/src/runtime/components/WordPressLogo.vue b/src/runtime/components/WordPressLogo.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    class="wordpress-logo"
+    viewBox="0 0 122.52 122.523"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="black">
+      <path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z" />
+      <path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z" />
+      <path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z" />
+      <path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z" />
+      <path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z" />
+    </g>
+  </svg>
+</template>