Skip to content

Commit

Permalink
Merge pull request #159 from SpeciesFileGroup/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@jlpereira
jlpereira authored Sep 27, 2023
2 parents 5fdb6ca + e77dca6 commit 68e2c72
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 33 deletions.
108 changes: 97 additions & 11 deletions README.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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):

Expand Down Expand Up @@ -165,20 +251,20 @@ TaxonPages provides a set of global components that could be used to create your
| `<Dropdown/>` | Dropdown menu | |
| `<GalleryImage/>` | | [Link](https://github.com/SpeciesFileGroup/taxonpages/blob/main/src/components/Gallery/GalleryImage.global.vue#L40) |
| `<ImageViewer/>` | | |
| `<ProjectStats/>` | TaxonWorks Project Statistics | |
| `<TrackerReport/>` | Show trackers to report issues | [Link](https://github.com/SpeciesFileGroup/taxonpages/blob/main/src/components/TrackerReport.global.vue#L47) |
| `<TabMenu/>` | | |
| `<TabItem/>` | | |
| `<VMap/>` | Interactive map that use Leaflet library | |
| `<VModal/>` | Create lightboxes | |
| `VSkeleton` | Content loading placeholder | |
| `VSpinner` | Loading spinner | |
| VTable | | |
| VTableBody | | |
| VTableBodyCell | | |
| VTableBodyRow | | |
| VTableHeader | | |
| VTableHeaderCell | | |
| VTableHeaderRow | | |
| `<VSkeleton/>` | Content loading placeholder | |
| `<VSpinner/>` | Loading spinner | |
| `<VTable/>` | | |
| `<VTableBody/>` | | |
| `<VTableBodyCell/>` | | |
| `<VTableBodyRow/>` | | |
| `<VTableHeader/>` | | |
| `<VTableHeaderCell/>` | | |
| `<VTableHeaderRow/>` | | |

| Icons |
| -------------------- |
Expand Down
23 changes: 9 additions & 14 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(`<!--preload-links-->`, preloadLinks)
.replace(`<!--app-state-->`, appState)
.replace(`<!--head-tags-->`, tagMeta.headTags)
.replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
.replace(`<!--body-tags-->`, tagMeta.bodyTags)
.replace(makeAppContainer(), makeAppContainer(appHtml))

if (redirectRoute) {
res.redirect(redirectRoute)
} else {
const html = template
.replace(`<!--preload-links-->`, preloadLinks)
.replace(`<!--app-state-->`, appState)
.replace(`<!--head-tags-->`, tagMeta.headTags)
.replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
.replace(`<!--body-tags-->`, 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)
Expand Down
7 changes: 3 additions & 4 deletions src/entry-server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
<script>
Expand All @@ -37,7 +36,7 @@ export async function render(url, manifest, originUrl) {
// which we can then use to determine what files need to be preloaded for this
// request.
const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
return [html, renderState, preloadLinks, headPayload, redirectRoute]
return [html, renderState, preloadLinks, headPayload, statusCode]
}

function renderPreloadLinks(modules, manifest) {
Expand Down
12 changes: 9 additions & 3 deletions src/modules/httpErrorPages/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ export default [
{
path: '/500',
name: 'httpError500',
component: internalError
component: internalError,
meta: {
statusCode: 500
}
},
{
path: '/:pathMatch(.*)*',
name: 'httpError400',
component: notFound
name: 'httpError404',
component: notFound,
meta: {
statusCode: 404
}
}
]
2 changes: 1 addition & 1 deletion src/modules/otus/views/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ async function loadInitialData() {
function redirectOnError(error) {
switch (error?.response?.status) {
case 404:
router.replace({ name: 'httpError400' })
router.replace({ name: 'httpError404' })
break
case 500:
router.replace({ name: 'httpError500' })
Expand Down

0 comments on commit 68e2c72

Please sign in to comment.