sam/ForumMobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introducing dark mode, deriving apps in bottom bar from db

Browse Source
This commit is contained in:
metacryst
2026-02-13 20:25:46 -06:00
parent 4432acfea5
commit f02f181058
10 changed files with 248 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
doc.md Normal file
View File

@@ -0,0 +1,158 @@
Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.
### Getting Started:
Take index.js and put it in your app. Typically as quill.js. Then import it in the head of the HTML.
### Basic Overview:
Quill uses components called Shadows. Each Shadow is a Custom HTML Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)
```
class Home extends Shadow {
render() {
}
}
register(Home)
```
Once created, it can be imported like
```
import "Home.js"
```
(Not how we are NOT importing the actual class object. If that happens, it will fail.)
Here is an example of Hello World:
```
class Home extends Shadow {
render() {
p("Hello World")
.x(50, vw)
.y(50, vh)
}
}
register(Home)
```
This will render a paragraph tag in the middle of the screen.
Here's what it will look like in HTML:
```
<body>
<home->
<p style="position: absolute; top: 50vh; left: 50vw;">Hello World</p>
</home->
</body>
```
Note: .x() and .y() are quill-specific functions that were created simply for nice syntax. However, this would also be valid:
```
p("Hello World")
.top(50, vh)
.left(50, vw)
```
There are quill functions for every HTML style attribute. If they have units, they will follow the pattern directly above, where the first parameter is the amount and the second parameter is the unit.
### Real Basic Example:
First, you need your index.html. Here is one:
```
<!DOCTYPE html>
<html lang="en" class="public">
<head>
<title>Parchment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/_/icons/quill.svg">
<link rel="stylesheet" href="/_/code/shared.css">
<script src="/_/code/quill.js"></script>
<script type="module" src="75820185/index.js"></script>
</head>
<body>
</body>
</html>
```
When starting, it is typical to make a "Home" shadow and import it in index.js. Here is an example:
index.js:
```
import "./Home.js"
Home()
```
Home.js:
```
import "../components/NavBar.js"
import "./HomeContent.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
import "./Success.js"
class Home extends Shadow {
render() {
ZStack(() => {
NavBar()
img("/_/icons/logo.svg", "2.5em")
.onClick((done) => {
if(!done) return
window.navigateTo("/")
})
.position("absolute")
.left(50, vw).top(4, em)
.center()
.transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
switch(window.location.pathname) {
case "/":
HomeContent()
break;
case "/why":
Why()
break;
case "/events":
Events()
break;
case "/join":
Join()
break;
case "/success":
Success()
break;
}
})
.onNavigate(() => {
this.rerender()
})
}
}
register(Home)
```
Success.js:
```
class Success extends Shadow {
render() {
p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
.x(50, vw).y(50, vh)
.center()
}
}
register(Success)
```

31
readme.md
View File

@@ -1,29 +1,26 @@
## Created with Capacitor Create App
### Run Web App
This app was created using [`@capacitor/create-app`](https://github.com/ionic-team/create-capacitor-app),
and comes with a very minimal shell for building an app.
```npm run start```
### Running this example
### Build and Run iOS App
To run the provided example, you can use `npm start` command.
```bash
npm start
```
### Background Color
In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.
### Running iOS
https://capacitorjs.com/docs/ios#adding-the-ios-platform
To Install:
npm install @capacitor/ios
npx cap add ios
To Open XCode:
npx cap open ios
To Rerun:
npm run build && npx cap copy ios
### Note
You need to be in mobile mode in order for the app to work, in the top right corner of dev tools.
### Architecture
In Development, API routes are routed using the vite.config.js.
### Notes
Background Color:
In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.

23
src/Home/ConnectionError.js Normal file
View File

@@ -0,0 +1,23 @@
class ConnectionError extends Shadow {
render() {
VStack(() => {
img("/_/icons/column.svg", window.isMobile() ? "5vmax" : "3vmax")
.position("absolute")
.top(2, em)
.left(2, em)
.onClick((done) => {
window.navigateTo("/")
})
p("Error connecting to server. Please try again later!")
})
.verticalAlign("center")
.paddingHorizontal(20, vw)
.backgroundColor("var(--main)")
.overflowX("hidden")
.height(100, vh)
}
}
register(ConnectionError)

0
src/Login.js → src/Home/Login.js
View File

11
src/_/code/styles.css → src/_/code/shared.css
View File

@@ -11,11 +11,22 @@
--quillred: #DE3F3F;
--brown: #812A18;
--darkbrown: #3f0808;
--column-src: /_/icons/column2.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--people-src: /_/icons/people.svg;
}
@media (prefers-color-scheme: dark) {
:root {
--main: rgb(42, 20, 13);
--accent: rgb(106, 44, 28);
--column-src: /_/icons/column2.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--people-src: /_/icons/people.svg;
}
}

