diff --git a/.github/workflows/previewDeploy.yml b/.github/workflows/previewDeploy.yml index c82910bdfc..110137267d 100644 --- a/.github/workflows/previewDeploy.yml +++ b/.github/workflows/previewDeploy.yml @@ -7,6 +7,20 @@ env: cache-version: v1 jobs: + check-skip-flags: + name: Check skip flags + runs-on: ubuntu-latest + outputs: + head-commit-message: ${{ steps.get-head-commit-message.outputs.headCommitMsg }} + steps: + - name: Get repo + uses: actions/checkout@v3 + with: + ref: ${{ github.event.pull_request.head.sha }} + - name: Print head git commit message + id: get-head-commit-message + run: | + echo "headCommitMsg=$(git show -s --format=%s)" >> $GITHUB_OUTPUT test: runs-on: ubuntu-latest steps: @@ -141,6 +155,7 @@ jobs: run: yarn format-yml build: runs-on: ubuntu-latest + needs: check-skip-flags steps: - name: Checkout source code uses: actions/checkout@v3 @@ -194,16 +209,19 @@ jobs: run: yarn build - name: Deploy to netlify run: npx netlify-cli deploy --dir=./public > cli.txt + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} - name: Create Netlify Draft URL Message + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} run: | cat cli.txt sed -i '1s/^/## Deploy Preview\\n/g' cli.txt sed -i -z 's/\n/\\n/g' cli.txt sed -i -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})*)?m//g" cli.txt - name: Post Netlify CLI Comment + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} URL: ${{ github.event.pull_request.comments_url }} @@ -213,6 +231,7 @@ jobs: -d "{\"body\": \"$(cat cli.txt)\"}" \ ${URL} - name: get Netlify Draft URL + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} id: get-netlify-draft-url run: | echo "draftUrl=$(cat cli.txt | sed -r 's/.*Website Draft URL: (.*)\\n\\nIf everything.*/\1/')" >> $GITHUB_OUTPUT @@ -221,7 +240,9 @@ jobs: lighthouse: runs-on: ubuntu-latest - needs: build + needs: + - build + - check-skip-flags steps: - name: Checkout source code uses: actions/checkout@v3 @@ -262,8 +283,10 @@ jobs: NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} run: yarn install --frozen-lockfile - name: run lighthouse benchmark + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} run: yarn benchmark ${{ needs.build.outputs.draftUrl }} ci - name: summarize scores + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} run: | touch summarize.txt echo '# Lighthouse Score' >> summarize.txt @@ -277,6 +300,153 @@ jobs: cat benchmark/summary/mobile-*.txt | sed -z 's/\n/\\n/g' >> summarize.txt sed -i -z 's/\n/\\n/g' summarize.txt - name: Post Lighthouse Score Comment + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + URL: ${{ github.event.pull_request.comments_url }} + run: | + curl -X POST \ + -H "Authorization: token ${GITHUB_TOKEN}" \ + -d "{\"body\": \"$(cat summarize.txt)\"}" \ + ${URL} + memlab: + runs-on: ubuntu-latest + steps: + - name: Checkout source code + uses: actions/checkout@v3 + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 16.x + registry-url: https://npm.pkg.github.com/ + scope: '@tubone24' + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + - name: Cache + uses: actions/cache@v3 + with: + path: | + ~/.cache + ${{ steps.yarn-cache-dir-path.outputs.dir }} + node_modules + .cache + public + key: ${{ runner.os }}-build-${{ env.cache-version }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-build-${{ env.cache-version }}-${{ hashFiles('**/yarn.lock') }} + ${{ runner.os }}-build- + ${{ runner.os }}- + - name: yarn install + env: + GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}} + GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}} + GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}} + GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}} + GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}} + GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}} + GATSBY_GITHUB_SHA: ${{ github.sha }} + FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}} + NETLIFY_ENV: deploy-preview + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + run: | + yarn install --frozen-lockfile + npm install -g memlab + - name: run memlab + run: | + MEMLAB_PATH=$(which memlab) + URL=http://localhost:9000 + npx start-server-and-test build-serve:e2e http://localhost:9000 "${MEMLAB_PATH} run --scenario test/memlab/testMemleak.js --work-dir test/memlab" + - name: summarize + run: | + cat test/memlab/data/out/leaks.txt + sed -i '1s/^/## Memlab leaks report\\n\`\`\`\\n/g' test/memlab/data/out/leaks.txt + sed -i -z 's/\n/\\n/g' test/memlab/data/out/leaks.txt + sed -i -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})*)?m//g" test/memlab/data/out/leaks.txt + echo -n "\\n \`\`\` \\n " >> test/memlab/data/out/leaks.txt + - name: Post Memlab Report Comment + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + URL: ${{ github.event.pull_request.comments_url }} + run: | + curl -X POST \ + -H "Authorization: token ${GITHUB_TOKEN}" \ + -d "{\"body\": \"$(cat test/memlab/data/out/leaks.txt)\"}" \ + ${URL} + snyk: + runs-on: ubuntu-latest + steps: + - name: Checkout source code + uses: actions/checkout@v3 + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 16.x + registry-url: https://npm.pkg.github.com/ + scope: '@tubone24' + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + - name: Cache + uses: actions/cache@v3 + with: + path: | + ~/.cache + ${{ steps.yarn-cache-dir-path.outputs.dir }} + node_modules + .cache + public + key: ${{ runner.os }}-build-${{ env.cache-version }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-build-${{ env.cache-version }}-${{ hashFiles('**/yarn.lock') }} + ${{ runner.os }}-build- + ${{ runner.os }}- + - name: yarn install + env: + GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}} + GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}} + GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}} + GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}} + GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}} + GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}} + GATSBY_GITHUB_SHA: ${{ github.sha }} + FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}} + NETLIFY_ENV: deploy-preview + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + run: | + yarn install --frozen-lockfile + yarn global add snyk + - name: run snyk + env: + SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }} + run: | + snyk test . > snyk.txt || : + snyk code test . > snyk_code.txt || : + snyk iac test terraform > snyk_iac.txt || : + - name: summarize + run: | + cat snyk.txt + cat snyk_code.txt + cat snyk_iac.txt + touch summarize.txt + echo '# Snyk vulnerability report' >> summarize.txt + echo '## OSS packages' >> summarize.txt + echo '' >> summarize.txt + cat snyk.txt | sed -z 's/\n/\\n/g' >> summarize.txt + echo '' >> summarize.txt + echo '' >> summarize.txt + echo '## Application' >> summarize.txt + echo '' >> summarize.txt + cat snyk_code.txt | sed -z 's/\n/\\n/g' >> summarize.txt + echo '' >> summarize.txt + echo '' >> summarize.txt + echo '## IaC' >> summarize.txt + echo '' >> summarize.txt + cat snyk_iac.txt | sed -z 's/\n/\\n/g' >> summarize.txt + sed -i -z 's/\n/\\n/g' summarize.txt + sed -i 's/Testing \.\.\.\.//g' summarize.txt + sed -i 's/Testing \. \.\.\.//g' summarize.txt + - name: Post snyk Report Comment env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} URL: ${{ github.event.pull_request.comments_url }} @@ -335,6 +505,7 @@ jobs: storybook: runs-on: ubuntu-latest + needs: check-skip-flags steps: - name: Checkout source code uses: actions/checkout@v3 @@ -382,11 +553,13 @@ jobs: GATSBY_GITHUB_SHA: ${{ github.sha }} NETLIFY_ENV: deploy-preview - name: Deploy to netlify + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} run: npx netlify-cli deploy --dir=./storybook-static > cli.txt env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_STORYBOOK_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_STORYBOOK_SITE_ID }} - name: Cat cli.txt + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} run: | cat cli.txt sed -i '1s/^/## Storybook Preview\\n/g' cli.txt @@ -394,6 +567,7 @@ jobs: sed -i -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})*)?m//g" cli.txt cat cli.txt - name: Post Netlify CLI Comment + if: ${{ !contains(needs.check-skip-flags.outputs.head-commit-message, '[skip netlify]') }} env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} URL: ${{ github.event.pull_request.comments_url }} diff --git a/.gitignore b/.gitignore index 33a85437fd..0532335d8d 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,7 @@ prd.tfvars terraform.log # memlab -test/memlab/data \ No newline at end of file +test/memlab/data + +# synk +.dccache diff --git a/README.md b/README.md index 57fe887561..a415dc025b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Blog +> Super powerfully all-packaged blog system + [![Twitter URL](https://img.shields.io/twitter/url/https/blog.tubone-project24.xyz?style=social)](https://twitter.com/intent/tweet?text=LikeThis:&url=https%3A%2F%2Fblog.tubone-project24.xyz) [![Netlify Status](https://api.netlify.com/api/v1/badges/3751ef40-b145-4249-9657-39d3fb04ae81/deploy-status)](https://app.netlify.com/sites/pensive-lamport-5822d2/deploys) [![DeployToNetlifyPRD](https://github.com/tubone24/blog/workflows/DeployToNetlifyPRD/badge.svg)](https://github.com/tubone24/blog/actions?query=workflow%3ADeployToNetlifyPRD) @@ -20,13 +22,13 @@ This is tubone's Blog by Gatsby and Netlify. ### Templated by? -[Gatsby Starter - Calpa's Blog](https://github.com/calpa/gatsby-starter-calpa-blog]) +[Gatsby Starter - Calpa's Blog](https://github.com/calpa/gatsby-starter-calpa-blog) Special, thanks! ## Features -#### Structure +### Structure - Gatsby.js v4, Static site generating - Use [Preact](https://preactjs.com/), faster than [React](https://ja.reactjs.org/) @@ -34,7 +36,7 @@ Special, thanks! - Use [Bootstrap5](https://getbootstrap.jp/) for CSS Framework - Use [Sass(Scss)](https://sass-lang.com/) and Scoped by CSS Modules - All articles (Datasource) made by [Markdown](https://www.markdown.jp/what-is-markdown/) and save to this repository -- For Search Engine Optimization, generate header meta tag and OGP +- For Search Engine Optimization, generate header meta tag and [OGP](https://www.popwebdesign.net/what-is-ogp.html) - High Performance, [purge CSS](https://purgecss.com/) to [Bootstrap5](https://getbootstrap.jp/), optimise SVG and minify HTML, CSS and JS - Use [Google Analytics v4](https://support.google.com/analytics/answer/10089681?hl=ja) - Site inner searching by [Algolia search](https://www.algolia.com/) @@ -50,7 +52,7 @@ Special, thanks! - Compliant with [a11y](https://waic.jp/docs/WCAG20/Overview.html), top page Lighthouse's accessibility score is 100! - Use [Sentry](https://sentry.io/welcome/) for detecting error and check performance -#### For Developer +### For Developer - Use [ESLint](https://eslint.org/) and [stylelint](https://stylelint.io/) for lint codes - Use [EditorConfig](https://editorconfig.org/) formatting and indent @@ -66,7 +68,7 @@ Special, thanks! - Update dependencies by [Renovate](https://www.whitesourcesoftware.com/free-developer-tools/renovate/) - Detect browser's memory leaks by [memlab](https://github.com/facebookincubator/memlab) -#### For contributor of articles +### For contributor of articles - Post articles in `/src/content/*.md`, and Create [GitHub Pull Request](https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) to master branch - Deploy netlify in preview environment and check your articles @@ -160,9 +162,9 @@ This project use Browsers List, so you can update it yarn browserslist:update ``` -### benchmark +### benchmark (Lighthouse) -If you want to check benchmark, you can use lighthouse script below +If you want to check benchmark, you can use Lighthouse script below ``` yarn benchmark "https://blog.tubone-project24.xyz" $(git rev-parse HEAD) @@ -184,6 +186,16 @@ If you want to detect browser's memory leaks, you can use memlab script below yarn memlab ``` +Or if you want to test against a specific URL, set an environment variable. + +``` +URL=https://63ad31c571f88e60f37399ec--pensive-lamport-5822d2.netlify.app yarn memlab +``` + +And also, creating PR, you can check memory leak report via GitHub PR Comments. + +![memlab leaks report](https://i.imgur.com/JdjbTuo.png) + ## Environment variables Copy `.env.example` to create the `.env` file @@ -192,8 +204,8 @@ Copy `.env.example` to create the `.env` file cp .env.example .env ``` -| Key | Description | Default | -| -------------------------------- | -------------------------------------------------------- | ------- | +| Key | Description | Default | +|----------------------------------| -------------------------------------------------------- | ------- | | GATSBY_ALGOLIA_ADMIN_API_KEY | Algolia search's ADMIN API KEY, use index post content | - | | GATSBY_ALGOLIA_APP_ID | Algolia search's APP ID | - | | GATSBY_ALGOLIA_INDEX_NAME | Algolia search's index name | posts | @@ -255,7 +267,7 @@ Push the button below. I use [textlint](https://textlint.github.io/) to proofread my blog text. ``` -npm run textlint +yarn textlint ``` ## Change Netlify Config @@ -268,9 +280,19 @@ Use Terraform Cloud to change Netlify configuration values. [Gitguardian](https://www.gitguardian.com/) +## Alert monitoring + +Use [Sentry](https://sentry.io/organizations/tubone-project24/projects/) + ## Automatic security vulnerability -[Brightsec](https://brightsec.com/) +API request based security check is used by [Brightsec](https://brightsec.com/) + +Also, [Snyk](https://app.snyk.io/org/tubone24/project/f01f63e7-832e-45ca-a080-eb4d0da4b8e6), OSS Package check and code, IaC code check. + +If you create PR, check security vulnerability for [snyk CLI](https://docs.snyk.io/snyk-cli) and push PR comment. + +![snyk comments](https://i.imgur.com/fEL1cFj.png) # License diff --git a/package.json b/package.json index fb55e60ea0..8a31fbf15c 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,8 @@ "develop:e2e": "cross-env NODE_ENV=development gatsby develop", "develop:remote": "gatsby develop -p 8080 -H 0.0.0.0", "serve": "gatsby serve", + "build-serve": "yarn build && yarn serve", + "build-serve:e2e": "NODE_ENV=development yarn build && NODE_ENV=development yarn serve", "format": "eslint .", "format:fix": "eslint --fix .", "format-style": "npx stylelint **/*.scss", @@ -121,7 +123,10 @@ "build-storybook": "build-storybook", "prepare": "husky install", "lint-staged": "lint-staged", - "memlab": "memlab run --scenario test/memlab/testMemleak.js --work-dir test/memlab" + "memlab": "memlab run --scenario test/memlab/testMemleak.js --work-dir test/memlab", + "memlab:serve": "URL=http://localhost:9000 memlab run --scenario test/memlab/testMemleak.js --work-dir test/memlab", + "memlab:ci": "start-server-and-test build-serve:e2e http://localhost:9000 memlab:serve", + "memlab:tag": "memlab run --scenario test/memlab/testMemleakForTag.js --work-dir test/memlab" }, "devDependencies": { "@babel/core": "7.19.6", @@ -233,7 +238,7 @@ "prismjs": "1.27.0", "node-fetch": "2.6.7", "marked": "4.0.10", - "trim-newlines": "3.0.1", + "trim-newlines": "3.0.1", "glob-parent": "5.1.2", "trim": "0.0.3", "deep-object-diff": "1.1.9", diff --git a/src/templates/index.tsx b/src/templates/index.tsx index bd20d619c4..f181bda080 100644 --- a/src/templates/index.tsx +++ b/src/templates/index.tsx @@ -127,7 +127,10 @@ const Page = ({
- + { - return "https://blog.tubone-project24.xyz"; + const url = process.env["URL"] || "https://blog.tubone-project24.xyz"; + console.log(url); + return url; }; const action = async (page) => { + // Go to the about page and catch memory leaks const elements = await page.$x("//a[contains(., 'About')]"); const [link] = elements; if (link) { @@ -10,18 +13,11 @@ const action = async (page) => { } // clean up external references from memlab await Promise.all(elements.map((e) => e.dispose())); - - const elements2 = await page.$x("//a[contains(., 'Tag')]"); - const [link2] = elements2; - if (link2) { - await link2.click(); - } - // clean up external references from memlab - await Promise.all(elements2.map((e) => e.dispose())); }; const back = async (page) => { - await page.click('a[href="/"]'); + // Return Top page via clicking logo + await page.click('[data-testid="logo"]'); }; module.exports = { action, back, url }; diff --git a/test/memlab/testMemleakForTag.js b/test/memlab/testMemleakForTag.js new file mode 100644 index 0000000000..80047829ad --- /dev/null +++ b/test/memlab/testMemleakForTag.js @@ -0,0 +1,23 @@ +const url = () => { + const url = process.env["URL"] || "https://blog.tubone-project24.xyz"; + console.log(url); + return url; +}; + +const action = async (page) => { + // Go to the Tag page and catch memory leaks + const elements = await page.$x("//a[contains(., 'Tag')]"); + const [link] = elements; + if (link) { + await link.click(); + } + // clean up external references from memlab + await Promise.all(elements.map((e) => e.dispose())); +}; + +const back = async (page) => { + // Return Top page via clicking logo + await page.click('[data-testid="logo"]'); +}; + +module.exports = { action, back, url }; diff --git a/yarn.lock b/yarn.lock index 0d0d265932..951b10ee51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8569,9 +8569,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001399, caniuse-lite@^1.0.30001400: - version "1.0.30001406" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001406.tgz#d0146e7919635479f873b4507517b627f66ab269" - integrity sha512-bWTlaXUy/rq0BBtYShc/jArYfBPjEV95euvZ8JVtO43oQExEN/WquoqpufFjNu4kSpi5cy5kMbNvzztWDfv1Jg== + version "1.0.30001441" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz" + integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg== capital-case@^1.0.4: version "1.0.4"