newlicense
Kay
5 months ago
commit
b39c601279
@ -0,0 +1,11 @@
|
||||
## install
|
||||
|
||||
### repository
|
||||
|
||||
The latest automatic release is always on https://juke.fr
|
||||
|
||||
```bash
|
||||
$ git clone https://code.juke.fr/kay/juke-fr.git
|
||||
|
||||
$ yarn
|
||||
```
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": [
|
||||
[
|
||||
"prismjs",
|
||||
{
|
||||
"languages": ["glsl"]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
|
||||
extends: [
|
||||
'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
|
||||
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
|
||||
'plugin:@next/next/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
|
||||
sourceType: 'module', // Allows for the use of imports
|
||||
ecmaFeatures: {
|
||||
jsx: true, // Allows for the parsing of JSX
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
|
||||
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
|
||||
'react/prop-types': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
# 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*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
@ -0,0 +1,31 @@
|
||||
---
|
||||
include:
|
||||
- template: Auto-DevOps.gitlab-ci.yml
|
||||
- project: 'kay/ci-templates'
|
||||
file:
|
||||
- '/Semantic-Release.gitlab-ci.yml'
|
||||
|
||||
variables:
|
||||
# TEST_DISABLED: 'true'
|
||||
# CODE_QUALITY_DISABLED: "true"
|
||||
# LICENSE_MANAGEMENT_DISABLED: "true"
|
||||
# BROWSER_PERFORMANCE_DISABLED: "true"
|
||||
# LOAD_PERFORMANCE_DISABLED: "true"
|
||||
# SAST_DISABLED: "true"
|
||||
# SECRET_DETECTION_DISABLED: "true"
|
||||
# DEPENDENCY_SCANNING_DISABLED: "true"
|
||||
# CONTAINER_SCANNING_DISABLED: "true"
|
||||
# DAST_DISABLED: "true"
|
||||
# REVIEW_DISABLED: "true"
|
||||
# CODE_INTELLIGENCE_DISABLED: "true"
|
||||
# CLUSTER_IMAGE_SCANNING_DISABLED: "true"
|
||||
POSTGRES_ENABLED: 'false'
|
||||
NEXT_TELEMETRY_DISABLED: 1
|
||||
|
||||
test:
|
||||
variables:
|
||||
BUILDPACK_URL: https://code.eutychia.org/kay/heroku-buildpack-nodejs-playwright
|
||||
|
||||
production:
|
||||
environment:
|
||||
url: 'http://$KUBE_INGRESS_BASE_DOMAIN'
|
||||
@ -0,0 +1 @@
|
||||
@kay:registry=https://code.juke.fr/api/packages/kay/npm/
|
||||
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
semi: true,
|
||||
trailingComma: 'all',
|
||||
singleQuote: true,
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
};
|
||||
@ -0,0 +1,74 @@
|
||||
# [1.7.0](https://code.eutychia.org/kay/juke-fr/compare/v1.6.1...v1.7.0) (2022-07-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* doc escape [skip ci] ([f091d24](https://code.eutychia.org/kay/juke-fr/commit/f091d24d1ffdb4814c50e71731910f2bc3e7133c))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Switch to template readme [skip ci] ([cce5a6f](https://code.eutychia.org/kay/juke-fr/commit/cce5a6f6575d988468b9bee5a27848ad35be4382))
|
||||
|
||||
## [1.6.1](https://code.eutychia.org/kay/juke-fr/compare/v1.6.0...v1.6.1) (2022-06-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Add back font style ([2fc3677](https://code.eutychia.org/kay/juke-fr/commit/2fc36779234af5cf13d74e9dcf21caf7bef9b23f))
|
||||
* Show latest tag ([fa9aa4a](https://code.eutychia.org/kay/juke-fr/commit/fa9aa4a05d73cd68aea75a8f9eb9221af5b71e1f))
|
||||
|
||||
# [1.6.0](https://code.eutychia.org/kay/juke-fr/compare/v1.5.0...v1.6.0) (2022-06-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Remove uneeded files ([7c5ffd1](https://code.eutychia.org/kay/juke-fr/commit/7c5ffd14327dd7f047bff8b09722b4fc6f3f44a9))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Doc single npx command ([12ac262](https://code.eutychia.org/kay/juke-fr/commit/12ac262301f70f051d4ba0d0b977e493bf206f70))
|
||||
|
||||
# [1.5.0](https://code.eutychia.org/kay/juke-fr/compare/v1.4.0...v1.5.0) (2022-06-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fix standlone build ([2d67cc1](https://code.eutychia.org/kay/juke-fr/commit/2d67cc129ff42341d5dd17c3f7d0570b15cc7fee))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Add bin docs ([c97f7f0](https://code.eutychia.org/kay/juke-fr/commit/c97f7f0fd5fe95743ce3d9f7594bd7e8ba40ecd0))
|
||||
* Add node bin ([23bf3c4](https://code.eutychia.org/kay/juke-fr/commit/23bf3c4ff327addb6deff5d4286b9f84c89a89d7))
|
||||
* Add packages to devdeps for standalone build ([e447eaa](https://code.eutychia.org/kay/juke-fr/commit/e447eaab673bffbebd35fb3a080fed360f7f73f1))
|
||||
* Switch to @kay/komponents ([26e6e5a](https://code.eutychia.org/kay/juke-fr/commit/26e6e5a3cdc9a9533456354685d1ee74724081d7))
|
||||
|
||||
# [1.4.0](https://code.eutychia.org/kay/juke-fr/compare/v1.3.0...v1.4.0) (2022-06-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Update readme ([e1f4e10](https://code.eutychia.org/kay/juke-fr/commit/e1f4e10c5408145322c7eedecae0b9ecc1fdc340))
|
||||
|
||||
# [1.3.0](https://code.eutychia.org/kay/juke-fr/compare/v1.2.0...v1.3.0) (2022-06-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Remove unecessay chakra provider wrapper ([0a8dd18](https://code.eutychia.org/kay/juke-fr/commit/0a8dd18ae96cfd5c79ca1910d686645806832933))
|
||||
|
||||
# [1.2.0](https://code.eutychia.org/kay/juke-fr/compare/v1.1.0...v1.2.0) (2022-06-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Update readme ([0e0e01c](https://code.eutychia.org/kay/juke-fr/commit/0e0e01c82da0338d92f59d66d4bca48d931f8e4e))
|
||||
|
||||
# [1.1.0](https://code.eutychia.org/kay/juke-fr/compare/v1.0.0...v1.1.0) (2022-06-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Update readme ([5738b67](https://code.eutychia.org/kay/juke-fr/commit/5738b67da9b8a7ba6ce42b3871cd3f7fd38ac27e))
|
||||
@ -0,0 +1,55 @@
|
||||
FROM node:16-alpine AS deps
|
||||
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
COPY package.json yarn.lock ./
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
# If using npm with a `package-lock.json` comment out above and use below instead
|
||||
# COPY package.json package-lock.json ./
|
||||
# RUN npm ci
|
||||
|
||||
# Rebuild the source code only when needed
|
||||
FROM node:16-alpine AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Next.js collects completely anonymous telemetry data about general usage.
|
||||
# Learn more here: https://nextjs.org/telemetry
|
||||
# Uncomment the following line in case you want to disable telemetry during the build.
|
||||
# ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
RUN yarn build
|
||||
|
||||
# If using npm comment out above and use below instead
|
||||
# RUN npm run build
|
||||
|
||||
# Production image, copy all the files and run next
|
||||
FROM node:16-alpine AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV production
|
||||
# Uncomment the following line in case you want to disable telemetry during runtime.
|
||||
# ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
# You only need to copy next.config.js if you are NOT using the default configuration
|
||||
# COPY --from=builder /app/next.config.js ./
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder /app/package.json ./package.json
|
||||
|
||||
# Automatically leverage output traces to reduce image size
|
||||
# https://nextjs.org/docs/advanced-features/output-file-tracing
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 5000
|
||||
ENV PORT 5000
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
|
||||
@ -0,0 +1,459 @@
|
||||
Attribution-NonCommercial-ShareAlike 4.0 International AntiFascistEdit
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Corporation ("Creative Commons") is not a law firm and
|
||||
does not provide legal services or legal advice. Distribution of
|
||||
Creative Commons public licenses does not create a lawyer-client or
|
||||
other relationship. Creative Commons makes its licenses and related
|
||||
information available on an "as-is" basis. Creative Commons gives no
|
||||
warranties regarding its licenses, any material licensed under their
|
||||
terms and conditions, or any related information. Creative Commons
|
||||
disclaims all liability for damages resulting from their use to the
|
||||
fullest extent possible.
|
||||
|
||||
Using Creative Commons Public Licenses
|
||||
|
||||
Creative Commons public licenses provide a standard set of terms and
|
||||
conditions that creators and other rights holders may use to share
|
||||
original works of authorship and other material subject to copyright
|
||||
and certain other rights specified in the public license below. The
|
||||
following considerations are for informational purposes only, are not
|
||||
exhaustive, and do not form part of our licenses.
|
||||
|
||||
Considerations for licensors: Our public licenses are
|
||||
intended for use by those authorized to give the public
|
||||
permission to use material in ways otherwise restricted by
|
||||
copyright and certain other rights. Our licenses are
|
||||
irrevocable. Licensors should read and understand the terms
|
||||
and conditions of the license they choose before applying it.
|
||||
Licensors should also secure all rights necessary before
|
||||
applying our licenses so that the public can reuse the
|
||||
material as expected. Licensors should clearly mark any
|
||||
material not subject to the license. This includes other CC-
|
||||
licensed material, or material used under an exception or
|
||||
limitation to copyright. More considerations for licensors:
|
||||
wiki.creativecommons.org/Considerations_for_licensors
|
||||
|
||||
Considerations for the public: By using one of our public
|
||||
licenses, a licensor grants the public permission to use the
|
||||
licensed material under specified terms and conditions. If
|
||||
the licensor's permission is not necessary for any reason--for
|
||||
example, because of any applicable exception or limitation to
|
||||
copyright--then that use is not regulated by the license. Our
|
||||
licenses grant only permissions under copyright and certain
|
||||
other rights that a licensor has authority to grant. Use of
|
||||
the licensed material may still be restricted for other
|
||||
reasons, including because others have copyright or other
|
||||
rights in the material. A licensor may make special requests,
|
||||
such as asking that all changes be marked or described.
|
||||
Although not required by our licenses, you are encouraged to
|
||||
respect those requests where reasonable. More considerations
|
||||
for the public:
|
||||
wiki.creativecommons.org/Considerations_for_licensees
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
|
||||
Public License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree
|
||||
to be bound by the terms and conditions of this Creative Commons
|
||||
Attribution-NonCommercial-ShareAlike 4.0 International Public License
|
||||
("Public License"). To the extent this Public License may be
|
||||
interpreted as a contract, You are granted the Licensed Rights in
|
||||
consideration of Your acceptance of these terms and conditions, and the
|
||||
Licensor grants You such rights in consideration of benefits the
|
||||
Licensor receives from making the Licensed Material available under
|
||||
these terms and conditions.
|
||||
|
||||
|
||||
Section 1 -- Definitions.
|
||||
|
||||
a. Adapted Material means material subject to Copyright and Similar
|
||||
Rights that is derived from or based upon the Licensed Material
|
||||
and in which the Licensed Material is translated, altered,
|
||||
arranged, transformed, or otherwise modified in a manner requiring
|
||||
permission under the Copyright and Similar Rights held by the
|
||||
Licensor. For purposes of this Public License, where the Licensed
|
||||
Material is a musical work, performance, or sound recording,
|
||||
Adapted Material is always produced where the Licensed Material is
|
||||
synched in timed relation with a moving image.
|
||||
|
||||
b. Adapter's License means the license You apply to Your Copyright
|
||||
and Similar Rights in Your contributions to Adapted Material in
|
||||
accordance with the terms and conditions of this Public License.
|
||||
|
||||
c. BY-NC-SA Compatible License means a license listed at
|
||||
creativecommons.org/compatiblelicenses, approved by Creative
|
||||
Commons as essentially the equivalent of this Public License.
|
||||
|
||||
d. Copyright and Similar Rights means copyright and/or similar rights
|
||||
closely related to copyright including, without limitation,
|
||||
performance, broadcast, sound recording, and Sui Generis Database
|
||||
Rights, without regard to how the rights are labeled or
|
||||
categorized. For purposes of this Public License, the rights
|
||||
specified in Section 2(b)(1)-(2) are not Copyright and Similar
|
||||
Rights.
|
||||
|
||||
e. Effective Technological Measures means those measures that, in the
|
||||
absence of proper authority, may not be circumvented under laws
|
||||
fulfilling obligations under Article 11 of the WIPO Copyright
|
||||
Treaty adopted on December 20, 1996, and/or similar international
|
||||
agreements.
|
||||
|
||||
f. Exceptions and Limitations means fair use, fair dealing, and/or
|
||||
any other exception or limitation to Copyright and Similar Rights
|
||||
that applies to Your use of the Licensed Material.
|
||||
|
||||
g. License Elements means the license attributes listed in the name
|
||||
of a Creative Commons Public License. The License Elements of this
|
||||
Public License are Attribution, NonCommercial, and ShareAlike.
|
||||
|
||||
h. Licensed Material means the artistic or literary work, database,
|
||||
or other material to which the Licensor applied this Public
|
||||
License.
|
||||
|
||||
i. Licensed Rights means the rights granted to You subject to the
|
||||
terms and conditions of this Public License, which are limited to
|
||||
all Copyright and Similar Rights that apply to Your use of the
|
||||
Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
j. Licensor means the individual(s) or entity(ies) granting rights
|
||||
under this Public License.
|
||||
|
||||
k. NonCommercial means not primarily intended for or directed towards
|
||||
commercial advantage or monetary compensation. For purposes of
|
||||
this Public License, the exchange of the Licensed Material for
|
||||
other material subject to Copyright and Similar Rights by digital
|
||||
file-sharing or similar means is NonCommercial provided there is
|
||||
no payment of monetary compensation in connection with the
|
||||
exchange.
|
||||
|
||||
l. Share means to provide material to the public by any means or
|
||||
process that requires permission under the Licensed Rights, such
|
||||
as reproduction, public display, public performance, distribution,
|
||||
dissemination, communication, or importation, and to make material
|
||||
available to the public including in ways that members of the
|
||||
public may access the material from a place and at a time
|
||||
individually chosen by them.
|
||||
|
||||
m. Sui Generis Database Rights means rights other than copyright
|
||||
resulting from Directive 96/9/EC of the European Parliament and of
|
||||
the Council of 11 March 1996 on the legal protection of databases,
|
||||
as amended and/or succeeded, as well as other essentially
|
||||
equivalent rights anywhere in the world.
|
||||
|
||||
n. You means the individual or entity exercising the Licensed Rights
|
||||
under this Public License. Your has a corresponding meaning.
|
||||
|
||||
|
||||
Section 2 -- Scope.
|
||||
|
||||
a. License grant.
|
||||
|
||||
1. Subject to the terms and conditions of this Public License,
|
||||
the Licensor hereby grants You a worldwide, royalty-free,
|
||||
non-sublicensable, non-exclusive, irrevocable license to
|
||||
exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
a. reproduce and Share the Licensed Material, in whole or
|
||||
in part, for NonCommercial purposes only; and
|
||||
|
||||
b. produce, reproduce, and Share Adapted Material for
|
||||
NonCommercial purposes only.
|
||||
|
||||
2. Exceptions and Limitations. For the avoidance of doubt, where
|
||||
Exceptions and Limitations apply to Your use, this Public
|
||||
License does not apply, and You do not need to comply with
|
||||
its terms and conditions.
|
||||
|
||||
3. Term. The term of this Public License is specified in Section
|
||||
6(a).
|
||||
|
||||
4. Media and formats; technical modifications allowed. The
|
||||
Licensor authorizes You to exercise the Licensed Rights in
|
||||
all media and formats whether now known or hereafter created,
|
||||
and to make technical modifications necessary to do so. The
|
||||
Licensor waives and/or agrees not to assert any right or
|
||||
authority to forbid You from making technical modifications
|
||||
necessary to exercise the Licensed Rights, including
|
||||
technical modifications necessary to circumvent Effective
|
||||
Technological Measures. For purposes of this Public License,
|
||||
simply making modifications authorized by this Section 2(a)
|
||||
(4) never produces Adapted Material.
|
||||
|
||||
5. Downstream recipients.
|
||||
|
||||
a. Offer from the Licensor -- Licensed Material. Every
|
||||
recipient of the Licensed Material automatically
|
||||
receives an offer from the Licensor to exercise the
|
||||
Licensed Rights under the terms and conditions of this
|
||||
Public License.
|
||||
|
||||
b. Additional offer from the Licensor -- Adapted Material.
|
||||
Every recipient of Adapted Material from You
|
||||
automatically receives an offer from the Licensor to
|
||||
exercise the Licensed Rights in the Adapted Material
|
||||
under the conditions of the Adapter's License You apply.
|
||||
|
||||
c. No downstream restrictions. You may not offer or impose
|
||||
any additional or different terms or conditions on, or
|
||||
apply any Effective Technological Measures to, the
|
||||
Licensed Material if doing so restricts exercise of the
|
||||
Licensed Rights by any recipient of the Licensed
|
||||
Material.
|
||||
|
||||
6. No endorsement. Nothing in this Public License constitutes or
|
||||
may be construed as permission to assert or imply that You
|
||||
are, or that Your use of the Licensed Material is, connected
|
||||
with, or sponsored, endorsed, or granted official status by,
|
||||
the Licensor or others designated to receive attribution as
|
||||
provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. Other rights.
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not
|
||||
licensed under this Public License, nor are publicity,
|
||||
privacy, and/or other similar personality rights; however, to
|
||||
the extent possible, the Licensor waives and/or agrees not to
|
||||
assert any such rights held by the Licensor to the limited
|
||||
extent necessary to allow You to exercise the Licensed
|
||||
Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this
|
||||
Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to
|
||||
collect royalties from You for the exercise of the Licensed
|
||||
Rights, whether directly or through a collecting society
|
||||
under any voluntary or waivable statutory or compulsory
|
||||
licensing scheme. In all other cases the Licensor expressly
|
||||
reserves any right to collect such royalties, including when
|
||||
the Licensed Material is used other than for NonCommercial
|
||||
purposes.
|
||||
|
||||
|
||||
Section 3 -- License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the
|
||||
following conditions.
|
||||
|
||||
a. Attribution.
|
||||
|
||||
1. If You Share the Licensed Material (including in modified
|
||||
form), You must:
|
||||
|
||||
a. retain the following if it is supplied by the Licensor
|
||||
with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed
|
||||
Material and any others designated to receive
|
||||
attribution, in any reasonable manner requested by
|
||||
the Licensor (including by pseudonym if
|
||||
designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of
|
||||
warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the
|
||||
extent reasonably practicable;
|
||||
|
||||
b. indicate if You modified the Licensed Material and
|
||||
retain an indication of any previous modifications; and
|
||||
|
||||
c. indicate the Licensed Material is licensed under this
|
||||
Public License, and include the text of, or the URI or
|
||||
hyperlink to, this Public License.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any
|
||||
reasonable manner based on the medium, means, and context in
|
||||
which You Share the Licensed Material. For example, it may be
|
||||
reasonable to satisfy the conditions by providing a URI or
|
||||
hyperlink to a resource that includes the required
|
||||
information.
|
||||
3. If requested by the Licensor, You must remove any of the
|
||||
information required by Section 3(a)(1)(A) to the extent
|
||||
reasonably practicable.
|
||||
|
||||
b. ShareAlike.
|
||||
|
||||
In addition to the conditions in Section 3(a), if You Share
|
||||
Adapted Material You produce, the following conditions also apply.
|
||||
|
||||
1. The Adapter's License You apply must be a Creative Commons
|
||||
license with the same License Elements, this version or
|
||||
later, or a BY-NC-SA Compatible License.
|
||||
|
||||
2. You must include the text of, or the URI or hyperlink to, the
|
||||
Adapter's License You apply. You may satisfy this condition
|
||||
in any reasonable manner based on the medium, means, and
|
||||
context in which You Share Adapted Material.
|
||||
|
||||
3. You may not offer or impose any additional or different terms
|
||||
or conditions on, or apply any Effective Technological
|
||||
Measures to, Adapted Material that restrict exercise of the
|
||||
rights granted under the Adapter's License You apply.
|
||||
|
||||
|
||||
Section 4 -- Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that
|
||||
apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
|
||||
to extract, reuse, reproduce, and Share all or a substantial
|
||||
portion of the contents of the database for NonCommercial purposes
|
||||
only;
|
||||
|
||||
b. if You include all or a substantial portion of the database
|
||||
contents in a database in which You have Sui Generis Database
|
||||
Rights, then the database in which You have Sui Generis Database
|
||||
Rights (but not its individual contents) is Adapted Material,
|
||||
including for purposes of Section 3(b); and
|
||||
|
||||
c. You must comply with the conditions in Section 3(a) if You Share
|
||||
all or a substantial portion of the contents of the database.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not
|
||||
replace Your obligations under this Public License where the Licensed
|
||||
Rights include other Copyright and Similar Rights.
|
||||
|
||||
|
||||
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
|
||||
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
|
||||
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
|
||||
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
|
||||
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
|
||||
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
|
||||
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
|
||||
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
|
||||
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
|
||||
|
||||
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
|
||||
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
|
||||
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
|
||||
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
|
||||
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
|
||||
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
|
||||
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
|
||||
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
|
||||
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided
|
||||
above shall be interpreted in a manner that, to the extent
|
||||
possible, most closely approximates an absolute disclaimer and
|
||||
waiver of all liability.
|
||||
|
||||
|
||||
Section 6 -- Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and
|
||||
Similar Rights licensed here. However, if You fail to comply with
|
||||
this Public License, then Your rights under this Public License
|
||||
terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under
|
||||
Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided
|
||||
it is cured within 30 days of Your discovery of the
|
||||
violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any
|
||||
right the Licensor may have to seek remedies for Your violations
|
||||
of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the
|
||||
Licensed Material under separate terms or conditions or stop
|
||||
distributing the Licensed Material at any time; however, doing so
|
||||
will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
|
||||
License.
|
||||
|
||||
|
||||
Section 7 -- Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different
|
||||
terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the
|
||||
Licensed Material not stated herein are separate from and
|
||||
independent of the terms and conditions of this Public License.
|
||||
|
||||
c. The License does not apply and no license is granted for
|
||||
taking action on behalf of a Nation or State or Government,
|
||||
be it military, law enforcement, agent, spy, hacker, developer,
|
||||
this list is not exhaustive.
|
||||
|
||||
d. The License does not apply and no license is granted to actors
|
||||
taking action to oppress, harm, injure, kill, whether
|
||||
physically or psycholocially.
|
||||
|
||||
e. The License does not apply and no license is granted to actors
|
||||
acting on behalf of any party previously found guilty of committing
|
||||
war crimes at any point in time.
|
||||
|
||||
f. The License does not apply and no license is granted to actors
|
||||
acting on behalf of any party previously found not respecting the
|
||||
Universal Declaration of Human Rights at any point in time.
|
||||
|
||||
g. The License does not apply and no license is granted to actors
|
||||
acting with the intent of surveilling a population or the intent of
|
||||
gathering information on spefific or non-specific populations and/or
|
||||
target demographics.
|
||||
|
||||
|
||||
Section 8 -- Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and
|
||||
shall not be interpreted to, reduce, limit, restrict, or impose
|
||||
conditions on any use of the Licensed Material that could lawfully
|
||||
be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is
|
||||
deemed unenforceable, it shall be automatically reformed to the
|
||||
minimum extent necessary to make it enforceable. If the provision
|
||||
cannot be reformed, it shall be severed from this Public License
|
||||
without affecting the enforceability of the remaining terms and
|
||||
conditions.
|
||||
|
||||
c. No term or condition of this Public License will be waived and no
|
||||
failure to comply consented to unless expressly agreed to by the
|
||||
Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted
|
||||
as a limitation upon, or waiver of, any privileges and immunities
|
||||
that apply to the Licensor or You, including from the legal
|
||||
processes of any jurisdiction or authority.
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons is not a party to its public
|
||||
licenses. Notwithstanding, Creative Commons may elect to apply one of
|
||||
its public licenses to material it publishes and in those instances
|
||||
will be considered the “Licensor.” The text of the Creative Commons
|
||||
public licenses is dedicated to the public domain under the CC0 Public
|
||||
Domain Dedication. Except for the limited purpose of indicating that
|
||||
material is shared under a Creative Commons public license or as
|
||||
otherwise permitted by the Creative Commons policies published at
|
||||
creativecommons.org/policies, Creative Commons does not authorize the
|
||||
use of the trademark "Creative Commons" or any other trademark or logo
|
||||
of Creative Commons without its prior written consent including,
|
||||
without limitation, in connection with any unauthorized modifications
|
||||
to any of its public licenses or any other arrangements,
|
||||
understandings, or agreements concerning use of licensed material. For
|
||||
the avoidance of doubt, this paragraph does not form part of the
|
||||
public licenses.
|
||||
|
||||
Creative Commons may be contacted at creativecommons.org.
|
||||
@ -0,0 +1,69 @@
|
||||
# [juke-fr](https://code.juke.fr/kay/juke-fr)
|
||||
site built in typescript with next.js, chakra ui, framer motion, three.js available on juke.fr
|
||||
|
||||
## install
|
||||
|
||||
### repository
|
||||
|
||||
The latest automatic release is always on https://juke.fr
|
||||
|
||||
```bash
|
||||
$ git clone https://code.juke.fr/kay/juke-fr.git
|
||||
|
||||
$ yarn
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
Most all of my work is now licensed under **a modified** [CC-BY-NC-SA 4.0 AFEdit](https://code.juke.fr/kay/license/raw/branch/main/LICENSE) plus accounting for states existing in our world on top of capitalism.
|
||||
|
||||
This is a weird choice for code right?
|
||||
|
||||
Here are a few key reasons:
|
||||
- my definition of "open" involves being able to share and modify, you are able to do such things, just not make money off of it, or oppress people
|
||||
- my definition of "free" involves being able to share and modify, you are able to do such things, not just make money off of it, or oppressing people
|
||||
|
||||
So no, amongst other things, this list is not exhaustive,
|
||||
- you cannot have somebody work on my tool and redistribute it to your employees
|
||||
- you cannot resell copies of this because in this age distribution is not done with floppy disks and the internet is a thing
|
||||
- you cannot use it to generate revenue yourself
|
||||
- you cannot use it to "generate value" in a capitalistic sense
|
||||
- you cannot use it in any military capacity
|
||||
- you cannot use it in any law enforcement capacity
|
||||
- you cannot use it in any state backed capacity
|
||||
- you cannot use it in any surveillance capacity
|
||||
- you cannot use it if you represent the interests of a state
|
||||
- you cannot use it to oppress, spy, control in any capacity
|
||||
- you cannot use it to injure, harm, kill, whether physically or psychologically
|
||||
|
||||
You can, however,
|
||||
- change it to do whatever you please
|
||||
- share it to anyone you please with attribution and under the same license
|
||||
- use it as much as you please
|
||||
- and probably a bunch of other cool things that are possible outside of a capitalistic, imperialistic frame of reference that permeates the tech scene
|
||||
|
||||
Most of the "arguments" for how "free" and "open" source licenses are done still to this day stem from archaic concepts that might not even be relevant these days and I fail to see the issue with this license not being "interoperable" with a bunch of what I deem to be "bad" licenses, as they all allow for commercial usage.
|
||||
|
||||
I also will not make any attempts to monetize these works and will at most ever offer the possibility to donate to me directly if you enjoy what I do.
|
||||
|
||||
Thank you that is all.
|
||||
|
||||
## Development
|
||||
|
||||
To clone the repository locally:
|
||||
|
||||
```bash
|
||||
$ git clone https://code.juke.fr/kay/juke-fr.git
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
More to come later.
|
||||
|
||||
### Issues
|
||||
Open new issues by mailing [eutychia.gitlab+juke-fr-issue@gmail.com](mailto:eutychia.gitlab+juke-fr-issue@gmail.com)
|
||||
|
||||
---
|
||||
beep boop
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import { Box, Heading, Text } from '@chakra-ui/react';
|
||||
|
||||
const AboutCapitalisms = () => {
|
||||
return (
|
||||
<Box mb={12}>
|
||||
<Heading mb={6} as="h2" size="md">
|
||||
Capitalisms
|
||||
</Heading>
|
||||
<Text>
|
||||
<b>2017 to 2019</b>  Worked for Travelcar
|
||||
</Text>
|
||||
<Text>
|
||||
<b>2019 to 2020</b>  Freelance work on Malt and Comet
|
||||
</Text>
|
||||
<Text>
|
||||
<b>2020 to 2022</b>  Working for La Javaness
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutCapitalisms;
|
||||
@ -0,0 +1,78 @@
|
||||
import { LinkIcon } from '@chakra-ui/icons';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Heading,
|
||||
List,
|
||||
ListIcon,
|
||||
ListItem,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
const AboutLink = ({
|
||||
url,
|
||||
text,
|
||||
iconColor,
|
||||
}: {
|
||||
url: string;
|
||||
text: string;
|
||||
iconColor: string;
|
||||
}) => {
|
||||
return (
|
||||
<ListItem>
|
||||
<Button
|
||||
href={url}
|
||||
target="_blank"
|
||||
as="a"
|
||||
variant="ghost"
|
||||
style={{
|
||||
whiteSpace: 'normal',
|
||||
wordWrap: 'break-word',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<ListIcon as={LinkIcon} color={iconColor} />
|
||||
{text}
|
||||
</Button>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
const AboutLinks = ({ iconColor }: { iconColor: string }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Heading mb={6} as="h2" size="md">
|
||||
Hypertext references
|
||||
</Heading>
|
||||
<List spacing={3}>
|
||||
<AboutLink
|
||||
url="https://code.juke.fr/kay"
|
||||
text="code is hosted on code.juke.fr"
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
|
||||
<AboutLink
|
||||
url="https://matrix.to/#/@kay:juke.fr"
|
||||
text="chat via matrix at @kay:juke.fr"
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
<AboutLink
|
||||
url="mailto:site[at]juke[dot]fr?subject=Make sure to replace the [at] and [dot] in the email"
|
||||
text="email is site[at]juke[dot]fr"
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
<AboutLink
|
||||
url="https://ko-fi.com/kthnx/"
|
||||
text="donate on ko-fi"
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
<AboutLink
|
||||
url="https://liberapay.com/kthnx/"
|
||||
text="donate on liberapay"
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
</List>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutLinks;
|
||||
@ -0,0 +1,26 @@
|
||||
import React, { createContext, useContext, useMemo, useState } from 'react';
|
||||
import Introduction from './Introduction';
|
||||
|
||||
const AppContext = createContext(null);
|
||||
|
||||
// so we dont have GL Context loss on page switch
|
||||
const introInstance = <Introduction />;
|
||||
|
||||
export function AppWrapper({ children }: { children: React.ReactElement }) {
|
||||
const [appState, setAppState] = useState({ introInstance });
|
||||
|
||||
const appContextState = useMemo(
|
||||
() => ({ appState, setAppState }),
|
||||
[appState, setAppState],
|
||||
);
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={appContextState as any}>
|
||||
{children}
|
||||
</AppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAppContext() {
|
||||
return useContext(AppContext);
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import { Container } from '@chakra-ui/react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import IntroductionText from './IntroductionText';
|
||||
|
||||
const Introduction = () => {
|
||||
// we only want to render this component on the client (with webgl)
|
||||
const Jinx = dynamic(() => import('./Jinx'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<Container maxW="container.md" centerContent>
|
||||
<div
|
||||
style={{
|
||||
minHeight: 420,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Jinx />
|
||||
</div>
|
||||
<IntroductionText />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Introduction;
|
||||
@ -0,0 +1,51 @@
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
import { useAppSelector } from './store/hooks';
|
||||
import { selectShowEditor } from './store/showEditor';
|
||||
|
||||
const IntroductionHeader = () => {
|
||||
return (
|
||||
<Text>
|
||||
Henlo, I'm <b>k</b>, a backend web developer (mostly, i have no clue
|
||||
what i'm doing)
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const IntroductionBody = () => {
|
||||
return (
|
||||
<Text mb={12}>
|
||||
<b>K</b> is a <b>25 year-old non-binary/agender robo</b>. You can use any{' '}
|
||||
<b>neutral pronouns</b> for them (english: they or it, french: iel ou
|
||||
lea). It currently lives and works near <b>Paris</b>. They like anything
|
||||
that has to do with <b>technology</b> and hacking stuff (code, video,
|
||||
music, etc.). It creates mostly ephemeral, always <b>open source</b> pet
|
||||
projects. They are very much pro <b>data rights</b> and against rising
|
||||
worldwide fascistic ideology and oppression.
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const IntroductionText = () => {
|
||||
const showEditor = useAppSelector(selectShowEditor);
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
background={'purple.200'}
|
||||
px={6}
|
||||
py={4}
|
||||
rounded={6}
|
||||
roundedTop={showEditor ? 0 : 6}
|
||||
mb={6}
|
||||
mt={-6}
|
||||
w="100%"
|
||||
color="#2b2e3b"
|
||||
>
|
||||
<IntroductionHeader />
|
||||
</Flex>
|
||||
<IntroductionBody />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IntroductionText;
|
||||
@ -0,0 +1,46 @@
|
||||
.editorContainer {
|
||||
counter-reset: line;
|
||||
outline: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lineNumber:before {
|
||||
color: #282a36;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 100%;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
opacity: 0.8;
|
||||
user-select: none;
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
}
|
||||
|
||||
.lineNumberDark:before {
|
||||
color: #f8f8f2;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 100%;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
opacity: 0.3;
|
||||
user-select: none;
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
}
|
||||
|
||||
.canvas canvas {
|
||||
width: 420px !important;
|
||||
height: 420px !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #bd93f9;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label:before {
|
||||
content: '//';
|
||||
}
|
||||
@ -0,0 +1,306 @@
|
||||
import { Box, useToast, Text, Flex } from '@chakra-ui/react';
|
||||
import { A11y, A11yAnnouncer, useUserPreferences } from '@react-three/a11y';
|
||||
import { Canvas, useLoader } from '@react-three/fiber';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { animated, useSpring } from 'react-spring';
|
||||
import {
|
||||
ACESFilmicToneMapping,
|
||||
PerspectiveCamera,
|
||||
sRGBEncoding,
|
||||
Vector2,
|
||||
} from 'three';
|
||||
import { TextureLoader } from 'three/src/loaders/TextureLoader';
|
||||
import jinx from './assets/jinx.png';
|
||||
import styles from './Jinx.module.css';
|
||||
import JinxEditor from './JinxEditor';
|
||||
import JinxMyBeloved from './JinxMyBeloved';
|
||||
import getRandomShader from './shaders/index';
|
||||
import {
|
||||
selectFragmentShader,
|
||||
updateFragmentShader,
|
||||
} from './store/fragmentShader';
|
||||
import { useAppDispatch, useAppSelector } from './store/hooks';
|
||||
import {
|
||||
selectPrefersReducedMotion,
|
||||
update as updatePrefersReducedMotion,
|
||||
} from './store/prefersReducedMotion';
|
||||
import { selectTimer } from './store/timer';
|
||||
import { add as addToaster, selectToasters } from './store/toasters';
|
||||
|
||||
interface IScale {
|
||||
base: number;
|
||||
hover: number;
|
||||
click: number;
|
||||
}
|
||||
|
||||
const getScale = (prefersReducedMotion: boolean): IScale => {
|
||||
if (prefersReducedMotion) {
|
||||
return {
|
||||
base: 1,
|
||||
hover: 1.05,
|
||||
click: 1.1,
|
||||
};
|
||||
}
|
||||
return {
|
||||
base: 1,
|
||||
hover: 1.1,
|
||||
click: 1.3,
|
||||
};
|
||||
};
|
||||
|
||||
const checkForWebGL = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
return !!(
|
||||
window.WebGLRenderingContext &&
|
||||
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
||||
);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const getRandomValue = (lower: number, upper: number) => {
|
||||
return Math.random() * (upper - lower) + lower;
|
||||
};
|
||||
|
||||
const getWindowDimensions = () => {
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
};
|
||||
};
|
||||
|
||||
export default function Jinx() {
|
||||
const toast = useToast();
|
||||
const { a11yPrefersState } = useUserPreferences();
|
||||
|
||||
// redux
|
||||
const fragmentShader = useAppSelector(selectFragmentShader);
|
||||
const toasters = useAppSelector(selectToasters);
|
||||
const timer = useAppSelector(selectTimer);
|
||||
const prefersReducedMotion = useAppSelector(selectPrefersReducedMotion);
|
||||
const dispatch = useAppDispatch();
|
||||
const setRandomFragmentShader = () => {
|
||||
dispatch(
|
||||
updateFragmentShader(
|
||||
getRandomShader(fragmentShader, prefersReducedMotion),
|
||||
),
|
||||
);
|
||||
};
|
||||
// refs
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
// state
|
||||
const [vertexShader, setVertexShader] = useState<string>(`varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}`);
|
||||
const [hoverV, setHoverV] = useState<number>(-30);
|
||||
const [springState, setSpringState] = useState(false);
|
||||
const [hoverState, setHoverState] = useState(false);
|
||||
const [clientSize, setClientSize] = useState(getWindowDimensions());
|
||||
const [hasWebGL, setHasWebGL] = useState(false);
|
||||
|
||||
// rendering
|
||||
const deltaMultiplier = prefersReducedMotion ? 1 : 5;
|
||||
const jinxTexture = useLoader(TextureLoader, jinx.src);
|
||||
const shader = {
|
||||
uniforms: {
|
||||
u_time: { value: timer.getElapsedTime() * deltaMultiplier },
|
||||
u_resolution: { value: new Vector2(420, 420) },
|
||||
u_texture: { value: jinxTexture },
|
||||
},
|
||||
vertexShader,
|
||||
fragmentShader: fragmentShader,
|
||||
};
|
||||
const perspective = 800;
|
||||
const fov = (180 * (2 * Math.atan(420 / 2 / perspective))) / Math.PI;
|
||||
const camera = new PerspectiveCamera(fov, 420 / 420, 1, 1000);
|
||||
camera.position.set(0, 0, perspective);
|
||||
|
||||
const jinxSpring = useSpring({
|
||||
transform: hoverState ? `rotate(${hoverV}deg)` : 'rotate(0deg)',
|
||||
scale: hoverState
|
||||
? springState
|
||||
? getScale(prefersReducedMotion).click
|
||||
: getScale(prefersReducedMotion).hover
|
||||
: getScale(prefersReducedMotion).base,
|
||||
config: {
|
||||
tension: prefersReducedMotion ? 100 : 300,
|
||||
friction: prefersReducedMotion ? 10 : 10,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const toastId = 'editor';
|
||||
const jinxToastId = 'jinx';
|
||||
if (!toasters.includes(jinxToastId)) {
|
||||
dispatch(addToaster(jinxToastId));
|
||||
|
||||
toast({
|
||||
id: `${jinxToastId}-${Date.now()}`,
|
||||
title: 'Jinx My Beloved',
|
||||
isClosable: true,
|
||||
description: 'Click the Jinx to get a new random shader!',
|
||||
duration: 15000,
|
||||
status: 'info',
|
||||
position: 'top',
|
||||
});
|
||||
}
|
||||
if (!toasters.includes(toastId)) {
|
||||
dispatch(addToaster(toastId));
|
||||
|
||||
toast({
|
||||
id: `${toastId}-${Date.now()}`,
|
||||
title: 'Shader Editor Added',
|
||||
isClosable: true,
|
||||
duration: 15000,
|
||||
status: 'info',
|
||||
description:
|
||||
'Try it out! Feel free to share any cool results you want added to the site!',
|
||||
position: 'top',
|
||||
});
|
||||
}
|
||||
}, [dispatch, toasters]);
|
||||
|
||||
useEffect(() => {
|
||||
setHoverV(
|
||||
prefersReducedMotion ? getRandomValue(-5, 5) : getRandomValue(-30, 30),
|
||||
);
|
||||
}, [prefersReducedMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(updatePrefersReducedMotion(a11yPrefersState.prefersReducedMotion));
|
||||
}, [a11yPrefersState.prefersReducedMotion, prefersReducedMotion, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setClientSize(getWindowDimensions());
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
setHasWebGL(checkForWebGL());
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
height: '100%',
|
||||
minHeight: '420px',
|
||||
}}
|
||||
>
|
||||
{hasWebGL ? (
|
||||
<Box
|
||||
boxSize="sm"
|
||||
mb={0}
|
||||
style={{
|
||||
gridRowStart: '1',
|
||||
gridColumnStart: '1',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
minHeight: '420px',
|
||||
maxWidth: `${clientSize.width - 65}px`,
|
||||
}}
|
||||
>
|
||||
<animated.div
|
||||
style={{
|
||||
...jinxSpring,
|
||||
cursor: 'pointer',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
WebkitTouchCallout: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
KhtmlUserSelect: 'none',
|
||||
MozUserSelect: 'none',
|
||||
msUserSelect: 'none',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
onMouseDown={() => {
|
||||
setSpringState(true);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
setSpringState(false);
|
||||
setHoverV(
|
||||
prefersReducedMotion
|
||||
? getRandomValue(-5, 5)
|
||||
: getRandomValue(-30, 30),
|
||||
);
|
||||
}}
|
||||
onTouchStart={() => {
|
||||
setSpringState(true);
|
||||
setHoverState(true);
|
||||
}}
|
||||
onTouchEnd={() => {
|
||||
setSpringState(false);
|
||||
setHoverState(false);
|
||||
setHoverV(
|
||||
prefersReducedMotion
|
||||
? getRandomValue(-5, 5)
|
||||
: getRandomValue(-30, 30),
|
||||
);
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHoverState(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setHoverState(false);
|
||||
setSpringState(false);
|
||||
setHoverV(
|
||||
prefersReducedMotion
|
||||
? getRandomValue(-5, 5)
|
||||
: getRandomValue(-30, 30),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Canvas
|
||||
camera={camera}
|
||||
onCreated={({ gl }) => {
|
||||
gl.toneMapping = ACESFilmicToneMapping;
|
||||
gl.outputEncoding = sRGBEncoding;
|
||||
}}
|
||||
className={styles.canvas}
|
||||
ref={canvasRef}
|
||||
>
|
||||
<ambientLight intensity={0.5} />
|
||||
|
||||
<A11y
|
||||
role="button"
|
||||
description="Jinx the cat rendered in realtime with various random shaders applied to them."
|
||||
activationMsg="Got a new random shader!"
|
||||
actionCall={() => {
|
||||
setRandomFragmentShader();
|
||||
}}
|
||||
>
|
||||
<JinxMyBeloved
|
||||
shader={shader}
|
||||
setRandomFragmentShader={setRandomFragmentShader}
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
timer={timer}
|
||||
/>
|
||||
</A11y>
|
||||
</Canvas>
|
||||
<A11yAnnouncer />
|
||||
</div>
|
||||
</animated.div>
|
||||
</Box>
|
||||
) : (
|
||||
<Flex w="100%" h="100%" align="center" justify="center">
|
||||
<Text>sowwy you dont have webgl :(</Text>
|
||||
</Flex>
|
||||
)}
|
||||
<JinxEditor
|
||||
setVertexShader={setVertexShader}
|
||||
vertexShader={vertexShader}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
.editorContainer {
|
||||
counter-reset: line;
|
||||
outline: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lineNumber:before {
|
||||
color: #282a36;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 100%;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
opacity: 0.8;
|
||||
user-select: none;
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
}
|
||||
|
||||
.lineNumberDark:before {
|
||||
color: #f8f8f2;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 100%;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
opacity: 0.3;
|
||||
user-select: none;
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
}
|
||||
|
||||
.canvas canvas {
|
||||
width: 420px !important;
|
||||
height: 420px !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #bd93f9;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label:before {
|
||||
content: '//';
|
||||
}
|
||||
@ -0,0 +1,215 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Editor from 'react-simple-code-editor';
|
||||
import Konami from 'react-konami-code';
|
||||
import Prism from 'prismjs';
|
||||
import 'prism-themes/themes/prism-dracula.css';
|
||||
import { Hook, Unhook } from 'console-feed';
|
||||
import { Message } from 'console-feed/lib/definitions/Console';
|
||||
import { Box, useBreakpointValue, useColorMode } from '@chakra-ui/react';
|
||||
|
||||
import { useAppDispatch, useAppSelector } from './store/hooks';
|
||||
import { selectShowEditor, toggleEditor } from './store/showEditor';
|
||||
|
||||
import styles from './JinxEditor.module.css';
|
||||
import {
|
||||
selectFragmentShader,
|
||||
updateFragmentShader,
|
||||
} from './store/fragmentShader';
|
||||
|
||||
// VERTEX | FRAGMENT
|
||||
//
|
||||
// ERROR: 0:0: '#version 300 es' is not allowed.
|
||||
const vertexLine = 57;
|
||||
const magicNumber = 7;
|
||||
const parseLog = (log: string, vertexShader: string) => {
|
||||
const shaderType = log.includes('VERTEX') ? 'vertex' : 'fragment';
|
||||
const error = log
|
||||
.split(shaderType === 'vertex' ? 'VERTEX' : 'FRAGMENT')[1]
|
||||
.trim()
|
||||
.split('\n')[0]
|
||||
.trim();
|
||||
const line = Number(error.split('ERROR: 0:')[1].split(':')[0] || '');
|
||||
const errorMessage =
|
||||
error.split('ERROR: 0:')[1].split(':').slice(1).join(':') || '';
|
||||
const vertexEnd = vertexLine + vertexShader.split('\n').length;
|
||||
const section =
|
||||
line > vertexLine && line <= vertexEnd ? 'vertex' : 'fragment';
|
||||
const mappedLine =
|
||||
section === 'vertex' ? line - vertexLine : line - vertexEnd - magicNumber;
|
||||
return { section, mappedLine, errorMessage };
|
||||
};
|
||||
|
||||
const JinxEditor = ({
|
||||
vertexShader,
|
||||
setVertexShader,
|
||||
}: {
|
||||
vertexShader: string;
|
||||
setVertexShader: (shader: string) => void;
|
||||
}) => {
|
||||
const { colorMode } = useColorMode();
|
||||
const rPadding = useBreakpointValue({ base: '0', md: '10px' });
|
||||
|
||||
// state
|
||||
const [statusVertex, setStatusVertex] = useState<string>('');
|
||||
const [statusFragment, setStatusFragment] = useState<string>('');
|
||||
|
||||
// redux
|
||||
const fragmentShader = useAppSelector(selectFragmentShader);
|
||||
const showEditor = useAppSelector(selectShowEditor);
|
||||
const dispatch = useAppDispatch();
|
||||
// effects
|
||||
useEffect(() => {
|
||||
// okay so basiaclly they dont emit any error or any event of any kind just log to the console 5head
|
||||
|
||||
const hooked = Hook(
|
||||
window.console,
|
||||
(log: Message) => {
|
||||
if (
|
||||
log?.method === 'error' &&
|
||||
log?.data?.[0].startsWith(
|
||||
'THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS',
|
||||
)
|
||||
) {
|
||||
const { section, mappedLine, errorMessage } = parseLog(
|
||||
log.data[0],
|
||||
vertexShader,
|
||||
);
|
||||
section === 'vertex'
|
||||
? setStatusVertex(`[${mappedLine}] ${errorMessage}`)
|
||||
: setStatusFragment(`[${mappedLine}] ${errorMessage}`);
|
||||
}
|
||||
},
|
||||
false,
|
||||
);
|
||||
return () => {
|
||||
Unhook(hooked);
|
||||
};
|
||||
}, [vertexShader, dispatch]);
|
||||
|
||||
const keyHandler = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
dispatch(toggleEditor());
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', keyHandler);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', keyHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
mb={6}
|
||||
roundedTop={6}
|
||||
style={{
|
||||
visibility: showEditor ? 'visible' : 'hidden',
|
||||
display: showEditor ? 'block' : 'none',
|
||||
width: '100%',
|
||||
gridRowStart: '1',
|
||||
gridColumnStart: '1',
|
||||
padding: rPadding,
|
||||
backgroundColor:
|
||||
colorMode === 'light' ? 'rgba(40,42,54,0.85)' : 'rgba(40,42,54,0.15)',
|
||||
zIndex: '99',
|
||||
}}
|
||||
className="jinx-editor"
|
||||
>
|
||||
<label htmlFor="vertex-editor" className={styles.label}>
|
||||
vertex shader
|
||||
</label>
|
||||
<Editor
|
||||
key="vertexEditor"
|
||||
value={vertexShader}
|
||||
onValueChange={(code) => {
|
||||
setVertexShader(code);
|
||||
setStatusVertex('');
|
||||
}}
|
||||
highlight={(code) =>
|
||||
Prism.highlight(code, Prism.languages.glsl, 'glsl')
|
||||
.split('\n')
|
||||
.map(
|
||||
(line) =>
|
||||
`<span class="${
|
||||
colorMode === 'light'
|
||||
? styles.lineNumber
|
||||
: styles.lineNumberDark
|
||||
}">${line}</span>`,
|
||||
)
|
||||
.join('\n')
|
||||
}
|
||||
style={{
|
||||
color: colorMode === 'light' ? '#f8f8f2' : '#f8f8f2',
|
||||
overflow: 'initial',
|
||||
}}
|
||||
textareaClassName={`foobar-maintaining-fun-1 ${styles.editorContainer}`}
|
||||
textareaId="vertex-editor"
|
||||
className={styles.editorParent}
|
||||
/>
|
||||
<Box
|
||||
className="statusBar"
|
||||
backgroundColor={'red.200'}
|
||||
style={{
|
||||
width: '100%',
|
||||
color: '#2b2e3b',
|
||||
}}
|
||||
>
|
||||
{statusVertex}
|
||||
</Box>
|
||||
<label htmlFor="fragment-editor" className={styles.label}>
|
||||
fragment shader
|
||||
</label>
|
||||
<Editor
|
||||
key="fragmentEditor"
|
||||
value={fragmentShader} // no clue but hey it works :shrug:
|
||||
onValueChange={(code) => {
|
||||
dispatch(updateFragmentShader(code));
|
||||
setStatusFragment('');
|
||||
}}
|
||||
highlight={(code) =>
|
||||
Prism.highlight(code, Prism.languages.glsl, 'glsl')
|
||||
.split('\n')
|
||||
.map(
|
||||
(line) =>
|
||||
`<span class="${
|
||||
colorMode === 'light'
|
||||
? styles.lineNumber
|
||||
: styles.lineNumberDark
|
||||
}">${line}</span>`,
|
||||
)
|
||||
.join('\n')
|
||||
}
|
||||
style={{
|
||||
color: colorMode === 'light' ? '#f8f8f2' : '#f8f8f2',
|
||||
overflow: 'initial',
|
||||
}}
|
||||
textareaClassName={`foobar-maintaining-fun-2 ${styles.editorContainer}`}
|
||||
textareaId="fragment-editor"
|
||||
className={styles.editorParent}
|
||||
/>
|
||||
<Box
|
||||
className="statusBar"
|
||||
backgroundColor={'red.200'}
|
||||
style={{
|
||||
width: '100%',
|
||||
color: '#2b2e3b',
|
||||
}}
|
||||
>
|
||||
{statusFragment}
|
||||
</Box>
|
||||
|
||||
<Konami
|
||||
action={() => {
|
||||
dispatch(toggleEditor());
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default JinxEditor;
|
||||
@ -0,0 +1,77 @@
|
||||