DX-223 - Embed into DevHub (#28)

* Upgrade node type

* Update path for embedding

* Use pnpm

* Update lock

* Tmp path

* Disable build step

* Cleanup

* Require working dir argument

* Remove !important CSS

* Reorder --dir

* Transform to npm

* Install

* Support double theme

* Create workflow

* Switch branch

* Remove mount point

* Icon URL

* Apply design system

* Add scripts

* Update components

* Squashed commit of the following:

commit e89e23134df51b81de854ad99a2de4dc990c59a5
Author: Bojan Rajh <[email protected]>
Date:   Mon Jul 17 14:27:40 2023 +0200

    Local changes

commit f8932a91f13579bd508ddced88037d9597b26969
Author: Bojan Rajh <[email protected]>
Date:   Mon Jul 3 17:43:38 2023 +0200

    Improvements

commit 1705f16
Author: Bojan Rajh <[email protected]>
Date:   Mon Jul 3 17:24:40 2023 +0200

    Refactor selection

* Missing code

* fix: download button

* feat: redesign

* feat: new flows

* fix: dark bg

* feat: remove vitepress

* feat: no relative

* feat: don't install docs deps

* feat: revert lock

* feat: deploy redirect

.github/scripts/docs-after-clone.sh

@@ -0,0 +1,16 @@
+#! /usr/bin/env bash
+set -e
+
+[[ -z "$1" ]] && echo "Missing working directory argument" && exit 1
+
+echo "Installing root npm"
+npm --prefix $1 install
+
+echo "Running root build"
+npm run --prefix $1 build
+
+echo "Building figma"
+npm run --prefix $1 start
+
+echo "Copying icons"
+cp -R "$1/icons" "$1/docs/public"

.github/scripts/docs.yml

@@ -0,0 +1,4 @@
+build-end:
+  copy-additional-assets:
+    - public/icons/regular
+    - public/icons/solid

.github/workflows/deploy-developer-portal.yml

@@ -0,0 +1,24 @@
+# This workflow is triggered whenever the main branch is updated
+name: Deploy to DevHub
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  trigger-deployment:
+    name: Trigger deployment
+    runs-on: ubuntu-latest
+    steps:
+
+      - uses: octokit/[email protected]
+        name: Trigger deployment
+        with:
+          route: POST /repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches
+          owner: shopware
+          repo: developer-portal
+          ref: main
+          workflow_id: checkout-test-build-deploy.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.DEV_HUB_PERSONAL_ACCESS_TOKEN }}

.github/workflows/developer-portal-healthckeck.yml

@@ -0,0 +1,19 @@
+name: Healthcheck
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+
+  create-healthcheck:
+    uses: shopware/developer-portal/.github/workflows/healthcheck.yml@main
+    with:
+      owner: ${{ github.repository_owner }}
+      repo: ${{ github.event.repository.name }}
+      branch: ${{ github.event.pull_request.head.ref }}
+      sha: ${{ github.event.pull_request.head.sha }}
+    secrets:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      PERSONAL_TOKEN: ${{ secrets.DEV_HUB_PERSONAL_ACCESS_TOKEN }}

.github/workflows/docs.yml

@@ -7,30 +7,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 'lts/gallium'
-
-      - name: Retrieve the cached docs "node_modules" directory (if present)
-        uses: actions/cache@v2
-        id: node-cache-docs
-        with:
-          path: docs/node_modules
-          key: node-modules-cache-${{ runner.os }}-${{ hashFiles('docs/package-lock.json') }}
-
-      - name: Install docs dependencies (if the cached directory was not found)
-        if: steps.node-cache-docs.outputs.cache-hit != 'true'
-        run: cd ./docs && npm ci
-
-      - name: Create the docs directory locally in CI
-        run: cd ./docs && npm run build
-
-      - name: Deploy 🚀
+      - name: Deploy redirect
         if: github.ref == 'refs/heads/main'
-        uses: JamesIves/github-pages-deploy-action@4.1.4
+        uses: JamesIves/github-pages-deploy-action@4.5.0
         with:
           branch: gh-pages
-          folder: docs/.vitepress/dist
+          folder: redirect
+          clean: true

.github/workflows/update-healthcheck.yml

