feat(admin): add pageExtensions field to admin general + more animated icons

server/db/migrations/3.0.0.js

@@ -453,6 +453,7 @@ exports.up = async knex => {
       company: '',
       contentLicense: '',
       footerExtra: '',
+      pageExtensions: ['md', 'html', 'txt'],
       defaults: {
         timezone: 'America/New_York',
         dateFormat: 'YYYY-MM-DD',

server/graph/resolvers/site.js

@@ -13,7 +13,8 @@ module.exports = {
         ...s.config,
         id: s.id,
         hostname: s.hostname,
-        isEnabled: s.isEnabled
+        isEnabled: s.isEnabled,
+        pageExtensions: s.config.pageExtensions.join(', ')
       }))
     },
     async siteById (obj, args) {
@@ -22,7 +23,8 @@ module.exports = {
         ...site.config,
         id: site.id,
         hostname: site.hostname,
-        isEnabled: site.isEnabled
+        isEnabled: site.isEnabled,
+        pageExtensions: site.config.pageExtensions.join(', ')
       } : null
     },
     async siteByHostname (obj, args) {
@@ -38,7 +40,8 @@ module.exports = {
         ...site.config,
         id: site.id,
         hostname: site.hostname,
-        isEnabled: site.isEnabled
+        isEnabled: site.isEnabled,
+        pageExtensions: site.config.pageExtensions.join(', ')
       } : null
     }
   },
