Replace jQuery with vanilla JS #2130

yucheng11122017 · 2023-02-02T14:02:02Z

What is the purpose of this pull request?

Overview of changes:
Change instances of jQuery to use vanilla JS as requested in #1926
Closes #1926

Anything you'd like to highlight/discuss:

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Replace jQuery with vanilla JS

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Breaking change description:
jQuery is no longer supported in Markbind. This is because jQuery is no longer as relevant since it can be replaced with modern DOM APIs.

If jQuery is used in your website, either

import jQuery
refactor jQuery usage in favour for modern DOM APIs. This website is useful when refactoring jQuery usages.

tlylt

Thanks for the work on this @yucheng11122017

@ang-zeyu I suppose we will want to remove the inclusion of jQuery assets after all direct usage has been removed, is that right? I think Bootstrap 5 no longer needs jQuery.

If so, we will need to remove the static asset and update the documentation, and possibly the functional tests as well.

packages/vue-components/src/directives/Closeable.js

packages/core-web/src/index.js

yucheng11122017 · 2023-02-05T04:58:31Z

@ang-zeyu I suppose we will want to remove the inclusion of jQuery assets after all direct usage has been removed, is that right? I think Bootstrap 5 no longer needs jQuery.

If so, we will need to remove the static asset and update the documentation, and possibly the functional tests as well.

Should I do this in this PR?

ang-zeyu

Should I do this in this PR?

I hadn't investigated thoroughly whether there are other dependencies relying on jQuery, but if you have the time, please do!

It'd be very impractical to retest everything for a dependency removal as well, and we don't have e2e tests. Some basic verification we can do is to open all the pages in the documentation and check for console errors after investigating the dependencies.

Float

I'm not aware of this as well, but if we've confirmed this is undocumented, we can skip testing this.

packages/core-web/src/index.js

packages/vue-components/src/Retriever.vue

packages/vue-components/src/panels/PanelBase.js

…moveJquery

…moveJquery # Conflicts: # packages/vue-components/src/panels/PanelBase.js

tlylt · 2023-04-09T06:53:31Z

Seems to be causing an issue with panel including segments from elsewhere.

Following warning is logged in the browser console:

[vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

31 | 5.1054688 z ">
32 |
33 |
|
34 | <script type="text/javascript">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 | // <-- For SVG support
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 | if ('WebSocket' in window) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
37 | (function() {
| ^^^^^^^^^^^^^^^
38 | function refreshCSS() {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
39 | var sheets = [].slice.call(document.getElementsByTagName("link"));
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
40 | var head = document.getElementsByTagName("head")[0];
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
41 | for (var i = 0; i < sheets.length; ++i) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 | var elem = sheets[i];
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | head.removeChild(elem);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44 | var rel = elem.rel;
| ^^^^^^^^^^^^^^^^^^^^^^^^
45 | if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46 | var url = elem.href.replace(/(&|?)_cacheOverride=\d+/, '');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
47 | elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
48 | }
| ^^^^^^
49 | head.appendChild(elem);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 | }
| ^^^^^
51 | }
| ^^^^
52 | var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
53 | var address = protocol + window.location.host + window.location.pathname + '/ws';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
54 | var socket = new WebSocket(address);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
55 | socket.onmessage = function(msg) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
56 | if (msg.data == 'reload') window.location.reload();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
57 | else if (msg.data == 'refreshcss') refreshCSS();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
58 | };
| ^^^^^
59 | console.log('Live reload enabled.');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 | })();
| ^^^^^^^
61 | }
| ^^
62 | //
| ^^^^
63 | </script>
| ^^^^^^^^^
64 |
| ^^^^^^
65 |
|
66 |
| ^^^^^^^^^^
67 |
Read the action documentation to understand the various configuration options.

| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
68 |
| ^^^^^^

(found in )
w

Reproduce: run markbind serve -d in our docs
Page: /devguide/bootcamp/exploremarkbind
File: docs\devGuide\bootcamp\exploreMarkBind.md
Problematic code: line 335 <panel src="{{baseUrl}}/userGuide/deployingTheSite.md#markbind-action-tip" header="**MarkBind Action**" type="info" expanded/>
preliminary investigation: seems to be due to using a panel with src that is a box?
- visually the component on the page looks fine
- when replacing panel with include the warning is gone
- further investigation is needed

yucheng11122017 · 2023-04-09T13:56:41Z

Seems to be causing an issue with panel including segments from elsewhere.

