Merge pull request #127 from barrel/feature/branding-update

Feature/branding update

docs/.npmrc

@@ -1,2 +1,3 @@
 ignore-workspace-root-check=true
 auto-install-peers=true
+strict-peer-dependencies=false

docs/.vitepress/config.ts

@@ -1,11 +1,33 @@
-import { defineConfig } from 'vitepress'
+import { fileURLToPath, URL } from 'node:url'
+import { HeadConfig, defineConfig } from 'vitepress'
 
 export default defineConfig({
   title: 'Shopify Vite Plugin',
   description: 'Vite integration for Shopify themes',
+  appearance: 'force-dark',
 
+  transformHead({ assets }) {
+    const head: HeadConfig[] = []
+
+    const headFont = assets.find(file => /IBMPlexSans.*\.woff2$/)
+
+    if (headFont) {
+      head.push([
+        'link',
+        {
+          rel: 'preload',
+          href: headFont,
+          as: 'font',
+          type: 'font/woff2',
+          crossOrigin: '',
+        }
+      ])
+    }
+
+    return head
+  },
   head: [
-    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:title', content: 'Shopify Vite Plugin' }],
     ['meta', { property: 'og:image', content: 'https://shopify-vite.netlify.app/og-image.png' }],
@@ -17,6 +39,7 @@ export default defineConfig({
   ],
 
   themeConfig: {
+    logo: '/logo.svg',
     sidebar: [
       {
         text: 'Guide',
@@ -75,5 +98,23 @@ export default defineConfig({
       { text: 'Examples', link: '/guide/example-projects' },
       { text: 'Plugins', link: '/guide/plugins' },
     ]
+  },
+  vite: {
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/(VPNavBarSocialLinks|VPNavScreenSocialLinks)\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/BrandButtons.vue', import.meta.url)
+          )
+        },
+        {
+          find: /^.*\/(VPFooter)\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/Footer.vue', import.meta.url)
+          )
+        }
+      ]
+    }
   }
 })

docs/.vitepress/theme/components/AboutBarrel.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="about-barrel">
+    <div class="about-barrel__heading">
+      About the developers:
+      <img class="barrel-icon" src="/barrel-icon.svg" alt="Barrel" />
+    </div>
+
+    <div class="about-barrel__content">
+      <p>
+        The Shopify Vite Plugin was developed by Barrel.<br />
+        Barrel partners with brands to design, build, and optimize web experiences.
+      </p>
+
+      <p>
+        <a href="https://barrelny.com" target="_blank">Learn more about Barrel</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.about-barrel {
+  background-color: rgba(29, 29, 32, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 20px;
+  padding: 33px 40px 66px 26px;
+  width: calc(100% - 48px);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.about-barrel__heading {
+  font-size: 18px;
+  line-height: 1.45;
+  margin-bottom: 30px;
+  white-space: nowrap;
+}
+
+.barrel-icon {
+  display: block;
+  margin-top: 8px;
+  width: 111px;
+}
+
+.about-barrel__content {
+  font-size: 14px;
+  line-height: 1.45;
+  max-width: 460px;
+}
+
+.about-barrel__content p + p {
+  margin-top: 20px;
+}
+
+.about-barrel__content a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.about-barrel__content a:hover {
+  color: var(--vp-c-brand-lighter);
+}
+
+@media (min-width: 680px) {
+  .about-barrel {
+    width: calc(100% - 96px);
+    max-width: 1152px;
+    padding-bottom: 33px;
+  }
+}
+
+@media (min-width: 960px) {
+  .about-barrel {
+    padding: 36px 80px 20px;
+    display: flex;
+  }
+
+  .about-barrel__heading {
+    margin-bottom: 0;
+  }
+
+  .about-barrel__content {
+    margin-left: 25%;
+  }
+}
+</style>

docs/.vitepress/theme/components/BrandButtons.vue

@@ -0,0 +1,26 @@
+<script setup>
+import LinkIcon from './LinkIcon.vue'
+</script>
+
+<template>
+  <div class="brand-buttons">
+    <div>
+      <a
+        class="brand-button brand-button--github"
+        href="https://github.com/barrel/shopify-vite"
+        target="_blank"
+      >
+        View on GitHub
+        <LinkIcon />
+      </a>
+    </div>
+    <div>
+      <a
+        class="brand-button brand-button--primary"
+        href="/guide/"
+      >
+        Get Started
+      </a>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/components/Footer.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+
+const data = useData();
+const nav = data.site.value?.themeConfig?.nav || [];
+const socialLinks = data.site.value?.themeConfig?.socialLinks || [];
+</script>
+
+<template>
+  <div class="footer">
+    <div class="container">
+      <div class="footer__logo">
+        <img src="/logo-footer.svg" alt="Shopify Vite Plugin" />
+      </div>
+      <div class="footer__nav">
+        <ul class="footer-nav__list">
+          <template v-for="item in nav">
+            <li class="footer-nav__item">
+              <a :href="item.link" class="footer-nav__link">
+                {{ item.text }}
+              </a>
+            </li>
+          </template>
+        </ul>
+      </div>
+      <div class="footer__copyright">
+        Released under the MIT License.<br />
+        Made with ❤️ by <a href="https://barrelny.com" target="_blank">Barrel</a>
+      </div>
+
+      <div class="footer__social">
+        <ul class="footer-social__list">
+          <template v-for="item in socialLinks">
+            <li class="footer-social__item">
+              <a href="{{ item.link }}" target="_blank">
+                <img :src="`/${item.icon}.svg`" :alt="item.icon" />
+              </a>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.footer {
+  padding: 24px;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  text-align: left;
+  display: grid;
+  gap: 30px;
+}
+
+.footer__logo img {
+  max-width: 250px;
+}
+
+.footer-nav__list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.footer-nav__link {
+  font-family: var(--vp-font-family-heading);
+  font-size: 27px;
+  line-height: 1.45;
+  letter-spacing: -0.04em;
+}
+
+.footer-nav__link:hover {
+  color: var(--vp-c-brand-lighter);
+}
+
+.footer__copyright {
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.footer__copyright a {
+  text-decoration: underline;
+}
+
+.footer__copyright a:hover {
+  color: var(--vp-c-brand-lighter);
+}
+
+.footer-social__list {
+  display: flex;
+  justify-content: space-between;
+  max-width: 326px;
+}
+
+.footer-social__item img {
+  width: 34px;
+}
+
+@media (min-width: 640px) {
+  .footer {
+    padding: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .footer {
+    padding-bottom: 50px;
+  }
+
+  .container {
+    grid-template-columns: max(360px, 40%) 1fr 1fr;
+    column-gap: 10px;
+    row-gap: 50px;
+  }
+
+  .footer__logo img {
+    max-width: 300px;
+  }
+
+  .footer__copyright {
+    margin-left: auto;
+  }
+
+  .footer__social {
+    grid-column: 2;
+  }
+
+  .footer-social__list {
+    max-width: 220px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    grid-template-columns: 50% 1fr 1fr;
+    row-gap: 80px;
+  }
+
+  .footer__logo img {
+    max-width: 478px;
+  }
+
+  .footer-nav__link {
+    font-weight: 500;
+  }
+
+  .footer-social__list {
+    max-width: 290px;
+  }
+}
+</style>