@@ -102,6 +105,10 @@ module.exports = {
         if (args.patch?.theme?.injectCSS) {
           args.patch.theme.injectCSS = new CleanCSS({ inline: false }).minify(args.patch.theme.injectCSS).styles
         }
+        // -> Format Page Extensions
+        if (args.patch?.pageExtensions) {
+          args.patch.pageExtensions = args.patch.pageExtensions.split(',').map(ext => ext.trim().toLowerCase()).filter(ext => ext.length > 0)
+        }
         // -> Update site
         await WIKI.models.sites.updateSite(args.id, {
           hostname: args.patch.hostname ?? site.hostname,

server/graph/schemas/site.graphql

@@ -54,6 +54,7 @@ type Site {
   company: String
   contentLicense: String
   footerExtra: String
+  pageExtensions: String
   logoText: Boolean
   sitemap: Boolean
   robots: SiteRobots
@@ -132,6 +133,7 @@ input SiteUpdateInput {
   company: String
   contentLicense: String
   footerExtra: String
+  pageExtensions: String
   logoText: Boolean
   sitemap: Boolean
   robots: SiteRobotsInput

server/models/sites.js

@@ -38,6 +38,7 @@ module.exports = class Site extends Model {
         company: '',
         contentLicense: '',
         footerExtra: '',
+        pageExtensions: ['md', 'html', 'txt'],
         defaults: {
           timezone: 'America/New_York',
           dateFormat: 'YYYY-MM-DD',

ux/public/_assets/icons/fluent-paint-roller-animated.svg

@@ -0,0 +1,55 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px">
+	<path fill="#abb4be" d="M24,31c-0.552,0-1-0.448-1-1v-3.627c0-1.501,1.122-2.78,2.61-2.975l16.52-2.162	c0.496-0.065,0.87-0.491,0.87-0.992V13c0-0.551-0.449-1-1-1h-4c-0.552,0-1-0.448-1-1s0.448-1,1-1h4c1.654,0,3,1.346,3,3v7.245	c0,1.501-1.122,2.78-2.61,2.975l-16.52,2.162C25.374,25.447,25,25.873,25,26.373V30C25,30.552,24.552,31,24,31z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQa" x1="38.3" x2="40.42" y1="7.527" y2="14.85" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ffd869"/>
+		<stop offset="1" stop-color="#fec52b"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQa)" d="M39.434,17H38V5h1.434C40.295,5,41,5.705,41,6.566v8.868C41,16.295,40.295,17,39.434,17z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQb" x1="7.763" x2="9.883" y1="7.782" y2="15.105" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ffd869"/>
+		<stop offset="1" stop-color="#fec52b"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQb)" d="M10,17H8.565C7.701,17,7,16.299,7,15.435v-8.87C7,5.704,7.704,5,8.565,5H10V17z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQc" x1="21" x2="27" y1="36" y2="36" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#3079d6"/>
+		<stop offset="1" stop-color="#297cd2"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQc)" d="M22,29h4c0.552,0,1,0.448,1,1v12c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1V30	C21,29.448,21.448,29,22,29z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQd" x1="24" x2="24" y1="4.909" y2="23.577" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ec407a"/>
+		<stop offset="1" stop-color="#e91e63"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQd)" d="M10,4.999V23c0,0.552,0.448,1,1,1s1-0.448,1-1v-5c0-0.552,0.448-1,1-1s1,0.448,1,1v2	c0,0.552,0.448,1,1,1s1-0.448,1-1v-1c0-1.105,0.889-2,1.994-2C23.411,17,38,16.999,38,16.999V5L10,4.999z"/>
+  <circle cx="11" cy="20" r="1" style="fill:#e91e63;">
+    <animateTransform
+      attributeType="xml"
+      attributeName="transform"
+      type="translate"
+      from="0 0"
+      to="0 1"
+      dur="3s"
+      begin="0s"
+      calcMode="spline"
+      keyTimes="0;1"
+      keySplines="1,0,0.83,0.67"
+      repeatCount="indefinite"
+      additive="sum"
+      fill="freeze"
+    />
+    <animateTransform
+      attributeType="xml"
+      attributeName="transform"
+      type="scale"
+      from="1 1"
+      to="1 3"
+      dur="3s"
+      begin="0s"
+      calcMode="spline"
+      keyTimes="0;1"
+      keySplines="1,0,0.83,0.67"
+      additive="sum"
+      repeatCount="indefinite"
+    />
+  </circle>
+</svg>

ux/public/_assets/icons/fluent-paint-roller.svg

@@ -1 +1,24 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#abb4be" d="M24,31c-0.552,0-1-0.448-1-1v-3.627c0-1.501,1.122-2.78,2.61-2.975l16.52-2.162	c0.496-0.065,0.87-0.491,0.87-0.992V13c0-0.551-0.449-1-1-1h-4c-0.552,0-1-0.448-1-1s0.448-1,1-1h4c1.654,0,3,1.346,3,3v7.245	c0,1.501-1.122,2.78-2.61,2.975l-16.52,2.162C25.374,25.447,25,25.873,25,26.373V30C25,30.552,24.552,31,24,31z"/><linearGradient id="Psn0qfw0zZI_2FiyraWIQa" x1="38.3" x2="40.42" y1="7.527" y2="14.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#Psn0qfw0zZI_2FiyraWIQa)" d="M39.434,17H38V5h1.434C40.295,5,41,5.705,41,6.566v8.868C41,16.295,40.295,17,39.434,17z"/><linearGradient id="Psn0qfw0zZI_2FiyraWIQb" x1="7.763" x2="9.883" y1="7.782" y2="15.105" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#Psn0qfw0zZI_2FiyraWIQb)" d="M10,17H8.565C7.701,17,7,16.299,7,15.435v-8.87C7,5.704,7.704,5,8.565,5H10V17z"/><linearGradient id="Psn0qfw0zZI_2FiyraWIQc" x1="21" x2="27" y1="36" y2="36" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3079d6"/><stop offset="1" stop-color="#297cd2"/></linearGradient><path fill="url(#Psn0qfw0zZI_2FiyraWIQc)" d="M22,29h4c0.552,0,1,0.448,1,1v12c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1V30	C21,29.448,21.448,29,22,29z"/><linearGradient id="Psn0qfw0zZI_2FiyraWIQd" x1="24" x2="24" y1="4.909" y2="23.577" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d160f6"/><stop offset="1" stop-color="#c545ed"/></linearGradient><path fill="url(#Psn0qfw0zZI_2FiyraWIQd)" d="M10,4.999V23c0,0.552,0.448,1,1,1s1-0.448,1-1v-5c0-0.552,0.448-1,1-1s1,0.448,1,1v2	c0,0.552,0.448,1,1,1s1-0.448,1-1v-1c0-1.105,0.889-2,1.994-2C23.411,17,38,16.999,38,16.999V5L10,4.999z"/></svg>
+<svg
+	xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px">
+	<path fill="#abb4be" d="M24,31c-0.552,0-1-0.448-1-1v-3.627c0-1.501,1.122-2.78,2.61-2.975l16.52-2.162	c0.496-0.065,0.87-0.491,0.87-0.992V13c0-0.551-0.449-1-1-1h-4c-0.552,0-1-0.448-1-1s0.448-1,1-1h4c1.654,0,3,1.346,3,3v7.245	c0,1.501-1.122,2.78-2.61,2.975l-16.52,2.162C25.374,25.447,25,25.873,25,26.373V30C25,30.552,24.552,31,24,31z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQa" x1="38.3" x2="40.42" y1="7.527" y2="14.85" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ffd869"/>
+		<stop offset="1" stop-color="#fec52b"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQa)" d="M39.434,17H38V5h1.434C40.295,5,41,5.705,41,6.566v8.868C41,16.295,40.295,17,39.434,17z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQb" x1="7.763" x2="9.883" y1="7.782" y2="15.105" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ffd869"/>
+		<stop offset="1" stop-color="#fec52b"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQb)" d="M10,17H8.565C7.701,17,7,16.299,7,15.435v-8.87C7,5.704,7.704,5,8.565,5H10V17z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQc" x1="21" x2="27" y1="36" y2="36" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#3079d6"/>
+		<stop offset="1" stop-color="#297cd2"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQc)" d="M22,29h4c0.552,0,1,0.448,1,1v12c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1V30	C21,29.448,21.448,29,22,29z"/>
+	<linearGradient id="Psn0qfw0zZI_2FiyraWIQd" x1="24" x2="24" y1="4.909" y2="23.577" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#ec407a"/>
+		<stop offset="1" stop-color="#e91e63"/>
+	</linearGradient>
+	<path fill="url(#Psn0qfw0zZI_2FiyraWIQd)" d="M10,4.999V23c0,0.552,0.448,1,1,1s1-0.448,1-1v-5c0-0.552,0.448-1,1-1s1,0.448,1,1v2	c0,0.552,0.448,1,1,1s1-0.448,1-1v-1c0-1.105,0.889-2,1.994-2C23.411,17,38,16.999,38,16.999V5L10,4.999z"/>
+</svg>