Following warning is logged in the browser console:

[vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
31 | 5.1054688 z ">
32 |
33 |
|
34 | <script type="text/javascript">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 | // <-- For SVG support
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 | if ('WebSocket' in window) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
37 | (function() {
| ^^^^^^^^^^^^^^^
38 | function refreshCSS() {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
39 | var sheets = [].slice.call(document.getElementsByTagName("link"));
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
40 | var head = document.getElementsByTagName("head")[0];
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
41 | for (var i = 0; i < sheets.length; ++i) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 | var elem = sheets[i];
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | head.removeChild(elem);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44 | var rel = elem.rel;
| ^^^^^^^^^^^^^^^^^^^^^^^^
45 | if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46 | var url = elem.href.replace(/(&|?)_cacheOverride=\d+/, '');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
47 | elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
48 | }
| ^^^^^^
49 | head.appendChild(elem);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 | }
| ^^^^^
51 | }
| ^^^^
52 | var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
53 | var address = protocol + window.location.host + window.location.pathname + '/ws';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
54 | var socket = new WebSocket(address);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
55 | socket.onmessage = function(msg) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
56 | if (msg.data == 'reload') window.location.reload();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
57 | else if (msg.data == 'refreshcss') refreshCSS();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
58 | };
| ^^^^^
59 | console.log('Live reload enabled.');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 | })();
| ^^^^^^^
61 | }
| ^^
62 | //
| ^^^^
63 | </script>
| ^^^^^^^^^
64 |
| ^^^^^^
65 |
|
66 |
| ^^^^^^^^^^
67 | Read the action documentation to understand the various configuration options.
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
68 |
| ^^^^^^
(found in )
w

Reproduce: run markbind serve -d in our docs

Page: /devguide/bootcamp/exploremarkbind

File: docs\devGuide\bootcamp\exploreMarkBind.md

Problematic code: line 335 <panel src="{{baseUrl}}/userGuide/deployingTheSite.md#markbind-action-tip" header="**MarkBind Action**" type="info" expanded/>

preliminary investigation: seems to be due to using a panel with src that is a box?

visually the component on the page looks fine

when replacing panel with include the warning is gone

further investigation is needed

Thanks for noticing this issue @tlylt

Upon some further investigation, the issue isnt the box but rather the code in the content that is triggering the warning.

In Retriever.vue, a new html document is made to load in the html to query for the hash.
Because there was a code wrap button in the html, which uses an SVG file which has inline styling, this triggers a side effect because of the style.

Edit: SVG file doesn't contain any inline styling except for height and width but is still triggering the warning for some reason

Removing the codeWrapButton plugin or just commenting off the SVG file in the codeWrapButton or removing the SVG file will cause the warning to go away

Edit: Removing the height and width does not get rid of the warning

This issue has been documented at this thread Vue stripping out styles from inline SVG where the suggested fix is to modify the SVG file by moving the CSS out

This happens regardless of whether a fragment is used or not.

Previously with jQuery, a seperate self-closed element was created hence it does not affect the document.

Things I have tried so far:

Creating a document fragment instead of a new document but will still cause the same problem even though its not attached to the document
Adding v-pre to the template to force vue not to compile it Edit: but does not work

tlylt · 2023-04-10T00:38:51Z

Things I have tried so far:

Adding v-pre to the template to force vue not to compile it

So does it work?

In Retriever.vue, a new html document is made to load in the html to query for the hash. Because there was a code wrap button in the html, which uses an SVG file which has inline styling, this triggers a side effect because of the style.

Removing the codeWrapButton plugin or just commenting off the SVG file in the codeWrapButton or removing the height and width of the SVG file will cause the warning to go away

This issue has been documented at this thread Vue stripping out styles from inline SVG where the suggested fix is to modify the SVG file by moving the CSS out

This happens regardless of whether a fragment is used or not.

Previously with jQuery, a seperate self-closed element was created hence it does not affect the document.

What do you mean by "a separate self-closed element" here?

Is it possible to fix the SVG code in codeWrapButton such that it does not cause the issue (without breaking the functionality of the plugin)?

And is it possible to automatically adjust the SVG code when you query the fragment and realize that there's an SVG inside?

…moveJquery

yucheng11122017 · 2023-04-12T11:39:50Z

Sorry for the late response @tlylt! Update on the issue

I misinterpreted the issue because for some reason when removing the height and width of the SVG and using only one file, the warning disappeared. Its not about the style but about the fact that the live server was injecting a script to enable the SVG file. After removing the script tag, the warning no longer appears.

