@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/dist/assets/nodefs-Bfyh92qg.js

@@ -0,0 +1 @@
+import{ap as o,aq as r,ar as n}from"./index-COo3Jb7v.js";n();var d=class extends o{constructor(s){super(s),this.rootDir=(void 0)(s),(void 0)((void 0)(this.rootDir))||(void 0)(this.rootDir)}async init(s,e){return this.pg=s,{emscriptenOpts:{...e,preRun:[...e.preRun||[],t=>{let i=t.FS.filesystems.NODEFS;t.FS.mkdir(r),t.FS.mount(i,{root:this.rootDir},r)}]}}}async closeFs(){this.pg.Module.FS.quit()}};export{d as NodeFS};

package/dist/assets/opfs-ahp-BLzlXf6u.js

@@ -0,0 +1,3 @@
+import{as as H,at as m,au as o,av as a,aw as A,ar as C,ax as P,ay as v}from"./index-COo3Jb7v.js";C();var B="state.txt",L="data",W={DIR:16384,FILE:32768},T,I,N,_,f,k,y,j,F,O,S,l,R,E,M,g,w,D,$,x,U=class extends H{constructor(t,{initialPoolSize:e=1e3,maintainedPoolSize:s=100,debug:i=!1}={}){super(t,{debug:i}),m(this,l),m(this,T),m(this,I),m(this,N),m(this,_),m(this,f),m(this,k,new Map),m(this,y,new Map),m(this,j,0),m(this,F,new Map),m(this,O,new Map),this.lastCheckpoint=0,this.checkpointInterval=1e3*60,this.poolCounter=0,m(this,S,new Set),this.initialPoolSize=e,this.maintainedPoolSize=s}async init(t,e){return await o(this,l,R).call(this),super.init(t,e)}async syncToFs(t=!1){await this.maybeCheckpointState(),await this.maintainPool(),t||this.flush()}async closeFs(){for(let t of a(this,y).values())t.close();a(this,f).flush(),a(this,f).close(),this.pg.Module.FS.quit()}async maintainPool(t){t=t||this.maintainedPoolSize;let e=t-this.state.pool.length,s=[];for(let i=0;i<e;i++)s.push(new Promise(async h=>{++this.poolCounter;let r=`${(Date.now()-1704063600).toString(16).padStart(8,"0")}-${this.poolCounter.toString(16).padStart(8,"0")}`,c=await a(this,N).getFileHandle(r,{create:!0}),d=await c.createSyncAccessHandle();a(this,k).set(r,c),a(this,y).set(r,d),o(this,l,M).call(this,{opp:"createPoolFile",args:[r]}),this.state.pool.push(r),h()}));for(let i=0;i>e;i--)s.push(new Promise(async h=>{var d;let r=this.state.pool.pop();o(this,l,M).call(this,{opp:"deletePoolFile",args:[r]});let c=a(this,k).get(r);(d=a(this,y).get(r))==null||d.close(),await a(this,N).removeEntry(c.name),a(this,k).delete(r),a(this,y).delete(r),h()}));await Promise.all(s)}_createPoolFileState(t){this.state.pool.push(t)}_deletePoolFileState(t){let e=this.state.pool.indexOf(t);e>-1&&this.state.pool.splice(e,1)}async maybeCheckpointState(){Date.now()-this.lastCheckpoint>this.checkpointInterval&&await this.checkpointState()}async checkpointState(){let t=new TextEncoder().encode(JSON.stringify(this.state));a(this,f).truncate(0),a(this,f).write(t,{at:0}),a(this,f).flush(),this.lastCheckpoint=Date.now()}flush(){for(let t of a(this,S))try{t.flush()}catch{}a(this,S).clear()}chmod(t,e){o(this,l,E).call(this,{opp:"chmod",args:[t,e]},()=>{this._chmodState(t,e)})}_chmodState(t,e){let s=o(this,l,w).call(this,t);s.mode=e}close(t){let e=o(this,l,D).call(this,t);a(this,F).delete(t),a(this,O).delete(e)}fstat(t){let e=o(this,l,D).call(this,t);return this.lstat(e)}lstat(t){let e=o(this,l,w).call(this,t),s=e.type==="file"?a(this,y).get(e.backingFilename).getSize():0,i=4096;return{dev:0,ino:0,mode:e.mode,nlink:1,uid:0,gid:0,rdev:0,size:s,blksize:i,blocks:Math.ceil(s/i),atime:e.lastModified,mtime:e.lastModified,ctime:e.lastModified}}mkdir(t,e){o(this,l,E).call(this,{opp:"mkdir",args:[t,e]},()=>{this._mkdirState(t,e)})}_mkdirState(t,e){let s=o(this,l,g).call(this,t),i=s.pop(),h=[],r=this.state.root;for(let d of s){if(h.push(t),!Object.prototype.hasOwnProperty.call(r.children,d))if(e!=null&&e.recursive)this.mkdir(h.join("/"));else throw new p("ENOENT","No such file or directory");if(r.children[d].type!=="directory")throw new p("ENOTDIR","Not a directory");r=r.children[d]}if(Object.prototype.hasOwnProperty.call(r.children,i))throw new p("EEXIST","File exists");let c={type:"directory",lastModified:Date.now(),mode:(e==null?void 0:e.mode)||W.DIR,children:{}};r.children[i]=c}open(t,e,s){if(o(this,l,w).call(this,t).type!=="file")throw new p("EISDIR","Is a directory");let i=o(this,l,$).call(this);return a(this,F).set(i,t),a(this,O).set(t,i),i}readdir(t){let e=o(this,l,w).call(this,t);if(e.type!=="directory")throw new p("ENOTDIR","Not a directory");return Object.keys(e.children)}read(t,e,s,i,h){let r=o(this,l,D).call(this,t),c=o(this,l,w).call(this,r);if(c.type!=="file")throw new p("EISDIR","Is a directory");return a(this,y).get(c.backingFilename).read(new Uint8Array(e.buffer,s,i),{at:h})}rename(t,e){o(this,l,E).call(this,{opp:"rename",args:[t,e]},()=>{this._renameState(t,e,!0)})}_renameState(t,e,s=!1){let i=o(this,l,g).call(this,t),h=i.pop(),r=o(this,l,w).call(this,i.join("/"));if(!Object.prototype.hasOwnProperty.call(r.children,h))throw new p("ENOENT","No such file or directory");let c=o(this,l,g).call(this,e),d=c.pop(),n=o(this,l,w).call(this,c.join("/"));if(s&&Object.prototype.hasOwnProperty.call(n.children,d)){let u=n.children[d];a(this,y).get(u.backingFilename).truncate(0),this.state.pool.push(u.backingFilename)}n.children[d]=r.children[h],delete r.children[h]}rmdir(t){o(this,l,E).call(this,{opp:"rmdir",args:[t]},()=>{this._rmdirState(t)})}_rmdirState(t){let e=o(this,l,g).call(this,t),s=e.pop(),i=o(this,l,w).call(this,e.join("/"));if(!Object.prototype.hasOwnProperty.call(i.children,s))throw new p("ENOENT","No such file or directory");let h=i.children[s];if(h.type!=="directory")throw new p("ENOTDIR","Not a directory");if(Object.keys(h.children).length>0)throw new p("ENOTEMPTY","Directory not empty");delete i.children[s]}truncate(t,e=0){let s=o(this,l,w).call(this,t);if(s.type!=="file")throw new p("EISDIR","Is a directory");let i=a(this,y).get(s.backingFilename);if(!i)throw new p("ENOENT","No such file or directory");i.truncate(e),a(this,S).add(i)}unlink(t){o(this,l,E).call(this,{opp:"unlink",args:[t]},()=>{this._unlinkState(t,!0)})}_unlinkState(t,e=!1){let s=o(this,l,g).call(this,t),i=s.pop(),h=o(this,l,w).call(this,s.join("/"));if(!Object.prototype.hasOwnProperty.call(h.children,i))throw new p("ENOENT","No such file or directory");let r=h.children[i];if(r.type!=="file")throw new p("EISDIR","Is a directory");if(delete h.children[i],e){let c=a(this,y).get(r.backingFilename);c==null||c.truncate(0),a(this,S).add(c),a(this,O).has(t)&&(a(this,F).delete(a(this,O).get(t)),a(this,O).delete(t))}this.state.pool.push(r.backingFilename)}utimes(t,e,s){o(this,l,E).call(this,{opp:"utimes",args:[t,e,s]},()=>{this._utimesState(t,e,s)})}_utimesState(t,e,s){let i=o(this,l,w).call(this,t);i.lastModified=s}writeFile(t,e,s){let i=o(this,l,g).call(this,t),h=i.pop(),r=o(this,l,w).call(this,i.join("/"));if(Object.prototype.hasOwnProperty.call(r.children,h)){let n=r.children[h];n.lastModified=Date.now(),o(this,l,M).call(this,{opp:"setLastModified",args:[t,n.lastModified]})}else{if(this.state.pool.length===0)throw new Error("No more file handles available in the pool");let n={type:"file",lastModified:Date.now(),mode:(s==null?void 0:s.mode)||W.FILE,backingFilename:this.state.pool.pop()};r.children[h]=n,o(this,l,M).call(this,{opp:"createFileNode",args:[t,n]})}let c=r.children[h],d=a(this,y).get(c.backingFilename);e.length>0&&(d.write(typeof e=="string"?new TextEncoder().encode(e):new Uint8Array(e),{at:0}),t.startsWith("/pg_wal")&&a(this,S).add(d))}_createFileNodeState(t,e){let s=o(this,l,g).call(this,t),i=s.pop(),h=o(this,l,w).call(this,s.join("/"));h.children[i]=e;let r=this.state.pool.indexOf(e.backingFilename);return r>-1&&this.state.pool.splice(r,1),e}_setLastModifiedState(t,e){let s=o(this,l,w).call(this,t);s.lastModified=e}write(t,e,s,i,h){let r=o(this,l,D).call(this,t),c=o(this,l,w).call(this,r);if(c.type!=="file")throw new p("EISDIR","Is a directory");let d=a(this,y).get(c.backingFilename);if(!d)throw new p("EBADF","Bad file descriptor");let n=d.write(new Uint8Array(e,s,i),{at:h});return r.startsWith("/pg_wal")&&a(this,S).add(d),n}};T=new WeakMap,I=new WeakMap,N=new WeakMap,_=new WeakMap,f=new WeakMap,k=new WeakMap,y=new WeakMap,j=new WeakMap,F=new WeakMap,O=new WeakMap,S=new WeakMap,l=new WeakSet,R=async function(){P(this,T,await navigator.storage.getDirectory()),P(this,I,await o(this,l,x).call(this,this.dataDir,{create:!0})),P(this,N,await o(this,l,x).call(this,L,{from:a(this,I),create:!0})),P(this,_,await a(this,I).getFileHandle(B,{create:!0})),P(this,f,await a(this,_).createSyncAccessHandle());let t=new ArrayBuffer(a(this,f).getSize());a(this,f).read(t,{at:0});let e,s=new TextDecoder().decode(t).split(`
+`),i=!1;try{e=JSON.parse(s[0])}catch{e={root:{type:"directory",lastModified:Date.now(),mode:W.DIR,children:{}},pool:[]},a(this,f).truncate(0),a(this,f).write(new TextEncoder().encode(JSON.stringify(e)),{at:0}),i=!0}this.state=e;let h=s.slice(1).filter(Boolean).map(n=>JSON.parse(n));for(let n of h){let u=`_${n.opp}State`;if(typeof this[u]=="function")try{this[u].bind(this)(...n.args)}catch(b){console.warn("Error applying OPFS AHP WAL entry",n,b)}}let r=[],c=async n=>{if(n.type==="file")try{let u=await a(this,N).getFileHandle(n.backingFilename),b=await u.createSyncAccessHandle();a(this,k).set(n.backingFilename,u),a(this,y).set(n.backingFilename,b)}catch(u){console.error("Error opening file handle for node",n,u)}else for(let u of Object.values(n.children))r.push(c(u))};await c(this.state.root);let d=[];for(let n of this.state.pool)d.push(new Promise(async u=>{a(this,k).has(n)&&console.warn("File handle already exists for pool file",n);let b=await a(this,N).getFileHandle(n),z=await b.createSyncAccessHandle();a(this,k).set(n,b),a(this,y).set(n,z),u()}));await Promise.all([...r,...d]),await this.maintainPool(i?this.initialPoolSize:this.maintainedPoolSize)},E=function(t,e){let s=o(this,l,M).call(this,t);try{e()}catch(i){throw a(this,f).truncate(s),i}},M=function(t){let e=JSON.stringify(t),s=new TextEncoder().encode(`
+${e}`),i=a(this,f).getSize();return a(this,f).write(s,{at:i}),a(this,S).add(a(this,f)),i},g=function(t){return t.split("/").filter(Boolean)},w=function(t,e){let s=o(this,l,g).call(this,t),i=e||this.state.root;for(let h of s){if(i.type!=="directory")throw new p("ENOTDIR","Not a directory");if(!Object.prototype.hasOwnProperty.call(i.children,h))throw new p("ENOENT","No such file or directory");i=i.children[h]}return i},D=function(t){let e=a(this,F).get(t);if(!e)throw new p("EBADF","Bad file descriptor");return e},$=function(){let t=++v(this,j)._;for(;a(this,F).has(t);)v(this,j)._++;return t},x=async function(t,e){let s=o(this,l,g).call(this,t),i=(e==null?void 0:e.from)||a(this,T);for(let h of s)i=await i.getDirectoryHandle(h,{create:e==null?void 0:e.create});return i};var p=class extends Error{constructor(t,e){super(e),typeof t=="number"?this.code=t:typeof t=="string"&&(this.code=A[t])}};export{U as OpfsAhpFS};

