Merge branch 'release/1.0.25' into v1

.github/workflows/build-and-deploy-docs.yml

@@ -0,0 +1,44 @@
+name: Build and Deploy Docs
+env:
+  DOCS_DEST_DIR: /webperf/
+on:
+  push:
+    branches:
+      - v3
+    paths:
+      - 'docs/**'
+  pull_request:
+    branches:
+      - v3
+    paths:
+      - 'docs/**'
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
+    strategy:
+      fail-fast: true
+      matrix:
+        node-version: [14.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run docs:build
+      - run: cp -vr docs/.vitepress/dist $GITHUB_WORKSPACE
+      - name: rsync deployments
+        uses: burnett01/[email protected]
+        with:
+          switches: -avzr --delete
+          path: ./dist/
+          remote_path: ${{ secrets.NYS_DOCS_ROOT }}${{ env.DOCS_DEST_DIR }}
+          remote_host: ${{ secrets.NYS_DEPLOY_REMOTE_HOST }}
+          remote_port: ${{ secrets.NYS_DEPLOY_REMOTE_PORT }}
+          remote_user: ${{ secrets.NYS_DEPLOY_REMOTE_USER }}
+          remote_key: ${{ secrets.NYS_DEPLOY_PRIVATE_KEY }}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Webperf Changelog
 
+## 1.0.25 - 2021.07.17
+### Fixed
+* Fixed an issue where an exception could be thrown in Craft CMS 3.7.x if no `element` existed when rendering the sidebar (https://github.com/nystudio107/craft-webperf/issues/38)
+
 ## 1.0.24 - 2021.04.06
 ### Added
 * Added `make update` to update NPM packages

Makefile

@@ -8,9 +8,8 @@ DOCKERRUN=docker container run \
 	-p 8080:8080 \
 	-v `pwd`:/app \
 	${CONTAINER}:${TAG}
-DOCSDEST?=../../sites/nystudio107/web/docs/webperf
 
-.PHONY: build dev docker docs install npm
+.PHONY: build dev docker install npm
 
 build: docker install
 	${DOCKERRUN} \
@@ -24,11 +23,6 @@ docker:
 		-t ${CONTAINER}:${TAG} \
 		--build-arg TAG=${TAG} \
 		--no-cache
-docs: docker
-	${DOCKERRUN} \
-		run docs
-	rm -rf ${DOCSDEST}
-	mv ./docs/docs/.vuepress/dist ${DOCSDEST}
 install: docker
 	${DOCKERRUN} \
 		install --ignore-scripts

buildchain/package.json

@@ -137,7 +137,6 @@
     "check-types": "tsc",
     "debug": "nodemon -L",
     "dev": "nodemon -L",
-    "docs": "cd ../docs && rm -f package-lock.json && npm install && npm update && npm run docs:build",
     "lint": "tsc --noEmit && eslint '../../src/**/*.{js,ts,vue}' --fix"
   },
   "version": "1.0.0"

composer.json

@@ -2,7 +2,7 @@
     "name": "nystudio107/craft-webperf",
     "description": "Webperf helps you build & maintain high quality websites through Real User Measurement of your website's performance",
     "type": "craft-plugin",
-    "version": "1.0.24",
+    "version": "1.0.25",
     "keywords": [
         "craft",
         "cms",

docs/.textlint.terms.json

@@ -0,0 +1,8 @@
+[
+  "Stylus",
+  "VuePress",
+  [
+    "front[- ]matter",
+    "frontmatter"
+  ]
+]

docs/.textlintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    rules: {
+        '@textlint-rule/no-unmatched-pair': true,
+        apostrophe: true,
+        'common-misspellings': true,
+        diacritics: true,
+        'en-capitalization': {
+            allowHeading: false
+        },
+        'stop-words': {
+            severity: 'warning'
+        },
+        terminology: {
+            terms: `${__dirname}/.textlint.terms.json`
+        },
+        'write-good': {
+            severity: 'warning'
+        }
+    },
+    filters: {
+        comments: true
+    }
+}

docs/Dockerfile

@@ -0,0 +1,8 @@
+ARG TAG=14-alpine
+FROM nystudio107/node-dev-base:$TAG
+
+WORKDIR /app/
+
+CMD ["run build"]
+
+ENTRYPOINT ["npm"]

docs/Makefile

@@ -0,0 +1,45 @@
+TAG?=14-alpine
+CONTAINER?=$(shell basename $(dir $(CURDIR)))-docs
+DOCKERRUN=docker container run \
+	--name ${CONTAINER} \
+	--rm \
+	-p 3002:3002 \
+	-t \
+	-v `pwd`:/app \
+	${CONTAINER}:${TAG}
+DOCSDEST?=../../../sites/nystudio107/web/docs/webperf
+
+.PHONY: docker build dev fix install lint update npm
+
+docker:
+	docker build \
+		. \
+		-t ${CONTAINER}:${TAG} \
+		--build-arg TAG=${TAG} \
+		--no-cache
+build: docker install update
+	${DOCKERRUN} \
+		run docs:build
+	rm -rf ${DOCSDEST}
+	mv ./docs/.vitepress/dist ${DOCSDEST}
+dev: docker install
+	${DOCKERRUN} \
+		run docs:dev
+fix: docker install
+	${DOCKERRUN} \
+		run docs:fix
+install: docker
+	${DOCKERRUN} \
+		install
+lint: docker install
+	${DOCKERRUN} \
+		run docs:lint
+update: docker
+	${DOCKERRUN} \
+		update
+npm: docker
+	${DOCKERRUN} \
+		$(filter-out $@,$(MAKECMDGOALS))
+%:
+	@:
+# ref: https://stackoverflow.com/questions/6273608/how-to-pass-argument-to-makefile-from-command-line

docs/docs/.vitepress/config.js

@@ -0,0 +1,30 @@
+module.exports = {
+    title: 'Webperf Plugin Documentation',
+    description: 'Documentation for the Webperf plugin',
+    base: '/docs/webperf/',
+    lang: 'en-US',
+    head: [
+        ['meta', { content: 'https://github.com/nystudio107', property: 'og:see_also', }],
+        ['meta', { content: 'https://www.youtube.com/channel/UCOZTZHQdC-unTERO7LRS6FA', property: 'og:see_also', }],
+        ['meta', { content: 'https://www.facebook.com/newyorkstudio107', property: 'og:see_also', }],
+    ],
+    themeConfig: {
+        repo: 'nystudio107/craft-webperf',
+        docsDir: 'docs/docs',
+        docsBranch: 'v1',
+        algolia: {
+            apiKey: '',
+            indexName: 'webperf'
+        },
+        editLinks: true,
+        editLinkText: 'Edit this page on GitHub',
+        lastUpdated: 'Last Updated',
+        sidebar: [
+            { text: 'Webperf Plugin', link: '/' },
+            { text: 'Webperf Overview', link: '/overview.html' },
+            { text: 'Performance Resources', link: '/resources.html' },
+            { text: 'Configuring Webperf', link: '/configuring.html' },
+            { text: 'Using Webperf', link: '/using.html' },
+        ],
+    },
+};

docs/docs/.vitepress/theme/SidebarBottom.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="nys-footer">
+    <span>Brought to you by:</span>
+    <a
+      href="https://github.com/sponsors/khalwat"
+      target="_blank"
+      rel="noopener"
+    >
+    <img
+        src="/resources/img/nys-logo.svg"
+        aria-label="nystudio107 logo"
+        />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarBottom"
+}
+</script>
+
+<style scoped>
+.nys-footer {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.nys-footer img {
+  box-sizing: border-box;
+  max-width: 200px;
+  height: 80px;
+  display: block;
+  margin: 1rem 0;
+  padding-left: 0.7rem;
+}
+</style>

docs/docs/.vitepress/theme/custom.css

@@ -0,0 +1,12 @@
+:root {
+    --c-brand: #48a391;
+    --c-brand-light: #5db7a5;
+}
+
+.custom-block.tip {
+    border-color: var(--c-brand-light);
+}
+
+.DocSearch {
+    --docsearch-primary-color: var(--c-brand) !important;
+}

docs/docs/.vitepress/theme/index.js

@@ -0,0 +1,42 @@
+import Theme from 'vitepress/theme'
+import {h, watch} from 'vue'
+import './custom.css'
+
+import SidebarBottom from './SidebarBottom.vue';
+
+// Could also come from .env
+const GA_ID = 'UA-69117511-1';
+
+export default {
+    ...Theme,
+    Layout() {
+        return h(Theme.Layout, null, {
+                'sidebar-bottom': () => h(SidebarBottom)
+            }
+        )
+    },
+    enhanceApp: (ctx) => {
+        // Google analytics integration
+        if (import.meta.env.PROD && GA_ID && typeof window !== 'undefined') {
+            (function (i, s, o, g, r, a, m) {
+                i['GoogleAnalyticsObject'] = r
+                i[r] = i[r] || function () {
+                    (i[r].q = i[r].q || []).push(arguments)
+                }
+                i[r].l = 1 * new Date()
+                a = s.createElement(o)
+                m = s.getElementsByTagName(o)[0]
+                a.async = 1
+                a.src = g
+                m.parentNode.insertBefore(a, m)
+            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
+            ga('create', GA_ID, 'auto')
+            ga('set', 'anonymizeIp', true)
+            // Send a page view any time the route changes
+            watch(ctx.router.route, (newValue, oldValue) => {
+                ga('set', 'page', newValue.path)
+                ga('send', 'pageview')
+            })
+        }
+    }
+}

docs/docs/Configuring.md → docs/docs/configuring.md

@@ -1,8 +1,8 @@
 # Configuring Webperf
 
-As soon as you install Webperf, it automatically will add an asynchronous, non-blocking iframe to your pages that collects anonymous performance data. You don't need to add any template code for this to happen.
+As soon as you install Webperf, it automatically will add an asynchronous, non-blocking iframe to your pages that collects anonymous performance data. You don’t need to add any template code for this to happen.
 
-Once Webperf is installed, it needs to collect performance data samples from users visiting your website. So install it, and sit back and allow it to collect enough data samples to give you a picture of your website's performance.
+Once Webperf is installed, it needs to collect performance data samples from users visiting your site. So install it, and sit back and allow it to collect enough data samples to give you a picture of your website’s performance.
 
 In case you are statically caching pages on your website, they will need to be purged in order for the Webperf iframe to be added to your code. This only needs to happen when Webperf is first installed.
 
@@ -18,7 +18,7 @@ If you have the [Minify](https://plugins.craftcms.com/minify) plugin installed,
  * **Include Browser Beacon** - Whether or not the asynchronous User Timing Beacon should be rendered on frontend pages.
  * **Include Craft Beacon** - Whether or not the Craft profiling data should be recorded for site requests.
  * **Static Cached Site** - If the site is static cached, turn this option on to prevent Webperf from generating a unique beacon token.
- * **WebPageTest.org API Key** - To run pages through [WebPageTest.org](https://www.webpagetest.org/) via an API, you need an API key. Enter your WebpageTest.org API key here. If you don't have one, they are free and easy to obtain. [Learn More](https://www.webpagetest.org/getkey.php)
+ * **WebPageTest.org API Key** - To run pages through [WebPageTest.org](https://www.webpagetest.org/) via an API, you need an API key. Enter your WebpageTest.org API key here. If you don’t have one, they are free and easy to obtain. [Learn More](https://www.webpagetest.org/getkey.php)
  * **Exclude Patterns** - [Regular expressions](https://regexr.com/) to match URLs that should be excluded from tracking.
 
 ## Performance Settings
@@ -64,6 +64,6 @@ You can control access to various Webperf settings and functions on a per-user g
 * **Performance Sidebar** - Whether the performance summary sidebar should be shown on entry, category, and product pages
 * **Settings** - Access to the Webperf settings page
 
-Ensure that you've also enabled plugin access to the Webperf plugin as well for any user groups you want to grant access to Webperf.
+Ensure that you’ve also enabled plugin access to the Webperf plugin as well for any user groups you want to grant access to Webperf.
 
 Brought to you by [nystudio107](https://nystudio107.com)

docs/docs/README.md → docs/docs/index.md

@@ -1,8 +1,12 @@
+---
+title: Webperf plugin for Craft CMS 3.x
+description: Webperf helps you build & maintain high quality websites through Real User Measurement of your website's performance
+---
 [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/badges/quality-score.png?b=v1)](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/?branch=v1) [![Code Coverage](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/badges/coverage.png?b=v1)](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/?branch=v1) [![Build Status](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/badges/build.png?b=v1)](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/build-status/v1) [![Code Intelligence Status](https://scrutinizer-ci.com/g/nystudio107/craft-webperf/badges/code-intelligence.svg?b=v1)](https://scrutinizer-ci.com/code-intelligence)
 
 # Webperf plugin for Craft CMS 3.x
 
-Webperf helps you build & maintain high quality websites through Real User Measurement of your website's performance
+Webperf helps you build & maintain high quality sites through Real User Measurement of your website’s performance
 
 ![Screenshot](./resources/img/plugin-banner.jpg)
 

docs/docs/Overview.md → docs/docs/overview.md

@@ -1,13 +1,13 @@
 # Webperf Overview
 
-Webperf uses [Real User Measurement](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) captured anonymously from actual visitors to your website to profile its performance. In this way, Webperf passively gathers and monitors how your website performs on real-world devices used by real-world users.
+Webperf uses [Real User Measurement](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) captured anonymously from actual visitors to your site to profile its performance. In this way, Webperf passively gathers and monitors how your site performs on real-world devices used by real-world users.
 
 Webperf also gathers Craft specific information such as database queries, Twig rendering time, memory used, and overall TTFB (Time To First Byte) performance timings. Webperf will also record any front JavaScript errors as well as Craft CMS errors in one place for ease of discovery.
 
-Webperf then presents this performance information in concise graphs that give you insight into how your website performs. Webperf even provides you with bullet-pointed recommendations on how you can fix any performance problems that are found. And [performance affects conversions](https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/) as well as user experience.
+Webperf then presents this performance information in concise graphs that give you insight into how your site performs. Webperf even provides you with bullet-pointed recommendations on how you can fix any performance problems that are found. And [performance affects conversions](https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/) as well as user experience.
 
 Webperf leverages the the performance profiling that web browsers & Craft CMS already do. It has been optimized to minimize the [Observer Effect](https://en.wikipedia.org/wiki/Observer_effect_(information_technology)), collecting data without impacting performance.
 
-Webperf uses the battle-tested [Boomerang](https://akamai.github.io/boomerang/) JavaScript from Akamai, loaded asynchronously in a non-blocking iframe. Boomerang uses performance information from the user's browser via the [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API).
+Webperf uses the battle-tested [Boomerang](https://akamai.github.io/boomerang/) JavaScript from Akamai, loaded asynchronously in a non-blocking iframe. Boomerang uses performance information from the user’s browser via the [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API).
 
 Brought to you by [nystudio107](https://nystudio107.com)