ux/public/_assets/icons/fluent-rest-api-animated.svg

@@ -0,0 +1,21 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px">
+	<linearGradient id="SVGID_1_" x1="5.327" x2="38.083" y1="520.657" y2="487.901" gradientTransform="matrix(1 0 0 -1 0 526)" gradientUnits="userSpaceOnUse">
+		<stop offset="0" stop-color="#889097"/>
+		<stop offset=".331" stop-color="#848c94"/>
+		<stop offset=".669" stop-color="#78828b"/>
+		<stop offset="1" stop-color="#64717c"/>
+	</linearGradient>
+  <path fill="#444" d="M43.4,19.2c-2.4,0-4.7-1.3-6-3.5c-1.2-2.1-1.2-4.6-0.2-6.7c-2.1-1.9-4.6-3.3-7.4-4.2C28.6,6.8,26.4,8,24,8	s-4.6-1.2-5.8-3.1c-2.8,0.8-5.3,2.3-7.4,4.2c1,2,1.1,4.6-0.2,6.7c-1.3,2.2-3.6,3.5-6,3.5C4.2,20.8,4,22.4,4,24	c0,1.3,0.1,2.5,0.4,3.8c2.5-0.1,4.9,1.2,6.2,3.5c1.4,2.4,1.2,5.2-0.2,7.3c2.1,1.9,4.6,3.5,7.3,4.4c1.1-2.3,3.5-4,6.3-4	s5.2,1.6,6.3,4c2.8-0.9,5.3-2.4,7.3-4.4c-1.4-2.1-1.6-5-0.2-7.3c1.3-2.3,3.7-3.5,6.2-3.5c0.2-1.2,0.4-2.5,0.4-3.8	C44,22.4,43.8,20.8,43.4,19.2z">
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 24 24" to="0 24 24" dur="30s" additive="sum" repeatCount="indefinite" />
+  </path>
+	<path fill="url(#SVGID_1_)" d="M43.4,19.2c-2.4,0-4.7-1.3-6-3.5c-1.2-2.1-1.2-4.6-0.2-6.7c-2.1-1.9-4.6-3.3-7.4-4.2C28.6,6.8,26.4,8,24,8	s-4.6-1.2-5.8-3.1c-2.8,0.8-5.3,2.3-7.4,4.2c1,2,1.1,4.6-0.2,6.7c-1.3,2.2-3.6,3.5-6,3.5C4.2,20.8,4,22.4,4,24	c0,1.3,0.1,2.5,0.4,3.8c2.5-0.1,4.9,1.2,6.2,3.5c1.4,2.4,1.2,5.2-0.2,7.3c2.1,1.9,4.6,3.5,7.3,4.4c1.1-2.3,3.5-4,6.3-4	s5.2,1.6,6.3,4c2.8-0.9,5.3-2.4,7.3-4.4c-1.4-2.1-1.6-5-0.2-7.3c1.3-2.3,3.7-3.5,6.2-3.5c0.2-1.2,0.4-2.5,0.4-3.8	C44,22.4,43.8,20.8,43.4,19.2z">
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-360 24 24" to="0 24 24" dur="20s" additive="sum" repeatCount="indefinite" />
+  </path>
+	<path d="M30,18.1v1.3c-0.6-0.7-1.6-1.3-3.4-1.3h-4v6.6l-2.3-6.6h-3.7l-3.8,10.4H17l0.6-1.9h1.5l0.6,1.9h6.7v-2.9	c1.2,0,2.2-0.4,3-1c0.2-0.2,0.3-0.3,0.5-0.5v4.4h3.9V18.1H30z M26.5,22.2v-0.6c0.3,0,0.3,0.1,0.3,0.3C26.7,22.1,26.7,22.2,26.5,22.2	z" opacity=".05"/>
+	<path d="M26.6,18.6h-3.5v9l-3.2-9H17L13.5,28h3.1l0.6-1.9h2.3l0.6,1.9H26v-2.9h0.4c1.1,0,2.1-0.3,2.8-0.9	c0.7-0.6,1.1-1.4,1.1-2.4C30.2,20.3,29.6,18.6,26.6,18.6z M18,23.7l0.4-1.2l0.4,1.2H18z M26.2,22.7H26v-1.6h0.2c0.9,0,1,0.4,1,0.8	C27.2,22.4,27.1,22.7,26.2,22.7z" opacity=".07"/>
+	<path fill="#fff" d="M22.5,27.5h-2.1l-0.6-1.9h-3l-0.6,1.9h-2.1l3.1-8.4h2.2L22.5,27.5z M19.5,24.2l-0.9-2.8	c-0.1-0.2-0.1-0.5-0.1-0.8h0c0,0.2-0.1,0.5-0.1,0.7l-0.9,2.8H19.5z"/>
+	<rect width="2.9" height="9.4" x="30.5" y="18.6" opacity=".07"/>
+	<path fill="#fff" d="M25.5,24.6v2.9h-1.9v-8.4h3c2.1,0,3.2,0.9,3.2,2.7c0,0.8-0.3,1.5-0.9,2s-1.4,0.8-2.4,0.8H25.5z M25.5,20.6v2.6	h0.7c1,0,1.5-0.4,1.5-1.3c0-0.9-0.5-1.3-1.5-1.3H25.5z"/>
+	<path fill="#fff" d="M32.9,27.5H31v-8.4h1.9V27.5z"/>
+</svg>

