mikeconrad/openbibleapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit, poc

Browse Source
This commit is contained in:
Mike Conrad
2024-10-20 19:26:17 -04:00
commit cbb60deaf5
16 changed files with 135900 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

15
README.md Normal file
View File

@ -0,0 +1,15 @@
# `create-preact`
<h2 align="center">
<img height="256" width="256" src="./src/assets/preact.svg">
</h2>
<h3 align="center">Get started using Preact and Vite!</h3>
## Getting Started
- `npm run dev` - Starts a dev server at http://localhost:5173/
- `npm run build` - Builds for production, emitting to `dist/`
- `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally

14
index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Vite + Preact</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

4926
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View File

@ -0,0 +1,23 @@
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.22.1",
"preact-iso": "^2.8.1"
},
"devDependencies": {
"@preact/preset-vite": "^2.9.0",
"eslint": "^8.57.1",
"eslint-config-preact": "^1.5.0",
"typescript": "^5.6.3",
"vite": "^5.3.3"
},
"eslintConfig": {
"extends": "preact"
}
}

0
public/nkjvbible.json Normal file
View File

3
public/vite.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="150" height="150" fill="black" stroke="white" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<path d='M5 20.25c0 .414.336.75.75.75h10.652C17.565 21 18 20.635 18 19.4v-1.445M5 20.25A2.25 2.25 0 0 1 7.25 18h10.152c.226 0 .425-.014.598-.045M5 20.25V6.2c0-1.136-.072-2.389 1.092-2.982C6.52 3 7.08 3 8.2 3h9.2c1.236 0 1.6.437 1.6 1.6v11.8c0 .995-.282 1.425-1 1.555M9.5 10h5M12 7.5v5' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 479 B

22
src/components/Header.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useLocation } from 'preact-iso';
import bible from '../nkjvbible'
import { Dispatch, StateUpdater } from 'preact/hooks';
export function Header({ book, setBook }: { book: string, setBook: Dispatch<StateUpdater<string>> }) {
const { url } = useLocation();
return (
<header style={{ justifyContent: "space-between", minHeight: "50px"}}>
{/* <nav>
<a href="/" class={url == '/' && 'active'}>
Home
</a>
</nav> */}
<select value={book} onChange={(e) => setBook(e.target.value)}>
{bible.map(a => (
<option key={a.name} value={a.name}>{a.name}</option>
))}
</select>
</header>
);
}

25
src/index.tsx Normal file
View File

@ -0,0 +1,25 @@
import { render } from 'preact';
import { LocationProvider, Router, Route } from 'preact-iso';
import { Header } from './components/Header.jsx';
import { Home } from './pages/Home/index.jsx';
import { NotFound } from './pages/_404.jsx';
import './style.css';
import { useState } from 'preact/hooks';
export function App() {
const [book, setBook] = useState("Genesis")
return (
<LocationProvider>
<Header book={book} setBook={setBook} />
<main>
<Router>
<Route path="/" component={Home} book={book} setBook={setBook} />
<Route default component={NotFound} />
</Router>
</main>
</LocationProvider>
);
}
render(<App />, document.getElementById('app'));

130670
src/nkjvbible.js Normal file
View File

File diff suppressed because it is too large Load Diff

37
src/pages/Home/index.tsx Normal file
View File

@ -0,0 +1,37 @@
import './style.css';
import bible from '../../nkjvbible';
import { useState } from 'preact/hooks';
export function Verses(chapter) {
}
export function Home({book, setBook}: {book: string, setBook: Dispatch<StateUpdater<string>>}) {
const [chapter, setChapter] = useState(0)
return (
<div class="home">
<a href="https://preactjs.com" target="_blank">
<svg width="150" height="150" fill="none" stroke="#A2D2DF" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<path d='M5 20.25c0 .414.336.75.75.75h10.652C17.565 21 18 20.635 18 19.4v-1.445M5 20.25A2.25 2.25 0 0 1 7.25 18h10.152c.226 0 .425-.014.598-.045M5 20.25V6.2c0-1.136-.072-2.389 1.092-2.982C6.52 3 7.08 3 8.2 3h9.2c1.236 0 1.6.437 1.6 1.6v11.8c0 .995-.282 1.425-1 1.555M9.5 10h5M12 7.5v5' />
</svg>
</a>
<h1 style={{ color: "#A2D2DF"}}>{book}</h1>
<section>
{bible.find(a => a.name == book).chapters[chapter].verses.map(verse => (
<p style={{ textAlign: 'left', margin: '0px 0px' }}>
<strong>{verse.num}</strong>: {verse.text}
</p>
))}
</section>
</div>
);
}
function Resource(props) {
return (
<a href={props.href} target="_blank" class="resource">
<h2>{props.title}</h2>
<p>{props.description}</p>
</a>
);
}

27
src/pages/Home/style.css Normal file
View File

@ -0,0 +1,27 @@
.home section {
margin-top: 5rem;
display: grid;
grid-template-columns: repeat(1, 1fr);
column-gap: 1.5rem;
font-size: x-large;
}
.resource {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-align: left;
text-decoration: none;
color: #222;
background-color: #f1f1f1;
border: 1px solid transparent;
}
@media (max-width: 639px) {
.home section {
margin-top: 5rem;
grid-template-columns: 1fr;
row-gap: 1rem;
}
}

8
src/pages/_404.tsx Normal file
View File

@ -0,0 +1,8 @@
export function NotFound() {
return (
<section>
<h1>404: Not Found</h1>
<p>It's gone :(</p>
</section>
);
}

79
src/style.css Normal file
View File

@ -0,0 +1,79 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color: #222;
background-color: #F6EFBD;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
display: flex;
justify-content: flex-end;
background-color: #1E3E62;
}
header nav {
display: flex;
}
header a {
color: #fff;
padding: 0.75rem;
text-decoration: none;
}
header a.active {
background-color: #0005;
}
header a:hover {
background-color: #0008;
}
main {
flex: auto;
display: flex;
align-items: center;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 639px) {
main {
margin: 2rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
color: #ccc;
background-color: #1a1a1a;
}
}
select {
background-color: #A2D2DF;
color: white;
font-weight: 500;
font-size: x-large;
width: 100%;
text-align: center;
}

20
tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"allowJs": true,
"checkJs": true,
/* Preact Config */
"jsx": "react-jsx",
"jsxImportSource": "preact",
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
}
},
"include": ["node_modules/vite/client.d.ts", "**/*"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});