├── types
    ├── index.d.ts
    └── funkyImage.d.ts
├── example.env
├── public
    └── favicon.png
├── tsconfig.json
├── .storybook
    ├── preview.js
    └── main.js
├── app
    ├── utils
    │   ├── delay.ts
    │   ├── emdashed.ts
    │   ├── setCookie.ts
    │   ├── keysToCamelCase.ts
    │   ├── getCookie.ts
    │   ├── splitAtDash.ts
    │   └── buildVideoEmbedUrl.ts
    ├── error.vue
    ├── components
    │   ├── wp-block
    │   │   ├── core-list-item.vue
    │   │   ├── core-spacer.vue
    │   │   ├── core-columns.vue
    │   │   ├── core-heading.vue
    │   │   ├── core-list.vue
    │   │   ├── core-paragraph.vue
    │   │   ├── core-video.vue
    │   │   ├── core-column.vue
    │   │   ├── core-quote.vue
    │   │   ├── core-image.vue
    │   │   ├── core-embed.vue
    │   │   └── core-gallery.vue
    │   ├── global-header.vue
    │   ├── wp-menu-item.vue
    │   ├── wp-menu.vue
    │   ├── wp-seo.vue
    │   ├── wp-image.vue
    │   └── wp-content.vue
    ├── layouts
    │   └── default.vue
    ├── plugins
    │   ├── init.ts
    │   └── browser.client.ts
    ├── assets
    │   ├── css
    │   │   ├── media.css
    │   │   ├── vars.css
    │   │   ├── main.css
    │   │   └── transitions.css
    │   └── svgs
    │   │   └── logo-funkhaus.svg
    ├── composables
    │   └── useWpFetch.ts
    ├── pages
    │   ├── [slug].vue
    │   ├── about.vue
    │   ├── directors.vue
    │   └── index.vue
    ├── app.vue
    ├── middleware
    │   └── redirect-trailing-slash.global.ts
    └── stores
    │   └── site.ts
├── .gitignore
├── .vscode
    └── settings.json
├── eslint.config.mjs
├── .github
    ├── PULL_REQUEST_TEMPLATE.md
    └── ISSUE_TEMPLATE
    │   └── component-request.md
├── package.json
├── TODO-FUXT.md
├── README.md
└── nuxt.config.ts


/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from './funkyImage'
2 | 


