WIP

.eslintignore

@@ -1,2 +1,5 @@
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
 experiment
 node_modules

.eslintrc.js

@@ -4,56 +4,25 @@ module.exports = {
     es2021: true,
   },
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    'plugin:react/recommended',
     'airbnb',
-    'prettier',
   ],
-  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 'latest',
+    ecmaVersion: 12,
     sourceType: 'module',
   },
   plugins: [
     'react',
-    '@typescript-eslint'
   ],
   rules: {
     'linebreak-style': 0,
     'no-underscore-dangle': 0,
-
-    "import/prefer-default-export": "off",
-    "import/extensions": "off",
-    "import/no-unresolved": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: true,
-      },
-    ],
-
     'react/no-unstable-nested-components': [
       'error',
       { allowAsProps: true },
     ],
-    "react/jsx-filename-extension": [
-      "error",
-      {
-        extensions: [".tsx", ".jsx"],
-      },
-    ],
-
-    "react/require-default-props": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error",
-
-    "@typescript-eslint/no-unused-vars": "error",
   },
 };

.github/FUNDING.yml

@@ -1 +1,3 @@
-github: true-og
+github: ajbura
+liberapay: ajbura
+open_collective: cinny

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -6,9 +6,9 @@ body:
     attributes:
       value: |
         ## First of all
-        1. Please search for [existing issues](https://github.com/NotAlexNoyle/Versi/issues?q=is%3Aissue) about the problem first.
-        2. Make sure Versi is up to date.
-        3. Make sure it's an issue with Versi and not something else you are using.
+        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
+        2. Make sure Cinny is up to date.
+        3. Make sure it's an issue with Cinny and not something else you are using.
         4. Remember to be friendly.
 
   - type: textarea
@@ -40,12 +40,12 @@ body:
     id: info
     attributes:
       label: Platform and versions
-      description: "Provide OS, browser and Versi version with your Homeserver."
+      description: "Provide OS, browser and Cinny version with your Homeserver."
       placeholder: |
-       1. OS: [e.g. Binbows 10, MacOS]
-       2. Browser: [e.g. pale moon 33, waterfox 105]
-       3. Versi version: [e.g. 1.8.1]
-       4. Matrix homeserver: [e.g. chat.true-og.net]
+       1. OS: [e.g. Windows 10, MacOS]
+       2. Browser: [e.g. chrome 99.5, firefox 97.2]
+       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+       4. Matrix homeserver: [e.g. matrix.org]
       render: shell
     validations:
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
 contact_links:
   - name: 💬 Matrix Chat
-    url: https://chat.true-og.net/
-    about: Ask questions and talk to other Versi users and the maintainers
+    url: https://matrix.to/#/#cinny:matrix.org
+    about: Ask questions and talk to other Cinny users and the maintainers

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,5 @@
+<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
+
 ### Description
 <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 

.github/SECURITY.md

@@ -1,3 +1,3 @@
 # Reporting a Vulnerability
 
-**If you've found a security vulnerability, please report it to admin@true-og.net**
+**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**

.github/renovate.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
-  ],
-  "labels": [ "Dependencies" ],
-  "packageRules": [
-    {
-    "matchUpdateTypes": [ "lockFileMaintenance" ]
-    }
-  ],
-  "lockFileMaintenance": { "enabled": true },
-  "dependencyDashboard": true
-}

.github/workflows/build-pull-request.yml

@@ -1,4 +1,4 @@
-name: Build pull request
+name: 'Build pull request'
 
 on:
   pull_request:
@@ -6,33 +6,33 @@ on:
 
 jobs:
   build-pull-request:
-    name: Build pull request
     runs-on: ubuntu-latest
     env:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v3.4.1
         with:
-          node-version: 18.12.1
-          cache: "npm"
-      - name: Install dependencies
-        run: npm ci
+          node-version: 17.9.0
       - name: Build app
-        run: npm run build
+        run: npm ci && npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v3.1.1
+        uses: actions/upload-artifact@v3.1.0
         with:
-          name: preview
+          name: previewbuild
           path: dist
           retention-days: 1
-      - name: Save pr number
-        run: echo ${PR_NUMBER} > ./pr.txt
-      - name: Upload pr number
-        uses: actions/upload-artifact@v3.1.1
+      - name: Get PR info
+        uses: actions/github-script@v6.1.1
         with:
-          name: pr
-          path: ./pr.txt
+          script: |
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
+      - name: Upload PR Info
+        uses: actions/upload-artifact@v3.1.0
+        with:
+          name: pr.json
+          path: pr.json
           retention-days: 1

