arcticsoftware/polarpress-pagebuilder
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Rendered generated pages menu links on the main page, cleaned up some code, and forced light mode for a consistent look
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Helge-Mikael Nordgård 2025-05-05 22:32:28 +02:00
parent 75156d4e5e
commit 6b4c4e25d2
7 changed files with 42 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Controllers/PageRender.php
View File

@ -7,7 +7,6 @@ use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Helpers\PageBlocksHelper;
use App\Helpers\PageSettingsHelper;
use App\Models\Page;
use App\Models\PageRevision;

2
resources/js/composables/useAppearance.ts
View File

@ -8,7 +8,7 @@ export function updateTheme(value: Appearance) {
}
if (value === 'system') {
const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
const mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');
const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
document.documentElement.classList.toggle('dark', systemTheme === 'dark');

195
resources/js/pages/Backend/PageBuilder/Preview.vue
View File

@ -6,10 +6,6 @@
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { on } from '@/Components/EventBus.vue';
import MainMenu from '@/Components/FrontPage/MenyComponent.vue';
import ExternalMainMenu from '@/Components/FrontPage/ExternalMenuComponent.vue';
import SmallHeader from '@/Components/FrontPage/SmallHeader.vue';
import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';
import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
@ -37,139 +33,12 @@
menuLinks: { type: Object, default: () => ({}) }
});
onMounted(() => {
// Check if the url has the parameter key scrollTo
if (urlParam('scrollTo')) {
// Enable scrolling on the body and html elements
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
// Get the value of the parameter
const scrollTo = urlParam('scrollTo');
// Scroll to the section with the id that matches the value of the parameter
gsap.to(window, {
duration: 1,
scrollTo: {
y: `#${scrollTo}`,
autoKill: false,
},
});
}
});
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
const useEventBus = ref(false);
const showMainMenu = ref(false);
const pageRef = ref();
const page = usePage();
const smallHeader = ref(null);
const showErrorModal = ref(false);
const errorStatus = ref('');
const closeErrorModal = () => {
showErrorModal.value = false;
};
// Lytt etter errorModal event fra Laravel
window.addEventListener('errorModal', (event) => {
showErrorModal.value = true;
errorStatus.value = event.detail.status;
});
/** Menu button animations */
const menuButton = ref(null);
const handleMenuButtonOver = () => {
gsap.set(menuButton.value, {
borderRadius: '0.375rem',
});
gsap.to(menuButton.value, {
duration: 0.2,
scale: 1.1,
});
};
const handleMenuButtonOut = () => {
gsap.set(menuButton.value, {
borderRadius: '9999px',
});
gsap.to(menuButton.value, {
duration: 0.2,
scale: 1,
});
};
const clickMenuButton = () => {
showMainMenu.value = !showMainMenu.value;
if (showMainMenu.value) {
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
}
};
/** Get a node value from json */
const extractMetaValue = (node, key) => {
let meta = JSON.parse(node.fs_meta);
return meta[key];
};
/**
* formatDate
*
* Formats a date string to a Norwegian date format.
*
* @param {
* } dateString
*/
const formatDate = (dateString) => {
const date = new Date(dateString);
const day = ('0' + date.getDate()).slice(-2);
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const year = date.getFullYear();
return `${day}/${month}/${year}`;
};
/**
* dateString
*
* Formats a date string to a Norwegian time format.
* @param {*} dateString
*/
const formatTime = (dateString) => {
const date = new Date(dateString);
return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
};
/** Get url parameters */
const urlParam = (paramKey) => {
const url = new URL(window.location.href);
return url.searchParams.get(paramKey);
};
// Denne funksjonen kalles fra lenker på siden for å
// Gi siden en myk fade ut effekt før den nye siden lastes
const loadLink = (url) => {
gsap.to(pageRef.value, {
duration: 1,
opacity: 0,
ease: 'power2.inOut',
onComplete: () => {
router.visit(url);
},
});
};
const components = {
HeroLogoTextRendered,
@ -188,70 +57,6 @@
PageFooterRendered
};
/** Eventbus listeners */
on('linkClicked', (payload) => {
if (payload === 'om' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#content',
autoKill: false,
},
});
} else if (payload === 'arrangementer' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#events',
autoKill: false,
},
});
} else if (payload === 'nyheter' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#intro',
autoKill: false,
},
});
} else if (payload === 'sponsor' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#sponsors-intro',
autoKill: false,
},
});
} else if (payload === 'medlem' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#membership',
autoKill: false,
},
});
} else if (payload === 'medlemside' && useEventBus.value) {
clickMenuButton();
loadLink(route('page-builder.index'));
} else if (payload === 'loggpaa' && useEventBus.value) {
clickMenuButton();
loadLink(route('login'));
} else if (payload === 'registrer' && useEventBus.value) {
clickMenuButton();
loadLink(route('register'));
}
});
on('eventBusActive', (payload) => {
useEventBus.value = payload;
});
</script>
<template>

