picocrank 1.6.1 → 1.6.3

package/.github/workflows/pages.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: 'npm'
+          
+      - name: Install dependencies
+        run: npm ci
+        
+      - name: Build
+        run: npm run build
+        
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/index.html

@@ -6,8 +6,6 @@
 
 		<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" />
 
-		<link rel = "stylesheet" href = "node_modules/femtocrank/style.css" />
-		<link rel = "stylesheet" href = "node_modules/femtocrank/dark.css" media = "(prefers-color-scheme: dark)" />
 	</head>
 
 	<body>

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "picocrank",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

package/vite.config.js

@@ -3,6 +3,24 @@ import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 
 export default defineConfig({
+  base: '/picocrank/',
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      external: [],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') {
+            return 'assets/femtocrank-[hash].css'
+          }
+          if (assetInfo.name === 'dark.css') {
+            return 'assets/femtocrank-dark-[hash].css'
+          }
+          return 'assets/[name]-[hash].[ext]'
+        }
+      }
+    }
+  },
   server: {
     proxy: {
       '/api': {

package/vue/components/Section.vue

@@ -41,29 +41,30 @@ const props = defineProps({
 </script>
 
 <style scoped>
-:slotted(button):not(.good),
-:slotted(.button):not(.good)
+:slotted(.section-header button).neutral,
+:slotted(.section-header .button).neutral
 {
 	background-color: white;
+	color: #000;
 }
 
-:slotted(button:hover):not(.good),
-:slotted(.button:hover):not(.good)
+:slotted(.section-header .button:hover).neutral,
+:slotted(.section-header .button:hover).neutral
 {
 	background-color: #f0f0f0;
 }
 
 @media (prefers-color-scheme: dark) {
-	:slotted(button):not(.good),
-	:slotted(.button):not(.good)
+	:slotted(.section-header button).neutral,
+	:slotted(.section-header .button).neutral
 	{
 		background-color: #111;
 		border: 1px solid #222;
 		color: #fff;
 	}
 
-	:slotted(button:hover):not(.good),
-	:slotted(.button:hover):not(.good)
+	:slotted(.section-header button:hover).neutral,
+	:slotted(.section-header .button:hover).neutral
 	{
 		background-color: #222;
 		border: 1px solid #333;

package/vue/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" >
+	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" >
 		<template #toolbar>
 			<QuickSearch
 				ref="quickSearchRef"
@@ -31,6 +31,8 @@
 	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
+	import '../../src/styles.css'
+	import logoUrl from '/logo.png';
 
 	const quickSearchRef = ref(null)
 	const router = useRouter();

package/vue/views/Welcome.vue

@@ -18,6 +18,18 @@
 			<button class = "good">Add</button>
 		</template>
 
+		<div>
+			<button class = "neutral">
+				Neutral
+			</button>
+			<button class = "good">
+				Good
+			</button>
+			<button class = "bad">
+				Bad
+			</button>
+		</div>
+
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.