.github/workflows/deploy-pull-request.yml

@@ -1,56 +1,81 @@
-name: Deploy PR to Netlify
-
+name: Upload Preview Build to Netlify
 on:
   workflow_run:
       workflows: ["Build pull request"]
-      types: [completed]
-
+      types:
+        - completed
 jobs:
-  deploy-pull-request:
-    name: Deploy pull request
-    runs-on: ubuntu-latest
+  get-build-and-deploy:
     permissions:
       contents: read
       pull-requests: write
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
-      - name: Download pr number
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
-        with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: pr
-      - name: Output pr number
-        id: pr
-        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
+      # There's a 'download artifact' action but it hasn't been updated for the
+      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
+      # so instead we get this mess:
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
+        uses: actions/github-script@v6.1.1
         with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: preview
-          path: dist
+          script: |
+            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: ${{github.event.workflow_run.id }},
+            });
+            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "previewbuild"
+            })[0];
+            var download = await github.rest.actions.downloadArtifact({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              artifact_id: matchArtifact.id,
+              archive_format: 'zip',
+            });
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
+            var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "pr.json"
+            })[0];
+            var download = await github.rest.actions.downloadArtifact({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              artifact_id: prInfoArtifact.id,
+              archive_format: 'zip',
+            });
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
+      - name: Extract Artifacts
+        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
+      - name: Read PR Info
+        id: readctx
+        uses: actions/github-script@v6.1.1
+        with:
+          script: |
+            var fs = require('fs');
+            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
+            console.log(`::set-output name=prnumber::${pr.number}`);
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
           publish-dir: dist
-          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
-          alias: ${{ steps.pr.outputs.id }}
+          deploy-message: "Deploy from GitHub Actions"
           # These don't work because we're in workflow_run
           enable-pull-request-comment: false
           enable-commit-comment: false
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
         timeout-minutes: 1
-      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
+      - name: Edit PR Description
+        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
-          message: |
+          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+          description-message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -9,11 +9,13 @@ on:
 jobs:
   docker-build:
     runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
       - name: Build Docker image
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v3.1.1
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -1,26 +0,0 @@
-name: NPM Lockfile Changes
-
-on:
-  pull_request:
-    paths:
-      - 'package-lock.json'
-
-jobs:
-  lockfile_changes:
-    runs-on: ubuntu-latest
-    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3.2.0
-      - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # Optional inputs, can be deleted safely if you are happy with default values.
-          collapsibleThreshold: 25
-          failOnDowngrade: false
-          path: package-lock.json
-          updateComment: true

.github/workflows/netlify-dev.yml

@@ -1,4 +1,4 @@
-name: Deploy to Netlify (dev)
+name: 'Deploy to Netlify (dev)'
 
 on:
   push:
@@ -7,31 +7,23 @@ on:
 
 jobs:
   deploy-to-netlify:
-    name: Deploy to Netlify
+    name: 'Deploy'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.2.0
+        uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v3.4.1
         with:
-          node-version: 18.12.1
-          cache: "npm"
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+          node-version: 17.9.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
         with:
-          publish-dir: dist
-          deploy-message: "Dev deploy ${{ github.sha }}"
-          enable-commit-comment: false
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          production-deploy: true
-          github-deployment-environment: nightly
-          github-deployment-description: 'Nightly deployment on each commit to dev branch'
-        env:
+          install_command: "npm ci"
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
-        timeout-minutes: 1
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.github/workflows/prod-deploy.yml

@@ -0,0 +1,104 @@
+name: 'Production deploy'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  create-release-tar:
+    name: 'Create release tar'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+      - name: Get version from tag
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Create tar.gz
+        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Sign tar.gz
+        run: |
+          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
+          # Sadly a few lines in the private key match a few lines in the public key,
+          # As a result just --export --armor gives us a few lines replaced with ***
+          # making it useless for importing the signing key. Instead, we dump it as
+          # non-armored and hex-encode it so that its printable.
+          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
+          gpg --export | xxd -p
+          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
+      - name: Upload tagged release
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
+        with:
+          files: |
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
+
+  deploy-to-netlify:
+    name: 'Deploy to Netlify'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+        with:
+          install_command: "npm ci"
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true
+
+  push-to-dockerhub:
+    name: Push Docker image to Docker Hub, ghcr
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Login to the Container registry
+        uses: docker/login-action@v2.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4.0.1
+        with:
+          images: |
+            ${{ secrets.DOCKER_USERNAME }}/cinny
+            ghcr.io/${{ github.repository }}
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3.1.1
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -4,4 +4,3 @@ node_modules
 devAssets
 
 .DS_Store
