improve: LDP-2708: Update playground with changes from demo and fix scaffold (#316)

* improve: LDP-2708: Update playground with changes from demo

* LDP-2708: Remove console log

* LDP-2708: Improve init to create directories

* LDP-2708: Add layouts to package

* LDP-2708: Remove vite config

---------

Co-authored-by: Matic Fink <[email protected]>

Author: alexieremia

bin/nuxt-drupal-ce-init.cjs

@@ -9,9 +9,17 @@ const target = '.'
 function copyFile(source, target) {
   const targetFile = target + '/' + path.basename(source)
 
-  // If target is a directory, a new file with the same name will be created
+  // Create the target directory if it doesn't exist
+  const targetDir = path.dirname(targetFile)
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true })
+    console.log(targetDir + ' - Directory created.')
+  }
+
+  // If target is a file that doesn't exist, create it
   if (!fs.existsSync(targetFile)) {
     console.log(targetFile + ' - Created.')
+    fs.readFileSync(source)
     fs.writeFileSync(targetFile, fs.readFileSync(source))
   }
   else {
@@ -33,7 +41,9 @@ function syncDir(directory) {
 // Here we want to make sure our directories exist.
 fs.mkdirSync('./components/global', { recursive: true })
 fs.mkdirSync('./pages', { recursive: true })
+fs.mkdirSync('./layouts', { recursive: true })
 
 syncDir('pages')
+syncDir('layouts')
 syncDir('components')
 copyFile(scaffoldDir + '/app.vue', target)

eslint.config.mjs

@@ -1,17 +1,14 @@
-import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default createConfigForNuxt({
-  features: {
-    tooling: true,
-    stylistic: true,
-  },
-}).override('nuxt/rules', {
-  rules: {
-    'vue/no-v-html': 'off',
-    'no-useless-escape': 'off',
-    'vue/multi-word-component-names': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-expressions': 'off',
-  },
-  ignores: ['playground/server'],
-})
+export default withNuxt([
+  {
+    rules: {
+      'vue/no-v-html': 'off',
+      'no-useless-escape': 'off',
+      'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+    ignores: ['playground/server'],
+  }
+])

package.json

@@ -18,7 +18,8 @@
     "dist",
     "playground/components",
     "playground/pages",
-    "playground/app.vue"
+    "playground/app.vue",
+    "playground/layouts"
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",

playground/components/Navigation/NavigationAccount.vue

@@ -0,0 +1,32 @@
+<template>
+  <ul class="account-menu">
+    <li
+      v-for="menuItem in accountMenu"
+      :key="menuItem.key"
+    >
+      <a
+        class="item"
+        :href="menuItem.relative"
+      >
+        {{ menuItem.title }}
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+const accountMenu = await useDrupalCe().fetchMenu('account')
+</script>
+
+<style lang="css" scoped>
+.account-menu {
+  display: inline-flex;
+  list-style: none;
+}
+
+.item {
+  margin: 0 1rem;
+  text-decoration: none;
+  color: #222;
+}
+</style>

playground/components/global/drupal-form--default.vue

@@ -19,6 +19,23 @@ defineProps<{
   method: string
 }>()
 defineSlots<{
-  default();
+  default()
 }>()
 </script>
+
+<style>
+form {
+  padding: 0 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.325rem;
+}
+
+input {
+  max-width: 90%;
+  padding: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+</style>

playground/layouts/default.vue

@@ -1,10 +1,24 @@
 <template>
-  <header>
-    <SiteLanguageSwitcher v-if="useNuxtApp().$i18n" />
-    <NavigationMain />
-  </header>
-  <SiteMessages />
-  <main id="main">
-    <slot />
-  </main>
+  <div>
+    <header>
+      <SiteLanguageSwitcher v-if="useNuxtApp().$i18n" />
+      <NavigationMain />
+    </header>
+    <SiteMessages />
+    <main id="main">
+      <slot />
+    </main>
+    <footer>
+      <NavigationAccount />
+    </footer>
+  </div>
 </template>
+
+<style>
+#main {
+  min-height: 70vh;
+}
+body {
+  background-color: white;
+}
+</style>

playground/nuxt.config.ts

@@ -6,6 +6,9 @@ export default defineNuxtConfig({
     DrupalCe,
   ],
   compatibilityDate: '2024-12-16',
+  nitro: {
+    compressPublicAssets: true,
+  },
   drupalCe: {
     drupalBaseUrl: 'http://127.0.0.1:3000',
     ceApiEndpoint: '/ce-api',