package/dist/assets/usePages-DDjDQRCy.js

@@ -0,0 +1 @@
+import{M as s}from"./index-COo3Jb7v.js";function u(e=null){return s("pages",e?{community_id:e}:{})}export{u};

package/dist/assets/usePosts-Bf2Ccwr4.js

@@ -0,0 +1 @@
+import{L as a,M as i}from"./index-COo3Jb7v.js";function n(t=null){const e=i("posts",t?{community_id:t}:{});async function r(o={}){const u=await a();if(t){const{rows:s}=await u.query("SELECT * FROM posts WHERE published_at IS NOT NULL AND community_id = $1 ORDER BY published_at DESC",[t]);return e.items.value=s,s}else{const{rows:s}=await u.query("SELECT * FROM posts WHERE published_at IS NOT NULL ORDER BY published_at DESC",[]);return e.items.value=s,s}}return{...e,listPublished:r}}export{n as u};

package/{public → dist}/index.html

@@ -4,26 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>/icons/apple-touch-icon.png?v=5A6MOkp5OM">
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>/icons/favicon-32x32.png?v=5A6MOkp5OM">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>/icons/favicon-16x16.png?v=5A6MOkp5OM">
-    <link rel="manifest" href="<%= BASE_URL %>/icons/site.webmanifest?v=5A6MOkp5OM">
-    <link rel="mask-icon" href="<%= BASE_URL %>/icons/safari-pinned-tab.svg?v=5A6MOkp5OM" color="#42b983">
-    <link rel="shortcut icon" href="<%= BASE_URL %>/icons/favicon.ico?v=5A6MOkp5OM">
-    <meta name="msapplication-TileColor" content="#42b983">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+    <link rel="manifest" href="/icons/site.webmanifest">
     <meta name="theme-color" content="#42b983">
