This commit is contained in:
EDRipper 2026-01-22 14:19:40 -05:00
parent d9532367da
commit 78c1b30e78
7 changed files with 124 additions and 22 deletions

View file

@ -57,7 +57,13 @@ git clone https://github.com/hackclub/stickers
cp .env.example .env
npm install
npm run dev
# In a separate terminal, for the backend:
cd backend
cp .env.example .env
# Edit .env and set SESSION_SECRET to a 64+ char string (run: openssl rand -hex 64)
bundle config set --local path 'vendor/bundle'
bundle install
bundle exec rackup config.ru -p 9292
</pre>

View file

@ -1,10 +1,17 @@
AIRTABLE_PAT=dummy
AIRTABLE_BASE_ID=dummy
SESSION_SECRET=dummy
OIDC_ISSUER=dummy
OIDC_CLIENT_ID=dummy
OIDC_CLIENT_SECRET=dummy
OIDC_REDIRECT_URI=dummy
HACKATIME_CLIENT_ID=dummy
HACKATIME_CLIENT_SECRET=dummy
HACKATIME_REDIRECT_URI=dummy
# Airtable
AIRTABLE_PAT=your_airtable_personal_access_token
AIRTABLE_BASE_ID=your_airtable_base_id
# Session (generate with: openssl rand -hex 64)
SESSION_SECRET=dummy_session_secret
# OIDC Auth
OIDC_ISSUER=https://auth.hackclub.com
OIDC_CLIENT_ID=your_oidc_client_id
OIDC_CLIENT_SECRET=your_oidc_client_secret
OIDC_REDIRECT_URI=http://localhost:9292/auth/oidc/callback
# URLs
FRONTEND_URL=http://localhost:5173
AUTH_SUCCESS_REDIRECT=http://localhost:5173/stickers
AUTH_LOGOUT_REDIRECT=http://localhost:5173

View file

@ -11,9 +11,10 @@ class Shop < Grape::API
route_param :id, type: String do
get do
record = shopRecord.find(params[:id])
record = ShopRecord.find(params[:id])
error!('not found', 404) unless record
record.as_json
end
end
end
end

View file

@ -1,3 +1,3 @@
class ApplicationRecord < AirctiveRecord::Base
self.base_key = ENV['AIRTABLE_BASE']
self.base_key = ENV['AIRTABLE_BASE_ID']
end

View file

@ -1,4 +1,4 @@
frozen_string_literal: true
# frozen_string_literal: true
class StickerRecord < AirctiveRecord::Base
self.base_key = ENV['AIRTABLE_BASE_ID']

7
package-lock.json generated
View file

@ -995,6 +995,7 @@
"integrity": "sha512-vByReCTTdlNM80vva8alAQC80HcOiHLkd8XAxIiKghKSHcqeNfyhp3VsYAV8VSiPKu4Jc8wWCfsZNAIvd1uCqA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@sveltejs/acorn-typescript": "^1.0.5",
@ -1034,6 +1035,7 @@
"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
"debug": "^4.4.1",
@ -1094,6 +1096,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@ -1581,6 +1584,7 @@
"integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
@ -1681,6 +1685,7 @@
"integrity": "sha512-2074U+vObO5Zs8/qhxtBwdi6ZXNIhEBTzNmUFjiZexLxTdt9vq96D/0pnQELl6YcpLMD7pZ2dhXKByfGS8SAdg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@jridgewell/remapping": "^2.3.4",
"@jridgewell/sourcemap-codec": "^1.5.0",
@ -1788,6 +1793,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -1802,6 +1808,7 @@
"integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",

View file

@ -44,11 +44,42 @@
{/snippet}
</Peelable>
<Peelable
class="see-stickers-sticker"
corner="bottom-right"
peelOnHover={true}
hoverPeelAmount={0.4}
peelOnClick={true}
peelAwayDuration={1000}
onPeelComplete={() => window.location.href = '/archive'}
borderRadius="0.5rem"
>
{#snippet topContent()}
<div class="see-stickers-face">
View Stickers
<span class="subtext">no sign in needed</span>
</div>
{/snippet}
{#snippet backContent()}
<div class="sticker-back"></div>
{/snippet}
{#snippet bottomContent()}
<div class="sticker-surface">
<span>Loading...</span>
</div>
{/snippet}
</Peelable>
<footer><a href="https://hackclub.com/privacy-and-terms/" target="_blank" rel="noopener noreferrer">Privacy and Terms</a></footer>
</div>
<footer class="site-footer">
<b>THIS SITE IS UNDER CONSTRUCTION</b>
</footer>
<div class="construction-notice">
🚧 Site still Under Construction!
</div>
<div class="bottom-footers">
<footer class="open-source-footer">
<a href="https://github.com/hackclub/stickers?tab=readme-ov-file" target="_blank" rel="noopener noreferrer">open source, drop us a <h3 style="display:inline"></h3></a>
</footer>
</div>
</div>
<style>
@ -72,10 +103,18 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 100vh;
font-family: 'Departure Mono', monospace;
padding: 2rem;
box-sizing: border-box;
position: relative;
}
.bottom-footers {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.hero-logo {
@ -167,11 +206,53 @@
color: #666;
margin-top: 1rem;
}
.site-footer {
background: #000000;
color: #ff0000;
.construction-notice {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
font-family: 'Departure Mono', monospace;
color: #666;
}
.open-source-footer {
font-weight: bold;
color: rgba(0, 0, 0);
text-align: center;
padding: 1rem;
font-size: 2rem;
padding: 0.5rem;
font-size: 0.9rem;
font-family: sans-serif;
text-decoration: none;
}
:global(.see-stickers-sticker) {
width: clamp(150px, 20vw, 300px);
min-height: clamp(45px, 6vw, 80px);
cursor: pointer;
}
.see-stickers-face {
width: 100%;
height: 100%;
background: #8a9bb0;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-family: 'Departure Mono', monospace;
font-size: clamp(1rem, 3vw, 1.5rem);
padding: 0.5rem;
box-sizing: border-box;
}
.see-stickers-face .subtext {
font-size: clamp(0.5rem, 1.5vw, 0.7rem);
color: rgba(255, 255, 255, 0.85);
margin-top: 0.2rem;
}
</style>