From bd2960ab09e78ca325a9610d6b2e7f0811f76913 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Wed, 20 Mar 2024 13:04:22 +0100 Subject: [PATCH 1/7] updated index and nav --- frontend/src/layouts/partials/nav.vue | 125 +++++++++++-------- frontend/src/pages/index.vue | 169 +++++++++++--------------- 2 files changed, 145 insertions(+), 149 deletions(-) diff --git a/frontend/src/layouts/partials/nav.vue b/frontend/src/layouts/partials/nav.vue index 7230f21..b966d9b 100644 --- a/frontend/src/layouts/partials/nav.vue +++ b/frontend/src/layouts/partials/nav.vue @@ -9,7 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later @@ -58,56 +79,56 @@ import ToolBadge from '~/components/menu/tool-badge.vue'; export default { components: { ToolBadge }, - name: "Nav", + name: 'Nav', data: () => { return { - showBadge: process.env.BUILD_ENVIRONMENT === "testing", - } - } -} + showBadge: process.env.BUILD_ENVIRONMENT === 'testing', + }; + }, +}; diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue index 0783691..7c27c72 100644 --- a/frontend/src/pages/index.vue +++ b/frontend/src/pages/index.vue @@ -8,45 +8,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-
-
-

Web Components

- Here you can find already developed Web Components with data from the - Open Data Hub, available and ready to be used. Filter - by category and find the Web Components you need for your website or - application, in the fields of tourism, weather, mobility and many - more. -
- -
-
-
-
"How to integrate"
- -
-
- -
+
+
+ Here you can find already developed Web Components with data from the + Open Data Hub, available and ready to be used. Filter + by category and find the Web Components you need for your website or + application, in the fields of tourism, weather, mobility and many + more.
+
-
@@ -75,14 +44,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later import Searchbar from '~/components/searchbar.vue'; import WcFiltered from '~/components/wc-filtered'; import WcHighlighted from '~/components/wc-highlighted'; -import VueCookie from 'vue-cookie' +import VueCookie from 'vue-cookie'; export default { components: { Searchbar, WcHighlighted, WcFiltered, - VueCookie + VueCookie, }, data() { @@ -94,21 +63,25 @@ export default { }, computed: { - getDefaultSortingCondition(){ - // return { - // condition:'title', - // order:'asc' - // } - return { - condition:null, - order:null - } + getDefaultSortingCondition() { + // return { + // condition:'title', + // order:'asc' + // } + return { + condition: null, + order: null, + }; }, - noFilters(){ - if ((!this.$route.query.term || this.$route.query.term == '') && (!this.$route.query.tags || this.$route.query.tags.length == 0) && (!this.$route.query.sorting || this.$route.query.sorting == '') ){ - return true; - } - return false; + noFilters() { + if ( + (!this.$route.query.term || this.$route.query.term == '') && + (!this.$route.query.tags || this.$route.query.tags.length == 0) && + (!this.$route.query.sorting || this.$route.query.sorting == '') + ) { + return true; + } + return false; }, searchTerm() { if (!this.$route.query.term) { @@ -117,17 +90,17 @@ export default { return this.$route.query.term; }, sortingCondition() { - const defaultSortingCondition = this.getDefaultSortingCondition; - if (!this.$route.query.sorting) { - return defaultSortingCondition; - } - let els = this.$route.query.sorting.split('|'); - if(els.length != 2){ - return defaultSortingCondition; - } - - let cond = {condition:els[0],order:els[1]}; - return cond; + const defaultSortingCondition = this.getDefaultSortingCondition; + if (!this.$route.query.sorting) { + return defaultSortingCondition; + } + let els = this.$route.query.sorting.split('|'); + if (els.length != 2) { + return defaultSortingCondition; + } + + let cond = { condition: els[0], order: els[1] }; + return cond; }, searchTags() { if (!this.$route.query.tags) { @@ -159,12 +132,12 @@ export default { }); }, }, - mounted(){ + mounted() { let cookieValue = VueCookie.get('isHeaderExpanded'); - if(cookieValue && cookieValue == 'true'){ - this.isHeaderExpanded = true; - }else{ - this.isHeaderExpanded = false; + if (cookieValue && cookieValue == 'true') { + this.isHeaderExpanded = true; + } else { + this.isHeaderExpanded = false; } }, methods: { @@ -188,13 +161,16 @@ export default { tags = 'any'; } - let sortingCondition = ''; - if(ev.sorting && ev.sorting.condition !== null && ev.sorting.order !== null){ - sortingCondition = ev.sorting.condition+"|"+ev.sorting.order; + let sortingCondition = ''; + if ( + ev.sorting && + ev.sorting.condition !== null && + ev.sorting.order !== null + ) { + sortingCondition = ev.sorting.condition + '|' + ev.sorting.order; } - - let query = {} + let query = {}; if (tags) { query.tags = tags; } @@ -224,29 +200,28 @@ export default { } } -.header-container{ - box-shadow: 0 5px 5px -6px; - - .inner-header-container { - - &.collapsed { - margin-top: -52px; - margin-bottom: 0; - padding-bottom: 0; - max-height: 0; - overflow: hidden; - } +.header-container { + // box-shadow: 0 5px 5px -6px; + + .inner-header-container { + &.collapsed { + margin-top: -52px; + margin-bottom: 0; + padding-bottom: 0; + max-height: 0; + overflow: hidden; } - .toggle-header-container{ - margin-bottom: 2rem; - padding-bottom: 1.5rem; - - .show-header-container{ - text-align: center; - font-size: 1rem; - font-weight: 600; - } + } + .toggle-header-container { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + + .show-header-container { + text-align: center; + font-size: 1rem; + font-weight: 600; } + } } .implode:not(:first-child)::before { From 3436a7506ba470078c12a5b62cf0fb0b414d4e66 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Wed, 20 Mar 2024 17:20:15 +0100 Subject: [PATCH 2/7] changed bg color --- frontend/src/assets/styles/styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/assets/styles/styles.scss b/frontend/src/assets/styles/styles.scss index 1209f5e..be666d7 100644 --- a/frontend/src/assets/styles/styles.scss +++ b/frontend/src/assets/styles/styles.scss @@ -55,6 +55,10 @@ } } +.bg-light{ + background-color: #f5f5f5 !important; +} + #tag-container { min-height: 85vh; } From b085a3336291e045a1cf5a31ac2ebe22d6419530 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Wed, 20 Mar 2024 17:29:17 +0100 Subject: [PATCH 3/7] fixed small bug --- frontend/src/pages/index.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue index 7c27c72..777aae1 100644 --- a/frontend/src/pages/index.vue +++ b/frontend/src/pages/index.vue @@ -8,7 +8,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-
+
Here you can find already developed Web Components with data from the Open Data Hub, available and ready to be used. Filter From e5b9096e118ae5322a3338f5c0eaea158f327e02 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Fri, 22 Mar 2024 12:28:03 +0100 Subject: [PATCH 4/7] updated readme --- frontend/README.md | 134 +++++++++++++++++++++++++-------------------- 1 file changed, 75 insertions(+), 59 deletions(-) diff --git a/frontend/README.md b/frontend/README.md index f2f0903..ab3c37e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -8,28 +8,28 @@ SPDX-License-Identifier: CC0-1.0 > FRONTEND -- [ODH Webcomponents](#odh-webcomponents) - - [Source Code](#source-code) - - [Requirements](#requirements) - - [Configuration](#configuration) - - [Mode](#mode) - - [Configuration](#configuration-1) - - [hCaptcha](#hcaptcha) - - [API](#api) - - [Local Development with Docker](#local-development-with-docker) - - [Build Setup](#build-setup) - - [Adding pages](#adding-pages) - - [Deployment](#deployment) - - [Single Page Application](#single-page-application) - - [Universal Mode](#universal-mode) - - [Create new static content pages](#create-new-static-content-pages) - - [Embed a video in a static content page](#embed-a-video-in-a-static-content-page) - - [Create a new banner](#create-a-new-banner) - - [Information](#information) - - [Support](#support) - - [Contributing](#contributing) - - [Documentation](#documentation) - - [License](#license) +- [ODH Webcomponents](#odh-webcomponents) + - [Source Code](#source-code) + - [Requirements](#requirements) + - [Configuration](#configuration) + - [Mode](#mode) + - [Configuration](#configuration-1) + - [hCaptcha](#hcaptcha) + - [API](#api) + - [Local Development with Docker](#local-development-with-docker) + - [Build Setup](#build-setup) + - [Adding pages](#adding-pages) + - [Deployment](#deployment) + - [Single Page Application](#single-page-application) + - [Universal Mode](#universal-mode) + - [Create new static content pages](#create-new-static-content-pages) + - [Embed a video in a static content page](#embed-a-video-in-a-static-content-page) + - [Create a new banner](#create-a-new-banner) + - [Information](#information) + - [Support](#support) + - [Contributing](#contributing) + - [Documentation](#documentation) + - [License](#license) ## Source Code @@ -47,13 +47,13 @@ cd odh-web-components-store/frontend/ ## Requirements -* node.js -* yarn -* ODH Web Component Configurator: https://github.com/noi-techpark/webcomp-configtool.git - > NB: If you update `webcomp-configtool`, you need to tag that master branch and update - > the `package.json` of this repository accordingly. - > See "odh-web-components-configurator": "https://github.com/noi-techpark/webcomp-configtool.git#v0.9" - > and put the latest version tag to the end +- node.js +- yarn +- ODH Web Component Configurator: https://github.com/noi-techpark/webcomp-configtool.git + > NB: If you update `webcomp-configtool`, you need to tag that master branch and update + > the `package.json` of this repository accordingly. + > See "odh-web-components-configurator": "https://github.com/noi-techpark/webcomp-configtool.git#v0.9" + > and put the latest version tag to the end ## Configuration @@ -98,6 +98,7 @@ axios: { Adjust the baseURL to where the API is running. The API is provided by "data-service" in the 'backend' package. ## Local Development with Docker + We use [docker-compose](https://docs.docker.com/compose/) for local development. ```bash @@ -121,7 +122,7 @@ See [Build Setup](#build-setup) for possible commands. ## Build Setup -``` bash +```bash # install dependencies $ yarn install @@ -182,72 +183,87 @@ from port 3000 to port 443 on your domain. new page. The directory structure corresponds to the structure of the url. 2. Create a `.md` file with the same name in the same directory 3. Import the md file in your vue file, for example: + ```js import legally from './legally.md'; ``` + 4. Create a computed property with the content of the md file + ```js - computed: { - md() +computed: { + md(); { - return legally; - }; - }; + return legally; + } +} ``` + 5. Import the markdown page component + ```js import MarkdownPage from '~/components/markdown-page'; ``` + 6. Include the markdown page component inside the html code and pass the computed property + ```html ``` + 7. Update the menues - - Go to `frontend/src/layouts/partials/header.vue` and see the code there for - how to do it, if you want to have it inside the main menue, which is only - visible for desktop web page layouts - - Go to `frontend/src/layouts/partials/nav-menu.vue` and see the code there. - Some menue items are only visible for mobile devices, if the class - `mobile-only` is present. - - In general make sure that items are not presented twice in the header and - nav-menu aka burger. + - Go to `frontend/src/layouts/partials/header.vue` and see the code there for + how to do it, if you want to have it inside the main menue, which is only + visible for desktop web page layouts + - Go to `frontend/src/layouts/partials/nav-menu.vue` and see the code there. + Some menue items are only visible for mobile devices, if the class + `mobile-only` is present. + - In general make sure that items are not presented twice in the header and + nav-menu aka burger. ## Embed a video in a static content page Include the following code and replace the url of your video inside the url parameter ```html - + ``` ## Create a new banner 1. Open `src/components/banner.vue` 2. Add a new banner slide tag + ```html - + ``` + 3. Customize the banner with tag parameters -- "title": Title of the banner -- "subtitle": Subtitle below the title -- "imgUrl": Url of the background image -- "path": Path to the page inside the a tag -- "linkText": Text of the link + +- "title": Title of the banner +- "subtitle": Subtitle below the title +- "imgUrl": Url of the background image +- "path": Path to the page inside the a tag +- "linkText": Text of the link + 4. Example + ```html - + link-text="learn more" + path="/contact" +> ``` +## Update highlighted Webcomponents + +To modify the highlighted web components displayed, you'll need to adjust the boolean attribute `highlighted` within the web component database. However, to initiate this change, you must contact a software architect as they have the necessary access and expertise to perform this task. + ## Information ### Support From 603717c459353ec966c36fce67dcabc60cb5a008 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Fri, 22 Mar 2024 13:12:45 +0100 Subject: [PATCH 5/7] started adding new how to --- frontend/src/layouts/partials/nav.vue | 26 ++- .../pages/{how-to => how-to-add}/index.vue | 2 +- frontend/src/pages/how-to-create/index.vue | 180 ++++++++++++++++++ 3 files changed, 201 insertions(+), 7 deletions(-) rename frontend/src/pages/{how-to => how-to-add}/index.vue (99%) create mode 100644 frontend/src/pages/how-to-create/index.vue diff --git a/frontend/src/layouts/partials/nav.vue b/frontend/src/layouts/partials/nav.vue index b966d9b..e5d17e9 100644 --- a/frontend/src/layouts/partials/nav.vue +++ b/frontend/src/layouts/partials/nav.vue @@ -37,12 +37,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later - - How to - + + + Add + + + Create + +
-

How to

+

How to add a webcomponent

Everything you need to know to start creating your own Web Component! In the playlist below you can explore each step from start to finish, diff --git a/frontend/src/pages/how-to-create/index.vue b/frontend/src/pages/how-to-create/index.vue new file mode 100644 index 0000000..89fb64d --- /dev/null +++ b/frontend/src/pages/how-to-create/index.vue @@ -0,0 +1,180 @@ + + + From 907d2710baafd62c0dad8c7b6c0750a3a6952df2 Mon Sep 17 00:00:00 2001 From: Delia Mennitti Date: Tue, 2 Apr 2024 15:38:53 +0200 Subject: [PATCH 6/7] style changes --- .../assets/styles/widget/_nav-dropdown.scss | 41 ++++-- frontend/src/layouts/partials/nav.vue | 10 +- frontend/src/pages/how-to-add/index.vue | 132 ++---------------- frontend/src/pages/index.vue | 21 ++- 4 files changed, 61 insertions(+), 143 deletions(-) diff --git a/frontend/src/assets/styles/widget/_nav-dropdown.scss b/frontend/src/assets/styles/widget/_nav-dropdown.scss index f65b943..48076f8 100644 --- a/frontend/src/assets/styles/widget/_nav-dropdown.scss +++ b/frontend/src/assets/styles/widget/_nav-dropdown.scss @@ -6,7 +6,7 @@ .b-nav-dropdown { .dropdown-menu { - background-color: #000 !important; + background-color: #fff !important; width: 290px !important; margin-top: 10px; @@ -16,16 +16,20 @@ } a { - color: white !important; + color: black !important; } li { - background-color: #000 !important; + background-color: #fff !important; } - // li:hover { - // background-color: rgb(41, 41, 41) !important; - // } + li:hover { + background-color: #fff !important; + } + + li:active { + background-color: #fff !important; + } .triangle { margin-top: -25px; @@ -40,11 +44,28 @@ } .dropdown-menu:hover { - background-color: #000 !important; + background-color: #fff !important; } /* stylelint-disable-next-line */ - ::v-deep .dropdown-item:hover { - background-color: #000 !important; - } + // ::v-deep .dropdown-item:hover { + // background-color: #fff !important; + // } +} + +@media (max-width: 747px) { +.b-nav-dropdown { + text-align: center; + .dropdown-menu { + background-color: #fff !important; + margin-top: 10px; + text-align: center; + + hr { + background-color: white !important; + margin: 0 12px; + } +} + +} } diff --git a/frontend/src/layouts/partials/nav.vue b/frontend/src/layouts/partials/nav.vue index e5d17e9..998196a 100644 --- a/frontend/src/layouts/partials/nav.vue +++ b/frontend/src/layouts/partials/nav.vue @@ -42,13 +42,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later :to="localePath('how-to-add')" @click="$emit('hide-overlay')" > - Add + Add a webcomponent - Create + Create a webcomponent

How to add a webcomponent

Everything you need to know to - start creating your own Web Component! - In the playlist below you can explore each step from start to finish, - to develop your web component and contribute to the collection. + add a Web Component to your website! + The following videos will provide detailed instructions on adding web + components to your website, addressing specific requirements for plain + HTML, WordPress, and TYPO3 platforms.
- Start with the Boilerplate
The first step to - create your own Web Component for the Open Data Hub Web Component - Collection. + Add a webcomponent to WordPress
A + comprehensive guide and walkthrough on effortlessly selecting, + integrating, and adding a web component to a WordPress website.
- ACCESS THE BOILERPLATE -
@@ -59,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
- Hello World
Explanation of the simple - hello-world Web Component inside the Web Component Boilerplate - provided by the Open Data Hub. + Add a webcomponent to TYPO3
A comprehensive + guide and walkthrough on effortlessly selecting, integrating, and + adding a web component to a TYPO3 website.
- ACCESS THE BOILERPLATE - -
-
- -
- -
- What is the manifest.json?
What is the - manifest.json file in the Web Component Boilerplate of the Open Data - Hub. -
- ACCESS THE VALIDATOR - -
-
- -
- -
- What is Webpack?
What is Webpack and how to - use it for your Web Component development process using the - Boilerplate provided by the Open Data Hub. -
- ACCESS THE WEBPACK GUIDES - -
-
- -
- -
- What is Docker?
What is Docker and how to - use it for your Web Component development process using the - Boilerplate provided by the Open Data Hub. -
- ACCESS THE DOCKER INSTALLATION GUIDE - -
-
- -
- -
- How to publish?
How to publish your Web - Component in the Open Data Hub Web Component Store. -
- ACCESS THE BOILERPLATE -
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue index 777aae1..9f5e0bc 100644 --- a/frontend/src/pages/index.vue +++ b/frontend/src/pages/index.vue @@ -6,13 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later