fix: set vite base path during deploy build + allow google fonts (#4217)

* fix: set vite base path during deploy build + allow google fonts

* ci: only set vite base path if build is for production release

* test: add html-validate ignore rules for vite generated content that is valid

* fix: show buttons on regular sessions without agenda materials + link to legacy agenda

* fix: temporarily hide left menu on agenda-neue and floor-plan-neue

* fix: set resize handler to whole app

* fix: apply html-validate ignore to agenda-neue only + deploy/build.sh fix

* test: change old agenda cypress to always take the same elements to avoid #3564
This commit is contained in:
Nicolas Giard 2022-07-14 19:55:55 -04:00 committed by GitHub
parent ea55dfd056
commit 744bcc54e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 81 additions and 32 deletions

View file

@ -127,7 +127,7 @@
// -----------------------------------
// -> Schedule List
// -----------------------------------
agenda-schedule-list.mt-3(ref='schdList')
agenda-schedule-list.mt-3
// -----------------------------------
// -> Anchored Day Quick Access Menu
@ -180,7 +180,6 @@ const state = reactive({
// REFS
const schdList = ref(null)
const searchIpt = ref(null)
// WATCHERS
@ -272,25 +271,6 @@ function toggleSettings () {
})
}
// --------------------------------------------------------------------
// Handle browser resize
// --------------------------------------------------------------------
const resizeObserver = new ResizeObserver(entries => {
agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
// for (const entry of entries) {
// const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
// }
})
onMounted(() => {
resizeObserver.observe(schdList.value.$el)
})
onBeforeUnmount(() => {
resizeObserver.unobserve(schdList.value.$el)
})
// --------------------------------------------------------------------
// Handle day indicator / scroll
// --------------------------------------------------------------------

View file

@ -139,7 +139,7 @@ const downloadIcsOptions = [
// COMPUTED
const shortMode = computed(() => {
return agendaStore.viewport < 1350
return agendaStore.viewport <= 1350
})
// METHODS
@ -215,6 +215,10 @@ function scrollToNow (ev) {
}
}
.card-body .n-button {
overflow: hidden;
}
&-btnrow {
border: 1px solid #CCC;
padding: 8px 6px 6px 6px;

View file

@ -250,7 +250,7 @@ const meetingEvents = computed(() => {
// -> Populate event links
const links = []
if (item.flags.showAgenda) {
if (item.flags.showAgenda || ['regular', 'plenary'].includes(item.type)) {
if (item.flags.agenda) {
links.push({
id: `lnk-${item.id}-tar`,

View file

@ -1,10 +1,12 @@
<template lang="pug">
n-theme
n-message-provider
router-view.meeting
.app-container(ref='appContainer')
router-view.meeting
</template>
<script setup>
import { onBeforeUnmount ,onMounted, ref } from 'vue'
import { NMessageProvider } from 'naive-ui'
import { useAgendaStore } from './store'
@ -15,9 +17,32 @@ import NTheme from '../components/n-theme.vue'
const agendaStore = useAgendaStore()
// STATE
const appContainer = ref(null)
// INIT
agendaStore.fetch()
// --------------------------------------------------------------------
// Handle browser resize
// --------------------------------------------------------------------
const resizeObserver = new ResizeObserver(entries => {
agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
// for (const entry of entries) {
// const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
// }
})
onMounted(() => {
resizeObserver.observe(appContainer.value, { box: 'device-pixel-content-box' })
})
onBeforeUnmount(() => {
resizeObserver.unobserve(appContainer.value)
})
</script>
<style lang="scss">

View file

@ -6,10 +6,26 @@ import router from './router'
const app = createApp(App, {})
// Initialize store (Pinia)
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)
// Initialize router
router.beforeEach((to, from) => {
// Route Flags
// -> Remove Left Menu
if (to.meta.hideLeftMenu) {
const leftMenuRef = document.querySelector('.leftmenu')
if (leftMenuRef) {
leftMenuRef.remove()
}
}
})
app.use(router)
// Mount App
app.mount('#app-meeting')

View file

@ -6,12 +6,18 @@ export default createRouter({
{
name: 'agenda',
path: '/meeting/:meetingNumber(\\d+)?/agenda-neue',
component: () => import('./Agenda.vue')
component: () => import('./Agenda.vue'),
meta: {
hideLeftMenu: true
}
},
{
name: 'floor-plan',
path: '/meeting/:meetingNumber(\\d+)?/floor-plan-neue',
component: () => import('./FloorPlan.vue')
component: () => import('./FloorPlan.vue'),
meta: {
hideLeftMenu: true
}
}
]
})

View file

@ -21,7 +21,7 @@ describe('meeting agenda', () => {
})
it('filtering the agenda should modify the URL', () => {
cy.get('.agenda-filter-groupselectbtn').any(5).as('selectedGroups').each(randomElement => {
cy.get('.agenda-filter-groupselectbtn').take(5).as('selectedGroups').each(randomElement => {
cy.wrap(randomElement).click()
cy.wrap(randomElement).invoke('attr', 'data-filter-item').then(keyword => {
cy.url().should('contain', keyword)
@ -33,7 +33,7 @@ describe('meeting agenda', () => {
})
it('selecting an area should select all corresponding groups', () => {
cy.get('.agenda-filter-areaselectbtn').any().click().invoke('attr', 'data-filter-item').then(area => {
cy.get('.agenda-filter-areaselectbtn').first().click().invoke('attr', 'data-filter-item').then(area => {
cy.url().should('contain', area)
cy.get(`.agenda-filter-groupselectbtn[data-filter-keywords*="${area}"]`).each(group => {

View file

@ -32,3 +32,12 @@ Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
cy.wrap(elementList)
})
})
Cypress.Commands.add('take', { prevSubject: 'element' }, (subject, size = 1) => {
cy.wrap(subject).then(elementList => {
elementList = (elementList.jquery) ? elementList.get() : elementList
elementList = Cypress._.take(elementList, size)
elementList = (elementList.length > 1) ? elementList : elementList[0]
cy.wrap(elementList)
})
})

View file

@ -3,5 +3,9 @@
echo "Compiling native node packages..."
yarn rebuild
echo "Packaging static assets..."
yarn build
if [ "${SHOULD_DEPLOY}" == "true" ]; then
yarn build --base=https://www.ietf.org/lib/dt/$PKG_VERSION/
elif
yarn build
fi
yarn legacy:build

View file

@ -544,7 +544,7 @@ RFCDIFF_BASE_URL = "https://www.ietf.org/rfcdiff"
IDNITS_BASE_URL = "https://author-tools.ietf.org/api/idnits"
# Content security policy configuration (django-csp)
CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", f"data: {IDTRACKER_BASE_URL} https://www.ietf.org/ https://analytics.ietf.org/")
CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", f"data: {IDTRACKER_BASE_URL} https://www.ietf.org/ https://analytics.ietf.org/ https://fonts.googleapis.com/")
# The name of the method to use to invoke the test suite
TEST_RUNNER = 'ietf.utils.test_runner.IetfTestRunner'

View file

@ -12,6 +12,7 @@
{% endblock %}
{% block pagehead %}
<!-- AGENDA VUE COMPONENT -->
<!-- [html-validate-disable-block void-style, attribute-empty-style] -->
{{ schedule_json|json_script:"agenda-data" }}
{% vite_asset 'client/agenda/main.js' %}
{% endblock %}
@ -68,7 +69,7 @@ body {
{% block precontent %}
<div class="meeting-switch">
<i class="bi bi-arrow-left-right me-2"></i>
<a href="{% url 'agenda-neue' num=schedule.meeting.number %}">Switch to Legacy Agenda Display</a>
<a href="{% url 'ietf.meeting.views.agenda' num=schedule.meeting.number %}">Switch to Legacy Agenda Display</a>
</div>
{% endblock %}
{% block content %}

View file

@ -852,6 +852,10 @@ class IetfTestRunner(DiscoverRunner):
"script-type": "off",
# django-bootstrap5 seems to still generate 'checked="checked"', ignore:
"attribute-boolean-style": "off",
# self-closing style tags are valid in HTML5. Both self-closing and non-self-closing tags are accepted. (vite generates self-closing link tags)
# "void-style": "off",
# Both attributes without value and empty strings are equal and valid. (vite generates empty value attributes)
# "attribute-empty-style": "off"
},
}