Initialize dependabot/github_actions/treosh/lighthouse-ci-action-10

.env.example

@@ -0,0 +1,3 @@
+WEBSITE_URL="http://www.example.com"
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID="GTM-XXXXXX"
+NEXT_PUBLIC_GOOGLE_ANALYTICS="UA-XXXXX-X"

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "ignorePatterns": ["**/public/*.js"],
+  "rules": {
+    "no-unused-vars": "error",
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+
+version: 2
+updates:
+  - package-ecosystem: "github-actions" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/workflows/lighthouse-on-vercel-preview-url.yml

@@ -0,0 +1,60 @@
+name: Vercel Preview URL Lighthouse Audit
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  generate_lighthouse_audit:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      # wait arbitrary 120s for the build to finish, changes it if your builds are longer. Potential fix: https://github.com/marketplace/actions/await-for-vercel-deployment
+      - run: sleep 120
+      - name: Capture Vercel preview URL
+        id: vercel_preview_url
+        uses: zentered/[email protected]
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        with:
+          # find project id here: https://vercel.com/studio-freight/satus/settings
+          vercel_team_id: 'studio-freight'
+          vercel_project_id: ${{ secrets.VERCEL_PROJECT_ID }}
+      - uses: actions/[email protected]
+      - name: Audit preview URL with Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v10
+        with:
+          urls: |
+            "https://${{ steps.vercel_preview_url.outputs.preview_url }}"
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+      - name: Format lighthouse score
+        id: format_lighthouse_score
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
+            const links = ${{ steps.lighthouse_audit.outputs.links }}
+            const formatResult = (res) => Math.round((res * 100))
+            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
+            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
+            const comment = [
+                `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this commit:`,
+                '',
+                `${score(result.performance)} Performance: ${result.performance}`,
+                `${score(result.accessibility)} Accessibility: ${result.accessibility}`,
+                `${score(result['best-practices'])} Best practices: ${result['best-practices']}`,
+                `${score(result.seo)} SEO: ${result.seo}`,
+                `${score(result.pwa)} PWA: ${result.pwa}`,
+                ' ',
+                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
+            ].join('\n')
+             core.setOutput("comment", comment);
+      - name: Create commit comment
+        uses: peter-evans/commit-comment@v2
+        with:
+          body: |
+            "${{ steps.format_lighthouse_score.outputs.comment }}"

.github/workflows/size-limit.yml

@@ -0,0 +1,17 @@
+name: Size Limit
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/[email protected]
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+.eslintcache

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=false

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+**/.next/**
+**/dist/**
+**/public/**
+.github/**
+.vercel/**
+.husky/**
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "endOfLine": "auto",
+  "semi": false,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "eslint.format.enable": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true,
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.js": "javascriptreact"
+  },
+  "prettier.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

PROD-README.md

@@ -0,0 +1,72 @@
+# [PROJECT]
+
+## Setup
+
+The usual process for Next.js based apps/websites:
+
+1. Install node modules:
+
+   `$ pnpm i`
+
+2. Get the .env variables from Vercel (check `.env.template`), after [installing Vercel CLI](https://vercel.com/docs/cli):
+
+   `$ vc link`
+
+   `$ vc env pull`
+
+3. run development environment:
+
+   `$ pnpm dev`
+
+## Stack
+
+- [Lenis](https://github.com/studio-freight/lenis)
+- [Tempus](https://github.com/studio-freight/tempus)
+- [Hamo](https://github.com/studio-freight/hamo)
+- [PNPM](https://pnpm.io/)
+- [Next.js](https://nextjs.org/)
+- [Three.js](https://threejs.org/)
+- [@react-three/drei](https://github.com/pmndrs/drei)
+- [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)
+- [GSAP](https://greensock.com/gsap/)
+- [Embla Carousel](https://github.com/davidcetinkaya/embla-carousel)
+- Sass (Modules)
+- [Zustand](https://github.com/pmndrs/zustand)
+- [React Hook Form](https://react-hook-form.com/)
+- GraphQL (CMS API)
+- [Next-Sitemap](https://github.com/iamvishnusankar/next-sitemap) (postbuild script)
+- [@svgr/webpack](https://github.com/gregberge/svgr/tree/main) (SVG Imports in `next.config.js`)
+
+## Code Style & Linting
+
+- Eslint ([Next](https://nextjs.org/docs/basic-features/eslint#eslint-config) and [Prettier](https://github.com/prettier/eslint-config-prettier) plugins)
+- [Prettier](https://prettier.io/) with the following settings available in `.pretierrc`:
+  ```json
+  {
+    "endOfLine": "auto",
+    "semi": false,
+    "singleQuote": true
+  }
+  ```
+- [Husky + lint-staged precommit hooks](https://github.com/okonet/lint-staged)
+
+## Third Party
+
+- [Contentful Headless CMS (GraphQL API)](https://contentful.com/)
+- [Mailchimp CRM](https://mailchimp.com/)
+- [Hubspot CRM](https://hubspot.com/)
+- [Vercel (Hosting & Continuous Deployment)](https://vercel.com/home)
+- [GitHub Versioning](https://github.com/)
+
+## Folder Structure
+
+Alongside the usual Next.js folder structure (`/public`, `/pages`, etc.) We've added a few other folders to keep the code easier to read:
+
+- **/assets:** General Images/Videos and SVGs
+- **/components:** Reusable components with their respective Sass file
+- **/contentful:** Fragments/Queries/Renderers
+- **/config:** General settings (mostly Leva for now)
+- **/hooks:** Reusable Custom Hooks
+- **/layouts:** High level layout component
+- **/lib:** Reusable Scripts and State Store
+- **/styles:** Global styles and Sass partials

README.md

@@ -0,0 +1,83 @@
+[![SATUS](https://assets.studiofreight.com/satus/header.png)](https://github.com/studio-freight/satus)
+
+<!-- <p align="center">
+  <a aria-label="Vercel logo" href="https://vercel.com">
+    <img src="https://badgen.net/badge/icon/Next?icon=zeit&label&color=black&labelColor=black">
+  </a>
+  <br/>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/swr">
+    <img alt="" src="https://badgen.net/npm/v/swr?color=black&labelColor=black">
+  </a>
+  <a aria-label="Package size" href="https://bundlephobia.com/result?p=swr">
+    <img alt="" src="https://badgen.net/bundlephobia/minzip/swr?color=black&labelColor=black">
+  </a>
+  <a aria-label="License" href="https://github.com/vercel/swr/blob/main/LICENSE">
+    <img alt="" src="https://badgen.net/npm/license/swr?color=black&labelColor=black">
+  </a>
+</p> -->
+
+## Introduction
+
+Satūs means start, beginning, planting, it's a set of tools we use as a template when starting a new project.
+
+<br/>
+
+## Composition
+
+This starter kit is composed of:
+
+- [Next.js](https://nextjs.org)
+- [Zustand](https://github.com/pmndrs/zustand)
+- [React Spring](https://github.com/pmndrs/react-spring)
+- [Embla](https://embla-carousel.com)
+- [Lenis](https://github.com/studio-freight/lenis)
+- [Clsx](https://www.npmjs.com/package/clsx)
+- From [Radix UI](https://www.radix-ui.com/):
+  - [Accordion](https://www.radix-ui.com/docs/primitives/components/accordion)
+
+<br/>
+
+## Features
+
+This starter kit is composed of:
+
+- SVG import through [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
+- Sass architecture and tooling:
+  - To VW Functions
+  - Reset
+  - Easings
+- Hooks:
+  - provided by @studio-freight/hamo
+  - - useScroll
+- Custom Cursor support
+- Real Viewport component
+- Grid Debugger
+- Github workflow to render lighthouse on slack:
+  make sure you update the `vercel_project_id` in `.github/workflows/lighthouse-on-vercel-preview-url.yml` to your Vercel project id.
+
+<br/>
+
+## Flavors
+
+- [Light](https://github.com/studio-freight/satus) (you're here)
+- [With Shopify](https://github.com/studio-freight/satus/tree/with-shopify)
+- [With Contentful](https://github.com/studio-freight/satus/tree/with-contentful)
+- [With react-three-fiber](https://github.com/studio-freight/satus/tree/with-r3f)
+- [With OGL](https://github.com/studio-freight/satus/tree/with-ogl)
+
+<br/>
+
+## Authors
+
+This toolkit is curated and maintained by the Studio Freight Things team:
+
+- Clement Roche ([@clementroche\_](https://twitter.com/clementroche_)) – [Studio Freight](https://studiofreight.com)
+- Guido Fier ([@uido15](https://twitter.com/uido15)) – [Studio Freight](https://studiofreight.com)
+- Leandro Soengas ([@lsoengas](https://twitter.com/lsoengas)) - [Studio Freight](https://studiofreight.com)
+- Franco Arza ([@arzafran](https://twitter.com/arzafran)) - [Studio Freight](https://studiofreight.com)
+
+<br/>
+
+## License
+
+[The MIT License.](https://opensource.org/licenses/MIT)

checklist.md

@@ -0,0 +1,5 @@
+- [ ] preload `.woff2` fonts (see pages/\_document.js)
+- [ ] add metadata to pages
+- [ ] add `sizes` and `alt` props to `<Image/>` components
+- [ ] throw 404 for not existing pages
+- [ ] load non imperatives svg dynamically with `ssr:false`

components/footer/footer.module.scss

@@ -0,0 +1,9 @@
+.footer {
+  color: var(--theme-primary);
+  background-color: var(--theme-secondary);
+  padding: mobile-vw(20px) 0;
+
+  @include desktop {
+    padding: desktop-vw(40px) 0;
+  }
+}

components/footer/index.js

@@ -0,0 +1,16 @@
+import { Link } from '@studio-freight/compono'
+import s from './footer.module.scss'
+
+export function Footer() {
+  return (
+    <footer className={s.footer}>
+      <div className="layout-block">
+        <h2>
+          <Link href="mailto:[email protected]">mail</Link>
+          <Link href="/contact">contact</Link>
+          <Link>twitter</Link>
+        </h2>
+      </div>
+    </footer>
+  )
+}

components/header/header.module.scss

@@ -0,0 +1,21 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  // color: var(--white);
+  color: var(--theme-secondary);
+  padding: mobile-vw(20px) 0;
+
+  @include desktop {
+    padding: desktop-vw(40px) 0;
+  }
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: 2;
+  }
+}