Thank you to @EltonGohJH, @lhw-1 and @itsyme for discussing the issue with me and your suggestions!

packages/vue-components/src/Retriever.vue

tlylt · 2023-04-12T14:06:21Z

Its not about the style but about the fact that the live server was injecting a script to enable the SVG file. After removing the script tag, the warning no longer appears.

So the script that live-server injected got removed, but it is ok because this injected script is in the temporary HTML document created solely for retrieving the hash?

yucheng11122017 · 2023-04-13T03:50:04Z

Its not about the style but about the fact that the live server was injecting a script to enable the SVG file. After removing the script tag, the warning no longer appears.

So the script that live-server injected got removed, but it is ok because this injected script is in the temporary HTML document created solely for retrieving the hash?

Yup. All scripts should be ok to remove because even if its inside, Vue does not process it because of the side effects.

…moveJquery

packages/vue-components/src/Retriever.vue

packages/vue-components/src/directives/Closeable.js

…moveJquery

tlylt

LGTM

Thank you @yucheng11122017, could you help write the breaking change guide in the PR description? To be safe we should declare this a breaking change, as it was stated that jQuery is included in our assets. Therefore, users of MarkBind might inadvertently use jQuery in their custom JavaScript code (if any). Just a short explanation will do, stating that if they used jQuery in their pages or any of their custom JS code, they should either import jQuery or convert the usage to native js.

yucheng11122017 · 2023-04-14T15:07:09Z

LGTM

Thank you @yucheng11122017, could you help write the breaking change guide in the PR description? To be safe we should declare this a breaking change, as it was stated that jQuery is included in our assets. Therefore, users of MarkBind might inadvertently use jQuery in their custom JavaScript code (if any). Just a short explanation will do, stating that if they used jQuery in their pages or any of their custom JS code, they should either import jQuery or convert the usage to native js.

Updated the PR description under breaking change description!

tlylt · 2023-04-15T14:44:18Z

@yucheng11122017 could you help with fixing the conflict?

…moveJquery

# Conflicts: # packages/core/src/Site/index.ts

…moveJquery # Conflicts: # packages/core/src/Site/index.ts

yucheng11122017 · 2023-04-15T16:25:47Z

@yucheng11122017 could you help with fixing the conflict?

Done!

ang-zeyu · 2023-04-28T11:36:30Z

Yup. All scripts should be ok to remove because even if its inside, Vue does not process it because of the side effects.

Something we should try to fix still as usage of script/style tags is valid markdown.

Filed #2300 for it

yucheng11122017 added 11 commits February 2, 2023 00:10

[WIP] Replace jQuery in Closeable

82d1fae

Remove jQuery from Closeable

52342df

Remove jQuery from Retriever

2ff9906

Remove jQuery instances from Retriever

1532420

Remove jQuery from PanelBase

6937925

Refactor function in Retriever

a7e5971

Remove jQuery from index.js

e48443b

Change function to use correct length function

37a6892

Remove jQuery from Float.js

17cdd39

Remove unecessary comment

efda1c0

Remove jQuery from eslintrc

5e21e9a

tlylt requested changes Feb 5, 2023

View reviewed changes

packages/vue-components/src/directives/Closeable.js Outdated Show resolved Hide resolved

packages/core-web/src/index.js Outdated Show resolved Hide resolved

yucheng11122017 added 2 commits February 5, 2023 12:56

Remove $

bf16406

Comment why id is deleted

f6ef275

ang-zeyu reviewed Feb 8, 2023

View reviewed changes

packages/core-web/src/index.js Outdated Show resolved Hide resolved

packages/core-web/src/index.js Show resolved Hide resolved

packages/vue-components/src/Retriever.vue Outdated Show resolved Hide resolved

packages/vue-components/src/panels/PanelBase.js Outdated Show resolved Hide resolved

ang-zeyu requested a review from tlylt February 8, 2023 16:43

yucheng11122017 added 13 commits February 12, 2023 14:32

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

fe6a12b

…moveJquery

[WIP] Remove jQuery from assets

f048dd1

Change to use clientHeight instead of height

60b5e0d

Change use querySelector instead of querySelectorAll

f11f660

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

d78c3f8

…moveJquery # Conflicts: # packages/vue-components/src/panels/PanelBase.js

Change to use headerEl instead of selector

f82b473

Remove class from each element in headerSelector

