sern/website
1
0
Fork 0
mirror of https://github.com/sern-handler/website synced 2026-06-06 01:16:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

wow such feature

Browse Source
This commit is contained in:
Izan Gil
2024-04-27 20:19:22 +02:00
parent b6c2a3c92e
commit 5d04413dbe
11 changed files with 261 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.idea/workspace.xml generated
View File

@@ -5,8 +5,17 @@
</component>
<component name="ChangeListManager">
<list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="initial built from the ground up page done">
<change afterPath="$PROJECT_DIR$/src/components/PluginCard/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/PluginCard/index.module.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/PluginModal/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/PluginModal/index.module.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/hooks/useTheme.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Sponsors/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Sponsors/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/css/custom.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/custom.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/index.module.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.module.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/plugins.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/plugins.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -44,9 +53,9 @@
<component name="MarkdownSettingsMigration">
<option name="stateVersion" value="1" />
</component>
<component name="ProjectColorInfo"><![CDATA[{
"associatedIndex": 5
}]]></component>
<component name="ProjectColorInfo">{
&quot;associatedIndex&quot;: 5
}</component>
<component name="ProjectId" id="2DJXFY4dwukGLOzXi05b6lHCkuk" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
@@ -59,7 +68,7 @@
"RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"WebServerToolWindowFactoryState": "false",
"git-widget-placeholder": "feat/sponsorpage",
"git-widget-placeholder": "main",
"kotlin-language-version-configured": "true",
"last_opened_file_path": "C:/Users/jacob/OneDrive/Desktop/Projects/sern/website",
"node.js.detected.package.eslint": "true",
@@ -145,6 +154,7 @@
<workItem from="1673974979200" duration="2385000" />
<workItem from="1674757791435" duration="925000" />
<workItem from="1713448008567" duration="8323000" />
<workItem from="1714235989637" duration="1092000" />
</task>
<task id="LOCAL-00001" summary="feat: remove old index.html in static/">
<created>1660418841831</created>

3
package.json
View File

@@ -25,7 +25,8 @@
"jsdoc-parse-plus": "^1.3.0",
"prism-react-renderer": "^2.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-modal": "^3.16.1"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.0.0",

28
src/components/PluginCard/index.js Normal file
View File

@@ -0,0 +1,28 @@
import styles from './index.module.css'
import PluginModal from "../PluginModal";
export default function PluginCard({ plugin }) {
return (
<div className={styles.card}>
<div className={styles.cardHeader}>
<h3>{plugin.name}</h3>
</div>
<div className={styles.cardBody}>
<p>{plugin.description}</p>
</div>
<div className={styles.cardFooter}>
<PluginModal plugin={plugin} />
</div>
</div>
)
}
/*
- description
- hash
- name
- author
- link
- example
- version
*/

32
src/components/PluginCard/index.module.css Normal file
View File

@@ -0,0 +1,32 @@
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25%;
height: 100%;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--color-white);
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
}
.cardHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.cardBody {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.cardFooter {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
/* put on the right side of the footer */
margin-left: auto;
}

87
src/components/PluginModal/index.js Normal file
View File

@@ -0,0 +1,87 @@
import React from 'react';
import Modal from 'react-modal';
import styles from "./index.module.css";
import CodeBlock from "@theme/CodeBlock";
import clsx from "clsx";
import useTheme from "../../hooks/useTheme";
const light = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
width: "70vw",
height: "50vh",
backgroundColor: "#fff",
},
};
const dark = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
width: "70vw",
height: "50vh",
backgroundColor: "#333",
color: "#fff"
},
};
export default function PluginModal({ plugin }) {
const [modalIsOpen, setIsOpen] = React.useState(false);
const [theme] = useTheme();
const [modalCSS, setModalCSS] = React.useState(theme === "dark" ? dark : light);
function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
React.useEffect(() => {
setModalCSS(theme === "dark" ? dark : light)
}, [theme])
return (
<div>
<button onClick={openModal}>Info</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={modalCSS}
contentLabel={plugin.name}
>
<h2>{plugin.name} by {parseAuthor(plugin.author)}</h2>
<CodeBlock
language="ts"
title="/src/commands/ping.ts"
showLineNumbers
>
{plugin.example.replace('```ts', '').replace('```', '').trim()}
</CodeBlock>
<div className={styles.closeButton}>
<button onClick={closeModal}>close</button>
</div>
</Modal>
</div>
);
}
function parseAuthor(aut) {
const [interestingStuff,] = aut.toString().replace(/[\]<>@]/g, "").split("[")
return interestingStuff.trim()
}
/*
- description
- hash
- name
- author
- link
- example
- version
*/

