Release for 22-Aug on demo environment

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) + [Gluestack-ui](https://ui.gluestack.io/) project template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`@gluestack-ui`](https://ui.gluestack.io/docs/overview/introduction) library that provides optionally styled and accessible components. These components are designed for easy integration into applications developed with React and React Native.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js + Gluestack UI template, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Gluestack UI Documenatation](https://ui.gluestack.io/docs/overview/introduction) - learn about core concepts and architecture of gluestack-ui.
+- [Gluestack Style Documentaion](https://style.gluestack.io/docs/overview/introduction) - learn about the universal styling library that is used in Gluestack-ui
+
+You can check out:
+- [the gluestack-ui GitHub repository](https://github.com/gluestack/gluestack-ui)
+- [the gluestack-style GitHub repository](https://github.com/gluestack/gluestack-style)
+Your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/components/About.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Box, VStack, Text, Link, LinkText } from '@gluestack-ui/themed';
+import RootLayout from '../layout';
+
+const AboutUs: React.FC = () => {
+    const title = 'About lexic.swissgeol.ch - Controlled Vocabularies Interface';
+
+    return (
+        <RootLayout title={title} showReleaseGitHub={false} termData={null}>
+            <Box
+                ml={8}
+                mt={8}
+                flexDirection='row'
+                marginLeft={24}
+            >
+                <Link href='/'>
+                    <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>Home &gt; </LinkText>
+                </Link>
+                <Link href='/About'>
+                    <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>About</LinkText>
+                </Link>
+            </Box>
+            <Box m={'auto'} mb={50}>
+                <Box w='77%' mt={40} m={'auto'}>
+                    {/* <Text fontSize="$3xl" fontWeight="$bold">lexic.swissgeol.ch</Text> */}
+                    <Text fontSize="$xl" /* textAlign="center" */><Text fontSize="$3xl" bold mb={0}>About lexic.swissgeol.ch</Text>,{"\n\n"}
+                        Our platform aims to provide geological classifications and nomenclatures in four languages.{"\n"}By integrating different semantic models used in our data and map products, we offer a unified approach.{"\n"}The platform is based on knowledge graphs and supports various formats, including machine-readable knowledge representations such as SKOS.{"\n"}Each concept is assigned a unique URI for easy reference.</Text>
+                </Box>
+                < VStack space="xl" p="$6" alignItems="center" >
+                    <Box bg="$backgroundLight100" p="$4" borderRadius="$md" width="80%">
+                        <Text /* textAlign="center" */>
+                            <Text bold fontSize={20}>Current Focus Areas:</Text>{"\n"} During the pilot phase, we are concentrating on three main components:{"\n\n"}
+                            {"  • "}<Text bold>User-Friendly Interface:</Text> Explore vocabularies and their terminology through our intuitive landing page and main user interface.{"\n"}
+                            {"  • "}<Text bold>Web Map Query Tool:</Text> Use our data and build queries using the integrated vocabularies.{"\n"}
+                            {"  • "}<Text bold>Vocabulary Engineering Environment:</Text> Build, manage, and publish vocabularies or ontologies with our advanced tools.{"\n\n"}
+                        </Text>
+                    </Box>
+                </VStack >
+            </Box>
+        </RootLayout>
+    );
+}
+export default AboutUs;

app/components/Breacrumbs.tsx

@@ -0,0 +1,44 @@
+import { Box, Link, LinkText } from '@gluestack-ui/themed';
+import React from 'react';
+import { BreadCrumbsData } from '../models/breadCrumbsInterface';
+
+export interface BreadcrumbsProps {
+    data: BreadCrumbsData;
+}
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ data }) => {
+    const extractLabel = (url: string) => {
+        const parts = url.replace('#', '/').split('/');
+        return parts.pop();
+    };
+    return (
+        <Box
+            ml={8}
+            mt={8}
+            flexDirection='row'
+            marginLeft={24}
+        >
+            <Link href='/'>
+                <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>{data.startPage} &gt; </LinkText>
+            </Link>
+            <Link href='/'>
+                <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>{data.vocabulary} &gt; </LinkText>
+            </Link>
+            {/* <Link href='#'>
+                <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>... &gt; </LinkText>
+            </Link> */}
+            {data.broader.slice().reverse().map((term, index) => (
+                <Link href={`/${data.vocabulary}/${extractLabel(term)}`} key={index} ml={3}>
+                    <LinkText fontSize={14} textDecorationLine='none' color='$secondary400'>
+                        {extractLabel(term)} &gt;
+                    </LinkText>
+                </Link>
+            ))}
+            <Link href={`/${data.vocabulary}/${extractLabel(data.term)}`}>
+                <LinkText fontSize={14} textDecorationLine='none' bold color='$secondary400'>{data.term}</LinkText>
+            </Link>
+        </Box>
+    );
+}
+
+export default Breadcrumbs;

app/components/Footer.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Box, Button, ButtonIcon, SearchIcon, Input, InputField, Icon, Text, Divider, Link } from '@gluestack-ui/themed';
+import { Github } from 'lucide-react';
+import React from 'react';
+import { TermData } from '../models/termDataInterface';
+
+export interface FooterProps {
+    showReleaseGitHub: boolean;
+    termData: TermData | null;
+}
+
+const Footer: React.FC<FooterProps> = ({ showReleaseGitHub, termData }) => {
+    return (
+        <Box bg='#9988BA' mt={80} position='fixed' bottom={0} w={'100%'}>
+            <Box p={10} flexDirection='row' justifyContent='center' w={'75%'} m={'auto'}>
+                {showReleaseGitHub && (
+                    <Box w={'33%'} alignItems='center'>
+                        <Box flexDirection='row' gap={10}>
+                            <Icon as={Github} width={20} height={20} fill='white' />
+                            <Text fontSize={16} color='white' /* ref="https://lexic.swissgeol.ch/" */>{termData?.version}</Text>
+                        </Box>
+                    </Box>
+                )}
+                <Box w={'33%'} alignItems='center'>
+                    <Link href='/About'>
+                        <Text color='white' ml={10}>About lexic.swissgeol.ch</Text>
+                    </Link>
+                </Box>
+                <Box w={'33%'} alignItems='center'>
+                    <Link href="mailto:[email protected]"><Text color='$white' ml={10}>Contact</Text></Link>
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+
+export default Footer;