b388667

Change to use height which doesn't include padding

b527aad

Change overflow for each element in headerSelector

f56998c

Change style and class for each element in headerSelector

5cb6ebf

Remove uncessary tempdom

77d976d

Change to use clientHeight instead of height

638110c

Change class for closeable

4f9a500

yucheng11122017 added 3 commits April 12, 2023 19:26

Remove script tag in retriever to prevent vue warnings

1640520

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

754279e

…moveJquery

Add comment explining why script tags are removed in Retriever

82ce26d

tlylt reviewed Apr 12, 2023

View reviewed changes

packages/vue-components/src/Retriever.vue Outdated Show resolved Hide resolved

yucheng11122017 added 2 commits April 13, 2023 11:51

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

b4866df

…moveJquery

Add further clarification on why it is alright to remove script tags

466dceb

tlylt reviewed Apr 14, 2023

View reviewed changes

packages/vue-components/src/Retriever.vue Show resolved Hide resolved

packages/vue-components/src/directives/Closeable.js Outdated Show resolved Hide resolved

yucheng11122017 added 3 commits April 14, 2023 15:54

Remove if statement for adding class

745ff4c

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

9b7f525

…moveJquery

Change selector to only remove script in svg tags

1b9f5e8

tlylt approved these changes Apr 14, 2023

View reviewed changes

tlylt added this to the v5.0.0 milestone Apr 14, 2023

tlylt added the breakingChange 💥 Feature will behave significantly different, or is made obsolete label Apr 14, 2023

yucheng11122017 added 3 commits April 16, 2023 00:07

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

7a18861

…moveJquery

Merge branch 'master' into removeJquery

251f73e

# Conflicts: # packages/core/src/Site/index.ts

Merge branch 'master' of https://github.com/MarkBind/markbind into re…

4b378e5

…moveJquery # Conflicts: # packages/core/src/Site/index.ts

tlylt changed the title ~~Remove jquery~~ Replace jQuery with vanilla JS Apr 16, 2023

tlylt merged commit e6f9bb1 into MarkBind:master Apr 16, 2023

ang-zeyu mentioned this pull request Apr 28, 2023

<script/style> tags in dynamically loaded panels should be hoisted to actually run #2300

Closed

tlylt mentioned this pull request Jul 16, 2023

Revert typescript migration for core/src/Site/index #2331

Merged

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace jQuery with vanilla JS #2130

Replace jQuery with vanilla JS #2130

yucheng11122017 commented Feb 2, 2023 •

edited

Loading

tlylt left a comment

yucheng11122017 commented Feb 5, 2023 •

edited

Loading

ang-zeyu left a comment

tlylt commented Apr 9, 2023

yucheng11122017 commented Apr 9, 2023 •

edited

Loading

tlylt commented Apr 10, 2023

yucheng11122017 commented Apr 12, 2023 •

edited

Loading

tlylt commented Apr 12, 2023

yucheng11122017 commented Apr 13, 2023

tlylt left a comment •

edited

Loading

yucheng11122017 commented Apr 14, 2023

tlylt commented Apr 15, 2023

yucheng11122017 commented Apr 15, 2023

ang-zeyu commented Apr 28, 2023

Replace jQuery with vanilla JS #2130

Replace jQuery with vanilla JS #2130

Conversation

yucheng11122017 commented Feb 2, 2023 • edited Loading

tlylt left a comment

Choose a reason for hiding this comment

yucheng11122017 commented Feb 5, 2023 • edited Loading

ang-zeyu left a comment

Choose a reason for hiding this comment

tlylt commented Apr 9, 2023

yucheng11122017 commented Apr 9, 2023 • edited Loading

tlylt commented Apr 10, 2023

yucheng11122017 commented Apr 12, 2023 • edited Loading

tlylt commented Apr 12, 2023

yucheng11122017 commented Apr 13, 2023

tlylt left a comment • edited Loading

Choose a reason for hiding this comment

yucheng11122017 commented Apr 14, 2023

tlylt commented Apr 15, 2023

yucheng11122017 commented Apr 15, 2023

ang-zeyu commented Apr 28, 2023

yucheng11122017 commented Feb 2, 2023 •

edited

Loading

yucheng11122017 commented Feb 5, 2023 •

edited

Loading

yucheng11122017 commented Apr 9, 2023 •

edited

Loading

yucheng11122017 commented Apr 12, 2023 •

edited

Loading

tlylt left a comment •

edited

Loading