use submenus, icons and make small screens show 2 cards per row

home-sqlpage/index.sql

@@ -3,8 +3,41 @@ SELECT 'shell' AS component
 , 'Portal' AS title
 , '/static/shandanone-small.png' AS favicon
 , '/static/shandanone2.png' AS image
---, :manifest AS manifest
+, (SELECT json_object(
+    'title', 'Utilities',
+    'icon', 'calculator',
+    'submenu', json_group_array(json_object(
+      'title', title,
+      'icon', icon,
+      'link', link
+    ))
+  )
+  FROM sqlpage_cards
+  WHERE grouping = 2) AS menu_item
+, (SELECT json_object(
+    'title', 'Apps',
+    'icon', 'apps',
+    'submenu', json_group_array(json_object(
+      'title', title,
+      'icon', icon,
+      'link', link
+    ))
+  )
+  FROM sqlpage_cards
+  WHERE grouping = 3) AS menu_item
+, (SELECT json_object(
+    'title', 'RSS',
+    'icon', 'rss',
+    'submenu', json_group_array(json_object(
+      'title', title,
+      'icon', 'file-rss',
+      'link', link
+    ))
+  )
+  FROM sqlpage_cards
+  WHERE grouping = 4) AS menu_item
 ;
+
 SELECT 'text' AS component
 , '<style>
 .card-img-top:has(+ .bg-rss) {
@@ -15,13 +48,20 @@ SELECT 'text' AS component
     width: 40%;
     margin: 10% 30% 10% 30%;
 }
+/* make row-cols-sm-2 behave like row-cols-2 */
+@media (max-width: 500px) {
+  .row-cols-sm-2>* {
+    flex: 0 0 auto;
+    width: 50%
+  }
+}
 </style>' AS html
 ;
 SELECT 'card' AS component
 , 4 AS columns
 ;
-SELECT 'https://shandan.one'||link AS link
-, title
+SELECT title
+, link
 , top_image
 , description_md
 , color
@@ -32,18 +72,23 @@ SELECT 'divider' AS component;
 SELECT 'card' AS component
 , 4 AS columns
 ;
-SELECT * FROM sqlpage_cards
+SELECT title
+, link
+, top_image
+, description_md
+, color
+FROM sqlpage_cards
 WHERE grouping = 3
 ;
 SELECT 'divider' AS component;
 SELECT 'card' AS component
 , 4 AS columns
 ;
-SELECT 'https://shandan.one/feed'||link AS link
-, title
+SELECT title
+, link
 , 'https://upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png' AS top_image
 , description_md
 , 'rss' AS color
 FROM sqlpage_cards
-WHERE grouping = 1
+WHERE grouping = 4
 ;

home-sqlpage/sqlpage/migrations/000_index.sql