11
src/components/PluginModal/index.module.css Normal file
View File

@@ -0,0 +1,11 @@
.closeButton {
position: absolute;
bottom: 0;
right: 0;
padding: 0.5rem;
cursor: pointer;
}
[data-theme='dark'] .modal {
background-color: var(--ifm-color-primary);
}

20
src/css/custom.css
View File

@@ -38,7 +38,27 @@
--ifm-color-primary-light: #ffffff;
--ifm-color-primary-lighter: #ffffff;
--ifm-color-primary-lightest: #ffffff;
--ifm-background-color: #242526;
--docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.3);
--ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Meslo NGF', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
--ifm-navbar-background-color :#66002a
}
button {
background-color: var(--ifm-color-primary);
transition: background-color 0.3s;
color: var(--ifm-background-color);
border: none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
}
button:hover {
/* change the color of the button when hovered, with a bit of a transition */
background-color: var(--ifm-color-primary-dark);
transition: background-color 0.3s;
}
/* replicate the button parallax that for example material design has */
button:active {
transform: translateY(0.09rem);
}

14
src/hooks/useTheme.js Normal file
View File

@@ -0,0 +1,14 @@
/* make a react hook which checks the data-theme */
import { useEffect, useState } from "react";
export default function useTheme() {
const [theme, setTheme] = useState(window.localStorage.getItem('theme'));
useEffect(() => {
window.addEventListener('storage', (e) => {
e.key === 'theme' && setTheme(e.newValue);
})
}, []);
return [theme, setTheme];
}

14
src/pages/index.module.css
View File

@@ -4,12 +4,15 @@
*/
.heroBanner {
padding: 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.header {
padding: 1rem;
}
.buttons {
display: flex;
align-items: center;
@@ -22,6 +25,11 @@
}
}
herotitle_font {
font-size: auto
.cntnr {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1500px;
gap: 1rem;
margin: 2rem auto;
}

24
src/pages/plugins.js
View File

@@ -2,17 +2,29 @@ import React from 'react';
import Layout from '@theme/Layout';
import clsx from "clsx";
import styles from "./index.module.css";
import PluginCard from "../components/PluginCard";
export default function Plugins() {
const [pluginList, setPluginList] = React.useState([])
React.useEffect(() => {
const asyncFetch = async () => {
const response = await fetch('https://raw.githubusercontent.com/sern-handler/awesome-plugins/main/pluginlist.json')
const data = await response.json()
setPluginList(data)
}
asyncFetch()
}, [])
return (
<Layout>
<header className={clsx('hero hero--primary-darker', styles.heroBanner)}>
<h1 className={"hero__title"}>
Coming soon
</h1>
</header>
<h1 className={styles.header}>
Plugins
</h1>
<div className={styles.cntnr}>
{pluginList.map(p => (
<PluginCard plugin={p} key={p.hash} />
))}
</div>
</Layout>
)
}

24
yarn.lock
View File

@@ -4171,6 +4171,11 @@ execa@^5.0.0:
signal-exit "^3.0.3"
strip-final-newline "^2.0.0"
exenv@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
express@^4.17.3:
version "4.19.2"
resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
@@ -7307,7 +7312,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-lifecycles-compat@~3.0.4:
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@~3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -7319,6 +7324,16 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
dependencies:
"@babel/runtime" "^7.10.3"
react-modal@^3.16.1:
version "3.16.1"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
dependencies:
exenv "^1.2.0"
prop-types "^15.7.2"
react-lifecycles-compat "^3.0.0"
warning "^4.0.3"
react-router-config@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -8614,6 +8629,13 @@ wait-on@^7.0.1:
minimist "^1.2.8"
rxjs "^7.8.1"
warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watchpack@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"