mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Final site form
This commit is contained in:
Malted
parent
1e38ca15b1
commit
3e3e2fd027
5 changed files with 215 additions and 70 deletions
|
|
@ -113,8 +113,8 @@ const ReplitForm = ({ cssDark }) => {
|
|||
'/stickers/orphmoji_peefest.png',
|
||||
'/stickers/skullpup_boba.png',
|
||||
'/stickers/hackers,_assemble!.png',
|
||||
'/stickers/orphmoji_yippee.png',
|
||||
'/replit/replit-fire.png'
|
||||
'/stickers/orphmoji_yippee.png'
|
||||
// '/replit/replit-fire.png'
|
||||
]
|
||||
|
||||
const fieldStyle = ({ disabled }) => ({
|
||||
|
|
|
|||
|
|
@ -14,15 +14,13 @@ const ProgressComponent = ({ progress }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ marginBottom: '1rem' }}>
|
||||
{progress.completed ? (
|
||||
<Text>Export complete! Check your email.</Text>
|
||||
) : (
|
||||
<Text>
|
||||
{processedCount} of {progress.repl_count} repls processed!
|
||||
{title ? <Text>{title}</Text> : null}
|
||||
</Text>
|
||||
)}
|
||||
<Box sx={{ marginBottom: '1rem', textAlign: 'center' }}>
|
||||
<Text sx={{ fontSize: '1.2rem' }}>
|
||||
{progress.completed
|
||||
? 'Export complete! Check your email.'
|
||||
: `${processedCount} of ${progress.repl_count} repls processed!
|
||||
${title ? <Text>{title}</Text> : ''}`}
|
||||
</Text>
|
||||
|
||||
<Progress
|
||||
sx={{ color: 'hsl(23, 94%, 32%)', backgroundColor: 'smoke' }}
|
||||
|
|
|
|||
93
components/replit/token-instructions.js
Normal file
93
components/replit/token-instructions.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
'use client'
|
||||
|
||||
import Icon from '@hackclub/icons'
|
||||
import { useState } from 'react'
|
||||
import { Box, Card, Text, Image, Heading, Button } from 'theme-ui'
|
||||
|
||||
const TokenInstructions = () => {
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
|
||||
const tokenSteps = [
|
||||
{
|
||||
image: '/replit/aarc1.gif',
|
||||
desc: "Open your browser's developer tools. You can do this by right-clicking on the page and selecting 'Inspect' or by pressing F12 on your keyboard."
|
||||
},
|
||||
{
|
||||
image: '/replit/aarc2.gif',
|
||||
desc: 'Select the application tab in the devtools'
|
||||
},
|
||||
{
|
||||
image: '/replit/aarc3.gif',
|
||||
desc: "Make sure replit.com cookies are selected, then scroll down to find 'connect.sid'. Copy the entire token & paste it in the form at the top of this page."
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<Card sx={{ maxWidth: '100%', mx: 'auto', p: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
// justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: '2rem',
|
||||
mb: 3,
|
||||
marginX: 'auto',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCurrentStep(prev => Math.max(prev - 1, 0))
|
||||
}}
|
||||
sx={{
|
||||
bg: 'hsl(23, 94%, 32%)',
|
||||
opacity: currentStep === 0 ? 0.5 : 1,
|
||||
pointerEvents: currentStep === 0 ? 'none' : 'auto'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ lineHeight: 0, marginRight: '-8px' }}>
|
||||
<Icon glyph="view-back" />
|
||||
</Box>
|
||||
</Button>
|
||||
|
||||
<Heading as="h3">
|
||||
Step {currentStep + 1} of {tokenSteps.length}
|
||||
</Heading>
|
||||
|
||||
<Button
|
||||
onClick={() => setCurrentStep(prev => Math.min(prev + 1, 2))}
|
||||
sx={{
|
||||
bg: 'hsl(23, 94%, 32%)',
|
||||
opacity: currentStep === 2 ? 0.5 : 1,
|
||||
pointerEvents: currentStep === 2 ? 'none' : 'auto'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ rotate: '180deg', lineHeight: 0, marginLeft: '-8px' }}>
|
||||
<Icon glyph="view-back" />
|
||||
</Box>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
marginY: '1rem',
|
||||
fontSize: '1.2rem',
|
||||
textAlign: 'center',
|
||||
textWrap: 'balance'
|
||||
}}
|
||||
>
|
||||
{tokenSteps[currentStep].desc}
|
||||
</Text>
|
||||
<Image
|
||||
src={tokenSteps[currentStep].image}
|
||||
alt={`Step ${currentStep + 1}`}
|
||||
sx={{ width: '100%', height: 'auto', borderRadius: '0.25rem' }}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default TokenInstructions
|
||||
161
pages/replit.js
161
pages/replit.js
|
|
@ -6,6 +6,7 @@ import Nav from '../components/nav'
|
|||
import ForceTheme from '../components/force-theme'
|
||||
import ReplitForm from '../components/replit/form'
|
||||
import Progress from '../components/replit/progress'
|
||||
import TokenInstructions from '../components/replit/token-instructions'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const ReplitPage = () => {
|
||||
|
|
@ -36,28 +37,13 @@ const ReplitPage = () => {
|
|||
'Get free stickers'
|
||||
]
|
||||
|
||||
const tokenSteps = [
|
||||
{
|
||||
image: '/replit/aarc1.gif',
|
||||
desc: "Open your browser's developer tools. You can do this by right-clicking on the page and selecting 'Inspect' or by pressing F12 on your keyboard."
|
||||
},
|
||||
{
|
||||
image: '/replit/aarc2.gif',
|
||||
desc: 'Select the application tab in the devtools'
|
||||
},
|
||||
{
|
||||
image: '/replit/aarc3.gif',
|
||||
desc: "Make sure replit.com cookies are selected, then scroll down to find 'connect.sid'. Copy the entire token & paste it in the form at the top of this page."
|
||||
}
|
||||
]
|
||||
|
||||
const cssDark = 'hsl(23, 94%, 32%)'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Export your Repls"
|
||||
title="Export your repls"
|
||||
description="Replit free has shut down. Export with Hack Club to GitHub Education's new free codespaces offering"
|
||||
/>
|
||||
<style>{`html { scroll-behavior: smooth; } body { background-color: hsl(23, 94%, 96%); }`}</style>
|
||||
|
|
@ -76,19 +62,82 @@ const ReplitPage = () => {
|
|||
color: 'white'
|
||||
}}
|
||||
>
|
||||
<Heading as="h1" sx={{ position: 'relative', marginBottom: '1rem' }}>
|
||||
Replit Lifeboat:{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{ display: 'inline-flex', flexDirection: 'column' }}
|
||||
>
|
||||
Save Our Ships
|
||||
<Image
|
||||
src="/replit/sos-morse.svg"
|
||||
alt="SOS in morse code"
|
||||
sx={{ opacity: 0.5 }}
|
||||
/>
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '-2.5rem',
|
||||
bottom: '-1rem',
|
||||
rotate: '-30deg',
|
||||
fontSize: '3rem'
|
||||
}}
|
||||
>
|
||||
🛟
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '2rem',
|
||||
top: '-3rem',
|
||||
rotate: '15deg',
|
||||
fontSize: '2.5rem'
|
||||
}}
|
||||
>
|
||||
🛳️
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: '-2rem',
|
||||
top: '-2.5rem',
|
||||
rotate: '30deg',
|
||||
fontSize: '3rem'
|
||||
}}
|
||||
>
|
||||
🚤
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: '-5rem',
|
||||
bottom: '-1.5rem',
|
||||
rotate: '20deg',
|
||||
fontSize: '3rem'
|
||||
}}
|
||||
>
|
||||
🌊
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: '12rem',
|
||||
bottom: '-2.5rem',
|
||||
rotate: '-15deg',
|
||||
fontSize: '3rem',
|
||||
zIndex: 10
|
||||
}}
|
||||
>
|
||||
⛵
|
||||
</Text>
|
||||
</Heading>
|
||||
|
||||
<Heading
|
||||
as="h1"
|
||||
as="h2"
|
||||
sx={{
|
||||
fontSize: '4em'
|
||||
}}
|
||||
onMouseOver={() => {
|
||||
document.getElementById('og-replit').style.opacity = '0'
|
||||
document.getElementById('fire-replit').style.opacity = '1'
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
document.getElementById('og-replit').style.opacity = '1'
|
||||
document.getElementById('fire-replit').style.opacity = '0'
|
||||
}}
|
||||
>
|
||||
Export your{' '}
|
||||
<Text
|
||||
|
|
@ -98,6 +147,16 @@ const ReplitPage = () => {
|
|||
alignItems: 'center',
|
||||
position: 'relative'
|
||||
}}
|
||||
/*
|
||||
onMouseOver={() => {
|
||||
document.getElementById('og-replit').style.opacity = '0'
|
||||
document.getElementById('fire-replit').style.opacity = '1'
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
document.getElementById('og-replit').style.opacity = '1'
|
||||
document.getElementById('fire-replit').style.opacity = '0'
|
||||
}}
|
||||
*/
|
||||
>
|
||||
Replit <style>{`.replit-fire {transition: opacity 0.1s;`}</style>
|
||||
<Image
|
||||
|
|
@ -107,6 +166,7 @@ const ReplitPage = () => {
|
|||
id="og-replit"
|
||||
className="replit-fire"
|
||||
/>
|
||||
{/*
|
||||
<Image
|
||||
src="/replit/replit-fire-nooutline.png"
|
||||
alt="replit"
|
||||
|
|
@ -119,18 +179,26 @@ const ReplitPage = () => {
|
|||
}}
|
||||
id="fire-replit"
|
||||
className="replit-fire"
|
||||
/>
|
||||
/>*/}
|
||||
</Text>{' '}
|
||||
repls
|
||||
</Heading>
|
||||
|
||||
<Text sx={{ maxWidth: '80ch', fontSize: '1.2em', marginY: '1em' }}>
|
||||
On 25th August, Replit cut down its free plan - it's now unusable.
|
||||
<Text
|
||||
sx={{
|
||||
maxWidth: '80ch',
|
||||
fontSize: '1.2em',
|
||||
marginY: '1em',
|
||||
marginTop: '1em',
|
||||
textWrap: 'pretty'
|
||||
}}
|
||||
>
|
||||
On 25th August, Replit cut down its free plan - many students won't be
|
||||
able to afford to keep using it.
|
||||
<br />
|
||||
Previously, you got unlimited repls for free, for as long as you
|
||||
wanted.
|
||||
<br />
|
||||
Now you get three repls, for 600 minutes per month (20 mins/day).
|
||||
We quickly built this tool in response - plug in your email and Replit
|
||||
token and get a zip file containing all your Repls, with full Git
|
||||
history constructed from Replit's files' history.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
|
|
@ -216,36 +284,11 @@ const ReplitPage = () => {
|
|||
</Box>
|
||||
|
||||
<Box sx={{ paddingTop: '5rem' }} id="instructions">
|
||||
<Heading as="h2" sx={{ marginBottom: '0.5em' }}>
|
||||
<Heading as="h2" sx={{ marginBottom: '0.5em', textAlign: 'center' }}>
|
||||
How to get your Replit <code>connect.sid</code> token
|
||||
</Heading>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem'
|
||||
}}
|
||||
>
|
||||
{tokenSteps.map((step, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
sx={{
|
||||
lineHeight: 0
|
||||
}}
|
||||
>
|
||||
<Heading as="h3" sx={{ lineHeight: 1.5 }}>
|
||||
Step {idx + 1}
|
||||
</Heading>
|
||||
<Text sx={{ lineHeight: 1.5 }}>{step.desc}</Text>
|
||||
<Image
|
||||
src={step.image}
|
||||
alt=""
|
||||
sx={{ borderRadius: '0.25rem', marginTop: '1em' }}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
<TokenInstructions />
|
||||
|
||||
<Link href="#">
|
||||
<Button
|
||||
|
|
|
|||
11
public/replit/sos-morse.svg
Normal file
11
public/replit/sos-morse.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="199" height="11" viewBox="0 0 199 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.91237 6.5969C4.91237 8.47854 2.72016 8.47621 2.07891 6.83302C1.36636 5.00711 3.28587 1.25278 5.46333 3.21249C7.19711 4.77289 2.69571 3.89383 4.91237 3.76344C6.89582 3.64676 7.42028 5.88853 4.91237 5.88853" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M20.3883 5.12509C20.2172 5.12509 20.3371 7.34741 17.7123 7.25019C12.7207 7.06532 20.2309 2.0624 20.2309 4.06255C20.2309 4.68126 16.326 3.70837 20.3883 3.70837C22.4736 3.70837 19.68 5.44704 19.68 3" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M35.6903 4.80359C35.6903 6.62578 34.8151 9.05657 32.3059 8.188C28.6805 6.93307 33.4542 1.74896 36.3199 2.00948C37.8207 2.14592 39.8906 5.12017 37.776 5.4726C36.1842 5.7379 34.8457 4.09522 37.107 4.09522" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M56 6H80.0844" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M90 6H110" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M121 6H145.084" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M180.655 8.60957C177.817 11.1329 176.207 4.05727 180.931 5.1071C182.811 5.52491 179.809 7.99404 179.239 8.21603C177.745 8.79677 175.905 8.04001 177.822 9.31794" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M164.221 4C166.071 4 166.202 6.74775 165.323 8.09278C164.415 9.48126 161.139 8.79943 162.214 7.18764C163.373 5.44905 166.954 6.71039 166.661 6.79411C164.977 7.2753 164.87 4.58876 165.638 6.12509" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M192.629 8.01366C190.508 8.01366 189.839 6.40456 192.354 5.96728C192.769 5.89506 198.219 5.46896 196.407 6.95112C195.528 7.67057 191.664 8.01366 194.203 8.01366C196.546 8.01366 197.756 8.72203 194.754 8.72203" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Add table
Reference in a new issue