-
     <title>Be Better Together</title>
-  </head>
-  <body class="bg-dark">
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-
-    <!-- built files will be auto injected -->
-    <div id="app"></div>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -31,10 +17,14 @@
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-WCDBXXT');</script>
     <!-- End Google Tag Manager -->
-    
+    <script type="module" crossorigin src="/assets/index-COo3Jb7v.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BFt-JKVh.css">
+  </head>
+  <body class="bg-dark">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WCDBXXT"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
+    <div id="app"></div>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.1.7",
+  "version": "0.2.2",
   "name": "@bettertogether/community-engine-vue",
   "description": "The Better Together Community Engine is a universal community platform",
   "author": "Better Together Community Co-op",
@@ -14,56 +14,68 @@
   "homepage": "https://bebettertogether.ca",
   "license": "LGPL-3.0-or-later",
   "main": "./src/index.js",
+  "module": "./src/index.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://git.btsdev.ca/api/packages/better-together-org/npm/"
+  },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "cypress run",
+    "lint": "eslint --ext .js,.vue src",
+    "i18n:check": "node scripts/i18n-check.mjs",
+    "i18n:check:strict": "node scripts/i18n-check.mjs --strict",
+    "i18n:check:fr": "node scripts/i18n-check-fr.mjs",
+    "i18n:check:es": "node scripts/i18n-check-es.mjs",
+    "i18n:check:uk": "node scripts/i18n-check-uk.mjs"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.7.0",
+    "@electric-sql/pglite": "^0.3.16",
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.8.1",
-    "crip-vue-loading": "^1.2.5",
-    "devour-client": "^2.1.1",
-    "mutationobserver-shim": "^0.3.3",
-    "popper.js": "^1.16.0",
-    "register-service-worker": "^1.7.2",
-    "secure-ls": "^1.2.6",
-    "vue": "^2.6.11",
-    "vue-form-generator": "^2.3.4",
-    "vue-router": "^3.4.9",
-    "vuex": "^3.6.0",
-    "vuex-persistedstate": "^4.0.0-beta.3"
+    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "axios": "^1.8.4",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.43.9",
+    "core-js": "^3.31.1",
+    "devour-client": "^3.1.5",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.3.0",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "vue": "^3.5.0",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.9",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.9",
-    "@vue/cli-plugin-eslint": "~4.5.9",
-    "@vue/cli-plugin-pwa": "~4.5.9",
-    "@vue/cli-plugin-router": "~4.5.9",
-    "@vue/cli-plugin-unit-mocha": "~4.5.9",
-    "@vue/cli-plugin-vuex": "~4.5.9",
-    "@vue/cli-service": "~4.5.9",
-    "@vue/eslint-config-airbnb": "^5.3.0",
-    "@vue/test-utils": "1.1.2",
-    "babel-eslint": "^10.0.3",
-    "chai": "^4.1.2",
-    "eslint": "^7.17.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-vue": "^7.4.0",
-    "html-webpack-plugin": "^4.5.0",
-    "mini-css-extract-plugin": "^1.3.3",
-    "portal-vue": "^2.1.6",
-    "sass": "^1.32.0",
-    "sass-loader": "^10.1.0",
-    "vue-cli-plugin-bootstrap-vue": "~0.7.0",
-    "vue-template-compiler": "^2.6.11"
+    "@babel/eslint-parser": "^7.12.1",
+    "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "cypress": "^15.12.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "jsdom": "^26.0.0",
+    "sass": "^1.98.0",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.0.0",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
+  },
+  "resolutions": {
+    "lodash": "^4.17.23",
+    "cross-spawn": "^7.0.6",
+    "flatted": "^3.2.8",
+    "yauzl": "^3.2.1"
   }
 }