ux/public/_assets/icons/ultraviolet-sort-by-follow-up-date.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#4788c7" d="M21 32L21 26 19 26 19 32 13 32 20 39 27 32z"/><path fill="#4788c7" d="M19.5 7.5H20.5V45.5H19.5z" transform="rotate(-90 20 26.5)"/><path fill="#b6dcfe" d="M19.5 16.5L10.5 16.5 10.5 10.5 19.5 10.5 19.5 5.092 29.235 13.5 19.5 21.908z"/><path fill="#4788c7" d="M20 6.185l8.47 7.315L20 20.815V17v-1h-1-8v-5h8 1v-1V6.185M19 4v6h-9c0 3.208 0 4.764 0 7h9v6l11-9.5L19 4 19 4zM2 27H1V1.5C1 1.224 1.224 1 1.5 1h0C1.776 1 2 1.224 2 1.5V27zM39 27h-1V1.5C38 1.224 38.224 1 38.5 1l0 0C38.776 1 39 1.224 39 1.5V27z"/></svg>

ux/src/i18n/locales/en.json

@@ -1426,5 +1426,8 @@
   "admin.mail.smtpName": "Client Identifying Name",
   "admin.mail.smtpNameHint": "An optional name to send to the SMTP server to identify your mailer. Leave empty to use server hostname. For Google Workspace customers, this should be your main domain name.",
   "admin.general.footerExtra": "Additional Footer Text",
