.babelrc

 {
   "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"],
-  "comments": false
+  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
+  "comments": true
 }

.browserslistrc

+>0.2%
+not op_mini all
+Safari > 15
+Firefox >= 115
+Firefox ESR
+Android > 4
+not dead

.eslintignore

-build/*.js
-config/*.js

.eslintrc.js

-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
-    'standard',
-    'plugin:vue/recommended'
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue'
-  ],
-  // add your custom rules here
-  rules: {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'vue/require-prop-types': 0
-  }
-}

.gitattributes

+/build/commit_hash.js export-subst

.gitignore

@@ -7,3 +7,6 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
+src/assets/emoji.json
+logs/
+__screenshots__/

.gitlab-ci.yml

 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:8
+image: node:18
 
 stages:
+  - check-changelog
   - lint
   - build
   - test
   - deploy
 
+# https://git.pleroma.social/help/ci/yaml/workflow.md#switch-between-branch-pipelines-and-merge-request-pipelines
+workflow:
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
+      when: never
+    - if: $CI_COMMIT_BRANCH
+
+check-changelog:
+  stage: check-changelog
+  image: alpine
+  rules:
+    - if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME =~ /^renovate/
+      when: never
+    - if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME == 'weblate'
+      when: never
+    - if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
+  before_script: ''
+  after_script: ''
+  cache: {}
+  script:
+    - apk add git
+    - sh ./tools/check-changelog
+
 lint:
   stage: lint
   script:
     - yarn
-    - npm run lint
+    - yarn lint
+    - yarn stylelint
 
 test:
   stage: test
+  tags:
+    - amd64
+    - himem
   variables:
     APT_CACHE_DIR: apt-cache
   script:
     - mkdir -pv $APT_CACHE_DIR && apt-get -qq update
-    - apt install firefox-esr -y --no-install-recommends
-    - firefox --version
     - yarn
-    - yarn unit
+    - yarn playwright install firefox
+    - yarn playwright install-deps
+    - yarn unit-ci
+  artifacts:
+    # When the test fails, upload screenshots for better context on why it fails
+    paths:
+      - test/**/__screenshots__
+    when: on_failure
 
 build:
   stage: build
+  tags:
+    - amd64
+    - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/

.gitlab/issue_templates/Bug.md

+# Environment info
+
+<!-- Everything is optional and where applicable but the more information the better. -->
+* Browser, version, OS, platform:
+* Instance URL:
+* Frontend version (see settings -> about):
+* Backend version (see settings -> about):
+* Browser extensions (ublock, rikaichamp etc):
+* Known instance/user customizations (i.e. pleromafe mods/forks, instance styles etc)
+
+# Bug description & reproduction steps
+
+<!-- Type out here how to reproduce the bug, what goes wrong and what should go right -->
+<!-- Screenshots and videos help a lot ;) any observations might also help -->
+<!-- Also mention if there any errors in browser's console if relevant -->
+
+# Bug seriousness
+
+<!-- Everything is optional and free-form -->
+* How annoying it is:
+* How often does it happen:
+* How many people does it affect:
+* Is there a workaround for it:
+
+/label ~Bug

.gitlab/issue_templates/Suggestion.md

+# Behavior suggestion/Feature request
+<!-- 
+Type out what you want to see changed or what feature you want to see added to 
+PleormaFE. Please also explain how it would benefit users (or admins/moderators)
+and what intended usecase is. Any background information (i.e. porting behavior
+from other frontends/services, specific situations, personal preferences etc.) 
+as well as examples would be greatly appreciated.
+-->
+
+/label ~suggestion
+

.gitlab/issue_templates/default.md

+<!-- 
+please use one of the templates if applicable, otherwise - type out here 
+in free-form
+-->
+
+/label ~needs-triage
+

.gitlab/merge_request_templates/default.md

+<!-- 
+Feel free to submit merge requests that are work-in-progress, but mark them as
+Draft: or WIP:.
+Merge requests that have Draft or WIP status will not be merged and have less chances
+of being reviewed, but you can still ask people to take a look if you need advice.
+-->
+# Changes
+
+*
+*
+*
+
+<!-- List what your merge request changes and how -->
+<!-- 
+Try to not to break existing behavior, if your changes do break existing behavior 
+make it configurable to toggle between old behavior and new. Which one should be
+default is up to discussion.
+-->
+<!-- If your merge request resolves some issue link it like so: "Closes #99999" -->
+<!-- 
+If merge request adds some new feature that depends on backend: 
+
+1. Make sure it gracefully degrades if backend hasn't been updated to support the feature,
+   we try to make PleromaFE compatible with older versions of BE so that people can still
+   update frontend safely without updating backend since it's costly and much riskier. 
+2. Link related BE merge request here 
+-->
+<!-- Screenshots are welcome -->
+
+/label ~needs-review