package/src/BtApp.vue

@@ -1,27 +1,38 @@
 <template>
   <div id="app">
-    <BtNav />
+    <BToastOrchestrator />
+    <SyncStatusBar />
+    <BtHeader />
+    <OfflineBanner />
     <BtMainContent />
   </div>
 </template>
 
-<script>
-import BtNav from './components/BtNav.vue'
-import BtMainContent from './components/MainContent.vue'
+<script setup>
+import { onMounted } from 'vue'
+import { BToastOrchestrator } from 'bootstrap-vue-next'
+import { useMenuStore } from './stores/menus'
+import { useSyncStore } from './stores/sync'
+import BtHeader from './components/BtHeader.vue'
+import BtMainContent from './components/BtMainContent.vue'
+import SyncStatusBar from './components/sync/SyncStatusBar.vue'
+import OfflineBanner from './components/sync/OfflineBanner.vue'
 
-export default {
-  name: 'BtApp',
-  components: {
-    BtNav,
-    BtMainContent,
-  },
-}
+const menuStore = useMenuStore()
+const syncStore = useSyncStore()
+
+onMounted(() => {
+  menuStore.setHeaderMenuItems([
+    { id: 0, external: false, label: 'About', path: '/about', title: 'About the Better Together Community', sortOrder: 0 },
+  ])
+  syncStore.initNetworkListeners()
+})
 </script>
 
 <style lang="scss">