@@ -5,33 +5,37 @@ CREATE TABLE IF NOT EXISTS sqlpage_cards (
 	top_image text,
 	description_md text,
 	color text,
-	grouping int
+	grouping int,
+	icon text
 );
 INSERT INTO sqlpage_cards
 VALUES
 (
-	'/news/rss.html',
+	'/feed/news/rss.html',
 	'News Feed',
-	'',
+	NULL,
 	'Notable events but not weather or sports',
-	'',
-	1
+	NULL,
+	4,
+	NULL
 ),
 (
-	'/discovery/rss.html',
+	'/feed/discovery/rss.html',
 	'Discovery Feed',
-	'',
+	NULL,
 	'Cool and inspirational articles',
-	'',
-	1
+	NULL,
+	4,
+	NULL
 ),
 (
-	'/humour/rss.html',
+	'/feed/humour/rss.html',
 	'Humour Feed',
-	'',
+	NULL,
 	'Humourous articles, memes or anything funny',
-	'rss',
-	1
+	NULL,
+	4,
+	NULL
 ),
 (
 	'/clip?',
@@ -39,7 +43,8 @@ VALUES
 	'https://shandan.one/static/clip/clip-favicon_square.svg',
 	'Paste snippets to share via tiny URL',
 	'green',
-	2
+	2,
+	'clipboard'
 ),
 (
 	'/goto?',
@@ -47,7 +52,8 @@ VALUES
 	'https://shandan.one/static/goto/chain-link2fr-3-2.svg',
 	'Make long URLs shorter and easy to type and say',
 	'pinterest',
-	2
+	2,
+	'link'
 ),
 (
 	'/upload?',
@@ -55,7 +61,8 @@ VALUES
 	'https://shandan.one/static/upload/upload-favicon_square.svg',
 	'Upload a file and generate a short URL to share easily',
 	'yellow',
-	2
+	2,
+	'cloud-share'
 ),
 (
 	'/code?',
@@ -63,7 +70,8 @@ VALUES
 	'https://shandan.one/static/code/qr.svg',
 	'Save scanned voucher codes to keep them handy and not forgotten',
 	'azure',
-	2
+	2,
+	'barcode'
 ),
 (
 	'https://mealie.shandan.one/g/das',
@@ -71,7 +79,8 @@ VALUES
 	'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg" style="font-size: 100px; height: 100px; width: 100px; fill: rgb(229, 131, 37)"><path d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"></path></svg>',
 	'Share recipes and meal plans',
 	'yellow',
-	3
+	3,
+	'tools-kitchen-2'
 ),
 (
 	'https://shandan.one/grocery/internal/apply.sql?groups[]=Fish,%20Meat,%20Eggs&apply=Apply&title=Trend',
@@ -79,7 +88,8 @@ VALUES
 	'https://shandan.one/grocery/favicon_square.svg',
 	'Plot charts showing historic price data',
 	'youtube',
-	3
+	3,
+	'shopping-cart'
 ),
 (
 	'https://cropswap.shandan.one/',
@@ -87,7 +97,8 @@ VALUES
 	'https://cropswap.shandan.one/user/themes/quark/images/favicon.png',
 	'Local crop sharing community',
 	'lime',
-	3
+	3,
+	'plant'
 ),
 (
 	'https://mail.cropswap.shandan.one/',
@@ -95,7 +106,8 @@ VALUES
 	'https://www.mhonarc.org/MHonArc/logo/xmhastampw_t.png.pagespeed.ic.JEPpZUA3TZ.webp',
 	'Member mailing list',
 	'github',
-	3
+	3,
+	'mail'
 ),
 (
 	'https://wol.shandan.one?location=outside',
@@ -103,7 +115,8 @@ VALUES
 	'',
 	'Wake a device from [home](https://wol.shandan.one?location=home) or [outside](https://wol.shandan.one?location=outside)',
 	'red',
-	3
+	3,
+	'power'
 ),
 (
 	'https://shandan.one/pgadmin4',
@@ -111,7 +124,8 @@ VALUES
 	'https://raw.githubusercontent.com/postgres/pgadmin4/c1ba645dceed5c9551a5f408e37a14d1041ee598/web/pgadmin/static/favicon.ico',
 	'Manage And access postgresql databases',
 	'azure',
-	3
+	3,
+	'database'
 ),
 (
 	'https://shandan.one/guacamole',
@@ -119,7 +133,8 @@ VALUES
 	'https://raw.githubusercontent.com/apache/guacamole-website/main/images/logos/guac-classic-logo.svg',
 	'Remote desktop',
 	'teal',
-	3
+	3,
+	'avocado'
 ),
 (
 	'https://gogs.shandan.one',
@@ -127,7 +142,8 @@ VALUES
 	'https://gogs.shandan.one/img/favicon.png',
 	'Manage and access git repositories',
 	'yellow',
-	3
+	3,
+	'brand-git'
 ),
 (
 	'https://syncthing.shandan.one',
@@ -135,7 +151,8 @@ VALUES
 	'https://syncthing.net/img/logo-horizontal.svg',
 	'Monitor and configure file shares',
 	'blue',
-	3
+	3,
+	'topology-complex'
 ),
 (
 	'https://shandan.one/wekan',
@@ -145,7 +162,8 @@ VALUES
 
 Manage projects and tasks',
 	'teal',
-	3
+	3,
+	'layout-kanban'
 ),
 (
 	'https://mouse.shandan.one/#remote-mouse',
@@ -155,7 +173,8 @@ Manage projects and tasks',
 
 Turn your device''s touchscreen into a remote touchpad',
 	'github',
-	3
+	3,
+	'pointer'
 ),
 (
 	'https://gateway.shandan.one',
@@ -165,7 +184,8 @@ Turn your device''s touchscreen into a remote touchpad',
 
 Manage local LAN and internet connection settings',
 	'cyan',
-	3
+	3,
+	'router'
 ),
 (
 	'https://listgarden.shandan.one',
@@ -175,7 +195,8 @@ Manage local LAN and internet connection settings',
 
 Publish news items and create new feeds',
 	'green',
-	3
+	3,
+	'seeding'
 ),
 (
 	'https://shandan.one/pyapi/random',
@@ -183,7 +204,8 @@ Publish news items and create new feeds',
 	'',
 	'Generate a template prayer following the form of the model prayer outlined in Matthew&nbsp;6:9‑13 and Luke&nbsp;11:2‑4',
 	'orange',
-	3
+	3,
+	'pray'
 )
 ;