.mailmap

+rinpatch <rin@patch.cx> <rinpatch@sdf.org>
\ No newline at end of file

.node-version

-7.2.1
+18.20.7

.stylelintrc.json

+{
+  "extends": [
+    "stylelint-rscss/config",
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-html",
+    "stylelint-config-recommended-vue/scss"
+  ],
+  "rules": {
+    "declaration-no-important": true,
+    "rscss/no-descendant-combinator": false,
+    "rscss/class-format": [
+      false,
+      {
+        "component": "pascal-case",
+        "variant": "^-[a-z]\\w+",
+        "element": "^[a-z]\\w+"
+      }
+    ],
+    "selector-class-pattern": null,
+    "import-notation": null,
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "scss/operator-no-newline-after": null,
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      {
+        "ignoreShorthands": [
+          "grid-template",
+          "margin",
+          "padding",
+          "border",
+          "border-width",
+          "border-style",
+          "border-color",
+          "border-radius"
+        ]
+      }
+    ]
+  }
+}

CONTRIBUTORS.md

@@ -3,9 +3,12 @@ Contributors of this project.
 - Constance Variable (lambadalambda@social.heldscal.la): Code
 - Coco Snuss (cocosnuss@social.heldscal.la): Code
 - wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
+- eris (eris@disqordia.space): Code
 - dtluna (dtluna@social.heldscal.la): Code
 - sonyam (sonyam@social.heldscal.la): Background images
 - hakui (hakui@freezepeach.xyz): CSS and styling
 - shpuld (shpuld@shitposter.club): CSS and styling
 - Vincent Guth (https://unsplash.com/photos/XrwVIFy6rTw): Background images.
 - hj (hj@shigusegubu.club): Code
+- Sean King (seanking@kazv.moe): Code
+- tusooa (tusooa@kazv.moe): Code

README.md

 # Pleroma-FE 
 
-> A single column frontend designed for Pleroma.
+> Highly-customizable frontend designed for Pleroma.
 
-![screenshot](https://i.imgur.com/DJVqSJ0.png)
+![screenshot](./image-1.png)
 
 # For Translators
 
-To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
+To translate Pleroma-FE, use our weblate server: https://translate.pleroma.social/. If you need to add your language it should be added as a json file in [src/i18n/](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/) folder and added in a list within [src/i18n/languages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/languages.js). 
 
-# FOR ADMINS
+Pleroma-FE will set your language by your browser locale, but you can change language in settings.
 
-You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box.
+# For instance admins
+You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box. Information of customizing PleromaFE settings/defaults is in our [guide](https://docs-develop.pleroma.social/frontend/CONFIGURATION/) and in case you want to build your own custom version there's [another](https://docs-develop.pleroma.social/frontend/HACKING/)
 
-## Build Setup
+# Build Setup
 
 ``` bash
 # install dependencies
@@ -20,13 +21,13 @@ npm install -g yarn
 yarn
 
 # serve with hot reload at localhost:8080
-npm run dev
+yarn dev
 
 # build for production with minification
-npm run build
+yarn build
 
 # run unit tests
-npm run unit
+yarn unit
 ```
 
 # For Contributors:
@@ -40,10 +41,4 @@ FE Build process also leaves current commit hash in global variable `___pleromaf
 
 # Configuration
 
-Edit config.json for configuration.
-
-## Options
-
-### Login methods
-
-```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.
+Set configuration settings in AdminFE, additionally you can edit config.json. For more details see [documentation](https://docs-develop.pleroma.social/frontend/CONFIGURATION/).

build/build.js

-// https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
-
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
-
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
-
-var spinner = ora('building for production...')
-spinner.start()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-})

build/check-versions.js → build/check-versions.mjs

-var semver = require('semver')
-var chalk = require('chalk')
-var packageConfig = require('../package.json')
-var exec = function (cmd) {
-  return require('child_process')
-    .execSync(cmd).toString().trim()
-}
+import semver from 'semver'
+import chalk from 'chalk'
+
+import packageConfig from '../package.json' with { type: 'json' }
 
 var versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
     versionRequirement: packageConfig.engines.node
-  },
-  {
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
   }
 ]
 
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+export default function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -32,14 +24,12 @@ module.exports = function () {
   }
 
   if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
+    console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.warn('  ' + warning)
     }
-    console.log()
+    console.warn()
     process.exit(1)
   }
 }

build/commit_hash.js

+import childProcess from 'child_process'
+
+export const getCommitHash = (() => {
+  const subst = "$Format:%h$"
+  if(!subst.match(/Format:/)) {
+    return subst
+  } else {
+    try {
+      return childProcess
+        .execSync('git rev-parse --short HEAD')
+        .toString()
+        .trim()
+    } catch (e) {
+      console.error('Failed run git:', e)
+      return 'UNKNOWN'
+    }
+  }
+})