-  "admin.general.footerExtraHint": "Optionally add more content to the footer, such as additional copyright terms or mandatory regulatory info."
+  "admin.general.footerExtraHint": "Optionally add more content to the footer, such as additional copyright terms or mandatory regulatory info.",
+  "admin.general.urlHandling": "URL Handling",
+  "admin.general.pageExtensions": "Page Extensions",
+  "admin.general.pageExtensionsHint": "A comma-separated list of URL extensions that will be treated as pages. For example, adding md will treat /foobar.md the same as /foobar."
 }

ux/src/pages/AdminApi.vue

@@ -2,7 +2,7 @@
 q-page.admin-api
   .row.q-pa-md.items-center
     .col-auto
-      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rest-api.svg')
+      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rest-api-animated.svg')
     .col.q-pl-md
       .text-h5.text-primary.animated.fadeInLeft {{ t('admin.api.title') }}
       .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.api.subtitle') }}

ux/src/pages/AdminGeneral.vue

@@ -209,6 +209,25 @@ q-page.admin-general
               :aria-label='t(`admin.general.allowSearch`)'
               )
 
+      //- -----------------------
+      //- URL Handling
+      //- -----------------------
+      q-card.shadow-1.q-pb-sm.q-mt-md
+        q-card-section
+          .text-subtitle1 {{t('admin.general.urlHandling')}}
+        q-item
+          blueprint-icon(icon='sort-by-follow-up-date')
+          q-item-section
+            q-item-label {{t(`admin.general.pageExtensions`)}}
+            q-item-label(caption) {{t(`admin.general.pageExtensionsHint`)}}
+          q-item-section
+            q-input(
+              outlined
+              v-model='state.config.pageExtensions'
+              dense
+              :aria-label='t(`admin.general.pageExtensions`)'
+              )
+
     .col-12.col-lg-5
       //- -----------------------
       //- Logo
@@ -444,6 +463,7 @@ const state = reactive({
     company: '',
     contentLicense: '',
     footerExtra: '',
+    pageExtensions: '',
     logoText: false,
     ratings: {
       index: false,
@@ -532,6 +552,7 @@ async function load () {
           company
           contentLicense
           footerExtra
+          pageExtensions
           logoText
           sitemap
           robots {
@@ -594,6 +615,7 @@ async function save () {
           company: state.config.company ?? '',
           contentLicense: state.config.contentLicense ?? '',
           footerExtra: state.config.footerExtra ?? '',
+          pageExtensions: state.config.pageExtensions ?? '',
           logoText: state.config.logoText ?? false,
           sitemap: state.config.sitemap ?? false,
           robots: {

ux/src/pages/AdminTheme.vue

@@ -2,7 +2,7 @@
 q-page.admin-theme
   .row.q-pa-md.items-center
     .col-auto
-      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-paint-roller.svg')
+      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-paint-roller-animated.svg')
     .col.q-pl-md
       .text-h5.text-primary.animated.fadeInLeft {{ t('admin.theme.title') }}
       .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.theme.subtitle') }}
@@ -48,7 +48,7 @@ q-page.admin-theme
             color='pink'
             @click='resetColors'
           )
-        q-item(tag='label', v-ripple)
+        q-item(tag='label')
           blueprint-icon(icon='light-on')
           q-item-section
             q-item-label {{t(`admin.theme.darkMode`)}}
@@ -123,7 +123,7 @@ q-page.admin-theme
               :options='rightLeftOptions'
             )
         q-separator.q-my-sm(inset)
-        q-item(tag='label', v-ripple)
+        q-item(tag='label')
           blueprint-icon(icon='share')
           q-item-section
             q-item-label {{t(`admin.theme.showSharingMenu`)}}
@@ -137,7 +137,7 @@ q-page.admin-theme
               :aria-label='t(`admin.theme.showSharingMenu`)'
               )
         q-separator.q-my-sm(inset)
-        q-item(tag='label', v-ripple)
+        q-item(tag='label')
           blueprint-icon(icon='print')
           q-item-section
             q-item-label {{t(`admin.theme.showPrintBtn`)}}