ARXIV (component )

src/app/shared/components/arxiv/templates

Demo Section

Each variation will be presented in the following section.

Default- Arxiv-Namens-Suchbegriffbezogene Publikationsliste

Headline of First Order which needs to be a multi-line headline just because

Readme

arxiv (component)

Description

This blueprint is based on the blueprint of Veams. The Modul contains a Vue.js-app-Solution

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/arxiv

Fields

arxiv.hbs

Settings

Parameter Type Default Description
settings.arxivClasses String '' Modifier classes for component
settings.arxivContextClass String 'default' Context class of component

Content

Parameter Type Description
content.arxivField String Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$arxiv-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-arxiv:

Modifier Description
is-modifier Please add a description!

Templates

arxiv.hbs

<div class="c-arxiv{{#if settings.arxivContextClass}}--{{settings.arxivContextClass}}{{else}}--default{{/if}}{{#if settings.arxivClasses}} {{settings.arxivClasses}}{{/if}}"
     data-css="c-arxiv">
		<h1 id="headline-of-first-order-which-needs-to-be-a-multi-line-headline-just-because">Headline of First Order which needs to be a multi-line headline just because</h1>

	 	<div id="arxiv-app" class"arxiv__app"></div>

		<script>
			window.arxivConfig = {
				apiUrl:"https://export.arxiv.org/api/query?search_query=au:{{#if content.personNameApi}}{{content.personNameApi}}{{else}}Meier_Michael{{/if}}&start=0&max_results=10&sortBy=submittedDate&sortOrder=descending",
				arxivLink:"https://arxiv.org/search/astro-ph?searchtype=author&query={{#if content.personNameSearch}}{{content.personNameSearch}}{{else}}Meier%2C+Michael{{/if}}",
				linkText:"{{#if content.linkText}}{{content.linkText}}{{else}}default{{/if}}",
				linkTitle:"{{#if content.linkTitle}}{{content.linkTitle}}{{else}}{{/if}}"
			}
		</script>


		<script src="{{@root.assets}}scripts/arxiv-app.bundle.vue_3.js" defer></script>

</div>

Data File

arxiv.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default- Arxiv-Namens-Suchbegriffbezogene Publikationsliste"
			},
			"settings": {
				"arxivContextClass": "rte",
				"arxivClasses": ""
			},
			"content": {
				"linkText": "Alle Publikationen auf Arxiv.org",
				"linkTitle": "Link geht in extra Fenster auf",
				"personNameApi": "Weller_J",
				"personNameSearch": "Weller%2C+J"
			}
		}
	}
}

Styles

arxiv.scss

/* ===================================================
component: arxiv
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-arxiv"] {

	.c-arxiv__loader {
		position: relative;

        .c-arxiv__init-loader {
            @include centering(h);

            top: 5px;
            display: flex;
            width: 200px;
            flex-direction: row;
            background-color: $color-white;
            height: 60px;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity $animation-duration-std $animation-easing-std;
            z-index: 100;
            border: 1px solid $color-green;

			&.is-loading {
				opacity: 1;
			}

        }

        .c-arxiv__init-loader-box {
            display: block;
            margin: 10px;
            border: 1em solid $color-green;


            /*
            MODIFIERS
            ----------------------- */
            &.is-one {
                animation: boxAppear 2s linear infinite;
            }

            &.is-two {
                animation: boxAppear 2s linear .3s infinite;
            }

            &.is-three {
                animation: boxAppear 2s linear .62s infinite;
            }


        }
    }
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-arxiv--default {
}

HTML Output

Default- Arxiv-Namens-Suchbegriffbezogene Publikationsliste

<div class="c-arxiv--rte" data-css="c-arxiv">
	<h1 id="headline-of-first-order-which-needs-to-be-a-multi-line-headline-just-because">Headline of First Order which needs to be a multi-line headline just because</h1>
	<div id="arxiv-app" class"arxiv__app"></div>
	<script>
		window.arxivConfig = {
			apiUrl: "https://export.arxiv.org/api/query?search_query=au:Weller_J&start=0&max_results=10&sortBy=submittedDate&sortOrder=descending",
			arxivLink: "https://arxiv.org/search/astro-ph?searchtype=author&query=Weller%2C+J",
			linkText: "Alle Publikationen auf Arxiv.org",
			linkTitle: "Link geht in extra Fenster auf"
		}
	</script>
	<script src="./scripts/arxiv-app.bundle.vue_3.js" defer></script>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link