1
src/apps/People/People.js
View File

@@ -75,7 +75,6 @@ class People extends Shadow {
})
.position("relative")
.boxSizing("border-box")
.background("var(--bone)")
.paddingVertical(1, em)
.height(100, pct)
.width(100, pct)

69
src/components/AppMenu.js
View File

@@ -1,53 +1,48 @@
class AppMenu extends Shadow {
selected = ""
images = {
"Dashboard": {src: "column-src"},
"Messages": {src: "letter-src"},
"People": {src: "people-src"},
}
onNewSelection() {
this.$$("img").forEach((image) => {
image.style.outline = ""
})
}
cssVariable(value) {
return getComputedStyle(document.documentElement)
.getPropertyValue("--" + value)
.trim();
}
render() {
HStack(() => {
img("/_/icons/Column.svg", "1.5em", "1.5em")
.attr({app: "forum"})
.padding(0.5, em)
.borderRadius(10, px)
.outline(global.currentApp() === "Dashboard" ? "1px solid black" : "none")
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
e.target.style.outline = "1px solid black"
global.openApp("Dashboard")
}
})
img("/_/icons/letter.svg", "1.5em", "1.5em")
.attr({app: "messages"})
.padding(0.5, em)
.borderRadius(10, px)
.outline(global.currentApp() === "Messages" ? "1px solid black" : "none")
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
e.target.style.outline = "1px solid black"
global.openApp("Messages")
}
})
img("/_/icons/people.svg", "1.5em", "1.5em")
.attr({app: "people"})
.padding(0.5, em)
.borderRadius(10, px)
.outline(global.currentApp() === "People" ? "1px solid black" : "none")
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
e.target.style.outline = "1px solid black"
global.openApp("People")
}
})
let currentNetwork = global.currentNetwork
for(let i = 0; i < currentNetwork.apps.length; i++) {
let app = currentNetwork.apps[i]
console.log(app)
img(this.cssVariable(this.images[app].src), this.images[app].size)
.attr({app: app})
.padding(0.5, em)
.borderRadius(10, px)
.outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
.onClick((done, e) => {
if(done) {
this.onNewSelection()
e.target.style.outline = "1px solid var(--accent)"
global.openApp(app)
}
})
}
})
.borderTop("1px solid black")
.borderTop("1px solid var(--accent)")
.height("auto")
.background("var(--main)")
.zIndex(1)

4
src/index.html
View File

@@ -21,8 +21,8 @@
<link rel="icon" type="image/x-icon" href="./_/icons/columnwhite.svg" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./_/code/styles.css" />
<script src="./_/code/quill.js"></script>
<link rel="stylesheet" href="./_/code/shared.css" />
<script src="/_/code/quill.js"></script>
<script type="module" src="./index.js"></script>
<meta name="theme-color" content="#31d53d" />
</head>

12
src/index.js
View File

@@ -1,6 +1,7 @@
import Socket from "/_/code/ws/Socket.js"
import "./Home.js"
import "./Login.js"
import "./Home/Login.js"
import "./Home/ConnectionError.js"
let Global = class {
Socket = new Socket()
@@ -133,9 +134,9 @@ let Global = class {
console.log("getProfile: ", profile);
this.profile = profile
return 200;
} catch (err) {
} catch (err) { // Network error / Error reaching server
console.error(err);
return 401;
return 500;
}
}
@@ -145,12 +146,15 @@ let Global = class {
this.getProfile().then(async (status) => {
if (status === 401) {
Login()
} else if(status === 500) {
ConnectionError()
} else {
console.log("else")
await this.Socket.init()
await this.onNavigate()
Home()
}
});
})
}
}

0
src/_/code/quill.js → src/public/_/code/quill.js
View File