scnc
/
qiskit.org
mirror of https://github.com/Qiskit/qiskit.org.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add custom markdown and smooth scrolling

This commit is contained in:
Salvador de la Puente González 2019-06-19 09:05:16 -04:00
parent 963aae56ce
commit 5019ef4695
9 changed files with 127 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
nuxt.config.js
View File

@ -1,6 +1,25 @@
import path from 'path'
import markdownIt from 'markdown-it'
import miLinkAttributes from 'markdown-it-link-attributes'
import miAnchor from 'markdown-it-anchor'
import uslug from 'uslug'
import pkg from './package'
const md = markdownIt({
linkify: true,
html: true
})
md.use(miLinkAttributes, {
pattern: /^https?:/,
attrs: {
target: '_blank',
rel: 'noopener'
}
})
md.use(miAnchor, {
slugify(id) { return uslug(id) }
})
export default {
mode: 'universal',
@ -57,9 +76,27 @@ export default {
options: {
vue: {
root: 'dynamicMarkdown'
},
markdown: (body) => {
return md.render(body)
}
}
})
}
},
router: {
scrollBehavior(to) {
if (to.hash) {
const el = document.querySelector(to.hash)
if ('scrollBehavior' in document.documentElement.style) {
return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
} else {
return window.scrollTo(0, el.offsetTop)
}
}
return { x: 0, y: 0 }
}
}
}

27
package-lock.json generated
View File

@ -1255,12 +1255,27 @@
"@types/uglify-js": "*"
}
},
"@types/linkify-it": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-2.1.0.tgz",
"integrity": "sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==",
"dev": true
},
"@types/loglevel": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/loglevel/-/loglevel-1.5.4.tgz",
"integrity": "sha512-8dx4ckP0vndJeN+iKZwdGiapLqFjVQ3JLOt92uqK0C63acs5NcPLbUOpfXCJkKVRjZLBQjw8NIGNBSsnatFnFQ==",
"dev": true
},
"@types/markdown-it": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-0.0.7.tgz",
"integrity": "sha512-WyL6pa76ollQFQNEaLVa41ZUUvDvPY+qAUmlsphnrpL6I9p1m868b26FyeoOmo7X3/Ta/S9WKXcEYXUSHnxoVQ==",
"dev": true,
"requires": {
"@types/linkify-it": "*"
}
},
"@types/memory-fs": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@types/memory-fs/-/memory-fs-0.3.2.tgz",
@ -6395,6 +6410,18 @@
"uc.micro": "^1.0.5"
}
},
"markdown-it-anchor": {
"version": "5.2.4",
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.2.4.tgz",
"integrity": "sha512-n8zCGjxA3T+Mx1pG8HEgbJbkB8JFUuRkeTZQuIM8iPY6oQ8sWOPRZJDFC9a/pNg2QkHEjjGkhBEl/RSyzaDZ3A==",
"dev": true
},
"markdown-it-link-attributes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/markdown-it-link-attributes/-/markdown-it-link-attributes-2.1.0.tgz",
"integrity": "sha1-MqdMlPfFzf0Iho0r7inG+nCggyQ=",
"dev": true
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

3
package.json
View File