36
resources/js/pages/Dashboard.vue
View File

@ -1,36 +0,0 @@
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Dashboard',
href: '/dashboard',
},
];
</script>
<template>
<Head title="Dashboard" />
<AppLayout :breadcrumbs="breadcrumbs">
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
<PlaceholderPattern />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
<PlaceholderPattern />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
<PlaceholderPattern />
</div>
</div>
<div class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 dark:border-sidebar-border md:min-h-min">
<PlaceholderPattern />
</div>
</div>
</AppLayout>
</template>

228
resources/js/pages/Root.vue
View File

@ -6,10 +6,6 @@
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { on } from '@/Components/EventBus.vue';
import MainMenu from '@/Components/FrontPage/MenyComponent.vue';
import ExternalMainMenu from '@/Components/FrontPage/ExternalMenuComponent.vue';
import SmallHeader from '@/Components/FrontPage/SmallHeader.vue';
import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';
import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
@ -37,81 +33,12 @@
menuLinks: { type: Object, default: () => ({}) }
});
onMounted(() => {
// Check if the url has the parameter key scrollTo
if (urlParam('scrollTo')) {
// Enable scrolling on the body and html elements
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
// Get the value of the parameter
const scrollTo = urlParam('scrollTo');
// Scroll to the section with the id that matches the value of the parameter
gsap.to(window, {
duration: 1,
scrollTo: {
y: `#${scrollTo}`,
autoKill: false,
},
});
}
});
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
const useEventBus = ref(false);
const showMainMenu = ref(false);
const pageRef = ref();
const page = usePage();
const smallHeader = ref(null);
const showErrorModal = ref(false);
const errorStatus = ref('');
const closeErrorModal = () => {
showErrorModal.value = false;
};
// Lytt etter errorModal event fra Laravel
window.addEventListener('errorModal', (event) => {
showErrorModal.value = true;
errorStatus.value = event.detail.status;
});
/** Menu button animations */
const menuButton = ref(null);
const handleMenuButtonOver = () => {
gsap.set(menuButton.value, {
borderRadius: '0.375rem',
});
gsap.to(menuButton.value, {
duration: 0.2,
scale: 1.1,
});
};
const handleMenuButtonOut = () => {
gsap.set(menuButton.value, {
borderRadius: '9999px',
});
gsap.to(menuButton.value, {
duration: 0.2,
scale: 1,
});
};
const clickMenuButton = () => {
showMainMenu.value = !showMainMenu.value;
if (showMainMenu.value) {
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
}
};
const pageRef = ref();
/** Get a node value from json */
@ -121,56 +48,6 @@
return meta[key];
};
/**
* formatDate
*
* Formats a date string to a Norwegian date format.
*
* @param {
* } dateString
*/
const formatDate = (dateString) => {
const date = new Date(dateString);
const day = ('0' + date.getDate()).slice(-2);
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const year = date.getFullYear();
return `${day}/${month}/${year}`;
};
/**
* dateString
*
* Formats a date string to a Norwegian time format.
* @param {*} dateString
*/
const formatTime = (dateString) => {
const date = new Date(dateString);
return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
};
/** Get url parameters */
const urlParam = (paramKey) => {
const url = new URL(window.location.href);
return url.searchParams.get(paramKey);
};
// Denne funksjonen kalles fra lenker på siden for å
// Gi siden en myk fade ut effekt før den nye siden lastes
const loadLink = (url) => {
gsap.to(pageRef.value, {
duration: 1,
opacity: 0,
ease: 'power2.inOut',
onComplete: () => {
router.visit(url);
},
});
};
const components = {
HeroLogoTextRendered,
@ -188,113 +65,12 @@
PageFooterRendered
};
/** Eventbus listeners */
on('linkClicked', (payload) => {
if (payload === 'om' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#content',
autoKill: false,
},
});
} else if (payload === 'arrangementer' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#events',
autoKill: false,
},
});
} else if (payload === 'nyheter' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#intro',
autoKill: false,
},
});
} else if (payload === 'sponsor' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#sponsors-intro',
autoKill: false,
},
});
} else if (payload === 'medlem' && useEventBus.value) {
clickMenuButton();
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#membership',
autoKill: false,
},
});
} else if (payload === 'medlemside' && useEventBus.value) {
clickMenuButton();
loadLink(route('page-builder.index'));
} else if (payload === 'loggpaa' && useEventBus.value) {
clickMenuButton();
loadLink(route('login'));
} else if (payload === 'registrer' && useEventBus.value) {
clickMenuButton();
loadLink(route('register'));
}
});
on('eventBusActive', (payload) => {
useEventBus.value = payload;
});
</script>
<template>
<Head>
<title>{{ revision.title }}</title>
<meta name="description" :content="page.props.pageSettings['site_description']" />
<meta name="keywords" :content="page.props.pageSettings['site_keywords']" />
<meta name="author" content="Arctic Software PolarPress" />
<meta name="robots" content="index, follow" />
<meta name="og:title" :content="`Forsiden - ${page.props.pageSettings['site_title']}`" />
<meta name="og:description" :content="page.props.pageSettings['site_description']" />
<meta name="og:image" content="/img/illustration-full.png" />
<meta name="og:url" :content="page.props.baseUrl" />
<meta name="og:site_name" :content="page.props.siteName" />
<meta name="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="og:locale" content="nb_NO" />
<meta name="og:locale:alternate" content="en_US" />
<meta name="og:imagevisiblity" content="all" />
</Head>
<Head />
<div ref="pageRef" class="min-h-screen w-full bg-black">
<template v-if="revision.page.main"> <!-- Show Main menu if the current page is the front page (main page) -->
<MainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" :menuLinks="menuLinks" />
</template>
<template v-else> <!-- Show the external main menu, if the current page is NOT the front page (main page) -->
<ExternalMainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" class="z-40" />
</template>
<SmallHeader />
<!-- Hovedmeny knapp -->
<div class="fixed top-0 right-0 p-4 z-50">
<button ref="menuButton" @click="clickMenuButton" @mouseover="handleMenuButtonOver" @mouseout="handleMenuButtonOut" class="p-2 text-white rounded-full shadow-md shadow-black" :class="{'bg-sky-600': showMainMenu, 'bg-green-700': !showMainMenu }">
<svg v-if="showMainMenu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<!-- Komponentrendring -->
<component
v-for="block in revision.content"