--------------------------------------------------------------------------------
/example.env:
--------------------------------------------------------------------------------
1 | WORDPRESS_API_URL = "https://fuxt-backend.funkhaus.us/wp-json/fuxt/v1/"


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antfu/fuxt/master/public/favicon.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/types/funkyImage.d.ts:
--------------------------------------------------------------------------------
1 | export type FunkyImageProps = {
2 |   src: string
3 |   mediaDetails?: {
4 |     width: number
5 |     height: number
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
 1 | const preview = {
 2 |   parameters: {
 3 |     controls: {
 4 |       matchers: {
 5 |         color: /(background|color)$/i,
 6 |         date: /Date$/i
 7 |       }
 8 |     }
 9 |   }
10 | }
11 | 
12 | export default preview
13 | 


--------------------------------------------------------------------------------
/app/utils/delay.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Used as an async/await friendly alternative to setTimeout
 3 |  */
 4 | function delay(time: number = 0): Promise<void> {
 5 |     return new Promise((res) => {
 6 |         setTimeout(res, time)
 7 |     })
 8 | }
 9 | 
10 | export default delay


--------------------------------------------------------------------------------
/app/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <NuxtLayout>
 3 |         <section class="page page-error">
 4 |             Nuxt error page
 5 |             <!-- TODO Show error code on this page -->
 6 |         </section>
 7 |     </NuxtLayout>
 8 | </template>
 9 | 
10 | <script setup lang="ts">
11 | 
12 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.useFlatConfig": true,
 3 |   "editor.codeActionsOnSave": {
 4 |     "source.fixAll.eslint": "explicit",
 5 |     "source.organizeImports": "never"
 6 |   },
 7 |   "eslint.codeActionsOnSave.mode": "all",
 8 |   "eslint.codeAction.showDocumentation": {
 9 |     "enable": true
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
 2 | 
 3 | export default createConfigForNuxt({
 4 |     features: {
 5 |         stylistic: {
 6 |             indent: 4,
 7 |             semi: false,
 8 |             commaDangle: 'never'
 9 |         },
10 |         typescript: true
11 |     }
12 | })
13 | 


--------------------------------------------------------------------------------
/app/utils/emdashed.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Replace hyphen with emdash
 3 |  */
 4 | function emdashed(value: string = ""): string {
 5 |     if (!value) {
 6 |         return ""
 7 |     }
 8 | 
 9 |     // Replace hyphen with emdash if value is a string
10 |     if (typeof value === "string" || value instanceof String) {
11 |         value = value.replace(/ &#8211 /g, " — ").replace(/ - /g, " — ")
12 |     }
13 |     
14 |     return value
15 | }
16 | 
17 | export default emdashed
18 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-list-item.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <li
 3 |         class="core-list-item"
 4 |         v-html="innerHtml"
 5 |     />
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | const props = defineProps({
10 |     innerHtml: {
11 |         type: String,
12 |         default: ''
13 |     },
14 |     attrs: {
15 |         type: Object,
16 |         default: () => ({})
17 |     },
18 | })
19 | </script>
20 | 
21 | <style scoped>
22 | .core-list-item {
23 | }
24 | </style>


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <main :class="classes">
 3 |         <wp-seo />
 4 | 
 5 |         <global-header>
 6 |             <slot name="breadcrumbs">
 7 |                 <!-- Default crumbs here -->
 8 |             </slot>
 9 |         </global-header>
10 | 
11 |         <slot />
12 | 
13 |         <!-- TODO: <client-only><wp-controls /> -->
14 |     </main>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | const classes = computed(() => ['default-layout'])
19 | </script>
20 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-spacer.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div
 3 |         class="core-spacer"
 4 |     />
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | const props = defineProps({
 9 |     attrs: {
10 |         type: Object,
11 |         default: () => ({})
12 |     },
13 | })
14 | 
15 | const styles = computed(() => ({
16 |     height: props.attrs?.height || '0px',
17 | }))
18 | </script>
19 | 
20 | <style scoped>
21 | .core-spacer {
22 |     padding: 0 0 v-bind('styles.height') 0;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | /** @type { import('storybook-vue').StorybookConfig } */
 2 | const config = {
 3 |   stories: [
 4 |     '../pages/**/*.stories.@(js|jsx|ts|tsx|mdx)',
 5 |     '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'
 6 |   ],
 7 |   addons: [
 8 |     '@storybook/addon-links',
 9 |     '@storybook/addon-essentials',
10 |     '@chromatic-com/storybook'
11 |   ],
12 |   framework: {
13 |     name: '@storybook-vue/nuxt',
14 |     options: {}
15 |   },
16 |   docs: {
17 |     autodocs: 'tag'
18 |   }
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/app/components/global-header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <header class="global-header">
 3 |         <nuxt-link to="/">
 4 |             <svg-logo-funkhaus class="logo" />
 5 |         </nuxt-link>
 6 | 
 7 |         <wp-menu name="Main Menu" />
 8 | 
 9 |         <slot />
10 |     </header>
11 | </template>
12 | 
13 | <script setup lang="ts">
14 | 
15 | </script>
16 | 
17 | <style scoped>
18 | .global-header {
19 |     background-color: lightgray;
20 | 
21 |     /* @media (--lt-phone) {
22 |         Mobil styles go here
23 |     } */
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/app/utils/setCookie.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Set a cookie. Used by custom video player.
 3 |  * SEE https://stackoverflow.com/a/24103596/503546
 4 |  */
 5 | function setCookie(name: string, value: string, days?: number): void {
 6 |     let expires = ""
 7 |     if (days) {
 8 |         const date = new Date()
 9 |         date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
10 |         expires = "; expires=" + date.toUTCString()
11 |     }
12 |     document.cookie = `${name}=${value || ""}${expires}; path=/`
13 | }
14 | 
15 | export default setCookie
16 | 


--------------------------------------------------------------------------------
/app/utils/keysToCamelCase.ts:
--------------------------------------------------------------------------------
 1 | // Convert object keys to camelCase
 2 | // TODO Fix typescript errors in this
 3 | function keysToCamelCase(obj: unknown): unknown {
 4 |     if (Array.isArray(obj)) {
 5 |         return obj.map(v => keysToCamelCase(v));
 6 |     } else if (obj != null && obj.constructor === Object) {
 7 |         return Object.keys(obj).reduce(
 8 |         (result, key) => ({
 9 |             ...result,
10 |             [_CamelCase(key)]: keysToCamelCase(obj[key]),
11 |         }),
12 |         {},
13 |         );
14 |     }
15 |     return obj;
16 | }
17 | 
18 | export default keysToCamelCase
19 | 


--------------------------------------------------------------------------------
/app/plugins/init.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtPlugin(async () => {
 2 |     const siteStore = useSiteStore()
 3 |     if (siteStore.hasLoaded) {
 4 |         return
 5 |     }
 6 | 
 7 |     // Populate the store with the settings from the WP API
 8 |     await useSiteStore().init()
 9 | 
10 |     // Configure NuxtLink defaults
11 |     defineNuxtLink({
12 |         activeClass: 'active-link',
13 |         exactActiveClass: 'exact-active-link',
14 |         prefetch: true,
15 |         trailingSlash: 'append',
16 |         prefetchedClass: 'prefetched-link'
17 |     })
18 | 
19 |     siteStore.hasLoaded = true
20 | })
21 | 


--------------------------------------------------------------------------------
/app/utils/getCookie.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Get a cookie. Used by custom video player.
 3 |  * SEE https://stackoverflow.com/a/24103596/503546
 4 |  */
 5 | function getCookie(name: string): string | null {
 6 |     const nameEQ = `${name}=`
 7 |     const cookiesArray = document.cookie.split(";")
 8 |     
 9 |     for (let i = 0; i < cookiesArray.length; i++) {
10 |         let cookie = cookiesArray[i].trim()
11 |         if (cookie.indexOf(nameEQ) === 0) {
12 |             return cookie.substring(nameEQ.length, cookie.length)
13 |         }
14 |     }
15 |     
16 |     return null
17 | }
18 | 
19 | export default getCookie
20 | 


--------------------------------------------------------------------------------
/app/assets/css/media.css:
--------------------------------------------------------------------------------
 1 | @custom-media --small-viewport (max-width: 600px);
 2 | @custom-media --medium-viewport (min-width: 601px) and (max-width: 1200px);
 3 | @custom-media --large-viewport (min-width: 1201px);
 4 | 
 5 | @custom-media --gt-cinema only screen and (min-width: 1800px);
 6 | @custom-media --lt-cinema only screen and (max-width: 1799px);
 7 | @custom-media --lt-tablet only screen and (max-width: 1024px);
 8 | @custom-media --lt-phone only screen and (max-width: 850px);
 9 | /* @custom-media --phone-landscape: 'only screen and (max-width: 850px) and (orientation: landscape)'; */
10 | /* @custom-media --pad: "only screen and (min-device-width : 768px) and (max-device-width : 1024px)"; */
11 | @custom-media --has-hover (hover: hover);
12 | 
13 | 
14 | 
15 | /* Usage example:
16 | @media (--lt-phone) {
17 |     background-color: red;
18 | } 
19 | */


--------------------------------------------------------------------------------
/app/composables/useWpFetch.ts:
--------------------------------------------------------------------------------
 1 | // Fetch from WP, parse response to camelCase object and return ref
 2 | export function useWpFetch(endpoint: string, options: object = {}) {
 3 |     const baseURL = useRuntimeConfig().public.wordpressApiUrl
 4 | 
 5 |     const response = useFetch(endpoint, {
 6 |         transform: (data) => {
 7 |             return keysToCamelCase(data || {})
 8 |         },
 9 |         onRequest({ options }) {
10 |             const { enabled } = usePreviewMode()
11 | 
12 |             // Add credentials to fetch request if preview enabled
13 |             if (enabled.value) {
14 |                 options.credentials = 'include'
15 |                 options.headers = { ...options.headers, Preview: query.preview }
16 |             }
17 |         },
18 |         baseURL,
19 |         ...options
20 |     })
21 | 
22 |     return response
23 | }
24 | 


--------------------------------------------------------------------------------
/app/pages/[slug].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="page-fallback">
 3 |         Fallback page here
 4 | 
 5 |         <!-- <h2 v-text="data.title" /> -->
 6 |     </section>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | const route = useRoute()
11 | 
12 | // Fetch data from WP
13 | const { data } = await useWpFetch(`/post`, {
14 |     query: {
15 |         uri: route.path
16 |     }
17 | })
18 | </script>
19 | 
20 | <style scoped>
21 | .page-fallback {
22 |     min-height: 200vh;
23 | 
24 |     color: var(--color-black);
25 |     /* margin: 0 auto; */
26 |     /* min-height: var(--unit-100vh); */
27 | 
28 |     /* Hover states */
29 |     /* @media #{$has-hover} {
30 |          Hover styles would go here
31 |     } */
32 | 
33 |     /* Breakpoints */
34 |     @media (--lt-phone) {
35 |         background-color: blue;
36 |     }
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/app/utils/splitAtDash.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Splits a string by the separator and optionally keeps the separator in the result.
 3 |  * Used primarily for separating text at an emdash (—).
 4 |  */
 5 | // TODO: refactor this function to use a regular expression instead of a string for separator
 6 | function splitAtDash(text: string = "", separator: string = " — ", keepSeparator: boolean = false): string[] {
 7 |     let output = text.split(separator);
 8 | 
 9 |     // Add separator back into the array
10 |     // This is useful if separating by an opening quote
11 |     if (keepSeparator) {
12 |         output = output.map((element, index) => {
13 |             if (index > 0) {
14 |                 return ` ${separator} ` + element;
15 |             }
16 |             return element;
17 |         });
18 |     }
19 | 
20 |     return output;
21 | }
22 | 
23 | export default splitAtDash;
24 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | **Component Created:** {path and filename}.vue from #{issue number}
 2 | 
 3 | **Stories:** {story filename}.stories.js
 4 | 
 5 | **Imports:**
 6 | 
 7 | -   {list any imported components or libraries}
 8 | 
 9 | **Notes:**
10 | 
11 | {Any notes about what you built. How does it work? Anything missing?}
12 | 
13 | **Time Report:**
14 | 
15 | This took me {x} hours to build this.
16 | 
17 | **Checklist:**
18 | 
19 | -   [ ] I double checked it looks like the designs
20 | -   [ ] I completed any required mobile breakpoint styling
21 | -   [ ] I completed any required hover state styling
22 | -   [ ] I included a working Storybook file
23 | -   [ ] I included a Story that showed some edge case working correctly (long text, short screen, missing image etc.)
24 | -   [ ] I added notes above about how long it took to build this component
25 | -   [ ] I assigned this PR to someone to review
26 | 


--------------------------------------------------------------------------------
/app/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="page-home">
 3 |         About page
 4 |         <br>
 5 |         <nuxt-link to="/">
 6 |             Home
 7 |         </nuxt-link>
 8 |         <br>
 9 |         <nuxt-link to="/directors">
10 |             Directors
11 |         </nuxt-link>
12 |     </section>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | const siteStore = useSiteStore()
17 | 
18 | const toggleMenu = () => {
19 |     siteStore.menuOpened = !siteStore.menuOpened
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | .page-home {
25 |     min-height: 200vh;
26 | 
27 |     color: var(--color-black);
28 |     /* margin: 0 auto; */
29 |     /* min-height: var(--unit-100vh); */
30 | 
31 |     /* Hover states */
32 |     /* @media #{$has-hover} {
33 |          Hover styles would go here
34 |     } */
35 | 
36 |     /* Breakpoints */
37 |     @media (--lt-phone) {
38 |         background-color: blue;
39 |     }
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/app/pages/directors.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="page-directors">
 3 |         directors page
 4 |         <br>
 5 |         <nuxt-link to="/">
 6 |             Home
 7 |         </nuxt-link>
 8 |         <br>
 9 |         <nuxt-link to="/About">
10 |             About
11 |         </nuxt-link>
12 |     </section>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | const siteStore = useSiteStore()
17 | 
18 | const toggleMenu = () => {
19 |     siteStore.menuOpened = !siteStore.menuOpened
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | .page-directors {
25 |     min-height: 200vh;
26 | 
27 |     color: var(--color-black);
28 |     /* margin: 0 auto; */
29 |     /* min-height: var(--unit-100vh); */
30 | 
31 |     /* Hover states */
32 |     /* @media #{$has-hover} {
33 |          Hover styles would go here
34 |     } */
35 | 
36 |     /* Breakpoints */
37 |     @media (--lt-phone) {
38 |         background-color: blue;
39 |     }
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/app/assets/css/vars.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --color-white: #ffffff;
 3 |     --color-black: #000000;
 4 | 
 5 |     --unit-100vh: 100vh;
 6 |     --unit-gap: 40px;
 7 |     --unit-max-width: 1800px;
 8 | 
 9 |     --font-primary: sans-serif;
10 |     --font-secondary: serif;
11 | 
12 |     --easing-authentic-motion: cubic-bezier(0.4, 0, 0.2, 1);
13 | 
14 |     /* Breakpoints */
15 |     @media (--lt-phone) {
16 |         --unit-gap: 20px;
17 |     }
18 | 
19 |     /* Handle 100vh on mobile using Dynamic View Height units */
20 |     @supports (height: 100dvh) {
21 |         --unit-100vh: 100dvh;
22 |     }
23 | }
24 | 
25 | /* Set Breakpoint name, this is saved into Pina */
26 | :root {
27 |     --breakpoint-name: "desktop";
28 |     @media (--gt-cinema) {
29 |         --breakpoint-name: "cinema";
30 |     }
31 |     @media (--lt-cinema) {
32 |         --breakpoint-name: "desktop";
33 |     }
34 |     @media (--lt-tablet) {
35 |         --breakpoint-name: "tablet";
36 |     }
37 |     @media (--lt-phone) {
38 |         --breakpoint-name: "phone";
39 |     }
40 | }


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const route = useRoute()
 3 | const siteStore = useSiteStore()
 4 | 
 5 | // Computed
 6 | const htmlClasses = computed(() => [
 7 |     'html',
 8 |     'route-' + route.name?.toString(),
 9 |     { 'menu-opened': siteStore.menuOpened }
10 | ])
11 | 
12 | // Methods
13 | useHead(() => {
14 |     return {
15 |         titleTemplate(titleChunk) {
16 |             const title = titleChunk
17 |             const siteTitle = siteStore.settings?.title || ''
18 | 
19 |             let output = siteTitle
20 | 
21 |             switch (true) {
22 |                 case siteTitle == title:
23 |                     output = siteTitle
24 |                     break
25 | 
26 |                 case Boolean(title):
27 |                     output = `${siteTitle} - ${title}`
28 |                     break
29 |             }
30 | 
31 |             return output
32 |         }
33 |     }
34 | })
35 | </script>
36 | 
37 | <template>
38 |     <Html :class="htmlClasses" />
39 | 
40 |     <NuxtLayout>
41 |         <NuxtPage />
42 |     </NuxtLayout>
43 | </template>
44 | 
45 | <style></style>
46 | 


--------------------------------------------------------------------------------
/app/components/wp-menu-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <li :class="classes">
 3 |         <nuxt-link
 4 |             :to="props.item.uri || props.item.url"
 5 |             :target="props.item.target"
 6 |         >
 7 |             {{ props.item?.title || '' }}
 8 |         </nuxt-link>
 9 | 
10 |         <ul
11 |             v-if="hasSubMenu"
12 |             class="sub-menu"
13 |         >
14 |             <wp-menu-item
15 |                 v-for="child in children"
16 |                 :key="child.id"
17 |                 :item="child"
18 |                 class="sub-menu-item"
19 |             />
20 |         </ul>
21 |     </li>
22 | </template>
23 | 
24 | <script setup lang="ts">
25 | 
26 | const props = defineProps({
27 |     item: {
28 |         type: Object,
29 |         default: () => {}
30 |     }
31 | })
32 | 
33 | // Computeds
34 | const children = computed(() => props.item?.children || [])
35 | const hasSubMenu = computed(() => Boolean(children.value.length || 0))
36 | const classes = computed(() => ['wp-menu-item', 'menu-item', { 'has-sub-menu': hasSubMenu.value }, ...props.item?.classes || []])
37 | 
38 | </script>
39 | 


--------------------------------------------------------------------------------
/app/middleware/redirect-trailing-slash.global.ts:
--------------------------------------------------------------------------------
 1 | import { withTrailingSlash, stringifyQuery } from 'ufo'
 2 | 
 3 | export default defineNuxtRouteMiddleware((to, from) => {
 4 |     const pathEndsWithSlash = to.path.endsWith('/')
 5 |     let redirectUrl = withTrailingSlash(to.path)
 6 | 
 7 |     switch (true) {
 8 |         case to.path == '/':
 9 |             // The home page
10 |             return
11 |             break
12 | 
13 |         case to.fullPath.includes('sitemap.xml'):
14 |             return
15 |             break
16 | 
17 |         case to.path.includes('.'):
18 |             // This is most likly a request to a specific file, like filename.png,
19 |             // Thus we don't want to add a trailingslash. Storybook does this with iframe.html
20 |             return
21 |             break
22 | 
23 |         case !pathEndsWithSlash:
24 |             // Add a trailing slash always
25 |             redirectUrl = withTrailingSlash(to.path)
26 |             if (to.query) {
27 |                 redirectUrl = `${redirectUrl}?${stringifyQuery(to.query)}`
28 |             }
29 |             return navigateTo(redirectUrl, { redirectCode: 301 })
30 |             break
31 |     }
32 | })
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fuxt",
 3 |   "version": "4.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "engines": {
 7 |     "node": "22.x"
 8 |   },
 9 |   "scripts": {
10 |     "build": "nuxt build",
11 |     "dev": "nuxt dev",
12 |     "generate": "nuxt generate",
13 |     "preview": "nuxt preview",
14 |     "postinstall": "nuxt prepare",
15 |     "storybook": "STORYBOOK=true storybook dev -p 6006",
16 |     "build-storybook": "STORYBOOK=true storybook build"
17 |   },
18 |   "dependencies": {
19 |     "nuxt": "^3.13.2"
20 |   },
21 |   "devDependencies": {
22 |     "@csstools/postcss-global-data": "^3.0.0",
23 |     "@nuxt/fonts": "^0.10.0",
24 |     "@nuxtjs/sitemap": "6.0.1",
25 |     "@nuxtjs/storybook": "^8.2.0",
26 |     "@pinia/nuxt": "^0.5.1",
27 |     "@storybook/addon-essentials": "^8.3.0",
28 |     "@storybook/addon-links": "^8.3.0",
29 |     "@storybook/vue3": "^8.3.0",
30 |     "@types/node": "^22.5.5",
31 |     "@vueuse/core": "^11.1.0",
32 |     "@vueuse/nuxt": "^11.1.0",
33 |     "nuxt-lodash": "^2.5.3",
34 |     "nuxt-svgo": "^4.0.6",
35 |     "pinia": "^2.1.7",
36 |     "postcss": "^8.4.47",
37 |     "postcss-custom-media": "^11.0.1",
38 |     "postcss-nested": "^6.2.0",
39 |     "storybook": "^8.3.0",
40 |     "vue": "^3.4.36"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="page-home">
 3 |         Home page here
 4 | 
 5 |         <button @click="toggleMenu()">
 6 |             Toggle menu
 7 |         </button>
 8 | 
 9 |         <br>
10 | 
11 |         <!-- <div v-html="data.content" /> -->
12 | 
13 |         <wp-image :image="data.featuredMedia" />
14 |     </section>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | const siteStore = useSiteStore()
19 | 
20 | // Fetch data from WP
21 | const { data } = await useWpFetch(`/post`, {
22 |     query: {
23 |         uri: '/'
24 |     }
25 |     // pick: ['title'],
26 |     // onResponseError({ error }) {
27 |     //     console.warn('<wp-seo> Fetch Error:', parsedPath, error)
28 |     //     data.value = {}
29 |     // }
30 | })
31 | 
32 | // Methods
33 | const toggleMenu = () => {
34 |     siteStore.menuOpened = !siteStore.menuOpened
35 | }
36 | </script>
37 | 
38 | <style scoped>
39 | .page-home {
40 |     min-height: 200vh;
41 | 
42 |     color: var(--color-black);
43 |     /* margin: 0 auto; */
44 |     /* min-height: var(--unit-100vh); */
45 | 
46 |     /* Hover states */
47 |     /* @media #{$has-hover} {
48 |          Hover styles would go here
49 |     } */
50 | 
51 |     /* Breakpoints */
52 |     @media (--lt-phone) {
53 |         background-color: blue;
54 |     }
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/app/assets/svgs/logo-funkhaus.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="180" height="24" viewBox="0 0 180 24">
2 |   <path fill="#011931" d="M5.1 5.8v2.5h9v4.9s-6 .3-9 .4v9.7H.2S0 13.3 0 8C0 5.2.4.5.4.5L15.3.4v4.9l-10.2.5zm25.2 18c-5.6 0-10.2-2.1-10.2-11.4 0-4.1.3-11.8.3-11.8h5.1s-.1 8.2-.1 11.8c0 4.9 2.1 6.3 5 6.3s5-1.3 5-6.3c0-3.6-.1-11.8-.1-11.8h5.1s.3 7.7.3 11.8c-.2 9.3-4.8 11.4-10.4 11.4zm20.4-.5h-4.8s-.1-8.8-.2-14.1c0-2.8.3-8.7.3-8.7h4.6l9.8 15.4L60 .6h4.8s.1 8.6.2 13.9c0 2.8-.3 8.8-.3 8.8h-5.1L50.3 9.2l.4 14.1zm31.3 0s-3.4-6.1-5.2-9.7l-1.5 1.7v8h-4.7s-.1-8.7-.2-14c0-2.7.2-8.8.2-8.8h4.6v8c2.1-2.6 5.6-7.3 6.1-8h5.9c-2.6 3.8-5.5 7.5-6.8 9.2 1.4 3 6.8 13.5 6.8 13.5H82zm27.4 0h-5v-9.1h-7.5l-.3 9h-4.7s-.1-8.8-.2-14c0-2.7.3-8.6.3-8.6h5V9h7.5l.3-8.4h4.8s.1 8.6.2 13.8c-.1 2.8-.4 8.9-.4 8.9zm19 0l-1.7-5.2h-6.1l-1.8 5.2h-5.2c0-1.2 7.5-22.8 8.2-22.8h3.7c.8 0 8.1 21.5 8.1 22.8h-5.2zM123.6 8c-.2.1-1.8 5.6-1.8 5.6h3.7L123.6 8zm22.7 15.8c-5.6 0-10.2-2.1-10.2-11.4 0-4.1.3-11.8.3-11.8h5.1s-.1 8.2-.1 11.8c0 4.9 2.1 6.3 5 6.3s5-1.3 5-6.3c0-3.6-.1-11.8-.1-11.8h5.1s.3 7.7.3 11.8c-.1 9.3-4.7 11.4-10.4 11.4zm24 0c-5.1 0-9.1-1.4-9.6-7.7l5.2-.2c.4 2.7 2.4 2.7 4.4 2.7 2.3 0 4.5-.1 4.5-2.2s-2.2-2.2-4.5-2.2c-5 0-8.9-1.6-8.9-7s3.8-6.9 8.9-6.9c4.6 0 8.3 1.3 8.8 7.1l-5.1.3c-.4-2.2-2.1-2.3-3.8-2.3-2 0-3.9 0-3.9 1.9s1.9 1.9 3.9 1.9c5.5 0 9.7 1.6 9.7 7.3.1 5.5-4 7.3-9.6 7.3z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-columns.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="classes">
 3 |         <wp-block-core-column
 4 |             v-for="(column, index) in innerBlocks"
 5 |             :key="`core-column-${index}`"
 6 |             :attrs="column.attrs"
 7 |             :inner-blocks="column.innerBlocks"
 8 |         />
 9 |     </div>
10 | </template>
11 | 
12 | <script setup lang="ts">
13 | const props = defineProps({
14 |     attrs: {
15 |         type: Object,
16 |         default: () => ({})
17 |     },
18 |     innerBlocks: {
19 |         type: Array,
20 |         default: () => []
21 |     },
22 | })
23 | 
24 | // Computeds
25 | const classes = computed(() => [
26 |     'core-columns',
27 |     'margin-section',
28 |     { "is-stacked-on-mobile": props.attrs.isStackedOnMobile }
29 | ])
30 | 
31 | </script>
32 | 
33 | <style scoped>
34 | .core-columns {
35 |     display: flex;
36 |     width: 100%;
37 | 
38 |     .core-column {
39 |         &:first-child {
40 |             padding-left: 0;
41 |         }
42 |         &:last-child {
43 |             padding-right: 0;
44 |         }
45 |     }
46 | 
47 |     /* Breakpoints */
48 |     @media (--lt-phone) {
49 |         &.is-stacked-on-mobile {
50 |             display: block;
51 | 
52 |             .gutenberg-column {
53 |                 flex-basis: 1;
54 |                 padding: 0;
55 |             }
56 |         }
57 |     }
58 | }
59 | </style>


--------------------------------------------------------------------------------
/TODO-FUXT.md:
--------------------------------------------------------------------------------
 1 | ## TODO - Fuxt
 2 | - SEO defaults
 3 | - Port over default CSS vars
 4 | - Remove GQL features
 5 | - Get GA plugin working
 6 | - Make sure Preview's work
 7 | - Get nuxt-fonts working one day!
 8 | - Maybe this helps with better Gutenberg support now: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-serialization-default-parser/
 9 | - Get some sort of template and story snippit working: 
10 |     - https://marketplace.visualstudio.com/items?itemName=exer7um.vue-3-vscode-snippets 
11 |     - https://medium.com/@tbusser/vue-and-storybook-component-scaffolding-50df77b8d79d
12 | 
13 | ## TODO - Fuxt backend
14 | - Update plugin manifest
15 |     - Add https://wordpress.org/plugins/wp-openapi/
16 | - Auto favicon step from WP-Easy into fuxt-backend
17 | - Hide WP Open API menu item for non-Devs
18 | 
19 | ## Questions for Conrawl
20 | - See GitHub issues on fuxt repo
21 | - How to fetch more data from a watcher? $fetch vs useWpFetch()?
22 | 
23 | ## TODO - Base Components
24 | - WpImage
25 |     - TODO Background color
26 |     - TODO Focal points and color
27 |     - TODO Only load video when coming into view
28 |     - TODO Has-loaded of video?
29 | - [x] WpMenu
30 | - VideoStage
31 | - Gutenberg (LLM help?)
32 | - [x] WpSeo
33 | - WpControls
34 | - [x] WpLink (No longer needed actually, nuxt-link does it all now)
35 | - SplitText
36 | 
37 | ## Usage Notes
38 | - Install VS Code plugin "ESlint"
39 | - Document vueUse and lodash auto import usage


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fuxt
 2 | 
 3 | A complete Headless WordPress tech stack built on Nuxt 4.
 4 | 
 5 | Works best with the [fuxt-backend](https://github.com/funkhaus/fuxt-backend) WordPress theme and included WordPress optimized components.
 6 | 
 7 | Built by [Funkhaus](http://funkhaus.us/). We normally host on [Flywheel](https://share.getf.ly/n02x5z).
 8 | 
 9 | PS: The name Fuxt comes from [Funkhaus](https://funkhaus.us) and Nuxt. [It's provocative](https://www.youtube.com/watch?v=_eRRab36XLI).
10 | 
11 | ## Features
12 | 
13 | - TODO
14 | 
15 | ## Build Setup
16 | 
17 | **This is just a [Nuxt site](https://nuxtjs.org), so it builds and deploys like any other Nuxt project.**
18 | 
19 | Works best with the [fuxt-backend](https://github.com/funkhaus/fuxt-backend) WordPress theme as the backend.
20 | 
21 | **First step:** Duplicate and rename `.example.env` to `.env`. Define any vars environment needed there.
22 | 
23 | ```bash
24 | # install dependencies
25 | $ npm install
26 | 
27 | # serve with hot reload at localhost:3000
28 | $ npm run dev
29 | 
30 | # serve with hot reload Storybook at localhost:3003
31 | $ npm run storybook
32 | 
33 | # build for production and launch server
34 | $ npm run build
35 | $ npm start
36 | 
37 | # build Storybook for production
38 | $ npx nuxt storybook build
39 | 
40 | # generate static project
41 | $ npm run generate
42 | 
43 | ```
44 | 
45 | ## Documentation
46 | 
47 | For detailed explanation on how things work, checkout [the wiki](https://github.com/funkhaus/fuxt/wiki).
48 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-heading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <component
 3 |         :is="attrs.tagName || 'h2'"
 4 |         :class="classes"
 5 |         v-html="innerHtml"
 6 |     />
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | const props = defineProps({
11 |     innerHtml: {
12 |         type: String,
13 |         default: ''
14 |     },
15 |     attrs: {
16 |         type: Object,
17 |         default: () => ({})
18 |     },
19 | })
20 | 
21 | // Computeds
22 | const classes = computed(() => [
23 |     'core-heading',
24 |     'margin-text',
25 |     `align-${props.attrs?.align || 'default'}`,
26 |     `is-${props.attrs?.tagName}`,
27 | ])
28 | const styles = computed(() => ({
29 |     fontSize: props.attrs?.style?.typography?.fontSize || 'initial',
30 |     color: props.attrs?.style?.color?.text || 'initial',
31 |     backgroundColor: props.attrs?.style?.color?.background || 'initial',
32 |     letterSpacing: props.attrs?.style?.typography?.letterSpacing || 'initial',
33 | }))
34 | </script>
35 | 
36 | <style scoped>  
37 | .core-heading {
38 |     font-size: v-bind('styles.fontSize');
39 |     color: v-bind('styles.color');
40 |     background-color: v-bind('styles.backgroundColor');
41 |     letter-spacing: v-bind('styles.letterSpacing');
42 | 
43 |     font-weight: normal;
44 | 
45 |     /* Alignment */
46 |     &.align-left {
47 |         text-align: left;
48 |     }
49 |     &.align-center {
50 |         text-align: center;
51 |     }
52 |     &.align-right {
53 |         text-align: right;
54 |     }
55 | }
56 | </style>


--------------------------------------------------------------------------------
/app/plugins/browser.client.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtPlugin(() => {
 2 |     const siteStore = useSiteStore()
 3 | 
 4 |     // Get browser dimensions
 5 |     const { y } = useWindowScroll()
 6 |     const { width: newWinWidth, height: newWinHeight } = useWindowSize()
 7 |     const newBreakpoint = useCssVar('--breakpoint-name')
 8 | 
 9 |     // Update scroll direction
10 |     watch(y, (newVal, oldVal = 0) => {
11 |         siteStore.sTop = newVal
12 |         siteStore.breakpoint = newBreakpoint?.value?.replace(/['"]+/g, '').trim() || 'desktop'
13 | 
14 |         if (oldVal > newVal || newVal === 0) {
15 |             siteStore.scrollDirection = 'up'
16 |         }
17 |         else {
18 |             siteStore.scrollDirection = 'down'
19 |         }
20 |     }, {
21 |         immediate: true
22 |     })
23 | 
24 |     // Update window dimensions
25 |     watch([newWinWidth, newWinHeight], () => {
26 |         siteStore.winWidth = newWinWidth.value
27 |         siteStore.winHeight = newWinHeight.value
28 |     }, {
29 |         immediate: true
30 |     })
31 | 
32 |     // Update store referrer. Useful to know where the user came from.
33 |     addRouteMiddleware('referrer', async (to, from) => {
34 |         if (from.name) {
35 |             siteStore.referrer = {
36 |                 name: from.name,
37 |                 fullPath: from.fullPath,
38 |                 path: from.path,
39 |                 query: from.query,
40 |                 params: from.params
41 |             }
42 |         }
43 |     }, { global: true })
44 | })
45 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <component
 3 |         :is="listType"
 4 |         :class="classes"
 5 |     >
 6 |         <wp-block-core-list-item
 7 |             v-for="(block, i) in innerBlocks"
 8 |             :key="`list-item-${i}`"
 9 |             :inner-html="block.innerHtml"
10 |         />
11 |     </component>
12 | </template>
13 | 
14 | <script setup lang="ts">
15 | const props = defineProps({
16 |     innerHtml: {
17 |         type: String,
18 |         default: ''
19 |     },
20 |     attrs: {
21 |         type: Object,
22 |         default: () => ({})
23 |     },
24 |     innerBlocks: {
25 |         type: Array,
26 |         default: () => []
27 |     },
28 | })
29 | 
30 | // Computeds
31 | const classes = computed(() => [
32 |     'core-list',    
33 |     'margin-text',
34 |     `is-${listType.value}`,
35 | ])
36 | const listType = computed(() => {
37 |     return props.attrs?.tagName || 'ul'
38 | })
39 | 
40 | const styles = computed(() => ({
41 |     fontSize: props.attrs?.style?.typography?.fontSize || 'initial',
42 |     color: props.attrs?.style?.color?.text || 'initial',
43 |     backgroundColor: props.attrs?.style?.color?.background || 'initial',
44 |     letterSpacing: props.attrs?.style?.typography?.letterSpacing || 'initial',
45 | }))
46 | </script>
47 | 
48 | <style scoped>  
49 | .core-list {
50 |     font-size: v-bind('styles.fontSize');
51 |     color: v-bind('styles.color');
52 |     background-color: v-bind('styles.backgroundColor');
53 |     letter-spacing: v-bind('styles.letterSpacing');
54 | }
55 | </style>


--------------------------------------------------------------------------------
/app/components/wp-block/core-paragraph.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <p 
 3 |         :class="classes" 
 4 |         v-html="innerHtml"
 5 |     />
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | const props = defineProps({
10 |     innerHtml: {
11 |         type: String,
12 |         default: ''
13 |     },
14 |     attrs: {
15 |         type: Object,
16 |         default: () => ({})
17 |     },
18 | })
19 | 
20 | // Computeds
21 | const classes = computed(() => [
22 |     'core-paragraph',    
23 |     'margin-text',
24 |     `align-${props.attrs?.align || 'default'}`,
25 | ])
26 | const styles = computed(() => ({
27 |     fontSize: props.attrs?.style?.typography?.fontSize || 'initial',
28 |     color: props.attrs?.style?.color?.text || 'initial',
29 |     backgroundColor: props.attrs?.style?.color?.background || 'initial',
30 |     letterSpacing: props.attrs?.style?.typography?.letterSpacing || 'initial',
31 | }))
32 | </script>
33 | 
34 | <style scoped>  
35 | .core-paragraph {
36 |     font-size: v-bind('styles.fontSize');
37 |     color: v-bind('styles.color');
38 |     background-color: v-bind('styles.backgroundColor');
39 |     letter-spacing: v-bind('styles.letterSpacing');
40 | 
41 |     &.align-left {
42 |         text-align: left;
43 |     }
44 |     &.align-center {
45 |         text-align: center;
46 |     }
47 |     &.align-right {
48 |         text-align: right;
49 |     }
50 |     &.has-drop-cap:first-letter {
51 |         float: left;
52 |         font-size: 3em;
53 |         padding-top: 0.15em;
54 |         padding-right: 0.15em;
55 |     }
56 | }
57 | </style>


--------------------------------------------------------------------------------
/app/stores/site.ts:
--------------------------------------------------------------------------------
 1 | export const useSiteStore = defineStore('site', () => {
 2 |     const settings = ref({})
 3 |     const menuOpened = ref(false)
 4 |     const breakpoint = ref('desktop')
 5 |     const referrer: Ref<boolean | object> = ref(false)
 6 |     const scrollDirection = ref('up')
 7 |     const sTop = ref(0)
 8 |     const winHeight = ref(0)
 9 |     const winWidth = ref(0)
10 |     const hasLoaded = ref(false)
11 | 
12 |     // Setup default store settings values
13 |     settings.value = {
14 |         title: '',
15 |         description: '',
16 |         backendUrl: '',
17 |         frontendUrl: '',
18 |         themeScreenshotUrl: '',
19 |         sociaMedia: [],
20 |         googleAnalytics: [],
21 |         socialSharedImage: {}
22 |     }
23 | 
24 |     // Populate state from WP API
25 |     const init = async () => {
26 |         // Do requests in parallel
27 |         const settingsReq = useWpFetch('/settings')
28 |         const acfReq = useWpFetch('/acf-options?name=Site Options')
29 |         const [settingsRes, acfRes] = await Promise.all([settingsReq, acfReq])
30 | 
31 |         // Get ref values
32 |         const settingsData = settingsRes.data?.value || {}
33 |         const acfData = acfRes.data?.value || {}
34 | 
35 |         // Save to store
36 |         settings.value = { ...settingsData, ...acfData }
37 |     }
38 | 
39 |     return {
40 |         settings,
41 |         menuOpened,
42 |         breakpoint,
43 |         sTop,
44 |         winHeight,
45 |         winWidth,
46 |         referrer,
47 |         scrollDirection,
48 |         hasLoaded,
49 |         init
50 |     }
51 | })
52 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-video.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <video
 3 |         :class="classes"
 4 |         :src="parsedSrc"
 5 |         :muted="attrs.muted"
 6 |         :autoplay="attrs.autoplay"
 7 |         :controls="attrs.controls"
 8 |         :loop="attrs.loop"
 9 |         :poster="attrs.poster"
10 |         :preload="attrs.preload"
11 |         :disablepictureinpicture="true"
12 |         :playsinline="attrs.playsInline"
13 |     />
14 | </template>
15 | 
16 | <script setup lang="ts">
17 | const props = defineProps({
18 |     attrs: {
19 |         type: Object,
20 |         default: () => ({})
21 |     },
22 | })
23 | 
24 | // Computeds
25 | const classes = computed(() => [
26 |     "core-video",
27 |     "margin-section",
28 |     `align-${props.attrs?.align || "center"}`
29 | ])
30 | const parsedSrc = computed(() => {
31 |     // Try to get src from attrs or caption (to support old WP versions)
32 |     const captionSrc = props.attrs?.caption?.match(/src="([^"]*)"/) || []
33 |     const src = props.attrs?.src || captionSrc?.[1] || ""
34 |     return decodeURI(src).replaceAll("&amp;", "&")
35 | })
36 | </script>
37 | 
38 | <style scoped>
39 | .core-video {
40 |     display: block;
41 |     width: 100%;
42 |     height: auto;
43 |     margin-right: auto;
44 |     margin-left: auto;
45 | 
46 |     /* Align */
47 |     &.align-center {
48 |         margin-right: auto;
49 |         margin-left: auto;
50 |     }
51 |     &.align-left {
52 |         margin-left: 0;
53 |         margin-right: auto;
54 |     }
55 |     &.align-right {
56 |         margin-left: auto;
57 |         margin-right: 0;
58 |     }
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/component-request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Component Request
 3 | about: Use this to define a component that a developer can build.
 4 | title: Component Request - {ComponentName} - {x}hrs
 5 | labels: ""
 6 | assignees: ""
 7 | ---
 8 | 
 9 | ## Component Description
10 | 
11 | This component is used {where} to display {what}. Be sure to explain any variants or hover states.
12 | 
13 | ## Design
14 | 
15 | Please also see attached screenshots for quick reference.
16 | 
17 | -   Desktop: https://xd.adobe.com/view/1234-5678/
18 | -   Mobile: https://xd.adobe.com/view/1234-5678/
19 | 
20 | If no mobile designs provided, please use your best judgment for responsiveness.
21 | 
22 | ## Slots
23 | 
24 | Name and description of any slots needed.
25 | 
26 | ## Props
27 | 
28 | ```
29 | props: {
30 |     exampleObject: {
31 |         // Mock: api.page
32 |         type: Object,
33 |         default: () => ({})
34 |     },
35 |     exampleArray: {
36 |         // Mock: api.pages
37 |         type: Array,
38 |         default: () => []
39 |     },
40 |     exampleNumber: {
41 |         type: Number,
42 |         default: 0
43 |     },
44 |     exampleString: {
45 |         type: String,
46 |         default: ""
47 |     },
48 |     exampleBoolean: {
49 |         type: Boolean,
50 |         default: true
51 |     }
52 | }
53 | ```
54 | 
55 | ## Developer Tips
56 | 
57 | List any developer tips here
58 | 
59 | 1. `--color-example` for the font color
60 | 
61 | ## Events
62 | 
63 | Describe any events that should be emitted by this component.
64 | 
65 | 1. `menuOpened` when {something} is clicked on
66 | 
67 | ## Required components
68 | 
69 | List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.
70 | 
71 | 1. `required-component` is used for {what}
72 | 
73 | ## Screenshots
74 | 
75 | {attach screenshots}
76 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-column.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="classes">
 3 |         <wp-content 
 4 |             :blocks="innerBlocks" 
 5 |         />
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | const props = defineProps({
11 |     attrs: {
12 |         type: Object,
13 |         default: () => ({})
14 |     },
15 |     innerBlocks: {
16 |         type: Array,
17 |         default: () => []
18 |     },
19 | })
20 | 
21 | // Computeds
22 | const classes = computed(() => [
23 |     'core-column',
24 |     `vertical-alignment-${props.attrs?.verticalAlignment || "default"}`,
25 |     { "column-empty": props.innerBlocks?.length == 0 },
26 |     { "has-width": Boolean(props.attrs.width) },
27 | ])
28 | const styles = computed(() => ({
29 |     width: props.attrs?.width || '0',
30 | }))
31 | 
32 | </script>
33 | 
34 | <style scoped>
35 | .core-column {
36 |     flex-basis: v-bind('styles.width');
37 |     flex-grow: 1;
38 | 
39 |     display: flex;
40 |     flex-direction: column;
41 |     flex-wrap: nowrap;
42 |     justify-content: flex-start;
43 |     align-content: stretch;
44 |     align-items: stretch;
45 | 
46 |     :deep(> *) {
47 |         width: 100%;
48 |     }
49 | 
50 |     /* States */
51 |     &.has-width {
52 |         flex-grow: 0;
53 |     }
54 | 
55 |     /* Vertical alignment opations */
56 |     &.vertical-alignment-top {
57 |         justify-content: flex-start;
58 |     }
59 |     &.vertical-alignment-center {
60 |         justify-content: center;
61 |     }
62 |     &.vertical-alignment-bottom {
63 |         justify-content: flex-end;
64 |     }
65 | 
66 |     /* Make a column containing more columns collapse margin
67 |     to be consistent with columns in regular content flow */
68 |     .core-columns + .core-columns {
69 |         margin-top: 0;
70 |     }
71 |     > .wp-content {
72 |         margin: 0;
73 |     }
74 | }
75 | </style>


--------------------------------------------------------------------------------
/app/components/wp-block/core-quote.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <blockquote :class="classes">
 3 |         <wp-block-core-paragraph
 4 |             v-for="(block, i) in innerBlocks"
 5 |             :key="`block-paragraph-${i}`"
 6 |             :attrs="block.attrs"
 7 |             :inner-html="block.innerHtml"
 8 |         />
 9 |         <cite
10 |             v-if="citation"
11 |             class="citation"
12 |             v-html="citation"
13 |         />
14 |     </blockquote>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | const props = defineProps({
19 |     innerBlocks: {
20 |         type: Array,
21 |         default: () => []
22 |     },
23 |     attrs: {
24 |         type: Object,
25 |         default: () => ({})
26 |     },
27 | })
28 | 
29 | // Computeds
30 | const classes = computed(() => [
31 |     'core-block',    
32 |     'margin-section',
33 |     `align-${props.attrs?.align || 'default'}`,
34 | ])
35 | const styles = computed(() => ({
36 |     fontSize: props.attrs?.style?.typography?.fontSize || 'initial',
37 |     color: props.attrs?.style?.color?.text || 'initial',
38 |     backgroundColor: props.attrs?.style?.color?.background || 'initial',
39 |     letterSpacing: props.attrs?.style?.typography?.letterSpacing || 'initial',
40 | }))
41 | const citation = computed(() => {
42 |     let cite = props.attrs?.citation || ''
43 |     return cite.replace('<blockquote class="wp-block-quote"><cite>', '').replace('</cite></blockquote>', '')
44 | })
45 | 
46 | </script>
47 | 
48 | <style scoped>  
49 | .core-quote {
50 |     font-size: v-bind('styles.fontSize');
51 |     color: v-bind('styles.color');
52 |     background-color: v-bind('styles.backgroundColor');
53 |     letter-spacing: v-bind('styles.letterSpacing');
54 | 
55 |     font-weight: normal;
56 | 
57 |     .citation {
58 |         font-style: normal;
59 |         display: block;
60 |     }
61 | 
62 |     /* Alignment */
63 |     &.align-left {
64 |         text-align: left;
65 |     }
66 |     &.align-center {
67 |         text-align: center;
68 |     }
69 |     &.align-right {
70 |         text-align: right;
71 |     }
72 | }
73 | </style>


--------------------------------------------------------------------------------
/app/components/wp-menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav :class="classes">
 3 |         <slot name="before" />
 4 |         <ul class="menu">
 5 |             <slot name="inner" />
 6 |             
 7 |             <template
 8 |                 v-for="item in items"
 9 |                 :key="item.id || item.uri || item.url"
10 |             >
11 |                 <slot
12 |                     :title="item.title"
13 |                     :to="item.uri || item.url"
14 |                     :target="item.target"
15 |                     :classes="item.classes"
16 |                 >
17 |                     <wp-menu-item 
18 |                         @click.native="menuInteracted"    
19 |                         :item="item" 
20 |                     />
21 |                 </slot>
22 |             </template>
23 | 
24 |         </ul>
25 |         <slot name="after" />
26 |     </nav>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | const emit = defineEmits(['menu-interacted'])
31 | 
32 | // Props
33 | const props = defineProps({
34 |     name: {
35 |         type: String,
36 |         default: ''
37 |     },
38 |     items: {
39 |         type: Array,
40 |         default: () => []
41 |     }
42 | })
43 | 
44 | const data = ref({})
45 | 
46 | // Fetch data from WP
47 | if (props.name) {
48 |     const { data: fetchedData }  = await useWpFetch(`/menus`, {
49 |         query: {
50 |             name: props.name
51 |         },
52 |         onResponseError({ error }) {
53 |             console.warn('<wp-menu> Fetch Error:', props.name, error)
54 |             data.value = {}
55 |         }
56 |     })
57 | 
58 |     data.value = fetchedData.value;
59 | } else {
60 |   console.log('<wp-menu> No menu name provided');
61 | }
62 | 
63 | // Computeds
64 | const classes = computed(() => ['wp-menu', `name-${_KebabCase(props.name) || 'unknown'}`])
65 | const items = computed(() => {
66 |     let output = props?.items || []
67 |     if (data.value?.length) {
68 |         output = data.value 
69 |     }
70 |     return output
71 | })
72 | 
73 | // Methods
74 | const menuInteracted = (event) => {
75 |     emit('menu-interacted', event)
76 | }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/app/components/wp-seo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wp-seo">
 3 |         <!-- Print content to page for SEO gain -->
 4 |         <h1
 5 |             v-if="parsedTitle"
 6 |             v-html="parsedTitle"
 7 |         />
 8 |         <div
 9 |             v-if="parsedDescription"
10 |             v-html="parsedDescription"
11 |         />
12 |     </div>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | const siteStore = useSiteStore()
17 | const route = useRoute()
18 | 
19 | // Props
20 | const props = defineProps({
21 |     title: {
22 |         type: String,
23 |         default: ''
24 |     },
25 |     description: {
26 |         type: String,
27 |         default: ''
28 |     },
29 |     path: {
30 |         type: String,
31 |         default: ''
32 |     },
33 |     imageUrl: {
34 |         type: String,
35 |         default: ''
36 |     }
37 | })
38 | 
39 | // Fetch data from WP
40 | const parsedPath = computed<string>(() => props.path || route.path || '')
41 | 
42 | // Fetch data from WP
43 | const { data, error } = await useWpFetch(`/post`, {
44 |     query: {
45 |         uri: parsedPath
46 |     },
47 |     pick: ['title', 'excerpt', 'content', 'featuredMedia'],
48 |     onResponseError() {
49 |         console.warn('<wp-seo> Fetch Error:', parsedPath.value)
50 |     }
51 | })
52 | 
53 | // On error, set data to empty object
54 | if (error.value) {
55 |     data.value = {}
56 | }
57 | 
58 | // Computeds
59 | const parsedTitle = computed<string>(() => props.title || data.value?.title || siteStore.settings?.title || undefined)
60 | const parsedDescription = computed<string>(() => props.description || data.value?.excerpt || data.value?.content || siteStore.settings.description || undefined)
61 | const parsedImage = computed<string>(() => props.imageUrl || data.value?.featuredMedia?.src || siteStore.settings?.themeScreenshotUrl || undefined)
62 | 
63 | // Set meta tags
64 | useSeoMeta({
65 |     title: () => parsedTitle.value,
66 |     ogTitle: () => parsedTitle.value,
67 |     description: () => parsedDescription.value,
68 |     ogDescription: () => parsedDescription.value,
69 |     ogImage: () => parsedImage.value
70 | })
71 | </script>
72 | 
73 | <style scoped>
74 | .wp-seo {
75 |     display: none;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <wp-image
 3 |         :class="classes"
 4 |         :image="embed"
 5 |     />
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | const props = defineProps({
10 |     innerHtml: {
11 |         type: String,
12 |         default: ''
13 |     },
14 |     attrs: {
15 |         type: Object,
16 |         default: () => ({})
17 |     },
18 |     embed: {
19 |         type: Object,
20 |         default: () => ({})
21 |     },    
22 | })
23 | 
24 | // Computeds
25 | const classes = computed(() => [
26 |     'core-image',
27 |     'margin-section',
28 |     `align-${props.attrs?.align || 'center'}`,
29 |     `size-${props.attrs?.sizeSlug || 'full'}`,
30 | ])
31 | const styles = computed(() => {
32 |     // Set max width to the number set by user in WP, or to the image width
33 |     // But allow user to use WP's size buttons to force up-rez if they want
34 |     let maxWidth = ""
35 |     if (props.attrs.width) {
36 |         maxWidth = props.attrs.width
37 |     } else if (props.attrs.sizeSlug == "full") {
38 |         maxWidth = `${props.embed?.width || -1}px`
39 |     }
40 | 
41 |     return {
42 |         maxWidth
43 |     }
44 | })
45 | </script>
46 | 
47 | <style scoped>  
48 | .core-image {
49 |     --max-width: v-bind('styles.maxWidth');
50 |     
51 |     width: 100%;
52 |     margin-right: auto;
53 |     margin-left: auto;
54 | 
55 |     /* Align */
56 |     &.align-center {
57 |         margin-right: auto;
58 |         margin-left: auto;
59 |     }
60 |     &.align-left {
61 |         margin-left: 0;
62 |         margin-right: auto;
63 |     }
64 |     &.align-right {
65 |         margin-left: auto;
66 |         margin-right: 0;
67 |     }
68 | 
69 |     /* Sizes */
70 |     &.size-full {
71 |         max-width: var(--max-width, 100%);
72 |     }
73 |     &.size-large {
74 |         max-width: var(--max-width, var(--unit-max-width-large));
75 |     }
76 |     &.size-medium {
77 |         max-width: var(--max-width, 50%);
78 |     }
79 |     &.size-thumbnail {
80 |         max-width: var(--max-width, 25%);
81 |     }
82 | 
83 |     /* Breakpoints */
84 |     @media (--lt-phone) {
85 |         max-width: 100%;
86 | 
87 |         &.size-medium,
88 |         &.size-thumbnail {
89 |             max-width: 100%;
90 |         }
91 |     }
92 | }
93 | </style>


--------------------------------------------------------------------------------
/app/components/wp-block/core-embed.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div :class="classes">
 3 |         <iframe
 4 |             class="iframe"
 5 |             :src="iFrameSrc"
 6 |             frameborder="0"
 7 |             allow="autoplay; fullscreen; accelerometer; encrypted-media; gyroscope; picture-in-picture;"
 8 |             playsinline
 9 |             :height="dimensions.height"
10 |             :width="dimensions.width"
11 |         />
12 |     </div>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | const props = defineProps({
17 |     attrs: {
18 |         type: Object,
19 |         default: () => ({})
20 |     },
21 | })
22 | 
23 | // Computeds
24 | const classes = computed(() => [
25 |     'core-embed',    
26 |     'margin-section',
27 |     `align-${props.attrs?.align || 'default'}`,
28 |     { "is-vimeo": isVimeo },
29 |     { "is-youtube": isYouTube }    
30 | ])
31 | const dimensions = computed(() => {
32 |     let output = {
33 |         height: 720,
34 |         width: 1280
35 |     }
36 | 
37 |     // Go through each class, and figure out the ratio from this: "wp-embed-aspect-16-9"
38 |     props.attrs?.className.split(" ").forEach((str) => {
39 |         if (str.includes("wp-embed-aspect-")) {
40 |             let ratio = str.replace("wp-embed-aspect-", "")
41 |             ratio = ratio.split("-")
42 | 
43 |             output.width = parseInt(ratio[0])
44 |             output.height = parseInt(ratio[1])
45 |         }
46 |     })
47 | 
48 |     return output
49 | })
50 | const styles = computed(() => ({
51 |     aspectRatio: dimensions.value.width / dimensions.value.height
52 | }))
53 | const isVimeo = computed(() => {
54 |     return props.attrs.providerNameSlug	 == "vimeo" || String(props.attrs.url).includes("vimeo.com")
55 | })
56 | const isYouTube = computed(() => {
57 |     return props.attrs.providerNameSlug	 == "youtube" || String(props.attrs.url).includes("youtube.com") || String(props.attrs.url).includes("youtu.be")
58 | })
59 | const iFrameSrc = computed(() => {
60 |     let url = props.attrs?.url || ''
61 | 
62 |     switch (true) {
63 |         case isYouTube.value:
64 |         case isVimeo.value:
65 |             url = buildVideoEmbedUrl(url, {
66 |                 autoplay: 0
67 |             })
68 |             break
69 |     }
70 | 
71 |     return url
72 | })
73 | </script>
74 | 
75 | <style scoped>
76 | .core-embed {
77 |     position: relative;
78 |     z-index: 0;
79 |     
80 | 
81 |     .iframe {
82 |         aspect-ratio: v-bind('styles.aspectRatio');
83 |         height: 100%;
84 |         width: 100%;
85 |     }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/app/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * This file is included once, for the entire site.
  3 |  * It's useful for global styles.
  4 |  */
  5 | 
  6 |  
  7 |  /* Globals */
  8 |  html {
  9 |      font-family: var(--font-primary);
 10 |      font-size: 16px;
 11 |      color: var(--color-black);
 12 |      background-color: var(--color-white);
 13 |      margin: 0;
 14 |      -webkit-font-smoothing: antialiased;
 15 |      -moz-osx-font-smoothing: grayscale;
 16 |      font-feature-settings: "kern" 1;
 17 |      font-kerning: normal;
 18 |  }
 19 |  body {
 20 |      margin: 0;
 21 |  }
 22 |  ::selection {
 23 |      color: var(--color-white);
 24 |      background: var(--color-black);
 25 |  }
 26 |  h1,
 27 |  h2,
 28 |  h3,
 29 |  h4,
 30 |  h5 {
 31 |      font-weight: 400;
 32 |  }
 33 |  a {
 34 |      text-decoration: none;
 35 |      color: inherit;
 36 |      transition: color 0.4s;
 37 |  }
 38 |  button {
 39 |      appearance: none;
 40 |      border: none;
 41 |      background-color: transparent;
 42 |      cursor: pointer;
 43 |      outline: none;
 44 |      margin: 0;
 45 |  }
 46 |  .title {
 47 |      .line {
 48 |          display: block;
 49 |      }
 50 |  }
 51 |  .overlay {
 52 |      position: absolute;
 53 |      top: 0;
 54 |      left: 0;
 55 |      right: 0;
 56 |      bottom: 0;
 57 |      background: rgba(0, 0, 0, 0.3);
 58 |  }
 59 |  .svg {
 60 |      path {
 61 |          transition: fill 0.4s;
 62 |      }
 63 |  }
 64 |  
 65 |  /* Z-Indexs */
 66 |  .footer {
 67 |      z-index: -100;
 68 |  }
 69 |  .page {
 70 |      z-index: 100;
 71 |  }
 72 |  .header {
 73 |      z-index: 200;
 74 |  }
 75 |  .menu-panel {
 76 |      z-index: 300;
 77 |  }
 78 |  .global-hamburger {
 79 |      z-index: 400;
 80 |  }
 81 | 
 82 |  /* Page structure */
 83 |  .header {}
 84 |  
 85 |  /* Gutenberg overrides */
 86 |  #content {
 87 |     /* Margins above/below blocks */
 88 |     --unit-margin-large: 40px; /* Columns, Gallerys, Blockquotes... */
 89 |     --unit-margin-small: 20px; /* Everything except P, H{n} and lists. */
 90 | 
 91 |     /* Gaps on the side of a block (between browser edge) */
 92 |     --unit-gutter: var(--unit-gap, 40px);
 93 | 
 94 |     /* Gaps inbetween images in gallery */
 95 |     --unit-gallery-gap: var(--unit-gap, 40px);
 96 | 
 97 |     /* Max width of blocks */
 98 |     --unit-max-width-large: 1400px; /* Default, galleries, images, columns */
 99 |     --unit-max-width-medium: 1080px; /* Headings (center aligned), Blockquotes */
100 |     --unit-max-width-small: 800px; /* Headings (left or right aligned), P, lists */
101 |  
102 |     /* Specific block overrides */
103 |     .core-paragraph + .core-heading {
104 |         margin-top: var(--unit-margin-large);
105 |     }
106 |  
107 |      /* Gutenberg breakpoints overrides */
108 |      @media (--lt-phone) {
109 |          .core-spacer {
110 |              display: none;
111 |          }
112 |      }
113 |  }
114 |  
115 |  /* Animations */
116 |  /* .bounce {
117 |      animation: bounce 1.5s ease-in-out infinite;
118 |  }
119 |  @keyframes bounce {
120 |      0%,
121 |      20%,
122 |      50%,
123 |      80%,
124 |      100% {
125 |          transform: translateY(0) translateX(-50%);
126 |      }
127 |      40% {
128 |          transform: translateY(-5px) translateX(-50%);
129 |      }
130 |      60% {
131 |          transform: translateY(5px) translateX(-50%);
132 |      }
133 |  } */
134 |  


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
  1 | // https://nuxt.com/docs/api/configuration/nuxt-config
  2 | export default defineNuxtConfig({
  3 |     compatibilityDate: '2024-09-17',
  4 |     future: { compatibilityVersion: 4 },
  5 | 
  6 |     // Build configuration
  7 |     nitro: {
  8 |         routeRules: {
  9 |             // All routes should be ISR
 10 |             '/**': {
 11 |                 isr: true
 12 |             }
 13 |         },
 14 |         prerender: {
 15 |             // This helps ensure that all paths end with `/`.
 16 |             autoSubfolderIndex: true,
 17 |             crawlLinks: true
 18 |         },
 19 |         compressPublicAssets: {
 20 |             gzip: true
 21 |         }
 22 |     },
 23 |     vite: {
 24 |         optimizeDeps: {
 25 |             // Used for v8.3.5 of Storybook. Can remove after update.
 26 |             // SEE https://github.com/nuxt-modules/storybook/issues/776
 27 |             include: ['jsdoc-type-pratt-parser']
 28 |         }
 29 |     },
 30 |     vue: {
 31 |         // Required for @nuxtjs/storybook
 32 |         runtimeCompiler: process.env.STORYBOOK === 'true'
 33 |     },
 34 | 
 35 |     // Nuxt app configuration
 36 |     app: {
 37 |         head: {
 38 |             meta: [
 39 |                 { charset: 'utf-8' },
 40 |                 {
 41 |                     name: 'viewport',
 42 |                     content: 'width=device-width, initial-scale=1'
 43 |                 }
 44 |             ],
 45 |             link: [
 46 |                 {
 47 |                     rel: 'icon',
 48 |                     type: 'image/png',
 49 |                     href: '/favicon.png'
 50 |                 }
 51 |             ]
 52 |         },
 53 |         pageTransition: {
 54 |             name: 'fade',
 55 |             mode: 'out-in'
 56 |         }
 57 |     },
 58 |     devtools: {
 59 |         // This only ships on dev, it gets stripped in Production
 60 |         enabled: true
 61 |     },
 62 | 
 63 |     // Runtime ENV parsing
 64 |     runtimeConfig: {
 65 |         public: {
 66 |             wordpressApiUrl: process.env.WORDPRESS_API_URL
 67 |         }
 68 |     },
 69 | 
 70 |     // CSS and fonts
 71 |     css: [
 72 |         '~/assets/css/vars.css',
 73 |         '~/assets/css/main.css',
 74 |         '~/assets/css/transitions.css'
 75 |     ],
 76 |     postcss: {
 77 |         plugins: {
 78 |             '@csstools/postcss-global-data': {
 79 |                 files: ['./app/assets/css/media.css']
 80 |             },
 81 |             'postcss-nested': {},
 82 |             'postcss-custom-media': {}
 83 |         }
 84 |     },
 85 | 
 86 |     // Modules and configuration
 87 |     modules: [
 88 |         '@pinia/nuxt',
 89 |         'nuxt-svgo',
 90 |         '@nuxt/fonts',
 91 |         '@nuxtjs/storybook',
 92 |         '@nuxtjs/sitemap',
 93 |         '@vueuse/nuxt',
 94 |         'nuxt-lodash'
 95 |     ],
 96 |     lodash: {
 97 |         prefix: '_',
 98 |         prefixSkip: []
 99 |     },
100 |     sitemap: {
101 |         exclude: ['/wp-admin/']
102 |     },
103 |     svgo: {
104 |         autoImportPath: './assets/svgs/',
105 |         defaultImport: 'component',
106 |         componentPrefix: 'svg'
107 |     },
108 |     fonts: {
109 |         defaults: {
110 |             weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
111 |         },
112 |         experimental: {
113 |             // Must be enabled to support processing fonts as CSS vars
114 |             processCSSVariables: true
115 |         }
116 |     }
117 | })
118 | 


--------------------------------------------------------------------------------
/app/assets/css/transitions.css:
--------------------------------------------------------------------------------
  1 | /* Fade */
  2 | .fade-enter,
  3 | .fade-leave-to {
  4 |     opacity: 0;
  5 | }
  6 | .fade-enter-active,
  7 | .fade-leave-active {
  8 |     transition: opacity 0.4s var(--easing-motion);
  9 | }
 10 | 
 11 | /* Slide left & slide right */
 12 | .slide-right-enter,
 13 | .slide-left-leave-to {
 14 |     transform: translateX(-100%);
 15 | }
 16 | .slide-left-enter,
 17 | .slide-right-leave-to {
 18 |     transform: translateX(100%);
 19 | }
 20 | .slide-right-enter-active,
 21 | .slide-right-leave-active,
 22 | .slide-left-enter-active,
 23 | .slide-left-leave-active {
 24 |     transition: transform 0.4s var(--easing-motion);
 25 | }
 26 | 
 27 | /* Slide up */
 28 | .slide-up-enter-active,
 29 | .slide-up-leave-active {
 30 |     transition: transform 0.4s var(--easing-motion);
 31 | }
 32 | .slide-up-enter {
 33 |     transform: translateY(100%);
 34 | }
 35 | .slide-up-enter-to {
 36 |     transform: translateY(0%);
 37 | }
 38 | .slide-up-leave {
 39 |     transform: translateY(0%);
 40 | }
 41 | .slide-up-leave-to {
 42 |     transform: translateY(-100%);
 43 | }
 44 | 
 45 | /* Slide down */
 46 | .slide-down-enter-active,
 47 | .slide-down-leave-active {
 48 |     transition: transform 0.4s var(--easing-motion);
 49 | }
 50 | .slide-down-enter {
 51 |     transform: translateY(-100%);
 52 | }
 53 | .slide-down-enter-to {
 54 |     transform: translateY(0%);
 55 | }
 56 | .slide-down-leave {
 57 |     transform: translateY(0%);
 58 | }
 59 | .slide-down-leave-to {
 60 |     transform: translateY(100%);
 61 | }
 62 | 
 63 | /* Reveal up */
 64 | .reveal-up-enter-active,
 65 | .reveal-up-leave-active {
 66 |     transition: clip-path 0.6s var(--easing-motion);
 67 |     > * {
 68 |         transition: transform 0.6s var(--easing-motion),
 69 |             opacity 0.4s ease-in-out;
 70 |     }
 71 | }
 72 | .reveal-up-enter-active {
 73 |     z-index: 10;
 74 | }
 75 | .reveal-up-enter {
 76 |     clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
 77 |     > * {
 78 |         transform: translateY(100px);
 79 |     }
 80 | }
 81 | .reveal-up-enter-to {
 82 |     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 83 |     > * {
 84 |         transform: translateY(0px);
 85 |     }
 86 | }
 87 | .reveal-up-leave {
 88 |     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 89 |     > * {
 90 |         transform: translateY(0px);
 91 |     }
 92 | }
 93 | .reveal-up-leave-to {
 94 |     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 95 |     > * {
 96 |         transform: translateY(-100px);
 97 |     }
 98 | }
 99 | 
100 | /* Reveal down */
101 | .reveal-down-enter-active,
102 | .reveal-down-leave-active {
103 |     transition: clip-path 0.6s var(--easing-motion);
104 |     > * {
105 |         transition: transform 0.6s var(--easing-motion),
106 |             opacity 0.4s ease-in-out;
107 |     }
108 | }
109 | .reveal-down-enter-active {
110 |     z-index: 10;
111 | }
112 | .reveal-down-enter {
113 |     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
114 |     > * {
115 |         transform: translateY(-100px);
116 |     }
117 | }
118 | .reveal-down-enter-to {
119 |     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
120 |     > * {
121 |         transform: translateY(0px);
122 |     }
123 | }
124 | .reveal-down-leave {
125 |     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
126 |     > * {
127 |         transform: translateY(0px);
128 |     }
129 | }
130 | .reveal-down-leave-to {
131 |     clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
132 |     > * {
133 |         transform: translateY(100px);
134 |     }
135 | }
136 | 


--------------------------------------------------------------------------------
/app/components/wp-block/core-gallery.vue:
--------------------------------------------------------------------------------
  1 | <template lang="html">
  2 |     <div :class="classes">
  3 |         <wp-image
  4 |             v-for="image in images"
  5 |             :key="image.id"
  6 |             :image="image.embed"
  7 |             class="item"
  8 |         />
  9 |     </div>
 10 | </template>
 11 | 
 12 | <script setup lang="ts">
 13 | const props = defineProps({
 14 |     innerBlocks: {
 15 |         type: Array,
 16 |         default: () => []
 17 |     },
 18 |     attrs: {
 19 |         type: Object,
 20 |         default: () => ({})
 21 |     },
 22 | })
 23 | 
 24 | // Computeds
 25 | const classes = computed(() => [
 26 |     "core-gallery",
 27 |     "margin-section",
 28 |     `is-${props.attrs?.columns || 3}-columns`,
 29 |     { "mode-default": !props.attrs?.imageCrop || false },
 30 |     { "mode-cropped": props.attrs?.imageCrop || false },
 31 |     { "is-random": props.attrs?.randomOrder || false },
 32 | ])
 33 | 
 34 | // Handle random order of gallery items in SSR friendly way
 35 | const images = useState('images', () => {
 36 |     let blocks = props.innerBlocks
 37 |     if(props.attrs?.randomOrder) {
 38 |         return _Shuffle(blocks)
 39 |     }
 40 |     return blocks
 41 | })
 42 | </script>
 43 | 
 44 | <style scoped>
 45 | .core-gallery {    
 46 |     --gap: var(--unit-gallery-gap, --unit-gap);
 47 | 
 48 |     display: flex;
 49 |     flex-wrap: wrap;
 50 |     gap: var(--gap);
 51 |     align-items: normal;
 52 | 
 53 |     /* Columns */
 54 |     &.is-1-columns {
 55 |         .item {
 56 |             width: 100%;
 57 |         }
 58 |     }
 59 |     &.is-2-columns {
 60 |         .item {
 61 |             width: calc(50% - var(--gap));
 62 |         }
 63 |     }
 64 |     &.is-3-columns {
 65 |         .item {
 66 |             width: calc(33.33% - var(--gap));
 67 |         }
 68 |     }
 69 |     &.is-4-columns {
 70 |         .item {
 71 |             width: calc(25% - var(--gap));
 72 |         }
 73 |     }
 74 |     &.is-5-columns {
 75 |         .item {
 76 |             width: calc(20% - var(--gap));
 77 |         }
 78 |     }
 79 |     &.is-7-columns {
 80 |         .item {
 81 |             width: calc(14.2857142857% - var(--gap));
 82 |         }
 83 |     }
 84 |     &.is-8-columns {
 85 |         .item {
 86 |             width: calc(12.5% - var(--gap));
 87 |         }
 88 |     }
 89 | 
 90 |     /* Crop modes */
 91 |     .item {
 92 |         box-sizing: border-box;
 93 |         display: flex;
 94 |         flex-direction: column;
 95 |         flex-grow: 1;
 96 |         justify-content: center;
 97 |         max-width: 100%;
 98 |         position: relative;            
 99 |     }    
100 |     &.mode-default {
101 |         .item {
102 |             margin-bottom: auto;
103 |             margin-top: auto;          
104 |         }
105 |     }
106 |     &.mode-cropped {
107 |         /* .item {
108 |             box-sizing: border-box;
109 |             display: flex;
110 |             flex-direction: column;
111 |             flex-grow: 1;
112 |             justify-content: center;
113 |             max-width: 100%;
114 |             position: relative;            
115 |         } */
116 |     }    
117 | 
118 |     /* Breakpoints */
119 |     @media (--lt-phone) {
120 |         display: block;
121 | 
122 |         /* &.mode-cropped {
123 | 
124 |         } */
125 | 
126 |         &.is-2-columns,
127 |         &.is-3-columns,
128 |         &.is-4-columns,
129 |         &.is-5-columns,
130 |         &.is-6-columns,
131 |         &.is-7-columns,
132 |         &.is-8-columns {
133 |             .item {
134 |                 width: 100%;
135 |             }
136 |         }
137 |     }
138 | }
139 | </style>


--------------------------------------------------------------------------------
/app/utils/buildVideoEmbedUrl.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This function builds out a Vimeo iFrame embed URL
  3 |  *
  4 |  * @param {string} url - The url to the Vimeo or YouTube page, eg: https://vimeo.com/20744468/12345678 or https://vimeo.com/20744468 or https://www.youtube.com/watch?v=zAGu2TPt_78
  5 |  * @param {Record<string, any>} options - Object of optional embed parameters.
  6 |  * @returns {string}
  7 |  */
  8 | function buildVideoEmbedUrl(url: string = "", options: Record<string, any> = {}): string {
  9 |     let output: string = url
 10 | 
 11 |     switch (true) {
 12 |         case isVimeo(url):
 13 |             output = buildVimeoUrl(url, options)
 14 |             break
 15 | 
 16 |         case isYouTube(url):
 17 |             output = buildYouTubeUrl(url, options)
 18 |             break
 19 |     }
 20 | 
 21 |     return output
 22 | }
 23 | 
 24 | /**
 25 |  * Convert a Vimeo video page URL into an iFrame embed URL
 26 |  *
 27 |  * @param {string} url - Vimeo video page URL
 28 |  * @param {Record<string, any>} options - Optional Vimeo embed parameter options.
 29 |  * @returns {string}
 30 |  */
 31 | function buildVimeoUrl(url: string = "", options: Record<string, any> = {}): string {
 32 |     // Set defaults and merge with provided options
 33 |     const defaults: Record<string, any> = {
 34 |         byline: 0,
 35 |         portrait: 0,
 36 |         autoplay: 1,
 37 |         color: "ffffff",
 38 |         controls: 1,
 39 |         playsinline: 1,
 40 |         api: 1,
 41 |         dnt: 0,
 42 |         title: 0,
 43 |         autopause: 1,
 44 |     }
 45 |     const parameters: Record<string, any> = { ...defaults, ...options }
 46 | 
 47 |     // Parse URL, remove query params, set new player hostname
 48 |     const parsedUrl = new URL(url)
 49 |     parsedUrl.search = ""
 50 |     parsedUrl.hostname = "player.vimeo.com"
 51 | 
 52 |     // Get Video ID and Privacy Hash from paths
 53 |     let paths = parsedUrl.pathname.split("/").filter(Boolean)
 54 | 
 55 |     // Set ID
 56 |     parsedUrl.pathname = `/video/${paths[0] || ""}`
 57 | 
 58 |     // Set privacy hash
 59 |     if (paths[1]) {
 60 |         parsedUrl.searchParams.set("h", paths[1])
 61 |     }
 62 | 
 63 |     // Add all options as query params to URL
 64 |     return setUrlParameters(parsedUrl, parameters).toString()
 65 | }
 66 | 
 67 | /**
 68 |  * Convert a YouTube video page URL into an iFrame embed URL
 69 |  *
 70 |  * @param {string} url - YouTube video page URL
 71 |  * @param {Record<string, any>} options - Optional YouTube embed parameter options.
 72 |  * @returns {string}
 73 |  */
 74 | function buildYouTubeUrl(url: string, options: Record<string, any>): string {
 75 |     // Set defaults and merge with provided options
 76 |     const defaults: Record<string, any> = {
 77 |         rel: 0,
 78 |         autoplay: 1,
 79 |         color: "ffffff",
 80 |         controls: 1,
 81 |         playsinline: 1,
 82 |         enablejsapi: 1,
 83 |         modestbranding: 1,
 84 |         loop: 0,
 85 |     }
 86 |     const parameters: Record<string, any> = { ...defaults, ...options }
 87 | 
 88 |     // Get YouTube ID
 89 |     const youTubeId: string = getYouTubeId(url)
 90 | 
 91 |     // Parse URL, remove any query params
 92 |     const parsedUrl = new URL(url)
 93 |     parsedUrl.search = ""
 94 | 
 95 |     // Set ID
 96 |     parsedUrl.pathname = `/embed/${youTubeId}`
 97 | 
 98 |     // Add all options as query params to URL
 99 |     return setUrlParameters(parsedUrl, parameters)
100 |         .toString()
101 |         .replace("https://youtu.be/", "https://www.youtube.com/")
102 | }
103 | 
104 | /**
105 |  * Function to add an object of URL parameters to a URL
106 |  *
107 |  * @param {URL} url - A URL interface object
108 |  * @param {Record<string, any>} parameters - Object of URL parameter key:value pairs
109 |  * @returns {URL} - A URL interface with updated parameters
110 |  */
111 | function setUrlParameters(url: URL, parameters: Record<string, any> = {}): URL {
112 |     Object.entries(parameters).forEach(([key, value]) => {
113 |         // Cast a true/false to 1/0 to be URL friendly
114 |         if (typeof value === "boolean") {
115 |             url.searchParams.set(key, Number(value).toString())
116 |         } else {
117 |             url.searchParams.set(key, String(value))
118 |         }
119 |     })
120 | 
121 |     return url
122 | }
123 | 
124 | /**
125 |  * Tests a URL string for Vimeo
126 |  * @param {string} url
127 |  * @returns {boolean}
128 |  */
129 | function isVimeo(url: string = ""): boolean {
130 |     return url.includes("vimeo.com")
131 | }
132 | 
133 | /**
134 |  * Tests a URL string for YouTube
135 |  * @param {string} url
136 |  * @returns {boolean}
137 |  */
138 | function isYouTube(url: string = ""): boolean {
139 |     return url.includes("youtube.com") || url.includes("youtu.be")
140 | }
141 | 
142 | /**
143 |  * Gets a YouTube ID from a URL string
144 |  * @param {string} url
145 |  * @returns {string}
146 |  */
147 | function getYouTubeId(url: string = ""): string {
148 |     const regex = /youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_\-]{11})/
149 |     const matches = url.match(regex)
150 |     return matches ? matches[1] : ""
151 | }
152 | 
153 | export default buildVideoEmbedUrl
154 | 


--------------------------------------------------------------------------------
/app/components/wp-image.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <figure :class="classes">
  3 |         <img v-if="src && !disabled" ref="imageEl" class="media media-image" :src="src" :srcset="srcSet"
  4 |             :sizes="parsedSizes" loading="lazy" :alt="alt" @load="setImageLoaded">
  5 | 
  6 |         <video v-if="videoUrl && !disabled" ref="videoEl" class="media media-video" :src="videoUrl" :loop="props.loop"
  7 |             :autoplay="props.autoplay" :muted="props.muted" playsinline disablePictureInPicture="true"
  8 |             @playing="onPlaying" />
  9 | 
 10 |         <figcaption v-if="caption" class="caption" v-text="caption" />
 11 | 
 12 |         <slot />
 13 |     </figure>
 14 | </template>
 15 | 
 16 | <script setup lang="ts">
 17 | const imageEl = ref(null)
 18 | const videoEl = ref(null)
 19 | const imageLoaded = ref(false)
 20 | 
 21 | const emit = defineEmits(['image-loaded', 'is-playing', 'is-paused', 'is-ended'])
 22 | 
 23 | 
 24 | // Props
 25 | const props = defineProps({
 26 |     image: {
 27 |         type: Object,
 28 |         default: () => ({})
 29 |     },
 30 |     disabled: {
 31 |         type: Boolean,
 32 |         default: false
 33 |     },
 34 |     loop: {
 35 |         type: Boolean,
 36 |         default: true
 37 |     },
 38 |     autoplay: {
 39 |         type: Boolean,
 40 |         default: true
 41 |     },
 42 |     muted: {
 43 |         type: Boolean,
 44 |         default: true
 45 |     },
 46 |     aspectRatio: {
 47 |         type: [String, Number],
 48 |         default: 0
 49 |     },
 50 |     mode: {
 51 |         type: String,
 52 |         default: 'intrinsic-ratio'
 53 |     },
 54 |     objectFit: {
 55 |         type: String,
 56 |         default: 'cover'
 57 |     },
 58 |     sizes: {
 59 |         type: String,
 60 |         default: ''
 61 |     }
 62 | })
 63 | 
 64 | // State
 65 | const isPlaying = ref(false)
 66 | 
 67 | // Computeds
 68 | const classes = computed(() => [
 69 |     'wp-image',
 70 |     { 'has-loaded': imageLoaded.value },
 71 |     { 'has-video': hasVideo.value },
 72 |     `mode-${props.mode}`,
 73 |     `object-fit-${props.objectFit}`,
 74 |     `is-orientation-${orientation.value}`,
 75 |     { 'is-disabled': props.disabled },
 76 |     { 'is-playing': isPlaying.value }
 77 | ])
 78 | const src = computed(() => props.image?.src || '')
 79 | const videoUrl = computed(() => props.image?.acf?.videoUrl || '')
 80 | const hasVideo = computed(() => Boolean(videoUrl.value))
 81 | const height = computed(() => props.image?.height || props.image?.meta?.height || 0)
 82 | const width = computed(() => props.image?.width || props.image?.meta?.width || 0)
 83 | const alt = computed(() => props.image?.alt || '')
 84 | const caption = computed(() => props.image?.caption || '')
 85 | const srcSet = computed(() => props.image?.srcset || '')
 86 | const parsedAspectRatio = computed(() => {
 87 |     let output = `${width.value} / ${height.value}`
 88 | 
 89 |     if (props.aspectRatio && typeof props.aspectRatio === 'number') {
 90 |         output = 100 / props.aspectRatio
 91 |     }
 92 |     return output
 93 | })
 94 | const parsedSizes = computed(() => {
 95 |     let output = props.sizes || props.image?.sizes || ''
 96 | 
 97 |     // Handle some custom size shortcuts
 98 |     switch (props.sizes) {
 99 |         case 'full':
100 |         case 'full-screen':
101 |         case 'fullscreen':
102 |             output = '(max-width: 850px) 1920px, 100vw'
103 |             break
104 | 
105 |         case 'half':
106 |         case 'half-screen':
107 |             output = '(max-width: 850px) 100vw, 50vw'
108 |             break
109 | 
110 |         case 'third':
111 |         case 'third-screen':
112 |             output = '(max-width: 850px) 100vw, 33.33vw'
113 |             break
114 | 
115 |         case 'quarter':
116 |         case 'quarter-screen':
117 |             output = '(max-width: 850px) 100vw, 25vw'
118 |             break
119 |     }
120 | 
121 |     return output
122 | })
123 | const orientation = computed(() => {
124 |     let output = 'landscape'
125 |     switch (true) {
126 |         case height.value > width.value:
127 |             output = 'portrait'
128 |             break
129 | 
130 |         case height.value == width.value:
131 |             output = 'square'
132 |             break
133 |     }
134 |     return output
135 | })
136 | const cssVars = ref({
137 |     aspectRatio: parsedAspectRatio.value
138 | })
139 | 
140 | // Actions
141 | const setImageLoaded = () => {
142 |     imageLoaded.value = true
143 |     emit('image-loaded')
144 | 
145 | }
146 | const onPlaying = () => {
147 |     isPlaying.value = true
148 |     emit('is-playing')
149 | }
150 | 
151 | // Lifecycle hooks
152 | onMounted(() => {
153 |     imageLoaded.value = imageEl.value?.complete || false
154 |     isPlaying.value = videoEl.value ? !videoEl.value?.paused : false
155 | })
156 | 
157 | </script>
158 | 
159 | <style scoped>
160 | .wp-image {
161 |     margin: 0;
162 |     width: 100%;
163 | 
164 |     .media {
165 |         width: 100%;
166 |         height: 100%;
167 |         position: absolute;
168 |         top: 0;
169 |         left: 0;
170 |         opacity: 0;
171 |         transition: opacity 0.4s ease-in-out;
172 |         z-index: 10;
173 |     }
174 | 
175 |     .media-video {
176 |         z-index: 20;
177 |     }
178 | 
179 |     .caption {
180 |         display: none;
181 |     }
182 | 
183 |     /* Modes */
184 |     &:where(.mode-intrinsic-ratio) {
185 |         position: relative;
186 |         aspect-ratio: v-bind('cssVars.aspectRatio');
187 |     }
188 | 
189 |     &:where(.mode-cover) {
190 |         position: relative;
191 |     }
192 | 
193 |     &.mode-cover {
194 |         .sizer {
195 |             width: 100%;
196 |             height: 100%;
197 |             top: 0;
198 |             left: 0;
199 |             position: absolute;
200 |         }
201 |     }
202 | 
203 |     /* Object fit modes */
204 |     &.object-fit-cover .media {
205 |         object-fit: cover;
206 |     }
207 | 
208 |     &.object-fit-contain .media {
209 |         object-fit: contain;
210 |     }
211 | 
212 |     /* Loaded & active states */
213 |     &.has-loaded {
214 |         .media-image {
215 |             opacity: 1;
216 |         }
217 |     }
218 | 
219 |     &.is-playing {
220 |         .media-image {
221 |             /* Hide image when video is playing to avoid overlaps */
222 |             opacity: 0;
223 |         }
224 | 
225 |         .media-video {
226 |             opacity: 1;
227 |         }
228 |     }
229 | }
230 | </style>
231 | 


--------------------------------------------------------------------------------
/app/components/wp-content.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wp-content">
  3 |         <component
  4 |             v-for="(block, index) in parsedBlocks"
  5 |             :key="`wp-block-${index}`"
  6 |             :is="allBlocks[block.blockName]"
  7 |             v-bind="block"
  8 |             :class="block.classes"
  9 |             :id="block.anchorId"
 10 |         />
 11 |     </div>
 12 | </template>
 13 | 
 14 | <script setup lang="ts">
 15 | // Load all components. I wish these were async somehow?
 16 | const allBlocks = {
 17 |     'core-paragraph': resolveComponent('wp-block-core-paragraph'),
 18 |     'core-heading': resolveComponent('wp-block-core-heading'),
 19 |     'core-image': resolveComponent('wp-block-core-image'),    
 20 |     'core-columns': resolveComponent('wp-block-core-columns'),    
 21 |     'core-column': resolveComponent('wp-block-core-column'),    
 22 |     'core-list': resolveComponent('wp-block-core-list'),
 23 |     'core-spacer': resolveComponent('wp-block-core-spacer'),
 24 |     'core-gallery': resolveComponent('wp-block-core-gallery'),
 25 |     'core-quote': resolveComponent('wp-block-core-quote'),
 26 |     'core-embed': resolveComponent('wp-block-core-embed'),
 27 |     'core-video': resolveComponent('wp-block-core-video'),
 28 | }
 29 | 
 30 | // Props
 31 | const props = defineProps({
 32 |     blocks: {
 33 |         type: Array,
 34 |         default: () => []
 35 |     },
 36 | })
 37 | 
 38 | // Parsed blocks
 39 | const parsedBlocks = computed(() => {
 40 |     
 41 |     // Remove blocks we don't have registered components for
 42 |     const blocks = props.blocks.filter(block => {
 43 |         const blockName = block.blockName?.replace('/', '-') || '';
 44 |         return Boolean(allBlocks[blockName] || false)
 45 |     })
 46 |     
 47 |     // Reshape blocks with generic attributes
 48 |     return blocks.map(block => {
 49 |         const blockName = block.blockName?.replace('/', '-') || '';
 50 |         
 51 |         return {
 52 |             ...block,
 53 |             blockName,
 54 |             anchorId: block.attrs.anchorId || '',
 55 |             classes: [
 56 |                 'wp-block',
 57 |                 blockName,
 58 |                 block.attrs?.className || '',
 59 |             ]
 60 |         }
 61 |     })
 62 | })
 63 | </script>
 64 | 
 65 | <style scoped>
 66 | .wp-content {
 67 |     /* Margins above/below blocks */
 68 |     --unit-margin-large: 40px; /* Columns, Gallerys, Blockquotes... */
 69 |     --unit-margin-small: 20px; /* Everything except P, H{n} and lists. */
 70 | 
 71 |     /* Gaps on the side of a block (between browser edge) */
 72 |     --unit-gutter: var(--unit-gap, 40px);
 73 |     
 74 |     /* Gaps inbetween images in gallery */
 75 |     --unit-gallery-gap: var(--unit-gap, 40px);
 76 | 
 77 |     /* Max width of blocks */
 78 |     --unit-max-width-large: 1400px; /* Default, galleries, images, columns */
 79 |     --unit-max-width-medium: 1080px; /* Headings (center aligned), Blockquotes */
 80 |     --unit-max-width-small: 800px; /* Headings (left or right aligned), P, lists */
 81 | 
 82 |     margin: var(--unit-margin-large) auto;
 83 |     display: flow-root;
 84 | 
 85 |     /* Genric styles for all top level blocks */
 86 |     :where(> .wp-block) {
 87 |         margin: var(--unit-margin-large) auto;
 88 |         max-width: var(--unit-max-width-large);
 89 |         padding: 0 var(--unit-gutter);
 90 |         box-sizing: border-box;
 91 | 
 92 |         &:first-child {
 93 |             margin-top: 0;
 94 |         }
 95 |         &:last-child {
 96 |             margin-bottom: 0;
 97 |         }
 98 |     }
 99 | 
100 |     /* Generic margins and max-widths */
101 |     :where(.margin-text) {
102 |         margin: var(--unit-margin-small) auto;
103 |         max-width: var(--unit-max-width-small);
104 |     }
105 |     :where(.margin-section) {
106 |         margin: var(--unit-margin-large) auto;
107 |         max-width: var(--unit-max-width-large);
108 |     }
109 | 
110 |     /* Specific block styling below. */
111 |     .core-heading {
112 |         line-height: 1.2;
113 | 
114 |         &.align-center {
115 |             max-width: var(--unit-max-width-medium);
116 |         }
117 | 
118 |         &.is-h1 {
119 |             font-size: 80px;
120 |         }
121 |         &.is-h2 {
122 |             font-size: 60px;
123 |         }
124 |         &.is-h3 {
125 |             font-size: 32px;
126 |         }
127 |         &.is-h4 {
128 |             font-size: 24px;
129 |         }
130 | 
131 |         @media (--lt-phone) {
132 |             &.is-h1 {
133 |                 font-size: 60px;
134 |             }
135 |             &.is-h2 {
136 |                 font-size: 32px;
137 |             }
138 |             &.is-h3 {
139 |                 font-size: 24px;
140 |             }
141 |             &.is-h4 {
142 |                 font-size: 18px;
143 |             }
144 |         }
145 |     }
146 |     .core-paragraph {
147 |         line-height: 1.4;
148 |     }
149 |     .core-list {
150 |         padding: 0 calc(var(--unit-gutter) * 2);
151 |         line-height: 1.4;
152 | 
153 |         li {
154 |             margin: 0.5ch 0;
155 |         }
156 |         &.is-ul {
157 |             li {
158 |                 padding-left: 1ch;
159 |                 &::marker {
160 |                     content: "—";
161 |                 }
162 |             }
163 |         }
164 |     }
165 |     .core-columns + .core-columns {
166 |         margin-top: calc(var(--unit-margin-large) * -1);
167 |     }
168 |     :deep(.core-column) {
169 |         padding: 0 var(--unit-margin-small);
170 |         box-sizing: border-box;
171 | 
172 |         .wp-block {
173 |             padding: 0;
174 |         }
175 | 
176 |         @media (--lt-phone) {
177 |             margin-bottom: var(--unit-margin-small);
178 |             padding: 0;
179 | 
180 |             &:last-child {
181 |                 margin-bottom: 0;
182 |             }
183 |             &.column-empty {
184 |                 display: none;
185 |             }
186 |         }            
187 |     }  
188 |     .core-gallery + .core-gallery {
189 |         margin-top: calc( (var(--unit-margin-large) * -1) + var(--unit-gallery-gap) );
190 |     }     
191 |     .core-quote {
192 |         max-width: var(--unit-max-width-medium);
193 |         text-align: center;
194 | 
195 |         p {
196 |             margin: var(--unit-margin-small) auto;
197 |             font-size: 32px;
198 |             line-height: 1.4;
199 |         }
200 |         .citation {
201 |             font-size: 14px;
202 |             margin-top: -1em;
203 |             font-weight: 500;
204 |         }
205 |     
206 |     }
207 |     .core-cover {
208 |         max-width: 100%;
209 |         padding: 0;
210 |         height: 70vh;
211 |         min-height: 400px;
212 |     }
213 |     .core-spacer {
214 |         margin: 0 auto;
215 |     }
216 | 
217 |   
218 | }
219 | </style>


--------------------------------------------------------------------------------