+
diff --git a/src/components/astro/GetStarted.astro b/src/components/astro/GetStarted.astro
new file mode 100644
index 0000000..724c061
--- /dev/null
+++ b/src/components/astro/GetStarted.astro
@@ -0,0 +1,147 @@
+---
+
+---
+
+
+ Apps
+
+
+ + Install any .ipa +
+
+ SideStore allows you to
+
diff --git a/src/components/astro/Hero.astro b/src/components/astro/Hero.astro
new file mode 100644
index 0000000..7293d7f
--- /dev/null
+++ b/src/components/astro/Hero.astro
@@ -0,0 +1,46 @@
+
+ Download
+
+
+ + Get started +
+
+ SideStore works on iOS 14.0 and higher. You'll need a computer for the initial setup, but after that you can install apps directly on your
+ device.
+
+
+
+
+ -
+
- + + 1 + Download SideServer + + + + +
- + + 2 + Sideload App + + + + +
- + + 3 + WireGuard VPN + + + +
- + + 4 + Finished + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/astro/NavBar.astro b/src/components/astro/NavBar.astro
new file mode 100644
index 0000000..b0c9f01
--- /dev/null
+++ b/src/components/astro/NavBar.astro
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+ + SideStore +
++ An alternative app store for seamless sideloading. No jailbreak needed, and + no computer + after the initial install, only a WiFi connection. +
+ +
+
+ 
+
+
+
+
+
diff --git a/src/components/astro/OpenSource.astro b/src/components/astro/OpenSource.astro
new file mode 100644
index 0000000..af84ef8
--- /dev/null
+++ b/src/components/astro/OpenSource.astro
@@ -0,0 +1,177 @@
+---
+import VioletPhrase from '../preact/VioletPhrase';
+---
+
+
+
+
+
diff --git a/src/components/preact/AppMarquee.tsx b/src/components/preact/AppMarquee.tsx
new file mode 100644
index 0000000..15273eb
--- /dev/null
+++ b/src/components/preact/AppMarquee.tsx
@@ -0,0 +1,28 @@
+import rawApps from '../../applist.json';
+import MarqueeItem from '../preact/MarqueeItem';
+
+
+export default function AppMarquee() {
+ let apps = rawApps.sort(() => Math.random() - 0.5);
+
+ let rows = apps
+ .map((i) => ({ ...i, icon: i.filepath.endsWith('.webp') ? i.filepath : i.filepath + '.webp' }))
+ .map((i) => (MarqueeItem(i)))
+
+ let set1 = rows;
+ let set2 = rows.reverse();
+ return (
+
+ Open Source
+
+ + Free, forever +
+
+ SideStore is
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/preact/BtnFill.tsx b/src/components/preact/BtnFill.tsx
new file mode 100644
index 0000000..9f3313a
--- /dev/null
+++ b/src/components/preact/BtnFill.tsx
@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class btnFillProps {
+ extraClasses?: string;
+ id?: string;
+}
+
+export default function BtnFill(props: btnFillProps & PropsWithChildren) {
+ return (
+
+ );
+}
diff --git a/src/components/preact/BtnMaterial.tsx b/src/components/preact/BtnMaterial.tsx
new file mode 100644
index 0000000..9d94b3d
--- /dev/null
+++ b/src/components/preact/BtnMaterial.tsx
@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class btnMaterialProps {
+ extraClasses?: string;
+ id?: string;
+}
+
+export default function BtnMaterial(props: btnMaterialProps & PropsWithChildren) {
+ return (
+
+ );
+}
diff --git a/src/components/preact/CodeBlock.tsx b/src/components/preact/CodeBlock.tsx
new file mode 100644
index 0000000..32f011b
--- /dev/null
+++ b/src/components/preact/CodeBlock.tsx
@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class violetPhraseProps {} // for future use if necessary
+
+export default function CodeBlock(props: violetPhraseProps & PropsWithChildren) {
+ return (
+ {props.children}
+ );
+}
diff --git a/src/components/preact/GLink.tsx b/src/components/preact/GLink.tsx
new file mode 100644
index 0000000..dbfedf0
--- /dev/null
+++ b/src/components/preact/GLink.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class gLinkProps {
+ extraClasses?: string;
+ id?: string;
+ href: string = '';
+}
+
+export default function GLink(props: gLinkProps & PropsWithChildren) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/src/components/preact/MarqueeItem.tsx b/src/components/preact/MarqueeItem.tsx
new file mode 100644
index 0000000..6156abb
--- /dev/null
+++ b/src/components/preact/MarqueeItem.tsx
@@ -0,0 +1,17 @@
+class MarqueeItemProps {
+ name: string = '';
+ desc: string = '';
+ filepath: string = '';
+}
+
+export default function MarqueeItem(props: MarqueeItemProps) {
+ return (
+
+
+
+ {set1}
+
+
+
+
+ {set2}
+
+
+ ![{props.name}]({"assets/")
+
+ );
+}
diff --git a/src/components/preact/OSDependent.tsx b/src/components/preact/OSDependent.tsx
new file mode 100644
index 0000000..0f3f4d4
--- /dev/null
+++ b/src/components/preact/OSDependent.tsx
@@ -0,0 +1,30 @@
+import Bowser, { OS_MAP } from 'bowser';
+
+class OSDependentProps {
+ linux?: string;
+ macos?: string;
+ windows?: string;
+}
+
+export default function OSDependent(props: OSDependentProps) {
+ const detectedOS = Bowser.parse(navigator.userAgent).os.name?.toLowerCase();
+ let textToUse = '';
+
+ switch (detectedOS) {
+ case OS_MAP.MacOS:
+ textToUse = props.macos ? props.macos : '';
+ break;
+ case OS_MAP.Linux:
+ textToUse = props.linux ? props.linux : '';
+ break;
+ case OS_MAP.Windows:
+ textToUse = props.linux ? props.linux : '';
+ break;
+ case OS_MAP.WindowsPhone:
+ textToUse = 'who even uses these';
+ break;
+ default:
+ textToUse = props.macos ? props.macos : '';
+ }
+ return <>{textToUse};
+}
diff --git a/src/components/preact/SetupBtnFill.tsx b/src/components/preact/SetupBtnFill.tsx
new file mode 100644
index 0000000..0618f56
--- /dev/null
+++ b/src/components/preact/SetupBtnFill.tsx
@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class btnFillProps {
+ extraClasses?: string;
+ id?: string;
+}
+
+export default function BtnFill(props: btnFillProps & PropsWithChildren) {
+ return (
+
+ );
+}
diff --git a/src/components/preact/VioletPhrase.tsx b/src/components/preact/VioletPhrase.tsx
new file mode 100644
index 0000000..8b7c2fd
--- /dev/null
+++ b/src/components/preact/VioletPhrase.tsx
@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'preact/compat';
+
+class violetPhraseProps {} // for future use if necessary
+
+export default function VioletPhrase(props: violetPhraseProps & PropsWithChildren) {
+ return {props.children};
+}
diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 0000000..1efd46e
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,193 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');
+
+:root {
+ --credit: 'Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.';
+ --msg: 'Used in index.html';
+}
+
+@font-face {
+ font-family: 'SatoshiVariable';
+ src: url('./assets/fonts/Satoshi-Variable.ttf') format('truetype');
+ font-weight: 100 200 300 400 500 600 700 800 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Satoshi';
+ src: url('./assets/fonts/Satoshi-Bold.woff2') format('woff2'), url('./assets/fonts/Satoshi-Bold.woff') format('woff'),
+ url('./assets/fonts/Satoshi-Black.woff2') format('woff2'), url('./assets/fonts/Satoshi-Black.woff') format('woff');
+ font-weight: 700, 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+ scroll-behavior: smooth;
+ position: relative;
+ min-height: 100%;
+}
+
+body {
+ height: 100%;
+ /* background: radial-gradient(circle closest-corner at 70px 70px, rgba(90, 26, 229, 0.2), #121316 70%),
+ radial-gradient(circle at bottom right, #fff, #121316 70%), #121316; */
+ background: radial-gradient(circle 120vh at 25% -20px, rgba(90, 26, 229, 0.15), rgba(90, 26, 229, 0.15), transparent),
+ radial-gradient(circle 150vh at 70% 80%, rgba(26, 80, 229, 0.15), transparent), #121316;
+}
+
+
+.scrollbar-extrathin {
+ scrollbar-width: thin;
+}
+
+.scrollbar-extrathin::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+.mask-fade-vertical {
+ mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
+}
+
+.mask-fade-horizontal {
+ mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
+}
+
+.mask-fade-bottom {
+ mask-image: linear-gradient(#fff, #000000 50%, #0000);
+}
+
+.marquee-container {
+ --offset: -0%;
+ --move-initial: -0;
+ --move-final: calc(-50% + var(--offset));
+}
+
+.marquee-inner {
+ animation: marquee 240s linear infinite;
+ transform: translateZ(0) translateX(var(--move-initial));
+ will-change: contents;
+ transition: all 0.4s ease;
+ -webkit-transition: all 0.4s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .marquee-inner {
+ animation-play-state: paused !important;
+ }
+}
+
+.marquee-inner.marquee-reverse {
+ animation-direction: reverse;
+}
+
+.marquee-wrapper {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+.shadow-title-r {
+ background: linear-gradient(to bottom right, #fff 30%, hsla(0, 0%, 100%, 0.5));
+ background-clip: text;
+}
+
+.shadow-title-b {
+ background: linear-gradient(to bottom, #fff 5%, #fff 30%, hsla(0, 0%, 100%, 0.6));
+ background-clip: text;
+}
+
+.grid-fix {
+ -webkit-margin-top-collapse: discard;
+}
+
+.section-fade,
+.section-fade-items>* {
+ opacity: 0;
+ transform: translateY(80px) translateZ(0);
+ transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
+ -webkit-margin-top-collapse: discard;
+}
+
+.section-fade-less {
+ opacity: 0;
+ transform: translateY(40px) translateZ(0);
+ transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
+}
+
+.section-fade-items>* {
+ transform: translateY(40px) translateZ(0);
+ transition-delay: calc((var(--custom-index)) * 80ms);
+}
+
+.animate-fade-show,
+.section-fade-items.animate-fade-show>* {
+ opacity: 1;
+ transform: translateY(0px) translateZ(0);
+ /* transition-delay: 0ms; */
+}
+
+#repos-grid.animate-fade-show>* {
+ --delay: calc((var(--custom-index, 0)) * 80ms);
+ transition: opacity 0.6s ease-in-out var(--delay), transform 0.6s ease-in-out var(--delay), background-color 150ms ease-in-out 0ms,
+ border-color 150ms ease-in-out 0ms, box-shadow 150ms ease-in-out 0ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .section-fade {
+ transition: none !important;
+ opacity: 1 !important;
+ }
+}
+
+@keyframes marquee {
+ 0% {
+ transform: translateX(var(--move-initial)) translateZ(0);
+ }
+
+ 100% {
+ transform: translateX(var(--move-final)) translateZ(0);
+ }
+}
+
+@media (min-width: 1110px) {
+ #event-log>*:nth-of-type(1n + 9) {
+ display: none;
+ }
+}
+
+@media (max-width: 896px) {
+ #event-log>*:nth-of-type(1n + 5) {
+ display: none;
+ }
+}
+
+@media (max-width: 896px) {
+ #repos-grid>*:nth-of-type(1n + 4) {
+ display: none;
+ }
+}
+
+@media (max-width: 1268px) {
+ #repos-grid>*:nth-of-type(1n + 5) {
+ display: none;
+ }
+}
+
+@media (max-width: 1421px) {
+ #repos-grid>*:nth-of-type(1n + 7) {
+ display: none;
+ }
+}
+
+/* lg breakpoint */
+@media (min-width: 1422px) {
+ #repos-grid div {
+ display: flex !important;
+ }
+}
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..f964fe0
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+///
+
+ {props.name}
+{props.desc}
+
+
+
+
+
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
new file mode 100644
index 0000000..45e6150
--- /dev/null
+++ b/tailwind.config.mjs
@@ -0,0 +1,51 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['SatoshiVariable', ...defaultTheme.fontFamily.sans],
+ title: ['Poppins', ...defaultTheme.fontFamily.sans],
+ },
+ screens: {
+ xs: '475px',
+ buttonsok: '355px',
+ stoplgtranslation: '1330px',
+ gridok: '896px',
+ nextprevok: '1096px',
+ grid35ok: '1268px',
+ grid12ok: '1422px',
+ dualbuttonok: '540px',
+ bardualok: '430px',
+ },
+ colors: {
+ side: {
+ 100: '#f7fafc',
+ 200: '#edf2f7',
+ 900: '#1a202c',
+ },
+ 'side-purple': {
+ 100: '#d2c2f6',
+ 200: '#b499f0',
+ 300: '#a584ec',
+ 400: '#9670e9',
+ border: '#7447d4',
+ 600: '#6932e0',
+ 700: '#5428b3',
+ },
+ material: 'rgb(31,32,35)',
+ },
+ },
+ },
+
+ plugins: [
+ function ({ addComponents, theme }) {
+ addComponents({
+ '.bg-material': {"backdropBlur":"blur(40px)","background":"rgba(31,32,35,.8)"},
+ '.marquee-card': {"display":"flex","paddingTop":"1rem","paddingBottom":"1rem","paddingLeft":"1rem","paddingRight":"1rem","marginLeft":"0.5rem","marginRight":"0.5rem","alignItems":"center","borderRadius":"1rem","borderWidth":"1px","width":"max-content","height":"auto","boxShadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)","maxWidth":"324px"}
+ });
+ },
+ ],
+}
diff --git a/tools/update_apps.mjs b/tools/update_apps.mjs
new file mode 100644
index 0000000..e972c8b
--- /dev/null
+++ b/tools/update_apps.mjs
@@ -0,0 +1,123 @@
+import fetch from 'node-fetch';
+import fs from 'fs/promises';
+import sharp from 'sharp';
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const overrides = {
+ PokeMMO: 'A free-to-play online monster mmorpg.',
+};
+
+const folderExists = async (path) => {
+ let exists = false;
+ try {
+ exists = (await fs.stat(path)) && true;
+ } catch (e) {
+ if (e.code !== 'ENOENT') throw e;
+ }
+ return exists;
+};
+
+const outFolder = path.join(__dirname, '../public/assets/apps_data/');
+//for each app get the name icon and subtitle and download the icon
+(async () => {
+ console.log(`✨ Updating mock events...`);
+ const mockEvents = await (await fetch('https://api.github.com/orgs/sidestore/events?per_page=100')).json();
+ await fs.writeFile(path.join(__dirname, '../public/assets/mockevents.json'), JSON.stringify(mockEvents, null, 2));
+
+ console.log(`✨ Updating mock repos...`);
+ const mockRepos = await (await fetch('https://api.github.com/users/sidestore/repos?per_page=50')).json();
+ await fs.writeFile(path.join(__dirname, '../public/assets/mockrepos.json'), JSON.stringify(mockRepos, null, 2));
+
+ //delete the folder if it exists and if command input contained --no-cache
+ if (process.argv.includes('--no-cache') && (await folderExists(outFolder))) {
+ await fs.rm(outFolder, { recursive: true });
+ } else {
+ console.log(`📂 Skipping apps_out folder deletion...`);
+ }
+
+ if (!(await folderExists(outFolder))) {
+ await fs.mkdir(outFolder);
+ console.log(`📂 Created apps_out folder...`);
+ }
+
+ //https://raw.githubusercontent.com/SideStore/SideStore/develop/trustedapps.json
+ console.log(`✨ Fetching trusted sources...`);
+ const rawSource = await (await fetch('https://raw.githubusercontent.com/SideStore/SideStore/develop/trustedapps.json')).json();
+ const sources = rawSource.sources.map((i) => i.sourceURL).filter((i) => !(i === undefined || i === null));
+ console.log(`✅ Got ${sources.length} sources...`);
+
+ let built = [];
+
+ const promises = sources.map(async (source) => {
+ console.log(`✨ Fetching source ${source}...`);
+ try {
+ const response = await fetch(source);
+ const json = await response.json();
+
+ const appPromises = json.apps
+ .filter((a) => {
+ const allow = !['alpha', 'beta'].map((i) => a.name.toLowerCase().includes(i)).includes(true);
+ if (!allow) {
+ console.log(`🚫 Skipping ${a.name} as it's name contains "alpha" or "beta"`);
+ }
+ return allow;
+ })
+ .map(async (app) => {
+ let name = app.name;
+ let icon = app.iconURL || null;
+ let subtitle = app.subtitle;
+
+ let exists = false;
+ try {
+ exists = await fs.stat(outFolder + name + '.webp');
+ } catch {}
+
+ // if the app has an icon download it to the apps_out folder and then use sharp to resize it and convert it to webp
+ if (icon && !exists) {
+ try {
+ console.log(`🖼️ Downloading icon for app ${name}...`);
+ const file = await fetch(icon, {
+ headers: {
+ 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
+ },
+ });
+ const buffer = await file.arrayBuffer();
+ const buffer2 = Buffer.from(buffer);
+ const image = sharp(buffer2);
+
+ //resize to 128x128
+ image.resize(128, 128);
+ //convert to webp
+ image.webp();
+ //save to apps_out folder
+ await image.toFile(`${outFolder}${name}.webp`);
+ } catch (e) {
+ console.log(`🚫 Failed to download icon for ${name}... - ${icon}`);
+ console.log(e);
+ return;
+ }
+ }
+
+ built.push({
+ name,
+ desc: overrides[name] || subtitle,
+ filepath: `${outFolder}${name}.webp`,
+ });
+ });
+ await Promise.all(appPromises);
+ } catch (e) {
+ console.log(`🚫 Failed to fetch source ${source}...`);
+ }
+ });
+ await Promise.all(promises);
+
+ //remove dupe apps based on name
+ built = built.filter((thing, index, self) => index === self.findIndex((t) => t.name === thing.name));
+ console.log(`📝 Writing applist.json (${built.length} apps)...`);
+
+ await fs.writeFile(path.join(__dirname, '../src/') + 'applist.json', JSON.stringify(built, null, 2));
+})();
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e90c686
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
+}
\ No newline at end of file