50
resources/js/pages/Welcome.vue
View File

@ -1,6 +1,10 @@
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import PageLogo from '@/Components/ArcticFooterLogo.vue';
import { Head, Link } from '@inertiajs/vue3';
import PageLogo from '@/Components/ArcticFooterLogo.vue';
const { menuLinks } = defineProps({
menuLinks: { type: Object, default: () => ({}) }
});
</script>
<template>
@ -8,28 +12,40 @@ import PageLogo from '@/Components/ArcticFooterLogo.vue';
</Head>
<div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
<header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
<nav class="flex items-center justify-end gap-4">
<Link
v-if="$page.props.auth.user"
:href="route('page-builder.index')"
class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
>
Sidebygger
</Link>
<template v-else>
<nav class="flex justify-between items-center">
<div class="flex justify-start align-middle gap-4">
<Link
:href="route('login')"
class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
v-for="(link, index) in menuLinks"
:key="index"
:href="route('page.view', link.slug)"
class="text-gray-700 dark:text-gray-300 underline hover:no-underline text-sm"
>
Logg på
{{ link.title }}
</Link>
</div>
<div class="flex items-center justify-end gap-4">
<Link
:href="route('register')"
v-if="$page.props.auth.user"
:href="route('page-builder.index')"
class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
>
Registrer konto
Sidebygger
</Link>
</template>
<template v-else>
<Link
:href="route('login')"
class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
>
Logg på
</Link>
<Link
:href="route('register')"
class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
>
Registrer konto
</Link>
</template>
</div>
</nav>
</header>
<div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">

6
routes/web.php
View File

@ -3,11 +3,15 @@
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Helpers\PageBlocksHelper;
use App\Http\Controllers\Backend\PageBuilder;
use App\Http\Controllers\PageRender;
Route::get('/', function () {
return Inertia::render('Welcome');
return Inertia::render('Welcome', [
'menuLinks' => PageBlocksHelper::mainMenuLinks()
]);
})->name('forsiden');
Route::get('/privacypolicy', function () {