diff --git a/package.json b/package.json
index 72706143..f143c312 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
- "test:integration": "playwright test --reporter=html",
+ "test:integration": "playwright test",
"test:unit": "vitest"
},
"devDependencies": {
diff --git a/pic-sure-theme.ts b/pic-sure-theme.ts
new file mode 100644
index 00000000..621222b9
--- /dev/null
+++ b/pic-sure-theme.ts
@@ -0,0 +1,101 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const picSureTheme: CustomThemeConfig = {
+ name: 'pic-sure-theme',
+ properties: {
+ // =~= Theme Properties =~=
+ '--theme-font-family-base': `'Nunito Sans', sans-serif`,
+ '--theme-font-family-heading': `'Nunito Sans', sans-serif`,
+ '--theme-font-color-base': '0 0 0',
+ '--theme-font-color-dark': '255 255 255',
+ '--theme-rounded-base': '9999px',
+ '--theme-rounded-container': '8px',
+ '--theme-border-base': '1px',
+ // =~= Theme On-X Colors =~=
+ '--on-primary': '0 0 0',
+ '--on-secondary': '0 0 0',
+ '--on-tertiary': '255 255 255',
+ '--on-success': '0 0 0',
+ '--on-warning': '0 0 0',
+ '--on-error': '0 0 0',
+ '--on-surface': '0 0 0',
+ // =~= Theme Colors =~=
+ // primary | #c4b49c
+ '--color-primary-50': '246 244 240', // #f6f4f0
+ '--color-primary-100': '243 240 235', // #f3f0eb
+ '--color-primary-200': '240 236 230', // #f0ece6
+ '--color-primary-300': '231 225 215', // #e7e1d7
+ '--color-primary-400': '214 203 186', // #d6cbba
+ '--color-primary-500': '196 180 156', // #c4b49c
+ '--color-primary-600': '176 162 140', // #b0a28c
+ '--color-primary-700': '147 135 117', // #938775
+ '--color-primary-800': '118 108 94', // #766c5e
+ '--color-primary-900': '96 88 76', // #60584c
+ // secondary | #848484
+ '--color-secondary-50': '237 237 237', // #ededed
+ '--color-secondary-100': '230 230 230', // #e6e6e6
+ '--color-secondary-200': '224 224 224', // #e0e0e0
+ '--color-secondary-300': '206 206 206', // #cecece
+ '--color-secondary-400': '169 169 169', // #a9a9a9
+ '--color-secondary-500': '132 132 132', // #848484
+ '--color-secondary-600': '119 119 119', // #777777
+ '--color-secondary-700': '99 99 99', // #636363
+ '--color-secondary-800': '79 79 79', // #4f4f4f
+ '--color-secondary-900': '65 65 65', // #414141
+ // tertiary | #675AFF
+ '--color-tertiary-50': '232 230 255', // #e8e6ff
+ '--color-tertiary-100': '225 222 255', // #e1deff
+ '--color-tertiary-200': '217 214 255', // #d9d6ff
+ '--color-tertiary-300': '194 189 255', // #c2bdff
+ '--color-tertiary-400': '149 140 255', // #958cff
+ '--color-tertiary-500': '103 90 255', // #675AFF
+ '--color-tertiary-600': '93 81 230', // #5d51e6
+ '--color-tertiary-700': '77 68 191', // #4d44bf
+ '--color-tertiary-800': '62 54 153', // #3e3699
+ '--color-tertiary-900': '50 44 125', // #322c7d
+ // success | #5cb85c
+ '--color-success-50': '231 244 231', // #e7f4e7
+ '--color-success-100': '222 241 222', // #def1de
+ '--color-success-200': '214 237 214', // #d6edd6
+ '--color-success-300': '190 227 190', // #bee3be
+ '--color-success-400': '141 205 141', // #8dcd8d
+ '--color-success-500': '92 184 92', // #5cb85c
+ '--color-success-600': '83 166 83', // #53a653
+ '--color-success-700': '69 138 69', // #458a45
+ '--color-success-800': '55 110 55', // #376e37
+ '--color-success-900': '45 90 45', // #2d5a2d
+ // warning | #e89b17
+ '--color-warning-50': '252 240 220', // #fcf0dc
+ '--color-warning-100': '250 235 209', // #faebd1
+ '--color-warning-200': '249 230 197', // #f9e6c5
+ '--color-warning-300': '246 215 162', // #f6d7a2
+ '--color-warning-400': '239 185 93', // #efb95d
+ '--color-warning-500': '232 155 23', // #e89b17
+ '--color-warning-600': '209 140 21', // #d18c15
+ '--color-warning-700': '174 116 17', // #ae7411
+ '--color-warning-800': '139 93 14', // #8b5d0e
+ '--color-warning-900': '114 76 11', // #724c0b
+ // error | #FF0000
+ '--color-error-50': '255 217 217', // #ffd9d9
+ '--color-error-100': '255 204 204', // #ffcccc
+ '--color-error-200': '255 191 191', // #ffbfbf
+ '--color-error-300': '255 153 153', // #ff9999
+ '--color-error-400': '255 77 77', // #ff4d4d
+ '--color-error-500': '255 0 0', // #FF0000
+ '--color-error-600': '230 0 0', // #e60000
+ '--color-error-700': '191 0 0', // #bf0000
+ '--color-error-800': '153 0 0', // #990000
+ '--color-error-900': '125 0 0', // #7d0000
+ // surface | #bababa
+ '--color-surface-50': '245 245 245', // #f5f5f5
+ '--color-surface-100': '241 241 241', // #f1f1f1
+ '--color-surface-200': '238 238 238', // #eeeeee
+ '--color-surface-300': '227 227 227', // #e3e3e3
+ '--color-surface-400': '207 207 207', // #cfcfcf
+ '--color-surface-500': '186 186 186', // #bababa
+ '--color-surface-600': '167 167 167', // #a7a7a7
+ '--color-surface-700': '140 140 140', // #8c8c8c
+ '--color-surface-800': '112 112 112', // #707070
+ '--color-surface-900': '91 91 91' // #5b5b5b
+ }
+};
diff --git a/playwright.config.ts b/playwright.config.ts
index 962f19c3..a458c6af 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -6,7 +6,8 @@ const config: PlaywrightTestConfig = {
port: 4173
},
testDir: 'tests',
- testMatch: /(.+\.)?(test|spec)\.[jt]s/
+ testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+ reporter: [['list'], ['html']]
};
export default config;
diff --git a/src/app.html b/src/app.html
index cc291f48..23c47ff4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,16 @@
-
+
%sveltekit.head%
-
+
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss
index b82756dc..78cb74c5 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -8,16 +8,9 @@ body {
@apply h-full overflow-hidden;
}
-/* vintage theme */
-@font-face {
- font-family: 'Abril Fatface';
- src: url('/fonts/AbrilFatface.ttf');
- font-display: swap;
-}
-
section.main-content {
width: 60%; /* The width is 60%, by default */
- margin: 20px auto 0;
+ margin: 2rem auto 0;
}
/* Use a media query to add a breakpoint at 800px: */
@@ -49,12 +42,49 @@ nav#page-navigation a {
width: 150px;
}
nav#page-navigation a[aria-current='page'] {
- /* @apply bg-primary-500; */
- background-color: rgba(var(--color-primary-900));
- color: rgba(var(--color-primary-50));
+ background-color: rgba(var(--color-primary-500));
+ color: rgb(var(--theme-font-color-base));
}
-nav#page-navigation a:hover {
- /* @apply bg-secondary-500; */
+nav#page-navigation a:hover,
+nav#page-navigation a:active {
background-color: rgba(var(--color-secondary-500));
- color: rgba(var(--color-surface-900));
+ color: rgb(var(--theme-font-color-base));
+}
+
+.subtitle {
+ font-size: 2rem;
+}
+
+.block-buttons {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ margin: 2rem 0;
+}
+
+.block-buttons .subtitle {
+ margin: 0.75rem;
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ color: rgb(var(--color-tertiary-900));
+ margin: 1rem 0.25rem;
+}
+
+.block-buttons a {
+ color: rgb(var(--text-secondary-500));
+ text-decoration: none;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ width: 15rem;
+ min-height: 15rem;
+ padding: 1rem 0.5rem;
+ margin: 0.3rem;
+ @apply card variant-ringed-secondary;
+}
+
+.block-buttons a:hover,
+.block-buttons a:active {
+ background-color: rgb(var(--color-primary-500));
}
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
new file mode 100644
index 00000000..074437f8
--- /dev/null
+++ b/src/lib/configuration.ts
@@ -0,0 +1,30 @@
+export const branding = {
+ help: {
+ links: [
+ {
+ title: 'User Guide',
+ description: 'Complete user manual for seamless navigation and utilization.',
+ icon: 'fa-solid fa-book fa-5x',
+ url: '/help/dummy?title=' + encodeURI('User Guide')
+ },
+ {
+ title: 'Video Library',
+ description: "Example 'how-to' video demonstrations.",
+ icon: 'fa-solid fa-tv fa-5x',
+ url: '/help/dummy?title=' + encodeURI('Video Library')
+ },
+ {
+ title: 'Request Assistance',
+ description: 'Need help? Submit a service desk ticket, we are here to help!',
+ icon: 'fa-solid fa-hands-holding-circle fa-5x',
+ url: '/help/dummy?title=' + encodeURI('Request Assistance')
+ },
+ {
+ title: 'PIC-Sure Website',
+ description: 'Check out the PIC-Sure website for information.',
+ icon: 'fa-solid fa-circle-info fa-5x',
+ url: '/help/dummy?title=' + encodeURI('PIC-Sure Website')
+ }
+ ]
+ }
+};
diff --git a/src/lib/content.svelte b/src/lib/content.svelte
index 884b9314..4b8ab29e 100644
--- a/src/lib/content.svelte
+++ b/src/lib/content.svelte
@@ -1,10 +1,12 @@
-
+
{title}
+ {#if subtitle}
{subtitle}
{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 831effb9..714d87fa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,7 @@
+
diff --git a/src/routes/help/+page.svelte b/src/routes/help/+page.svelte
index 5a89e088..7304906b 100644
--- a/src/routes/help/+page.svelte
+++ b/src/routes/help/+page.svelte
@@ -1,7 +1,16 @@
-
- Sample page data for the help page.
+
+
diff --git a/src/routes/help/dummy/+page.svelte b/src/routes/help/dummy/+page.svelte
new file mode 100644
index 00000000..08da9880
--- /dev/null
+++ b/src/routes/help/dummy/+page.svelte
@@ -0,0 +1,9 @@
+
+
+
+ Some help page content.
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 883db345..6a78f92e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin';
+import { picSureTheme } from './pic-sure-theme';
export default {
darkMode: 'class',
@@ -18,12 +19,7 @@ export default {
typography,
skeleton({
themes: {
- preset: [
- {
- name: 'vintage',
- enhancements: true
- }
- ]
+ custom: [picSureTheme]
}
})
]
diff --git a/tests/test.ts b/tests/lib/test.ts
similarity index 95%
rename from tests/test.ts
rename to tests/lib/test.ts
index 47dc5729..9c9bba6d 100644
--- a/tests/test.ts
+++ b/tests/lib/test.ts
@@ -6,7 +6,7 @@ const routes = [
{ path: '/users', id: 'nav-link-users', headerText: 'Users' },
{ path: '/api', id: 'nav-link-api', headerText: 'API' },
{ path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
- { path: '/help', id: 'nav-link-help', headerText: 'Help' },
+ { path: '/help', id: 'nav-link-help', headerText: 'Knowledge Hub' },
{ path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
{ path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
];
diff --git a/tests/routes/help/test.ts b/tests/routes/help/test.ts
new file mode 100644
index 00000000..ec7f8554
--- /dev/null
+++ b/tests/routes/help/test.ts
@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+import { branding } from '../../../src/lib/configuration';
+
+test.describe('Help page', () => {
+ branding.help.links.forEach(({ title }) => {
+ test(`Has expected link to ${title}`, async ({ page }) => {
+ await page.goto('/help');
+ await expect(page.getByText(title, { exact: true })).toBeVisible();
+ });
+ });
+});