feat: add info related to the current instance

this commit adds additional info about instance like release tag and instance maintainer contact.

fix: https://codeberg.org/zyachel/libremdb/issues/8

.env.local.example

@@ -28,3 +28,11 @@ NEXT_TELEMETRY_DISABLED=1
 # USE_REDIS=true
 ## for docker, just set the domain to the container name, default is 'libremdb_redis'
 REDIS_URL=localhost:6379
+
+################################################################################
+### 4. INSTANCE META FIELDS(not required but good to have)
+################################################################################
+## example: 'https://iket.me'. 
+NEXT_PUBLIC_INSTANCE_MAIN_URL=
+## eg: 'zyachel'
+NEXT_PUBLIC_INSTANCE_NAME=

src/pages/contact/index.tsx

@@ -7,38 +7,58 @@ const Contact = () => {
   return (
     <>
       <Meta
-        title="Contact"
+        title='Contact'
-        description="Contact page of libremdb, a free & open source IMDb front-end."
+        description='Contact page of libremdb, a free & open source IMDb front-end.'
       />
-      <Layout className="">
+      <Layout className=''>
         <section className={styles.contact}>
           <h1 className={`heading heading__primary ${styles.contact__heading}`}>
             Contact
           </h1>
-
           <div className={styles.list}>
-            <p className={styles.item}>
+            <div className={styles.item}>
-              You can use{' '}
+              <p className={styles.item__text}>
-              <a href="https://github.com/zyachel/libremdb" className="link">
+                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>{' '}
-              or{' '}
-              <a href="https://codeberg.org/zyachel/libremdb" className="link">
-                Codeberg
-              </a>{' '}
-              for general issues, questions, or requests.
-            </p>
-            <p className={styles.item}>
-              In case you wish to contact me personally, I'm reachable via{' '}
-              <a className="link" href="https://matrix.to/#/@ninal:matrix.org">
-                [matrix]
-              </a>{' '}
-              and{' '}
-              <a className="link" href="mailto:aricla@protonmail.com">
-                email
                 </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>

src/pages/privacy/index.tsx

@@ -1,14 +1,14 @@
 import Meta from '../../components/meta/Meta';
 import Layout from '../../layouts/Layout';
-
+import packageInfo from '../../../package.json';
 import styles from '../../styles/modules/pages/privacy/privacy.module.scss';
 
 const Privacy = () => {
   return (
     <>
       <Meta
-        title="Privacy"
+        title='Privacy'
-        description="Privacy policy of libremdb, a free & open source IMDb front-end."
+        description='Privacy policy of libremdb, a free & open source IMDb front-end.'
       />
       <Layout className={styles.privacy}>
         <section className={styles.policy}>
@@ -16,15 +16,15 @@ const Privacy = () => {
             Privacy Policy
           </h1>
           <div className={styles.list}>
-            <div className={styles.item}>
+            <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>
-            </div>
+            </section>
-            <div className={styles.item}>
+            <section className={styles.item}>
               <h2
                 className={`heading heading__secondary ${styles.item__heading}`}
               >
@@ -40,12 +40,40 @@ const Privacy = () => {
                 prefrences, either turn off JavaScript or disable access to
                 Local Storage for libremdb.
               </p>
-            </div>
+            </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>
-              Last updated on <time>31 october, 2022.</time>
+              Privacy policy last updated on <time>31 october, 2022.</time>
             </p>
             <p>
               You can see the full revision history of this privacy policy on

src/styles/modules/pages/contact/contact.module.scss

@@ -3,17 +3,17 @@
 .contact {
   // to make text more readable for large screen users
   margin: auto;
-  width: min(100%, 100rem);
+  width: min(100%, 85rem);
 
   display: grid;
   --doc-whitespace: var(--spacer-8);
-  --comp-whitespace: var(--spacer-3);
+  --comp-whitespace: var(--spacer-5);
 
   padding: var(--doc-whitespace);
-  place-content: center;
+  // place-content: center;
 
   &__heading {
-    text-align: center;
+    // text-align: center;
   }
 
   @include helper.bp('bp-700') {

src/styles/modules/pages/privacy/privacy.module.scss

@@ -12,7 +12,7 @@
   padding: var(--doc-whitespace);
 
   &__heading {
-    text-align: center;
+    // text-align: center;
   }
 
   @include helper.bp('bp-700') {