From 03f92d228d2bb957fce761bf86de35271b62c700 Mon Sep 17 00:00:00 2001 From: jlpereira Date: Tue, 26 Sep 2023 17:41:22 -0300 Subject: [PATCH 1/2] Update README --- README.markdown | 108 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 97 insertions(+), 11 deletions(-) diff --git a/README.markdown b/README.markdown index 984d467..070e094 100644 --- a/README.markdown +++ b/README.markdown @@ -119,6 +119,37 @@ TaxonPages global components are enable in your markdown pages, by default we pr If you want to change the color palette, you can edit `/config/style/theme.css` file, colors must be in RGB format. TaxonPages use [TailwindCSS](https://tailwindcss.com/docs/configuration) framework for the style. We already provide default settings for colors and markdown. If you want to make any change to your configuration, you must do so in the `config/vendor/tailwind.config.js` file. This file uses the TaxonPages configuration as a default. It is possible to overwrite it as long as you use it as a preset. +## Analytics + +TaxonPages has out-of-the-box support for the following list of analytics services: + +```yaml +analytics_services: + enableDev: false # Set true to work in development mode + analytics: # Google Analytics + - id: 'G-XXXXX' + gtm: # Google Tag Manager + - id: 'GTM-XXXXX' + pixel: # Facebook Pixel + - id: 'XXXXXXX' + retargeting: # VK Retargeting + - id: 'VK-RTRG-XXXXXX-XXXXX', + linkedin: # Linkedin Insight + - id: 'XXXXXXX' + tongji: # Baidu Tongji + - id: 'XXXXXXX', + metrica: # Yendex Metrica + - id: 'XXXXXXX', + microsoft: # Microsoft Analytics + id: 'XXXXXXX' + hotjar: # Hotjar Analytics + id: 'XXXXXXX', + fullStory: # Full story Analytics + org: 'X-XXXXXX-XXX' + tiktok: # TikTok Pixel Analytics + id: 'XXXXXXX' +``` + # Deep dive into TaxonPages ## Access internal configuration vars @@ -131,9 +162,64 @@ const { project_name } = __APP_ENV__ const projectName = __APP_ENV__.project_name ``` +## Panels + +### Panel layout + +To modify the position of the panels in the layout of the Taxa page, edit the `taxa_page.yml` file + +```yaml +taxa_page_overview: + panels: + - - - panel:gallery + - panel:type + - panel:type-specimen + - panel:nomenclature + - panel:nomenclature-references + + - - panel:map + - panel:descendants + - panel:content + - panel:statistics +``` + +### External panels + +To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest` + +In `PanelTest` folder, create a `main.js` file, with the following structure: + +```javascript +import MyPanelComponent from './MyPanelComponent.vue' + +Export default { + id: 'panel:test', // ID to identify this panel + component: MyPanelComponent, // Vue component for your panel + available: ['HigherClassificationGroup', 'FamilyGroup', 'GenusGroup', 'SpeciesGroup'] // <-- OPTIONAL: This will define for which rank group will be available, remove it if your panel will be available for all. +} +``` + +This file is used to load your panel component in taxa page. Use the `id` to include and define the position in the layout in `taxa_page.yml` + +```yaml +taxa_page_overview: + panels: + - - - panel:gallery + - panel:test # <--- Your new panel + - panel:type + - panel:type-specimen + - panel:nomenclature + - panel:nomenclature-references + + - - panel:map + - panel:descendants + - panel:content + - panel:statistics +``` + ## Defining global components -TaxonPages provides an auto-import component from `src/components` folder using special extensions for it. Some objects and functions are only present in the browser and not in the NodeJs server environment. When you run code that is not supported by the server, it ends up crashing. Some JavaScript libraries like `Leaflet` use the `document` or `window` object, which do not exist in the node environment. To handle this problem, TaxonPages provides 2 ways to import the components. +TaxonPages provides an auto-import component from `src/components` and `/components` folders using special extensions for it. Some objects and functions are only present in the browser and not in the NodeJs server environment. When you run code that is not supported by the server, it ends up crashing. Some JavaScript libraries like `Leaflet` use the `document` or `window` object, which do not exist in the node environment. To handle this problem, TaxonPages provides 2 ways to import the components. ### Client Side only (CSR): @@ -165,20 +251,20 @@ TaxonPages provides a set of global components that could be used to create your | `` | Dropdown menu | | | `` | | [Link](https://github.com/SpeciesFileGroup/taxonpages/blob/main/src/components/Gallery/GalleryImage.global.vue#L40) | | `` | | | -| `` | TaxonWorks Project Statistics | | +| `` | Show trackers to report issues | [Link](https://github.com/SpeciesFileGroup/taxonpages/blob/main/src/components/TrackerReport.global.vue#L47) | | `` | | | | `` | | | | `` | Interactive map that use Leaflet library | | | `` | Create lightboxes | | -| `VSkeleton` | Content loading placeholder | | -| `VSpinner` | Loading spinner | | -| VTable | | | -| VTableBody | | | -| VTableBodyCell | | | -| VTableBodyRow | | | -| VTableHeader | | | -| VTableHeaderCell | | | -| VTableHeaderRow | | | +| `` | Content loading placeholder | | +| `` | Loading spinner | | +| `` | | | +| `` | | | +| `` | | | +| `` | | | +| `` | | | +| `` | | | +| `` | | | | Icons | | -------------------- | From e77dca690758153f33465873db795a1c32905e1c Mon Sep 17 00:00:00 2001 From: jlpereira Date: Wed, 27 Sep 2023 13:46:04 -0300 Subject: [PATCH 2/2] Send status code 404 when router doesn't exist --- server.js | 23 +++++++++------------- src/entry-server.js | 7 +++---- src/modules/httpErrorPages/router/index.js | 12 ++++++++--- src/modules/otus/views/Index.vue | 2 +- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/server.js b/server.js index b467e00..6fc9a68 100644 --- a/server.js +++ b/server.js @@ -76,22 +76,17 @@ export async function createServer( render = (await import('./dist/server/entry-server.js')).render } - const [appHtml, appState, preloadLinks, tagMeta, redirectRoute] = + const [appHtml, appState, preloadLinks, tagMeta, statusCode] = await render(url, manifest, origin) + const html = template + .replace(``, preloadLinks) + .replace(``, appState) + .replace(``, tagMeta.headTags) + .replace(``, tagMeta.bodyTagsOpen) + .replace(``, tagMeta.bodyTags) + .replace(makeAppContainer(), makeAppContainer(appHtml)) - if (redirectRoute) { - res.redirect(redirectRoute) - } else { - const html = template - .replace(``, preloadLinks) - .replace(``, appState) - .replace(``, tagMeta.headTags) - .replace(``, tagMeta.bodyTagsOpen) - .replace(``, tagMeta.bodyTags) - .replace(makeAppContainer(), makeAppContainer(appHtml)) - - res.status(200).set({ 'Content-Type': 'text/html' }).end(html) - } + res.status(statusCode).set({ 'Content-Type': 'text/html' }).end(html) } catch (e) { vite && vite.ssrFixStacktrace(e) console.log(e.stack) diff --git a/src/entry-server.js b/src/entry-server.js index f545e0c..5758fb8 100644 --- a/src/entry-server.js +++ b/src/entry-server.js @@ -22,11 +22,10 @@ export async function render(url, manifest, originUrl) { // @vitejs/plugin-vue injects code into a component's setup() that registers // itself on ctx.modules. After the render, ctx.modules would contain all the // components that have been instantiated during this render call. + const ctx = {} - const initialRoute = router.currentRoute.value.path const html = await renderToString(app, ctx) - const latestRoute = router.currentRoute.value.path - const redirectRoute = initialRoute !== latestRoute && latestRoute + const statusCode = router.currentRoute.value.meta?.statusCode || 200 const headPayload = await renderSSRHead(getActiveHead()) const renderState = `