feat(web): 🔥✨ rebuild on Next.js

.github/workflows/web.yml

@@ -3,29 +3,34 @@ name: Web - Build & Deploy
 on:
   push:
     branches:
-      - main
-    paths:
-      - .github/workflows/web.yml
-      - web/**
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
+      # - main # TODO: uncomment when merging nextjs to main
+      - nextjs # TODO: remove when merging nextjs to main
     paths:
       - .github/workflows/web.yml
       - web/**
+  # TODO: uncomment when merging nextjs to main
+  # pull_request:
+  #   types: [opened, synchronize, reopened, closed]
+  #   branches:
+  #     - main
+  #   paths:
+  #     - .github/workflows/web.yml
+  #     - web/**
 
 jobs:
   build_and_deploy_staging:
-    name: Build & Deploy to Staging
+    # name: Build & Deploy to Staging
+    name: Build & Deploy to Next.js Staging
 
     runs-on: ubuntu-latest
 
-    if: github.event_name == 'pull_request' && github.event.action != 'closed'
+    # if: github.event_name == 'pull_request' && github.event.action != 'closed'
+    if: github.event_name == 'push'
 
     environment:
-      name: staging-web
-      url: ${{ steps.builddeploy.outputs.static_web_app_url }}
+      name: nextjs-web
+      # url: ${{ steps.builddeploy.outputs.static_web_app_url }}
+      url: https://next.filterlists.com
 
     steps:
       - name: Checkout
@@ -43,89 +48,59 @@ jobs:
         working-directory: ./web
 
       - name: Run Prettier
-        run: npm run prettier:check
+        run: npm run prettier
         working-directory: ./web
 
       - name: Run ESLint
-        run: npm run eslint:check
+        run: npm run lint
         working-directory: ./web
 
-      - name: Build
-        run: npm run build
-        working-directory: ./web
-
-      - name: Copy Static Web App Config
-        run: cp staticwebapp.config.json build/
-        working-directory: ./web
-
-      - name: Deploy
+      - name: Build & Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
         with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_PROD }}
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_NEXTJS_PROD }}
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           action: upload
-          app_location: ./web/build
+          app_location: ./web
           output_location: ""
-          skip_app_build: true
-        continue-on-error: true
 
-  build_and_deploy_production:
-    name: Build & Deploy to Production
+  # build_and_deploy_production:
+  #   name: Build & Deploy to Production
 
-    runs-on: ubuntu-latest
-
-    if: github.event_name == 'push'
-
-    environment:
-      name: production-web
-      url: https://filterlists.com
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: npm
-          cache-dependency-path: web/package-lock.json
+  #   runs-on: ubuntu-latest
 
-      - name: Install
-        run: npm ci
-        working-directory: ./web
+  #   if: github.event_name == 'push'
 
-      - name: Build
-        run: npm run build
-        working-directory: ./web
+  #   environment:
+  #     name: production-web
+  #     url: https://filterlists.com
 
-      - name: Copy Static Web App Config
-        run: cp staticwebapp.config.json build/
-        working-directory: ./web
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
 
-      - name: Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_PROD }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          action: upload
-          app_location: ./web/build
-          output_location: ""
-          skip_app_build: true
+  #     - name: Build & Deploy
+  #       id: builddeploy
+  #       uses: Azure/static-web-apps-deploy@v1
+  #       with:
+  #         azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_PROD }}
+  #         repo_token: ${{ secrets.GITHUB_TOKEN }}
+  #         action: upload
+  #         app_location: ./web
+  #         output_location: ""
 
-  close_pull_request:
-    name: Close Pull Request
+  # close_pull_request:
+  #   name: Close Pull Request
 
-    runs-on: ubuntu-latest
+  #   runs-on: ubuntu-latest
 
-    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+  #   if: github.event_name == 'pull_request' && github.event.action == 'closed'
 
-    steps:
-      - name: Close Pull Request
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_PROD }}
-          action: close
-          app_location: ./web
+  #   steps:
+  #     - name: Close Pull Request
+  #       uses: Azure/static-web-apps-deploy@v1
+  #       with:
+  #         azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STAPP_FILTERLISTS_PROD }}
+  #         action: close
+  #         app_location: ./web

web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

web/.gitignore

@@ -1,25 +1,36 @@
-# https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/gitignore
-
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

web/.prettierrc

@@ -1,3 +1,57 @@
 {
-  "endOfLine": "auto"
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@/env(.*)$",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^[./]"
+  ],
+  "importOrderTypeScriptVersion": "5.0.0",
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": "components/ui/*",
+      "options": {
+        "endOfLine": "lf",
+        "semi": false,
+        "singleQuote": false,
+        "tabWidth": 2,
+        "trailingComma": "es5",
+        "importOrder": [
+          "^(react/(.*)$)|^(react$)",
+          "^(next/(.*)$)|^(next$)",
+          "<THIRD_PARTY_MODULES>",
+          "",
+          "^types$",
+          "^@/types/(.*)$",
+          "^@/config/(.*)$",
+          "^@/lib/(.*)$",
+          "^@/hooks/(.*)$",
+          "^@/components/ui/(.*)$",
+          "^@/components/(.*)$",
+          "^@/registry/(.*)$",
+          "^@/styles/(.*)$",
+          "^@/app/(.*)$",
+          "",
+          "^[./]"
+        ],
+        "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+        "plugins": ["@ianvs/prettier-plugin-sort-imports"]
+      }
+    }
+  ]
 }

web/app/about/page.tsx

@@ -0,0 +1,54 @@
+import { Metadata } from "next";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+import { metadata as siteMetadata, title } from "../metadata";
+
+export const metadata: Metadata = {
+  title: "About | " + title,
+  openGraph: {
+    ...siteMetadata.openGraph,
+    title: "About | " + title,
+  },
+  twitter: {
+    ...siteMetadata.twitter,
+    title: "About | " + title,
+  },
+};
+
+export default function About() {
+  return (
+    <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
+      <Card className="col-span-full w-full" x-chunk="dashboard-01-chunk-4">
+        <CardContent className="space-y-4 p-6 !pt-6">
+          <p>
+            {
+              "FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances."
+            }
+          </p>
+          <p>
+            {
+              "FilterLists helps to protect your privacy and security when using the internet. It provides a comprehensive directory of subscription lists to block advertisements, malware, trackers, and other general annoyances. First, install one of the software tools that supports these lists. Then you can subscribe to a set of these lists inside of that software."
+            }
+          </p>
+          <p>
+            {
+              "Using a software firewall or adblocker has become a key tool in protecting one's privacy online. While the current business model of the \"free\" internet relies upon advertising revenue, publishers have become too flippant about tracking users without their consent. Advertising networks track users' browsing habits around the internet building lucrative profiles to exploit for targeted marketing or big data research. Until internet publishers develop more transparency or a new business model, we must continue to take the protection of our privacy into our hands."
+            }
+          </p>
+          <p>
+            {
+              "Typical adblockers run as an extension in popular web browsers. As we browse the internet, they compare HTTP requests to their list of hosts and filters to selectively block advertisements, trackers, and malware. This filtering helps to protect the surfer's privacy, prevents malvertising attacks, and reduces bandwidth requirements. Thousands of contributors work hard to maintain these FilterLists for anyone to use. Locating and selecting these lists, however, has not historically been very easy. This project was launched in 2015 to solve that problem."
+            }
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}