@@ -0,0 +1,39 @@
+# This workflow is triggered from developer-portal
+name: Update healthcheck
+
+on:
+  workflow_dispatch:
+    inputs:
+      owner:
+        description: "Owner to checkout"
+        required: true
+        type: string
+      repo:
+        description: "Repo to checkout"
+        required: true
+        type: string
+      check:
+        description: "Check ID"
+        required: true
+        type: string
+      conclusion:
+        description: "Healthcheck conclusion"
+        required: true
+        type: string
+      run_id:
+        description: "Workflow run ID"
+        required: true
+        type: string
+
+jobs:
+
+  update-healthcheck:
+    uses: shopware/developer-portal/.github/workflows/update-healthcheck.yml@main
+    with:
+      owner: ${{ inputs.owner }}
+      repo: ${{ inputs.repo }}
+      check: ${{ inputs.check }}
+      conclusion: ${{ inputs.conclusion }}
+      run_id: ${{ inputs.run_id }}
+    secrets:
+      TOKEN: ${{ secrets.GITHUB_TOKEN }}

docs/components/IconDisplay.vue

@@ -1,59 +1,62 @@
 <template>
-<div class="icon-container">
-  <div class="icon-display">
-    <img :id="id" :src="withBase(icon.path)" :alt="icon.name" @click="copyIconName"/>
-  </div>
-
-  <p>{{ icon.name }}</p>
-</div>
+  <a href="#" class="IconDisplay" :class="mode ? `--mode-${mode}` : null" @click.prevent.stop="$emit('select')">
+    <div class="IconDisplay_wrap">
+      <SwagIcon class="IconDisplay_icon" :icon="icon.name" :type="icon.mode" />
+      <span v-if="mode === 'inline'" class="IconDisplay_name">{{ icon.name }}</span>
+    </div>
+    <span v-if="mode !== 'inline'" class="IconDisplay_name">{{ icon.name }}</span>
+  </a>
 </template>
 
 <script setup>
-import {defineProps, computed} from 'vue';
-import {withBase} from 'vitepress';
+import {computed} from 'vue';
 
 const props = defineProps({
   icon: Object,
+  mode: Object
 })
 
-const copyIconName = () => {
-  const tempTextArea = document.createElement('textarea');
-  tempTextArea.value = `${props.icon.regular ? 'regular-' : 'solid-'}${props.icon.name}`;
-  document.body.appendChild(tempTextArea);
-  tempTextArea.select();
-  document.execCommand('copy');
-  document.body.removeChild(tempTextArea);
-}
-
 const id = computed(() => {
-  return `meteor-icon-kit__${props.icon.regular ? 'regular-' : 'solid-'}${props.icon.name}`;
+  return `meteor-icon-kit__${props.icon.mode}-${props.icon.name}`;
 });
 </script>
 
-<style lang="css" scoped>
-.icon-container {
-  text-align: center;
-  font-size: 13px;
-  position: relative;
-  width: 116px;
-}
-
-.icon-container p {
-  margin: 0;
-}
-
-.icon-display {
+<style lang="scss">
+.IconDisplay {
   display: flex;
-  background: #fff;
   width: 100%;
-  height: 116px;
-  border-radius: 8px;
   justify-content: center;
   align-items: center;
-  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 8%)) drop-shadow(0 2px 1px rgba(0, 0, 0, 6%)) drop-shadow(0 1px 3px rgba(0, 0, 0, 10%));
-}
-
-img {
-  cursor: pointer;
+  flex-direction: column;
+  gap: .5rem;
+  color: var(--vp-c-text);
+  &_name,
+  &_icon {
+    color: var(--vp-c-text);
+  }
+  &_name {
+    @apply text-xs font-medium;
+  }
+  &_wrap {
+    @apply bg-[var(--sw-c-gray-50)] flex items-center justify-center;
+    width: 100%;
+    .dark & {
+      @apply bg-[var(--sw-c-gray-dark-700)];
+    }
+  }
+  &.--mode-inline {
+    flex-direction: row;
+    .IconDisplay_wrap {
+      @apply p-4 items-center gap-2;
+      justify-content: flex-start;
+      --icon-size: 1.725rem;
+    }
+  }
+  &:not(.--mode-inline) {
+    .IconDisplay_wrap {
+      aspect-ratio: 1;
+      --icon-size: 1.5rem;
+    }
+  }
 }
 </style>