Skip to content

Algolia Integration and Design #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
darshan-hindocha wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Algolia Integration and Design #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c8a8ca
change background colour and remove navbar
darshan-hindocha Mar 12, 2023
5c4bec0
home page lookin FLY!
darshan-hindocha Mar 12, 2023
e12f5bf
update chapter page to look less crowded
darshan-hindocha Mar 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import "./globals.css";
import Navbar from "../components/Navbar";

function RootLayout({children}: {
children: React.ReactNode
}) {
return (
<>
<body className="bg-bespoke-light-ivory">
<Navbar/>
<body className="bg-[#C0D6BD]">
<div className="min-h-screen">
{children}
</div>
Expand Down
112 changes: 100 additions & 12 deletions frontend/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,106 @@
export default function Home() {
'use client'
import {History, Settings} from "@mui/icons-material";
import Image from "next/image";
import Link from "next/link";


function Header() {
const greeting = () => {
if (new Date().getHours() < 12) {
return 'Good Morning'
} else if (new Date().getHours() < 18) {
return 'Good Afternoon'

} else {
return 'Good Evening'
}
}

return (
<main className="container mx-auto px-5 flex items-center max-w-lg">
<div className="py-4">
<h3>
Welcome to the Kavita Project!
</h3>
<p>
Coming soon... a search engine for the Vachanamrut.
</p>
<p>
For now, please visit the <a className="underline decoration-yellow-500 decoration-2" href="/vach">Vachanamrut</a> page.
</p>
<div className="flex justify-between w-full">
<h3
className="text-3xl font-bold text-gray-800"
>
{greeting()}
</h3>
<div className="flex items-center gap-2">
<History/>
<Settings/>
</div>
</div>
)
}

function Tile() {
const image = '/static/images/vach_tile.png'
const title = 'The Vachanamrut'
const author = 'Sahajanand Swami'
const type = 'Book'
const content = `The Vachanamrut is the major scripture of the Swaminarayan Sampraday. Through sermons and
question-answer sessions, Bhagwan Swaminarayan provides practical and enlightening guidance on all
aspects of spirituality for all spiritual aspirants.
<br/>
The Vachanamrut is a principal scripture of the Swaminarayan Sampraday. It is a compilation of 273
spiritual discourses delivered by Bhagwan Swaminarayan from 1819 CE to 1829 CE. It is a catechism
filled with infallible logic, illuminating analogies and etaphors, and divine revelations that
provide philosophical and practical answers to the deepest mysteries and questions of life.
<br/>
Whether you want to overcome anger or understand the nature of God, whether you want to eradicate
jealousy or know whose company to keep, whether you want to recognise a true guru or develop faith
in God, the Vachanamrut can enlighten you. It is the essence of the Hindu scriptures based on the
spiritual knowledge, spiritual insight and practical experience of Bhagwan Swaminarayan, the Supreme
Reality Himself.`
const link = 'vach'
const tags = ['Hinduism', 'Spirituality', 'Bhagwan Swaminarayan']


return (
<Link
href={link}
>
<div className="flex flex-col items-center justify-center w-full bg-white rounded-2xl shadow-md p-4">
<Image
src={image}
alt={title}
width={200}
height={200}
/>
<div className="flex flex-col w-full">
<h3>
{title}
</h3>
<h4 className="text-gray-300 text-md">
{type} {'•'} {author}
</h4>
</div>
<div className="max-h-32 overflow-auto">
<p className="text-gray-300">
{content}
</p>
</div>
<div className="flex flex-wrap gap-2 py-2">
{tags.map((tag) => (
<div
className="bg-[#9BFA8B] rounded-md px-2 py-1"
key={tag}
>
{tag}
</div>
))}
</div>
</div>
</Link>
)
}

export default function Home() {

return (
<main
className="container min-h-screen mx-auto p-4 flex flex-col max-w-lg gap-4"
>
<Header/>
<Tile/>
</main>
);
}
120 changes: 103 additions & 17 deletions frontend/app/vach/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,113 @@
import {getAllPosts} from "../../lib/api";
import Link from "next/link";
import Image from "next/image";

function ContentPreviewInformation() {
const image = '/static/images/vach_tile.png'
const title = 'The Vachanamrut'
const author = 'Sahajanand Swami'
const type = 'Book'
const content = `The Vachanamrut is the major scripture of the Swaminarayan Sampraday. Through sermons and
question-answer sessions, Bhagwan Swaminarayan provides practical and enlightening guidance on all
aspects of spirituality for all spiritual aspirants.
<br/>
The Vachanamrut is a principal scripture of the Swaminarayan Sampraday. It is a compilation of 273
spiritual discourses delivered by Bhagwan Swaminarayan from 1819 CE to 1829 CE. It is a catechism
filled with infallible logic, illuminating analogies and etaphors, and divine revelations that
provide philosophical and practical answers to the deepest mysteries and questions of life.
<br/>
Whether you want to overcome anger or understand the nature of God, whether you want to eradicate
jealousy or know whose company to keep, whether you want to recognise a true guru or develop faith
in God, the Vachanamrut can enlighten you. It is the essence of the Hindu scriptures based on the
spiritual knowledge, spiritual insight and practical experience of Bhagwan Swaminarayan, the Supreme
Reality Himself.`

return (
<>
<div className="flex items-start">
<div>
<Image
src={image}
alt={title}
width={200}
height={200}
/>
</div>
<div className="flex flex-col pt-4 w-2/3">
<h3>
{title}
</h3>
<h4 className="text-gray-300 text-sm">
{type} {'•'} {author}
</h4>
</div>
</div>
<div className="text-gray-400 max-h-32 overflow-auto">
<p>
{content}
</p>
</div>
</>
)
}

function SectionTile() {
const enabled = true
const title = 'Gadhadha Pratham'
const metadata = [
'78 Sections',
'1876-1877',
]
const link = 'pratham'

return (
<Link
href={link}
>
<div className="flex bg-gray-50 rounded-xl p-4 shadow-md">
<div className="flex flex-col">
<h4>
{title}
</h4>
<div className="flex flex-row gap-1">
{metadata.map((item, index) => (
<p
className="text-gray-300 text-sm"
key={item + title}
>
{item} {index !== metadata.length - 1 && '•'}
</p>
))}
</div>
</div>
</div>
</Link>
)
}

export default function Blog() {
const posts = getAllPosts(["slug", "section_title", "section_number"]);

return (
<div className="container mx-auto px-5">
<main>
<div className="grid grid-cols-2 py-2 gap-4">
{posts.slice(1, -1).map((post) => (
<div
key={post.slug}
className="flex flex-col border-2 border-black p-4 rounded-xl bg-amber-50"
<main
className="container min-h-screen mx-auto p-4 flex flex-col max-w-lg gap-4"
>
<ContentPreviewInformation/>
<SectionTile/>
<div className="grid grid-cols-2 py-2 gap-4">
{posts.slice(1, -1).map((post) => (
<div
key={post.slug}
className="flex flex-col border-2 border-black p-4 rounded-xl bg-amber-50"
>
<Link href={`${post.slug}`}
>
<Link href={`${post.slug}`}
>
<h4>{post.section_number}</h4>
<p className="text-bespoke-deep-reddish-brown">{post.section_title}</p>
</Link>
</div>
))}
</div>
</main>
</div>
<h4>{post.section_number}</h4>
<p className="text-bespoke-deep-reddish-brown">{post.section_title}</p>
</Link>
</div>
))}
</div>
</main>
);
}
Loading