ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 Actions Packages Activity

general cleanup

Browse Source 
Signed-off-by: ngn <ngn@ngn.tf>
This commit is contained in:
ngn
2025-01-19 23:13:30 +03:00
parent 70efba181f
commit d1e2d1fa1f
18 changed files with 82 additions and 963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/buttons/ThemeToggler.tsx
View File

@ -1,34 +0,0 @@
import { useContext } from 'react';
import { themeContext } from 'src/context/theme-context';
import styles from 'src/styles/modules/components/buttons/themeToggler.module.scss';
type Props = {
className: string;
};
const ThemeToggler = (props: Props) => {
const { theme, setTheme } = useContext(themeContext);
const clickHandler = () => {
const themeToSet = theme === 'light' ? 'dark' : 'light';
setTheme(themeToSet);
};
return (
<button
className={`${styles.button} ${props.className}`}
onClick={clickHandler}
>
<span className='visually-hidden'>Change theme</span>
<svg
className={`icon ${styles.icon}`}
focusable='false'
aria-hidden='true'
role='img'
>
<use href='/svg/sprite.svg#icon-theme-switcher'></use>
</svg>
</button>
);
};
export default ThemeToggler;

7
src/components/layout/Footer.tsx
View File

@ -27,6 +27,9 @@ const Footer = () => {
</a>
</Link>
</li>
<li>
<span> | </span>
</li>
))}
<li className={styles.nav__item}>
<a href='#' className={styles.nav__link}>
@ -35,10 +38,6 @@ const Footer = () => {
</li>
</ul>
</nav>
<em className={styles.licence}>
libremdb does not host any content. All content on libremdb is from IMDb. IMDb is a
trademark of IMDb.com, Inc.
</em>
</footer>
);
};

2
src/components/layout/Header.tsx
View File