-android

.npmrc

@@ -1,3 +0,0 @@
-legacy-peer-deps=true
-save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/

.prettierignore

@@ -1,6 +0,0 @@
-dist
-node_modules
-package.json
-package-lock.json
-LICENSE
-README.md

.prettierrc.json

@@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-}

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

CONTRIBUTING.md

@@ -0,0 +1,44 @@
+# Contributing to Cinny
+
+First off, thanks for taking the time to contribute! ❤️
+
+All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
+
+> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+> - Star the project
+> - Tweet about it (tag @cinnyapp)
+> - Refer this project in your project's readme
+> - Mention the project at local meetups and tell your friends/colleagues
+> - [Donate to us](https://cinny.in/#sponsor)
+
+## Bug reports
+
+Bug reports and feature suggestions must use descriptive and concise titles and be submitted to [GitHub Issues](https://github.com/ajbura/cinny/issues). Please use the search function to make sure that you are not submitting duplicates, and that a similar report or request has not already been resolved or rejected.
+
+## Pull requests
+
+> ### Legal Notice
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
+
+**NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
+
+**Please use clean, concise titles for your pull requests.** We use commit squashing, so the final commit in the dev branch will carry the title of the pull request. For easier sorting in changelog, start your pull request titles using one of the verbs "Add", "Change", "Remove", or "Fix" (present tense).
+
+Example:
+
+|Not ideal|Better|
+|---|----|
+|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
+
+It is not always possible to phrase every change in such a manner, but it is desired.
+
+**The smaller the set of changes in the pull request is, the quicker it can be reviewed and merged.** Splitting tasks into multiple smaller pull requests is often preferable.
+
+Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
+
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+
+## Helpful links
+- [BEM methodology](http://getbem.com/introduction/)
+- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
+- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/19.2.0/index.html)

Dockerfile

@@ -0,0 +1,18 @@
+## Builder
+FROM node:17.9.0-alpine3.15 as builder
+
+WORKDIR /src
+
+COPY package.json package-lock.json /src/
+RUN npm ci
+COPY . /src/
+RUN npm run build
+
+
+## App
+FROM nginx:1.23.1-alpine
+
+COPY --from=builder /src/dist /app
+
+RUN rm -rf /usr/share/nginx/html \
+  && ln -s /app /usr/share/nginx/html

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,42 +1,90 @@
-# Versi
+# Cinny
 <p>
-    <a href="https://github.com/NotAlexNoyle/Versi/releases">Download</a> | 
-    <a href="https://mastodon.gamedev.place/@trueog">Mastodon</a> | 
-    <a href="https://store.trueog.net">Donate</a> | 
-    <a href="https://true-og.net">Join TrueOG Network</a>
-    <br>
-    <br>
-    <img alt="Versi Logo" src="https://raw.githubusercontent.com/NotAlexNoyle/Versi/dev/assets/versi-logo.png"></a>
+    <a href="https://github.com/ajbura/cinny/releases">
+        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
+    <a href="https://hub.docker.com/r/ajbura/cinny">
+        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
+    <a href="https://fosstodon.org/@cinnyapp">
+        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
+    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
+        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
+    <a href="https://cinny.in/#sponsor">
+        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
 </p>
 
-Versi is a liberated MIT-licensed fork of [Cinny](https://github.com/cinnyapp/cinny) 2.2.4 maintained by and for [TrueOG Network](https://true-og.net/).
-
-Versi is named for Calotes versicolor, a predator of the Cinnyris asiaticus. It also means "an account or description from a particular point of view, especially as contrasted with another account.", which calls attention to the permissive vs copyleft licensing conflict between Versi and Cinny.
-
-- [Roadmap](https://true-og.net/todo-list)
-- [Contributing](https://true-og.net/TrueOG-Contributor-Guide.pdf)
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
+- [Roadmap](https://github.com/ajbura/cinny/projects/11)
+- [Contributing](./CONTRIBUTING.md)
 
 ## Getting started
-Our web app is available at https://chat.true-og.net and gets updated upon each new release.
+Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
 
-You can also download our desktop app, [Versi-Desktop](https://github.com/NotAlexNoyle/Versi-Desktop).
-
-To host Versi on your own, download tarball of the app from the latest [GitHub release](https://github.com/NotAlexNoyle/Versi/releases/latest).
-
-You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot.
+You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
+To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
 To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
 
+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+```
+docker pull ajbura/cinny
+```
+or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
+```
+docker pull ghcr.io/cinnyapp/cinny:latest
+```
+
 <details>
 <summary>PGP Public Key to verify tarball</summary>
 
 ```
-TBA on first release.
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+UeGsouhyuITLwEhScounZDqop+Dx
+=Zg+6
+-----END PGP PUBLIC KEY BLOCK-----
 ```
 </details>
 
 ## Local development
-> We recommend using [nvm](https://github.com/nvm-sh/nvm) to create a dedicated node environment for each project you work on.
+> We recommend using a version manager as versions change very quickly. You will likely need to switch 
+between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
 
 Execute the following commands to start a development server:
 ```sh
@@ -44,22 +92,30 @@ npm ci # Installs all dependencies
 npm start # Serve a development version
 ```
 
-To build Versi:
+To build the app:
 ```sh
 npm run build # Compiles the app into the dist/ directory
 ```
 
-## Changes
-- Changed branding from Cinny to Versi.
-- Updated dependencies, patched security vulnerabilities.
-- Close settings and search with escape key (credit to MyBeansAreBaked).
+### Running with Docker
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
+use this locally, you can build the container like so:
+```
+docker build -t cinny:latest .
+```
+
+You can then run the container you've built with a command similar to this:
+```
+docker run -p 8080:80 cinny:latest
+```
+
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
+
 
 ## License
 
 Copyright (c) 2021-present Ajay Bura (ajbura)
 
-Code licensed under the [MIT License](https://raw.githubusercontent.com/NotAlexNoyle/Versi/dev/LICENSE.md).
+Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 
-Original graphics from [Cinny](https://github.com/cinnyapp/cinny) licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
-
-Original graphics from [TrueOG Network](https://github.com/true-og/true-og) are released into the public domain via [The Unlicense](https://github.com/true-og/true-og/blob/main/LICENSE).
+Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

capacitor.config.ts

@@ -1,10 +0,0 @@
-import { CapacitorConfig } from '@capacitor/cli';
-
-const config: CapacitorConfig = {
-  appId: 'net.trueog.versi',
-  appName: 'Versi',
-  webDir: 'dist',
-  bundledWebRuntime: false,
-};
-
-export default config;

config.json

@@ -1,8 +1,10 @@
 {
   "defaultHomeserver": 3,
   "homeserverList": [
+    "envs.net",
+    "halogen.city",
+    "kde.org",
     "matrix.org",
-    "chat.true-og.net",
     "mozilla.org"
   ],
   "allowCustomHomeservers": true

contrib/nginx/cinny.domain.tld.conf

@@ -1,7 +1,7 @@
 server {
 	listen 80;
 	listen [::]:80;
-	server_name versi.domain.tld;
+	server_name cinny.domain.tld;
 
 	location / {
 		return 301 https://$host$request_uri;
@@ -15,10 +15,10 @@ server {
 server {
 	listen 443 ssl http2;
 	listen [::]:443 ssl;
-	server_name versi.domain.tld;
+	server_name cinny.domain.tld;
 
 	location / {
-		root /opt/versi/dist/;
+		root /opt/cinny/dist/;
 		index index.html;
 	}
 	location ~* ^\/(login|register) {

index.html

@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Versi</title>
-    <meta name="name" content="Versi" />
-    <meta name="author" content="TrueOG Network" />
-    <meta
-      name="description"
-      content="A liberated MIT-licensed fork of Cinny 2.2.4 maintained by and for TrueOG Network. "
-    />
-    <meta
-      name="keywords"
-      content="versi, versiapp, versichat, matrix, matrix client, matrix.org"
-    />
-
-    <meta property="og:title" content="Versi" />
-    <meta property="og:url" content="https://chat.true-og.net" />
-    <meta property="og:image" content="https://raw.githubusercontent.com/NotAlexNoyle/Versi/dev/assets/versi-logo.png" />
-    <meta
-      property="og:description"
-      content="A liberated MIT-licensed fork of Cinny 2.2.4 maintained by and for TrueOG Network. "
-    />
-    <meta name="theme-color" content="#000000" />
-
-    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
-
-    <link rel="manifest" href="./manifest.json" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Versi" />
-    <meta name="apple-mobile-web-app-title" content="Versi" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="./public/res/apple/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="./public/res/apple/apple-touch-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="./public/res/apple/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="./public/res/apple/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="./public/res/apple/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="./public/res/apple/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="./public/res/apple/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="./public/res/apple/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="167x167"
-      href="./public/res/apple/apple-touch-icon-167x167.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./public/res/apple/apple-touch-icon-180x180.png"
-    />
-  </head>
-  <body id="appBody">
-    <script>
-      window.global ||= window;
-    </script>
-    <div id="root"></div>
-    <audio id="notificationSound">
-      <source src="./public/sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-      <source src="./public/sound/invite.ogg" type="audio/ogg" />
-    </audio>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>

package.json

@@ -1,87 +1,83 @@
 {
-  "name": "versi",
-  "version": 0.1,
-  "description": "A liberated MIT-licensed fork of Cinny 2.2.4 maintained by and for TrueOG Network.",
+  "name": "cinny",
+  "version": "2.1.2",
+  "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "node": ">=16.0.0"
+    "npm": ">=6.14.8 <=8.5.5",
+    "node": ">=14.15.0 <=17.9.0"
   },
   "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
-    "check:eslint": "eslint src/*",
-    "check:prettier": "prettier --check .",
-    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "start": "webpack serve --config ./webpack.dev.js --open",
+    "build": "webpack --config ./webpack.prod.js"
   },
   "keywords": [],
-  "author": "TrueOG Network",
+  "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@capacitor/android": "4.7.1",
-    "@capacitor/core": "4.7.1",
-    "@fontsource/inter": "4.5.14",
-    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.6",
-    "@lzy1960/google-translate": "0.2.6",
-    "@matrix-org/olm": "3.2.14",
-    "@tippyjs/react": "4.2.6",
-    "blurhash": "2.0.4",
-    "browser-encrypt-attachment": "0.3.0",
-    "dateformat": "5.0.3",
-    "emojibase-data": "7.0.1",
-    "file-saver": "2.0.5",
-    "flux": "4.0.3",
-    "formik": "2.2.9",
-    "google-translate-api-browser": "5.0.0",
-    "html-react-parser": "3.0.4",
-    "i18next": "22.4.9",
-    "i18next-browser-languagedetector": "7.0.1",
-    "i18next-http-backend": "2.1.1",
-    "katex": "0.16.10",
-    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "24.1.0",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.2.0",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
-    "react-google-recaptcha": "2.1.0",
-    "react-i18next": "12.1.5",
-    "react-modal": "3.16.1",
-    "sanitize-html": "2.13.0",
-    "tippy.js": "6.3.7",
-    "twemoji": "14.0.2"
+    "@khanacademy/simple-markdown": "^0.8.3",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+    "@tippyjs/react": "^4.2.6",
+    "babel-polyfill": "^6.26.0",
+    "blurhash": "^1.1.5",
+    "browser-encrypt-attachment": "^0.3.0",
+    "dateformat": "^5.0.3",
+    "emojibase-data": "^7.0.1",
+    "file-saver": "^2.0.5",
+    "flux": "^4.0.3",
+    "formik": "^2.2.9",
+    "html-react-parser": "^3.0.1",
+    "katex": "^0.16.0",
+    "linkify-html": "^4.0.0-beta.5",
+    "linkifyjs": "^4.0.0-beta.5",
+    "matrix-js-sdk": "^19.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-autosize-textarea": "^7.1.0",
+    "react-blurhash": "^0.1.3",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
+    "react-dom": "^17.0.2",
+    "react-google-recaptcha": "^2.1.0",
+    "react-modal": "^3.15.1",
+    "sanitize-html": "^2.7.1",
+    "tippy.js": "^6.3.7",
+    "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@capacitor/assets": "3.0.5",
-    "@capacitor/cli": "4.8.2",
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-    "@rollup/plugin-inject": "5.0.3",
-    "@rollup/plugin-wasm": "6.1.1",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "3.0.0",
-    "buffer": "6.0.3",
-    "eslint": "8.29.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "mini-svg-data-uri": "1.4.4",
-    "prettier": "2.8.1",
-    "sass": "1.56.2",
-    "typescript": "4.9.4",
-    "vite": "4.5.3",
-    "vite-plugin-static-copy": "0.13.0"
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "assert": "^2.0.0",
+    "babel-loader": "^8.2.5",
+    "browserify-fs": "^1.0.0",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.22.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "favicons": "^6.2.2",
+    "favicons-webpack-plugin": "^5.0.2",
+    "html-loader": "^4.1.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "path-browserify": "^1.0.1",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0",
+    "webpack-merge": "^5.7.3"
   }
 }

public/font/supreme/README.md

@@ -0,0 +1,41 @@
+# Installing Webfonts
+Follow these simple Steps.
+
+## 1.
+Put `supreme/` Folder into a Folder called `fonts/`.
+
+## 2.
+Put `supreme.css` into your `css/` Folder.
+
+## 3. (Optional)
+You may adapt the `url('path')` in `supreme.css` depends on your Website Filesystem.
+
+## 4.
+Import `supreme.css` at the top of you main Stylesheet.
+
+```
+@import url('supreme.css');
+```
+
+## 5.
+
+
+```
+font-family: 'Supreme-Variable';
+font-family: 'Supreme-VariableItalic';
+font-family: 'Supreme-Thin';
+font-family: 'Supreme-ThinItalic';
+font-family: 'Supreme-Extralight';
+font-family: 'Supreme-ExtralightItalic';
+font-family: 'Supreme-Light';
+font-family: 'Supreme-LightItalic';
+font-family: 'Supreme-Regular';
+font-family: 'Supreme-Italic';
+font-family: 'Supreme-Medium';
+font-family: 'Supreme-MediumItalic';
+font-family: 'Supreme-Bold';
+font-family: 'Supreme-BoldItalic';
+font-family: 'Supreme-Extrabold';
+font-family: 'Supreme-ExtraboldItalic';
+```
+

public/font/supreme/css/supreme.css

@@ -0,0 +1,175 @@
+@font-face {
+  font-family: 'Supreme-Variable';
+  src: url('../fonts/Supreme-Variable.woff2') format('woff2'),
+       url('../fonts/Supreme-Variable.woff') format('woff'),
+       url('../fonts/Supreme-Variable.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-VariableItalic';
+  src: url('../fonts/Supreme-VariableItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-VariableItalic.woff') format('woff'),
+       url('../fonts/Supreme-VariableItalic.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Thin';
+  src: url('../fonts/Supreme-Thin.woff2') format('woff2'),
+       url('../fonts/Supreme-Thin.woff') format('woff'),
+       url('../fonts/Supreme-Thin.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ThinItalic';
+  src: url('../fonts/Supreme-ThinItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ThinItalic.woff') format('woff'),
+       url('../fonts/Supreme-ThinItalic.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extralight';
+  src: url('../fonts/Supreme-Extralight.woff2') format('woff2'),
+       url('../fonts/Supreme-Extralight.woff') format('woff'),
+       url('../fonts/Supreme-Extralight.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtralightItalic';
+  src: url('../fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtralightItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtralightItalic.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Light';
+  src: url('../fonts/Supreme-Light.woff2') format('woff2'),
+       url('../fonts/Supreme-Light.woff') format('woff'),
+       url('../fonts/Supreme-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-LightItalic';
+  src: url('../fonts/Supreme-LightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-LightItalic.woff') format('woff'),
+       url('../fonts/Supreme-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Regular';
+  src: url('../fonts/Supreme-Regular.woff2') format('woff2'),
+       url('../fonts/Supreme-Regular.woff') format('woff'),
+       url('../fonts/Supreme-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Italic';
+  src: url('../fonts/Supreme-Italic.woff2') format('woff2'),
+       url('../fonts/Supreme-Italic.woff') format('woff'),
+       url('../fonts/Supreme-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Medium';
+  src: url('../fonts/Supreme-Medium.woff2') format('woff2'),
+       url('../fonts/Supreme-Medium.woff') format('woff'),
+       url('../fonts/Supreme-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-MediumItalic';
+  src: url('../fonts/Supreme-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-MediumItalic.woff') format('woff'),
+       url('../fonts/Supreme-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Bold';
+  src: url('../fonts/Supreme-Bold.woff2') format('woff2'),
+       url('../fonts/Supreme-Bold.woff') format('woff'),
+       url('../fonts/Supreme-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-BoldItalic';
+  src: url('../fonts/Supreme-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-BoldItalic.woff') format('woff'),
+       url('../fonts/Supreme-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extrabold';
+  src: url('../fonts/Supreme-Extrabold.woff2') format('woff2'),
+       url('../fonts/Supreme-Extrabold.woff') format('woff'),
+       url('../fonts/Supreme-Extrabold.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtraboldItalic';
+  src: url('../fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtraboldItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: italic;
+}
+