@ -21,6 +21,7 @@
"devDependencies": {
"@nuxt/typescript": "^2.8.1",
"@nuxtjs/eslint-config": "0.0.1",
"@types/markdown-it": "0.0.7",
"@typescript-eslint/eslint-plugin": "^1.10.2",
"@typescript-eslint/parser": "^1.10.2",
"eslint": "^5.16.0",
@ -32,6 +33,8 @@
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"frontmatter-markdown-loader": "^1.6.1",
"markdown-it-anchor": "^5.2.4",
"markdown-it-link-attributes": "^2.1.0",
"nodemon": "^1.18.9",
"uslug": "^1.0.4",
"vue-property-decorator": "^8.1.1"

78
pages/events/_slug.vue
View File

@ -37,7 +37,7 @@ import Menu from '~/components/Menu.vue'
import Footer from '~/components/Footer.vue'
import { Context } from '@nuxt/vue-app'
function getBackgroundUris(background: string) {
function getBackgroundUris(background: string): [string, string] {
const bgRoute = '/images/events/headers/'
const lBackgroundUri = `${bgRoute}${background}-low-res.jpg`
const hBackgroundUri = `${bgRoute}${background}-hi-res.jpg`
@ -52,6 +52,9 @@ function getBackgroundUris(background: string) {
},
async asyncData(context: Context) {
const sourceName = context.route.params.slug
if (sourceName === 'undefined') {
return
}
const definition = await import(`~/src/events/${sourceName}.md`)
const [lBackgroundUri, hBackgroundUri] =
getBackgroundUris(definition.attributes.background)
@ -116,8 +119,8 @@ html {
font-family: 'IBM Plex Sans', sans-serif;
/* min-fs + (max-fs - min-fs) * ((viewport-width - min-vw) / (max-vw - min-vw)) */
font-size: calc(10px + (18 - 10) * ((900px - 340px) / (900 - 340)));
background-image: url('/img/dots.svg'), url('/img/dots.svg'), url('/img/dots.svg'),
url('/img/lines.svg'), url('/img/lines.svg'), url('/img/lines.svg');
background-image: url('/images/events/deco/dots.svg'), url('/images/events/deco/dots.svg'), url('/images/events/deco/dots.svg'),
url('/images/events/deco/lines.svg'), url('/images/events/deco/lines.svg'), url('/images/events/deco/lines.svg');
background-repeat: repeat-x, repeat-x, repeat-x, repeat-y, repeat-y, repeat-y;
background-position: top calc(100vh + 890px) left 0, top calc(100vh + 930px) left 0, top calc(100vh + 970px) left 0,
top 0 right 100px, top 0 right 0, top 0 right -100px;
@ -137,17 +140,6 @@ h2 {
color: #0A1D8F;
}
footer {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 10rem;
text-align: center;
margin-top: 4rem;
background-color: var(--dark-color);
}
header {
position: relative;
height: 100vh;
@ -239,10 +231,6 @@ header p {
}
}
main.second-level {
padding-top: 4rem;
}
main .cta {
border-color: black;
}
@ -271,7 +259,8 @@ main .clarification {
}
h2 {
margin: 4rem 0 2.5rem;
padding-top: 4rem;
margin: 0 0 2rem;
color: #0A1D8F;
}
@ -284,14 +273,6 @@ h2::before {
border-top: 1px solid #0A1D8F;
}
.second-level h2 {
padding-left: 5%;
}
.second-level h2::before {
margin-left: -5%;
}
.agenda h2 {
margin-bottom: 0.5rem;
}
@ -346,42 +327,7 @@ td.multislot {
font-style: italic;
}
footer {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 10rem;
text-align: center;
margin-top: 4rem;
background-color: #0A1D8F;
}
@media (max-width: 900px) {
.convertible-menu .hamburger {
display: block;
}
.convertible-menu ul {
text-align: right;
width: 100vw;
position: absolute;
background-color: white;
display: block;
height: auto;
border-bottom: 1px solid #0A1D8F;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transform: translateX(100%);
}
.convertible-menu input:checked ~ ul {
transform: translateX(0);
}
.convertible-menu ul li {
padding-right: 2.5%;
}
@media (max-width: 800px) {
.id-stub {
top: -380px;
@ -396,12 +342,6 @@ footer {
}
}
@media (max-width: 320px) {
main.second-level {
padding-top: 8rem;
}
}
@media (max-height: 500px) {
.headlines {
font-size: 0.9em;

2
pages/events/index.vue
View File

@ -4,7 +4,7 @@
<Card
title="Qiskit Camp Europe"
image="/images/events/promo-europe.jpg"
href="./europe"
href="/events/europe"
info="Cosas Nazis"
/>
<Card small />

3
src/events/europe.md
View File

@ -3,11 +3,10 @@ title: Qiskit Camp Europe
dates: September 12-15, 2019
tagline: Bringing together the Qiskit community
description: A Quantum Meeting Point in the heart of the Alpes
layout: qiskit-camp.hbs
background: europe
nav:
- text: When & where?
goTo: '#when--where'
goTo: '#when-where'
- text: Agenda
goTo: '#agenda'
- text: Code of Conduct

1
src/events/index/toc.md
View File

@ -4,7 +4,6 @@
cards:
- qiskit-camp-intro.md
- qiskit-camp-europe.md
-
intro: event-archive-intro.md
cards:

17
static/images/events/deco/dots.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="768px" height="25px" viewBox="0 0 768 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle</title>
<desc>Created with Sketch.</desc>
<defs>
<pattern id="pattern-1" width="6.05882353" height="6.05882353" x="-6.05882353" y="1320.11209" patternUnits="userSpaceOnUse">
<use xlink:href="#image-2" transform="scale(0.12622549,0.12622549)"/>
</pattern>
<image id="image-2" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAADBSURBVGgF7ZdBDoAgDASJ8Vn+Xv+lcKghHggIPWwzJAQVWNspBU2J0iRw5N5S3crmpowwBJYQIAeWYEREmAA5IBw8TF9CgBxYghERYQJXtv0Utj/d2fhS3Yr8Dw0OuK2NTuEwEfiemKP3ZaexhK1b41g/s+t6dxp93ztePgJGyKs12l76ST4COOC2NjqF5SOwdzr6d1j5mKNAYILAe2JOaDSnyidx0zs6AxAgBwIEERemCJADU/iYHIAAORAgiG0XHti1GWyhsUX6AAAAAElFTkSuQmCC"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
<g id="Updated" transform="translate(0.000000, -1326.000000)" fill="url(#pattern-1)" fill-rule="nonzero">
<rect id="Rectangle" x="0" y="1326.17092" width="794" height="24"/>
</g>
</g>
<head xmlns=""/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

32
static/images/events/deco/lines.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="172px" height="1293px" viewBox="0 0 172 1293" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Group 4</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.20719401">
<g id="Updated" transform="translate(-508.000000, -15.000000)" fill-rule="nonzero" stroke="#0A1D8F">
<g id="Group-4" transform="translate(509.359539, 15.000000)">
<g id="Group-2">
<path d="M0.600963941,0.530483404 L0.600963941,673.438509" id="Path-6"/>
<path d="M0.600963941,619.744699 L0.600963941,1292.65273" id="Path-6"/>
<circle id="Oval" cx="71.5" cy="672.252267" r="71.5"/>
</g>
<g id="Group-2" transform="translate(9.000000, 0.000000)">
<path d="M0.600963941,0.530483404 L0.600963941,673.438509" id="Path-6"/>
<path d="M0.600963941,619.744699 L0.600963941,1292.65273" id="Path-6"/>
<circle id="Oval" cx="71.5" cy="672.252267" r="71.5"/>
</g>
<g id="Group-2" transform="translate(18.000000, 0.000000)">
<path d="M0.600963941,0.530483404 L0.600963941,673.438509" id="Path-6"/>
<path d="M0.600963941,619.744699 L0.600963941,1292.65273" id="Path-6"/>
<circle id="Oval" cx="71.5" cy="672.252267" r="71.5"/>
</g>
<g id="Group-2" transform="translate(27.000000, 0.000000)">
<path d="M0.600963941,0.530483404 L0.600963941,673.438509" id="Path-6"/>
<path d="M0.600963941,619.744699 L0.600963941,1292.65273" id="Path-6"/>
<circle id="Oval" cx="71.5" cy="672.252267" r="71.5"/>
</g>
</g>
</g>
</g>
<head xmlns=""/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB