Feature/nov 2023

.eslintrc.cjs

@@ -2,9 +2,10 @@ module.exports = {
   root: true,
   plugins: ["vuejs-accessibility"],
   extends: [
+    "eslint-config-prettier",
     "@nuxtjs/eslint-config-typescript",
     "plugin:vuejs-accessibility/recommended",
-    "eslint-config-prettier"],
+    ],
   rules: {
     "no-extra-semi": "off"
   },

.yarnrc.yml

@@ -0,0 +1,11 @@
+npmAlwaysAuth: true
+yarn-offline-mirror: ".yarn-offline-cache"
+yarn-offline-mirror-pruning: true
+packageExtensions:
+  "@babel/cli@*":
+    dependencies:
+      "@babel/core": "*"
+  "@babel/core@*":
+    peerDependencies:
+      "regenerator-runtime": "*"
+      "core-js": "*"

CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file. This
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.0.0](https://github.com/samcarrington/code-style/tree/v5.0.0) - Unreleased
+
+### Changed
+
+- Update Nuxt to v3.12.1
+- New Nuxt v4 compatible folder structure
+- Updated dependencies
+
+### Added
+
+- Compatibility flag for Nuxt v4
+
+## [4.4.3](https://github.com/samcarrington/code-style/tree/v4.4.3) - Unreleased
+
+### Changed
+
+- Update Nuxt to v3.8.1
+- Plus other minor dependency version updates
+
 ## [4.4.2](https://github.com/samcarrington/code-style/tree/v4.4.2) - 2023-10-18
 
 ### Fixed
@@ -73,7 +92,7 @@ project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Changed
 
-- Small addition to the react section in JavaScript guidance
+- Small addition to the React section in JavaScript guidance
 - Patch version updates to `@divriots/jampack`
 - Minor version update to `@nuxt/content`, `nuxt`, `eslint`, `prettier` & `@nuxtjs/tailwindcss`
 - Rebuilt using a sidebase template to repair the build after upgrade
@@ -208,10 +227,10 @@ git s
 
 ### Added
 
-- Site footer with github link and version number
+- Site footer with GitHub link and version number
 - PUG language parsing for templates
 - Site Footer template (in PUG syntax)
-- Github SVG icon
+- GitHub SVG icon
 - Copyright message
 
 ## [4.1.1](https://github.com/samcarrington/code-style/tree/v4.1.1) - 2023-01-06
@@ -284,7 +303,7 @@ git s
 ### Changed
 
 - Removed out-dated link to Laravel Best Practices site (now squatted) and
-  replaced with a Github link
+  replaced with a GitHub link
 
 ## [3.2.0](https://github.com/AnalogFolk/folk-style/tree/v3.2.0) - 2021-08-13
 
@@ -341,7 +360,7 @@ git s
 
 - Modified responsive footer
 - Consistent line-height
-- Screen reader text on Github icon link
+- Screen reader text on GitHub icon link
 
 ## [3.1.1](https://github.com/AnalogFolk/folk-style/tree/v3.1.1) - 2021-06-29
 
@@ -375,7 +394,7 @@ git s
 
 ### Changed
 
-- References to Bitbucket in chagelog into github tag links
+- References to Bitbucket in chagelog into GitHub tag links
 
 ### Fixed
 

content/3.html.md → app/content/3.html.md

@@ -15,7 +15,7 @@ HTML should be prepared using a template language.
 Some variance from the below guidance is expected
 if using a framework to generate HTML from reactive
 or shadow-DOM data (for attribute order and boolean
-attributes for example). However given that overall on a
+attributes for example). However, given that overall on a
 project the goal is consistency this should be documented
 and monitored along those lines.
 

content/4.javascript.md → app/content/4.javascript.md

@@ -51,7 +51,7 @@ file to ensure that each developer uses the same set of rules & settings.
 ```
 
 Generally - two spaces for indentation, use semicolons, use single quotes
-are the preferred set of simple sub-rules for formatting. However set and
+are the preferred set of simple sub-rules for formatting. However, set and
 maintain formatting standards on a project-by-project basis as appropriate.
 
 ::content-alert{icon="heroicons-outline:information-circle"}
@@ -60,7 +60,7 @@ Author's note
 #default
 Having previously been a fan of [JavaScript Standard Style][standard-js] and 
 omitting semicolons, we note that TC39 currently recommends using semicolons 
-and avoiding [ASI][tc39-asi] due to current and future hazards. Therefore 
+and avoiding [ASI][tc39-asi] due to current and future hazards. Therefore, 
 semicolons are recommended. This also aligns with the  style recommendations
 for TypeScript.
 ::
@@ -241,7 +241,7 @@ npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@
 
 <!-- markdownlint-restore -->
 
-[builletproof-react][bulletproof-react] is a useful collection of react 
+[builletproof-react][bulletproof-react] is a useful collection of React 
 programming best-practice, and is useful additional reading.
 
 [bulletproof-react]: https://github.com/alan2207/bulletproof-react
@@ -274,7 +274,7 @@ The following list of useful best practices is based on
 
 ##### Clear event listeners
 
-Ahh memory leaks. Remember to remove listeners created with `$on` by use of
+Ahh, memory leaks. Remember to remove listeners created with `$on` by use of
 `$off` when `destroyed()`
 
 ##### Always use kebab-case for event names
@@ -332,9 +332,9 @@ to your loops.
 When you add a mixin to a component, the mixin code is merged to the component
 and the component has priority. This can lead to overlapping property issues.
 Prepend mixin properties with `$_` to avoid this namespace clash. It's a
-convention from the VueJs style guide.
+convention from the Vue.js style guide.
 
-However in the style guide they suggest also adding the mixin name. i.e.
+However, in the style guide they suggest also adding the mixin name. i.e.
 `$_MixinName_methodName` however this can negatively impact readability. It
 should be enough simply to prepend `$_`.
 
@@ -344,19 +344,19 @@ If we create a mixin which uses a value from the store but the value is not
 defined or grabbed from the store inside the mixin then the Component where
 the mixin is defined has to contain the property.
 
-This is error prone. In order to avoid this, the value should be grabbed
+This is error-prone. In order to avoid this, the value should be grabbed
 inside the mixin. Vue is clever enough to avoid duplication of work.
 
 ##### Use PascalCase for single file components
 
 Pascal case has better integration with IDEs so use of this standard gives
-better QoL for devs, kebab-case is only a consideration in case insensitive
+better QoL for devs, kebab-case is only a consideration in case-insensitive
 operating systems.
 
 ##### Use a prefix for Base component names
 
 Presentational dumb or pure components should have a prefix in your project
-which distinguishes them from other non pure components.
+which distinguishes them from other non-pure components.
 
 ##### Use PascalCase for component names
 
@@ -365,7 +365,7 @@ to also use this for Vue components.
 
 ##### Use the options order from the Vue style guide
 
-Follow the same order for all options across your project. The [VueJs
+Follow the same order for all options across your project. The [Vue.js
 convention][vue-options] can be found in the style guide.
 
 ##### Never use v-if on the same element as v-for
@@ -399,7 +399,7 @@ Action done
 `
 ```
 
-Instead do this;
+Instead, do this;
 
 ```jsx
 // Store
@@ -434,7 +434,7 @@ app, but also within the Vuex Store.
 
 You may not need underscore/lodash. If you're targeting modern browsers there
 are [a number of native methods][underscore-native] you can use instead of the
-utility methods it supplies. However it does provide a uniform interface and
+utility methods it supplies. However, it does provide a uniform interface and
 API and therefore is supported for use in projects.
 
 #### Svelte

content/5.php.md → app/content/5.php.md

@@ -9,7 +9,7 @@ date: '2021-08-17'
 ## PHP
 
 PHP is a server side scripting language used to generate dynamic pages.
-In general we prefer the use of [Laravel][laravel] as an MVC framework for PHP projects.
+In general, we prefer the use of [Laravel][laravel] as an MVC framework for PHP projects.
 
 ### Syntax
 
@@ -53,7 +53,7 @@ guide.
 
 - [Laravel Best Practices][laravel-best]
 - [S.O.L.I.D. Principles][solid]
-- [Wordpress VIP Install Codesniffer][vip-cs]
+- [WordPress VIP Install Codesniffer][vip-cs]
 
 [laravel]: https://laravel.com/
 [psr-1]: https://www.php-fig.org/psr/psr-1/

content/6.dotnet.md → app/content/6.dotnet.md

@@ -59,7 +59,7 @@ documentation as standard.
 - Consider partial page updates using AJAX
 - Don't over-use session, instead use TempData for intra-request storage
 - Use an OutputCache filter for static pages
-- Consider using asynchronous controllers for long running requests
+- Consider using asynchronous controllers for long-running requests
 
 [ms-docs-di]: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-2.2
 [ms-docs-csharp]: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/inside-a-program/coding-conventions

content/8.pug.md → app/content/8.pug.md

@@ -14,7 +14,7 @@ as well.
 
 Adapters are available for PHP, Ruby, and of course JavaScript. This means that
 if suited to a project, a consistent template syntax can be deployed across
-front and back ends. An adapter does exist for .NET but it's a seemingly
+front and back ends. An adapter does exist for .NET, but it's a seemingly
 unmaintained project.
 
 ### Syntax

nuxt.config.ts

@@ -1,9 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ["@nuxtjs/tailwindcss", "@nuxt/content", "@nuxtjs/color-mode", "@nuxthq/studio"],
+  modules: [
+    "@nuxtjs/tailwindcss",
+    "@nuxt/content",
+    "@nuxtjs/color-mode",
+    "@nuxthq/studio",
+  ],
   typescript: {
     shim: false,
   },
+  future: {
+    compatibilityVersion: 4,
+  },
   app: {
     pageTransition: { name: "page", mode: "out-in" },
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-style",
   "description": "Code Style guidelines for various languages",
-  "version": "4.4.2",
+  "version": "5.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,31 +23,32 @@
     "start": "NODE_ENV=production node .output/server/index.mjs"
   },
   "devDependencies": {
-    "@divriots/jampack": "^0.21.1",
-    "@iconify/vue": "^4.1.1",
-    "@nuxt/content": "^2.8.5",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/studio": "^1.0.2",
-    "@nuxtjs/color-mode": "^3.3.0",
+    "@divriots/jampack": "^0.24.4",
+    "@iconify/vue": "^4.1.2",
+    "@nuxt/content": "^2.12.1",
+    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxthq/studio": "^1.1.2",
+    "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/tailwindcss": "^6.8.0",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/markdown-it": "^13.0.2",
-    "@types/node": "^20.8.6",
-    "@types/rss": "^0.0.30",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vuejs-accessibility": "^2.2.0",
-    "markdown-it": "^13.0.2",
-    "nuxt": "^3.7.4",
-    "postcss-custom-properties": "^13.3.2",
-    "prettier": "^3.0.3",
-    "pug": "^3.0.2",
-    "sitemap": "^7.1.1",
-    "typescript": "^5.2.2",
-    "vue-tsc": "^1.8.19"
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/markdown-it": "^14.1.1",
+    "@types/node": "^20.14.2",
+    "@types/rss": "^0.0.32",
+    "eslint": "^9.4.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vuejs-accessibility": "^2.3.0",
+    "markdown-it": "^14.1.0",
+    "nuxt": "^3.12.1",
+    "postcss-custom-properties": "^13.3.10",
+    "prettier": "^3.3.2",
+    "pug": "^3.0.3",
+    "sitemap": "^8.0.0",
+    "typescript": "^5.4.5",
+    "vue-tsc": "^2.0.21"
   },
   "dependencies": {
-    "rss": "^1.2.2"
+    "rss": "^1.2.2",
+    "sharp": "^0.33.4"
   }
 }

server/routes/sitemap.xml.ts

@@ -25,14 +25,14 @@ export default defineEventHandler(async (event) => {
 
 function getStaticEndpoints(): string[] {
   const __dirname = dirname(fileURLToPath(import.meta.url));
-  const files = getFiles(`${__dirname}/../../pages`);
+  const files = getFiles(`${__dirname}/../../app/pages`);
   return files
     .filter((file) => !file.includes("slug")) // exclude dynamic content
     .map((file) => file.split("pages")[1])
     .map((file) => {
-      return file.endsWith("index.vue")
+      return file?.endsWith("index.vue")
         ? file.split("/index.vue")[0]
-        : file.split(".vue")[0];
+        : file?.split(".vue")[0];
     });
 }