-@import 'bootstrap/scss/_functions.scss';
-@import 'bootstrap/scss/_variables.scss';
-@import 'bootstrap/scss/_mixins.scss';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
 @import 'stylesheets/theme.scss';
 
 #app {
@@ -32,17 +43,13 @@ export default {
 
   a {
     color: $accent-color;
-
-    &:hover {
-      color: $accent-color;
-    }
+    &:hover { color: $accent-color; }
   }
 
   .btn-primary {
     color: $default-text-color-bg-dark;
     background-color: $accent-color;
     border-color: $accent-color;
-
     &:hover, &:focus, &:active {
       color: $default-text-color-bg-dark;
       background-color: #399f71;
@@ -50,45 +57,29 @@ export default {
     }
   }
 
-  header,
-  footer {
-    // width: 100vw;
-    // height: 15vh;
+  header, footer {
     padding: 0;
-
     .navbar-nav {
       a {
         font-weight: bold;
         color: $default-text-color-bg-dark;
-
-        &.router-link-exact-active,
-        &:hover {
-          color: $accent-color;
-        }
+        &.router-link-exact-active, &:hover { color: $accent-color; }
+      }
+      ul.dropdown-menu a {
+        color: $default-text-color;
+        &:hover { color: $accent-color; }
       }
-
       @include media-breakpoint-up(md) {
         li.nav-item {
           margin-right: 1vw;
-
-          &:last-child {
-            margin-right: 0;
-          }
+          &:last-child { margin-right: 0; }
         }
       }
     }
   }
 
   @include media-breakpoint-down(lg) {
-    header,
-    footer {
-      height: 10vh;
-    }
+    header, footer { height: 10vh; }
   }
 }
-
-.b-toaster.b-toaster-top-center .b-toaster-slot,
-.b-toaster.b-toaster-top-right .b-toaster-slot, {
-  top: 10vh;
-}
 </style>

package/src/components/BtBrandingLogo.vue

@@ -1,34 +1,26 @@
 <template>
-  <b-navbar-brand href="/">
+  <BNavbarBrand href="/">
     <img
       class="logo"
       src="../assets/better-together-logo.png"
       alt="Better Together"
     >
-  </b-navbar-brand>
+  </BNavbarBrand>
 </template>
 
-<script>
-export default {
-  name: 'BtBrandingLogo',
-}
+<script setup>
+import { BNavbarBrand } from 'bootstrap-vue-next'
 </script>
 
 <style scoped lang="scss">
-@import 'bootstrap/scss/_functions.scss';
-@import 'bootstrap/scss/_variables.scss';
-@import 'bootstrap/scss/_mixins.scss';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
 
-.logo {
-  height: 10vh;
-}
-.navbar-brand {
-  margin-right: 5vw;
-}
+.logo { height: 10vh; }
+.navbar-brand { margin-right: 5vw; }
 
 @include media-breakpoint-down(lg) {
-  .logo {
-    height: 7vh;
-  }
+  .logo { height: 7vh; }
 }
 </style>

package/src/components/BtHeader.vue

@@ -3,10 +3,10 @@
     id="bt-header"
     class="container-fluid"
   >
-    <b-navbar
+    <BNavbar
       toggleable="lg"
-      :type="backgroundStyle"
-      :style="headerStyle()"
+      :variant="backgroundStyle"
+      :style="headerStyle"
     >
       <div
         id="nav-inner"
@@ -15,115 +15,57 @@
         <slot name="branding-logo">
           <BtBrandingLogo />
         </slot>
-        <b-navbar-toggle target="mobile-collapse" />
-        <b-collapse
-          id="right-collapse"
+        <BNavbarToggle target="nav-collapse" />
+        <BCollapse
+          id="nav-collapse"
           is-nav
-          invisible
         >
-          <BtNavBar navbar-class="ml-auto justify-content-center" />
-        </b-collapse>
-
-        <b-collapse
-          id="mobile-collapse"
-          is-nav
-        >
-          <BtNavBar
-            navbar-class="m-auto d-block d-lg-none center"
-          />
-        </b-collapse>
+          <BtNavBar navbar-class="ms-auto justify-content-center" />
+        </BCollapse>
       </div>
-    </b-navbar>
+    </BNavbar>
   </header>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { BNavbar, BNavbarToggle, BCollapse } from 'bootstrap-vue-next'
+import { useCommunityStore } from '../stores/communities'
 import BtBrandingLogo from './BtBrandingLogo.vue'
 import BtNavBar from './BtNavBar.vue'
 
-export default {
-  name: 'BtHeader',
-  components: {
-    BtBrandingLogo,
-    BtNavBar,
-  },
-  props: {
-    backgroundStyle: {
-      type: String,
-      default: () => 'dark',
-    },
-  },
-  computed: {
-    ...mapGetters('CommunityEngine/Communities', ['customization']),
-  },
-  methods: {
-    headerStyle() {
-      const styles = {
-        backgroundColor: this.customization.backgroundColor,
-      }
+defineProps({
+  backgroundStyle: { type: String, default: 'dark' },
+})
 
-      if (this.customization.coverImageUrl !== '' && this.customization.coverImageUrl !== undefined) {
-        styles.backgroundImage = `url(${this.customization.coverImageUrl})`
-        styles.backgroundPositionY = this.customization.coverImagePositionY
-      }
+const communityStore = useCommunityStore()
 
-      return styles
-    },
-  },
-}
+const headerStyle = computed(() => {
+  const { customization } = communityStore
+  const styles = { backgroundColor: customization.backgroundColor }
+  if (customization.coverImageUrl) {
+    styles.backgroundImage = `url(${customization.coverImageUrl})`
+    styles.backgroundPositionY = customization.coverImagePositionY
+  }
+  return styles
+})
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-@import 'bootstrap/scss/_functions.scss';
-@import 'bootstrap/scss/_variables.scss';
-@import 'bootstrap/scss/_mixins.scss';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
 @import '../stylesheets/theme.scss';
 
 #bt-header {
   min-height: 15vh;
-
   nav {
     z-index: 1000;
     background-repeat: no-repeat;
     background-size: cover;
-
-    ::v-deep #nav-inner {
-      position: relative;
-    }
+    :deep(#nav-inner) { position: relative; }
   }
-
-  #right-collapse {
-    bottom: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  #mobile-collapse.show {
-    ::v-deep .user-dropdown {
-      a.dropdown-toggle {
-        > span {
-          max-width: initial;
-        }
-      }
-      a.dropdown-item {
-        text-align: center;
-        color: $default-text-color-bg-dark;
-
-        &.router-link-exact-active,
-        &:hover {
-          background-color: initial;
-          color: $accent-color;
-        }
-      }
-      ul.dropdown-menu {
-        background-color: initial;
-      }
-    }
-  }
-
-  .navbar-toggler >>> .navbar-toggler-icon {
+  :deep(.navbar-toggler .navbar-toggler-icon) {
     width: 1em;
     height: 1em;
   }

package/src/components/BtMainContent.vue

@@ -3,67 +3,36 @@
     id="main-content"
     class="container"
   >
-    <router-view />
+    <RouterView />
   </main>
 </template>
 
-<script>
-export default {
-  name: 'BtMainContent',
-}
+<script setup>
+import { RouterView } from 'vue-router'
 </script>
 
 <style lang="scss">
-@import 'bootstrap/scss/_functions.scss';
-@import 'bootstrap/scss/_variables.scss';
-@import 'bootstrap/scss/_mixins.scss';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
 @import '../stylesheets/theme.scss';
 
 #main-content {
   margin-bottom: 5vh;
-
-  h1, h2, h3, h4, h5, h6 {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
+  h1, h2, h3, h4, h5, h6 { text-align: center; margin-bottom: 20px; }
   section {
     border-radius: 10px;
     margin-bottom: 20px;
     padding: 15px;
     background-color: #fff;
-
-    a {
-      color: $accent-color;
-
-      &:hover {
-        color: $accent-color;
-      }
-    }
-
-    .heading {
-      margin-top: 20px;
-    }
-
+    a { color: $accent-color; &:hover { color: $accent-color; } }
+    .heading { margin-top: 20px; }
     .card {
       border: none;
-      .card-header, .card-footer {
-        background: none;
-        border: none;
-      }
-
-      .card-header {
-        h5 {
-          margin-bottom: 0;
-        }
-      }
+      .card-header, .card-footer { background: none; border: none; }
+      .card-header h5 { margin-bottom: 0; }
     }
   }
-}
-
-@include media-breakpoint-down(lg) {
-  #main-content {
-    height: auto;
-  }
+  @include media-breakpoint-down(lg) { height: auto; }
 }
 </style>