@ -1,5 +1,4 @@
import Link from 'next/link';
import ThemeToggler from 'src/components/buttons/ThemeToggler';
import styles from 'src/styles/modules/layout/header.module.scss';
type Props = { full?: boolean; originalPath?: string };
@ -52,7 +51,6 @@ const Header = ({ full, originalPath }: Props) => {
</svg>
</a>
</Link>
<ThemeToggler className={styles.themeToggler} />
</div>
</div>
{full && (

2
src/components/layout/index.tsx
View File

@ -1,5 +1,4 @@
import { ReactNode } from 'react';
import Footer from './Footer';
import Header from './Header';
type Props = {
@ -16,7 +15,6 @@ const Layout = ({ full, children, className, originalPath }: Props) => {
<main id='main' className={`main ${className}`}>
{children}
</main>
<Footer />
</>
);
};

205
src/pages/about/index.tsx
View File

@ -1,205 +0,0 @@
import Link from 'next/link';
import Meta from 'src/components/meta/Meta';
import Layout from 'src/components/layout';
import styles from 'src/styles/modules/pages/about/about.module.scss';
const About = () => {
return (
<>
<Meta
title='About'
description='libremdb is a free & open source IMDb front-end. It allows you to see information about movies, tv shows, video games without any ads or tracking.'
/>
<Layout full className={styles.about}>
<section id='features' className={styles.features}>
<h2
className={`heading heading__secondary ${styles.features__heading}`}
>
Some features
</h2>
<ul className={styles.features__list}>
<li className={styles.feature}>
<svg
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href='/svg/sprite.svg#icon-eye-slash'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
>
No ads or tracking
</h3>
<p className={styles.feature__text}>
Browse any movie info without being tracked or bombarded by
annoying ads.
</p>
</li>
<li className={styles.feature}>
<svg
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href='/svg/sprite.svg#icon-palette'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
>
Modern interface
</h3>
<p className={styles.feature__text}>
Modern interface with curated colors supporting both dark and
light themes.
</p>
</li>
<li className={styles.feature}>
<svg
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href='/svg/sprite.svg#icon-responsive'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
>
Responsive design
</h3>
<p className={styles.feature__text}>
Be it your small mobile or big computer screen, it's fully
responsive.
</p>
</li>
</ul>
</section>
<section id='faq' className={styles.faqs}>
<h2 className={`heading heading__secondary ${styles.faqs__heading}`}>
Questions you may have
</h2>
<div className={styles.faqs__list}>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
How do I use this?
</summary>
<p className={styles.faq__description}>
Replace `imdb.com` in any IMDb URL with any of the instances.
For example: `
<a
href='https://imdb.com/title/tt1049413'
className='link'
target='_blank'
rel='noreferrer'
>
imdb.com/title/tt1049413
</a>
` to `
<Link href='/title/tt1049413'>
<a className='link'>
{process.env.NEXT_PUBLIC_URL || ''}/title/tt1049413
</a>
</Link>
` . To avoid changing the URLs manually, you can use extensions
like{' '}
<a
href='https://github.com/libredirect/libredirect/'
className='link'
>
LibRedirect
</a>
.
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>Why is it slow?</summary>
<p className={styles.faq__description}>
Whenever you request info about a movie/show on libremdb, 4
trips are made(2 between your browser and libremdb's server, and
2 between libremdb's server and IMDb's server) instead of the
usual 2 trips when you visit a website. For this reason there's
a noticable delay. This is a bit of inconvenience you'll have to
face should you wish to use this website.
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
It doesn't have all routes.
</summary>
<p className={styles.faq__description}>
I'll implement more with time :)
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
Is content served from third-parties, like Amazon?
</summary>
<p className={styles.faq__description}>
Nope, libremdb proxies all image and video requests through the
instance to avoid exposing your IP address, browser information
and other personally identifiable metadata (
<a
href='https://github.com/httpjamesm'
target='_blank'
rel='noopener noreferrer'
className='link'
>
Contributor
</a>
).
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
Why not just use IMDb?
</summary>
<p className={styles.faq__description}>
Refer to the{' '}
<a className='link' href='#features'>
features section
</a>{' '}
above.
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
Why didn't you use other databases like TMDB or OMDb?
</summary>
<p className={styles.faq__description}>
IMDb simply has superior dataset compared to all other
alternatives. With that being said, I'd encourage you to check
out those alternatives too.
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
Your website name is quite, ehm, lame.
</summary>
<p className={styles.faq__description}>
Let's just say I'm not very good at naming things.
</p>
</details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
I have some ideas/features/suggestions.
</summary>
<p className={styles.faq__description}>
That's great! I've a couple of{' '}
<Link href='/contact'>
<a className='link'>contact methods</a>
</Link>
. Send your beautiful suggestions(or complaints), or just drop a
hi.
</p>
</details>
</div>
</section>
</Layout>
</>
);
};
export default About;

68
src/pages/contact/index.tsx
View File

@ -1,68 +0,0 @@
import Meta from 'src/components/meta/Meta';
import Layout from 'src/components/layout';
import styles from 'src/styles/modules/pages/contact/contact.module.scss';
const Contact = () => {
return (
<>
<Meta
title='Contact'
description='Contact page of libremdb, a free & open source IMDb front-end.'
/>
<Layout className=''>
<section className={styles.contact}>
<h1 className={`heading heading__primary ${styles.contact__heading}`}>
Contact
</h1>
<div className={styles.list}>
<div className={styles.item}>
<p className={styles.item__text}>
For any issues, questions, bugs, or requests regarding the
service, you can go to{' '}
<a href='https://github.com/zyachel/libremdb' className='link'>
GitHub
</a>
.
</p>
<p className={styles.item__text}>
Alternatively, you can visit{' '}
<a
href='https://codeberg.org/zyachel/libremdb'
className='link'
>
the repository on Codeberg
</a>
.
</p>
</div>
{process.env.NEXT_PUBLIC_INSTANCE_MAIN_URL && (
<div className={styles.item}>
<p className={styles.item__text}>
If you have some questions related to this instance,{' '}
<a
href={process.env.NEXT_PUBLIC_INSTANCE_MAIN_URL}
className='link'
>
contact instance maintainer(s)
</a>
.
</p>
</div>
)}
<div className={styles.item}>
<p className={styles.item__text}>
In case you wish to contact me(the dev) personally,{' '}
<a href='https://iket.me/contact/' className='link'>
here you go
</a>
<span aria-label='smily text emoji'> :)</span>
</p>
</div>
</div>
</section>
</Layout>
</>
);
};
export default Contact;

89
src/pages/privacy/index.tsx
View File

@ -1,89 +0,0 @@
import Meta from 'src/components/meta/Meta';
import Layout from 'src/components/layout';
import packageInfo from 'src/../package.json';
import styles from 'src/styles/modules/pages/privacy/privacy.module.scss';
const Privacy = () => {
return (
<>
<Meta
title='Privacy'
description='Privacy policy of libremdb, a free & open source IMDb front-end.'
/>
<Layout className={styles.privacy}>
<section className={styles.policy}>
<h1 className={`heading heading__primary ${styles.policy__heading}`}>
Privacy Policy
</h1>
<div className={styles.list}>
<section className={styles.item}>
<h2
className={`heading heading__secondary ${styles.item__heading}`}
>
Information collected
</h2>
<p className={styles.item__text}>No information is collected.</p>
</section>
<section className={styles.item}>
<h2
className={`heading heading__secondary ${styles.item__heading}`}
>
Information stored in your browser
</h2>
<p className={styles.item__text}>
A key named 'theme' is stored in Local Storage provided by your
browser, if you ever override the default theme. To remove it,
go to site data settings, and clear the data for this website.
</p>
<p className={styles.item__text}>
To permamently disable libremdb from storing your theme
prefrences, either turn off JavaScript or disable access to
Local Storage for libremdb.
</p>
</section>
<section className={styles.item}>
<h2
className={`heading heading__secondary ${styles.item__heading}`}
>
Instance information
</h2>
{process.env.NEXT_PUBLIC_INSTANCE_NAME &&
process.env.NEXT_PUBLIC_INSTANCE_MAIN_URL && (
<p className={styles.item__text}>
Operated by:&nbsp;
<a
className='link'
href={process.env.NEXT_PUBLIC_INSTANCE_MAIN_URL}
>
{process.env.NEXT_PUBLIC_INSTANCE_NAME}
</a>
</p>
)}
<p className={styles.item__text}>
Version:&nbsp;
<a
className='link'
href={`https://github.com/zyachel/libremdb/tree/v${packageInfo.version}`}
>
{packageInfo.version}
</a>
</p>
</section>
</div>
<footer className={styles.metadata}>
<p>
Privacy policy last updated on <time>31 october, 2022.</time>
</p>
<p>
You can see the full revision history of this privacy policy on
GitHub, or Codeberg.
</p>
</footer>
</section>
</Layout>
</>
);
};
export default Privacy;

42
src/styles/abstracts/variables/_themes.scss
View File

@ -1,46 +1,9 @@
$_light: (
// 1. text
// 1.1 for headings
text-accent: hsl(240, 31%, 25%),
// 1.2 for base text
text: hsl(0, 0%, 24%),
// 1.3 for subtle text like metadata
text-muted: hsl(204, 4%, 35%),
// 2. bg
// 2.1 for cards, headers, footers,
bg-accent: hsl(339, 100%, 97%),
// 2.2 for base bg
bg: hsl(0, 0%, 100%),
// 2.3 for hover state of cards
bg-muted: rgb(255, 229, 239),
// 3. links
// 3.1 the default one.
link: hsl(219, 100%, 20%),
link-muted: hsl(344, 79%, 40%),
// 4. for icons, borders
fill: hsl(339, 100%, 36%),
// 4.2 for borders, primarily
fill-muted: hsl(0, 0%, 80%),
// shadows on cards
shadow: 0 0 0.5em hsla(0, 0%, 0%, 0.2),
// keyboard, focus hightlight
highlight: hsl(176, 43%, 46%),
// for gradient behind hero text on about page.
gradient:
(
radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.15) 0px, transparent 70%),
radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
),
// changes color of native html elemnts, either 'light' or 'dark' must be set.
scheme: light
);
$_dark: (
text-accent: hsl(0, 0%, 100%),
text: hsl(0, 0%, 96%),
text-muted: hsl(0, 0%, 80%),
bg-accent: hsl(221, 39%, 15%),
bg: hsl(221, 39%, 11%),
bg: #000,
bg-muted: rgb(20, 28, 46),
link: hsl(339, 95%, 80%),
link-muted: hsl(344, 79%, 80%),
@ -56,6 +19,5 @@ $_dark: (
);
$themes: (
light: $_light,
dark: $_dark,
light: $_dark, // yes
);

7
src/styles/modules/layout/footer.module.scss
View File

@ -15,9 +15,14 @@
list-style: none;
display: flex;
gap: var(--spacer-2) var(--spacer-4);
justify-content: space-evenly;
justify-content: center;
flex-wrap: wrap;
span {
font-weight: 900;
}
}
&__item {
}