+
{
@@ -25,11 +25,11 @@ const baseProps: BaseProps = {
: title
)
: (site.title || ''),
- description: Astro.props.description || site.description,
- author: Astro.props.author || site.author,
- keywords: Astro.props.keywords || site.keywords,
- themeColor: Astro.props.themeColor || site.themeColor,
- favicon: Astro.props.favicon || undefined,
+ description: Astro.props.description || site.description || undefined,
+ author: Astro.props.author || site.author || undefined,
+ keywords: Astro.props.keywords || site.keywords || undefined,
+ themeColor: Astro.props.themeColor || site.themeColor || undefined,
+ favicon: Astro.props.favicon || site.favicon || undefined,
}
---
diff --git a/app/app/src/pages/about.astro b/app/app/src/pages/about.astro
index c72bd48..bbe9ced 100644
--- a/app/app/src/pages/about.astro
+++ b/app/app/src/pages/about.astro
@@ -1,5 +1,7 @@
---
+import { githubRepositoryUrl } from '~/config'
import Default from '~/layouts/Default.astro'
+import matibouxSvg from '~/assets/matiboux.svg?url'
const title = 'About'
---
@@ -18,17 +20,41 @@ const title = 'About'
+
-
-
+
{!noScripts && (
-
-
-
-
+
+
+
+
)}
+
+
+
+
+
+
diff --git a/app/app/src/layouts/Layout.astro b/app/app/src/layouts/Layout.astro
index ba8c7af..90da4fb 100644
--- a/app/app/src/layouts/Layout.astro
+++ b/app/app/src/layouts/Layout.astro
@@ -1,7 +1,7 @@
---
+import site from '~/site'
import Base from '~/layouts/Base.astro'
import type { Props as BaseProps } from '~/layouts/Base.astro'
-import site from '~/site'
export interface Props extends Omit
-
-
- Made with by EPITA students.
-
- 
-
- We use cookies for analytics purposes.
-
Team
- 
+ 
- See all contributors to EPITA.it
+
+ See all contributors to EPITA.it
+
+
+
diff --git a/app/app/src/scripts/body-height.ts b/app/app/src/scripts/body-height.ts
new file mode 100644
index 0000000..63a493a
--- /dev/null
+++ b/app/app/src/scripts/body-height.ts
@@ -0,0 +1,22 @@
+function getScrollbarWidth()
+{
+ const elt = document.createElement('div')
+ elt.style.position = 'absolute'
+ elt.style.top = '-9999px'
+ elt.style.width = '50px'
+ elt.style.height = '50px'
+ elt.style.overflow = 'scroll'
+ document.body.appendChild(elt)
+ const scrollbarWidth = elt.getBoundingClientRect().width - elt.clientWidth
+ document.body.removeChild(elt)
+ return scrollbarWidth
+}
+
+function checkBodyHeight()
+{
+ document.body.classList.toggle('has-scrollbar', document.documentElement.scrollHeight > window.innerHeight)
+ document.body.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`)
+}
+
+document.addEventListener('DOMContentLoaded', checkBodyHeight, false)
+window.addEventListener('resize', checkBodyHeight, false)
diff --git a/app/app/src/scripts/carousel.ts b/app/app/src/scripts/carousel.ts
new file mode 100644
index 0000000..442481b
--- /dev/null
+++ b/app/app/src/scripts/carousel.ts
@@ -0,0 +1,42 @@
+function handleCarousel()
+{
+ // Handle Newsline carousel
+ const carouselItems = document.querySelectorAll('#newsline .carousel-item')
+
+ if (carouselItems.length <= 0)
+ {
+ // No carousel items
+ return
+ }
+
+ for (const carouselItem of carouselItems)
+ {
+ carouselItem.classList.remove('active')
+ }
+
+ const randomCarouselItem = carouselItems[Math.floor(Math.random() * carouselItems.length)]
+ randomCarouselItem?.classList.add('active')
+
+ setInterval(
+ () =>
+ {
+ let nextItem: Element | null = null
+ const activeItems = document.querySelectorAll('#newsline .carousel-item.active')
+ for (const activeItem of activeItems)
+ {
+ activeItem.classList.remove('active')
+ nextItem = activeItem.nextElementSibling
+ }
+
+ if (!nextItem)
+ {
+ nextItem = carouselItems[0]!
+ }
+
+ nextItem.classList.add('active')
+ },
+ 10000, // Interval in ms
+ )
+}
+
+document.addEventListener('DOMContentLoaded', handleCarousel, false)
diff --git a/app/app/src/scripts/invalid-links.ts b/app/app/src/scripts/invalid-links.ts
new file mode 100644
index 0000000..c3a30b4
--- /dev/null
+++ b/app/app/src/scripts/invalid-links.ts
@@ -0,0 +1,27 @@
+function handleInvalidLinks()
+{
+ const invalidTileLinks = document.querySelectorAll('.tiles-grid a.invalid')
+ for (const invalidTileLink of invalidTileLinks)
+ {
+ invalidTileLink.addEventListener('click', (event) =>
+ {
+ event.preventDefault()
+
+ const brand = (event.currentTarget as HTMLAnchorElement).querySelector('.branding-bar')?.textContent || null
+ const href = (event.currentTarget as HTMLAnchorElement).getAttribute('href')
+ const target = (event.currentTarget as HTMLAnchorElement).getAttribute('target')
+
+ const brandElement = document.getElementById('warn-invalid-brand')
+ if (brandElement) brandElement.textContent = brand || (href ? new URL(href).hostname : 'null')
+ const hrefElement = document.getElementById('warn-invalid-href')
+ if (hrefElement) hrefElement.textContent = href || 'null'
+ const linkElement = document.getElementById('warn-invalid-link')
+ if (linkElement && href) linkElement.setAttribute('href', href)
+ if (linkElement && target) linkElement.setAttribute('target', target)
+ const modalElement = document.getElementById('warn-invalid-modal')
+ if (modalElement) modalElement.classList.add('show')
+ })
+ }
+}
+
+document.addEventListener('DOMContentLoaded', handleInvalidLinks, false)
diff --git a/app/app/src/scripts/script.js b/app/app/src/scripts/script.js
deleted file mode 100644
index c6a5c77..0000000
--- a/app/app/src/scripts/script.js
+++ /dev/null
@@ -1,100 +0,0 @@
-$(document).ready(function() {
- // Get current URL path and assign 'active' class
- var pathname = window.location.pathname;
- var $link = $('#navbar .navbar-nav a[href="' + pathname + '"]');
- $link.addClass('active');
- if($link.hasClass('dropdown-item'))
- $link.parents('.nav-item').find('.nav-link').addClass('active');
-
- // Activate newsline carousel
- // $('#newsline').carousel(); // Carousel from Bootstrap is glitched
- $allCarouselItems = $('#newsline .carousel-item');
- $randomCarouselItem = $allCarouselItems.eq(Math.floor(Math.random() * $allCarouselItems.length));
- $allCarouselItems.removeClass('active');
- $randomCarouselItem.addClass('active');
- var carouselInterval = 10000; // ms
- setInterval(function() {
- $current = $('#newsline .carousel-item.active');
- $current.removeClass('active');
- $next = $current.nextAll('.carousel-item').first();
- if($next.length <= 0) $next = $('.carousel-item').first();
- $next.addClass('active');
- }, carouselInterval);
-
- // Handle display behavior on small screens
- var checkScreenSize = function() {
- var $main = $('#main');
- var $tiles = $('#main .tiles-grid');
-
- // $main.width() = $tiles.width() + 30px
- if($main.width() < 500) {
- $main.addClass('smallscreen');
-
- if($main.width() < 340)
- $tiles.css('max-width', '150px');
- else
- $tiles.css('max-width', '310px');
- }
- else {
- $main.removeClass('smallscreen');
- $tiles.css('max-width', ''); // Remove CSS property
- }
- };
- checkScreenSize(); // Execute once after script load
- $(window).resize(checkScreenSize);
-
- // jQuery addon for selecting external links
- $.expr[':'].external = function(a) {
- var regex = /^(\w+:)?\/\//;
- var href = $(a).attr('href');
- return href !== undefined && href.search(regex) !== -1;
- };
-
- // Handle Tiles Grid link events for Analytics
- $('.tiles-grid').on('click', 'a:external', function() {
- if ($(this).hasClass('invalid'))
- return; // Ignore clicks on invalid links
-
- gtag('event', 'click', {
- event_category: 'Outbound Link',
- event_label: $(this).find('.branding-bar').text(),
- transport_type: 'beacon'
- });
- });
-
- // Handle other External link events for Analytics
- $('body').on('click', 'a:external', function() {
- // Check that the element in not in the tiles grid
- if($(this).not($('.tiles-grid a')).length) {
- gtag('event', 'click', {
- event_category: 'External Link',
- event_label: $(this).attr('href'),
- transport_type: 'beacon'
- });
- }
- });
-
- if (window.matchMedia('(display-mode: standalone)').matches) {
- // From the web app
- // Open all external links in a new tab
- $('a:external').attr('target', '_blank');
- }
- else {
- // Display ad about the web app in the newsline carousel
- $('#addToHomeScreen').addClass('carousel-item').removeClass('d-none');
- }
-
- // Handle clicks on Tiles Grid invalid links to warn the user
- $('.tiles-grid').on('click', 'a.invalid', function(e) {
- e.preventDefault();
-
- const brand = $(this).find('.branding-bar').text();
- const href = $(this).attr('href');
- const target = $(this).attr('target');
-
- $('#warn-invalid-brand').text(brand);
- $('#warn-invalid-href').text(href);
- $('#warn-invalid-link').attr({ 'href': href, 'target': target });
- $('#warn-invalid-modal').modal();
- });
-});
diff --git a/app/app/src/scripts/script.js.disabled b/app/app/src/scripts/script.js.disabled
new file mode 100644
index 0000000..9877cde
--- /dev/null
+++ b/app/app/src/scripts/script.js.disabled
@@ -0,0 +1,32 @@
+// $(document).ready(function() {
+// // jQuery addon for selecting external links
+// $.expr[':'].external = function(a) {
+// var regex = /^(\w+:)?\/\//;
+// var href = $(a).attr('href');
+// return href !== undefined && href.search(regex) !== -1;
+// };
+
+// // Handle Tiles Grid link events for Analytics
+// $('.tiles-grid').on('click', 'a:external', function() {
+// if ($(this).hasClass('invalid'))
+// return; // Ignore clicks on invalid links
+
+// gtag('event', 'click', {
+// event_category: 'Outbound Link',
+// event_label: $(this).find('.branding-bar').text(),
+// transport_type: 'beacon'
+// });
+// });
+
+// // Handle other External link events for Analytics
+// $('body').on('click', 'a:external', function() {
+// // Check that the element in not in the tiles grid
+// if($(this).not($('.tiles-grid a')).length) {
+// gtag('event', 'click', {
+// event_category: 'External Link',
+// event_label: $(this).attr('href'),
+// transport_type: 'beacon'
+// });
+// }
+// });
+// });
diff --git a/app/app/src/scripts/standalone-app.ts b/app/app/src/scripts/standalone-app.ts
new file mode 100644
index 0000000..ebad403
--- /dev/null
+++ b/app/app/src/scripts/standalone-app.ts
@@ -0,0 +1,24 @@
+function handleStandaloneApp()
+{
+ if (window.matchMedia('(display-mode: standalone)').matches)
+ {
+ // From the standalone web app
+
+ // Open all external links in a new tab
+ const externalLinks = document.querySelectorAll('a:is([href^="http://"], [href^="https://"], [href^="//"])')
+ for (const externalLink of externalLinks)
+ {
+ externalLink.setAttribute('target', '_blank')
+ }
+
+ // Hide the standalone web app ad in the newsline carousel
+ const newslineCarouselItem = document.getElementById('addToHomeScreen')
+ if (newslineCarouselItem)
+ {
+ newslineCarouselItem.classList.remove('carousel-item')
+ newslineCarouselItem.style.display = 'none'
+ }
+ }
+}
+
+document.addEventListener('DOMContentLoaded', handleStandaloneApp, false)
diff --git a/app/app/src/site.ts b/app/app/src/site.ts
index cf10be3..1f4b957 100644
--- a/app/app/src/site.ts
+++ b/app/app/src/site.ts
@@ -5,6 +5,7 @@ interface Site
author?: string
keywords?: string[]
themeColor?: string
+ favicon?: string
lang?: string
gtag?: string
}
@@ -31,9 +32,10 @@ const site: Site = {
'students',
'EPITA',
],
+ favicon: '/assets/icon-48.png',
themeColor: '#183048',
lang: 'en',
- gtag: 'UA-140860210-2',
+ // gtag: 'UA-140860210-2',
}
export default site
diff --git a/app/app/src/styles/style.css b/app/app/src/styles/style.css
deleted file mode 100644
index bae177c..0000000
--- a/app/app/src/styles/style.css
+++ /dev/null
@@ -1,123 +0,0 @@
----
----
-
-html, body {
- height: 100%;
-}
-body {
- font-family: 'Roboto', sans-serif;
- background: #204060;
- display: flex;
- margin: 0;
- padding: 0;
- flex-direction: column;
- overflow-x: hidden;
- color: #fff;
-}
-
-a { color: #50a0f0 }
-a:hover { color: #4080c0 }
-
-p img { height: 1rem }
-
-@media (min-width: 768px) { #warn-invalid-modal .modal-dialog { max-width: 700px } }
-#warn-invalid-modal .modal-header,
-#warn-invalid-modal .modal-body { color: #212529 } /* Default black color from Bootstrap */
-#warn-invalid-modal code {
- background-color: rgba(0,0,0,.05);
- padding: 2px 4px;
- color: inherit;
- border-radius: 3px;
-}
-/* #warn-invalid-modal h5 { font-size: } */
-
-#navbar {
- background: #183048;
- display: initial; /* Toggles off `display: flex` from Bootstrap */
-}
-#navbar .dropdown-menu {
- background: #285078;
-}
-#navbar .dropdown-menu .dropdown-item {
- color: #fff;
-}
-#navbar .dropdown-menu .dropdown-item:hover,
-#navbar .dropdown-menu .dropdown-item:focus {
- background: #306090;
-}
-#navbar .dropdown-menu .dropdown-item:active {
- background: #3870a8;
-}
-#navbar .dropdown-menu .dropdown-item.active {
- background: #4080c0;
-}
-
-#newsline {
- background: #1c3854;
- padding: .75rem 1rem;
-}
-
-#main {
- max-width: 960px;
- width: 100%;
- margin: 0 auto;
- padding: 20px 0;
- flex: 1 0;
-}
-#main.smallscreen {
- text-align: center;
-}
-#main h1 { font-size: 4em; font-weight: bold }
-#main.smallscreen h1 { font-size: 3em }
-#main.smallscreen .tiles-grid {
- margin: 0 auto;
- text-align: initial;
-}
-
-#main .container > .tiles-grid { margin-bottom: 1rem }
-#main .tiles-grid .invalid:before {
- /* background: ; */
- background-image: url('/assets/missing.png');
- background-size: cover;
- position: absolute;
- width: 100%;
- height: 100%;
- content: '';
- opacity: .2;
-}
-#main .tiles-grid .tile-small .branding-icon,
-#main .tiles-grid .tile-small-wide .branding-icon,
-#main .tiles-grid .tile-medium .branding-icon,
-#main .tiles-grid .tile-wide .branding-icon,
-#main .tiles-grid .tile-large .branding-icon,
-#main .tiles-grid .tile-app .branding-icon {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- padding: 5px 5px 0;
- text-align: right;
- font-size: 1rem;
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- z-index: 2;
-}
-
-#footer {
- background: rgba(0, 0, 0, .1);
- padding: 20px;
- flex-shrink: 0;
-}
-@media (min-width: 992px) {
- #footer .container {
- max-width: 960px;
- }
-}
-#footer ul { padding: 0 }
-#footer ul > li { display: inline-block }
-#footer ul > li + li { margin-left: 5px }
-#footer ul > li + li:before { content: '|'; margin-right: 10px }
-
-*:last-child { margin-bottom: 0 }
diff --git a/app/app/src/styles/style.scss b/app/app/src/styles/style.scss
index b6d44ff..78c2b9c 100644
--- a/app/app/src/styles/style.scss
+++ b/app/app/src/styles/style.scss
@@ -6,3 +6,33 @@
width: 1.25em;
text-align: center;
}
+
+.btn {
+ @apply inline-block px-3 py-1 rounded-md cursor-pointer;
+ @apply border border-black border-opacity-10;
+ @apply bg-gray-200 text-gray-800;
+ @apply hover:bg-gray-300 hover:text-gray-900;
+ @apply active:bg-gray-400 active:text-black;
+
+ &.btn-sm {
+ @apply px-2 py-1 text-sm;
+ }
+
+ &.btn-dark {
+ @apply bg-gray-700 text-white;
+ @apply hover:bg-gray-800;
+ @apply active:bg-gray-900;
+ }
+
+ &.btn-primary {
+ @apply bg-blue-600 text-white;
+ @apply hover:bg-blue-700;
+ @apply active:bg-blue-800;
+ }
+
+ &.btn-info {
+ @apply bg-cyan-600 text-white;
+ @apply hover:bg-cyan-700;
+ @apply active:bg-cyan-800;
+ }
+}
diff --git a/app/app/tailwind.config.mjs b/app/app/tailwind.config.mjs
index 13aa8ef..46a3ad1 100644
--- a/app/app/tailwind.config.mjs
+++ b/app/app/tailwind.config.mjs
@@ -5,11 +5,16 @@ export default {
content: [
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
],
- corePlugins: {
- preflight: false,
- },
theme: {
- extend: {},
+ screens: {
+ sm: '540px',
+ 'navbar-sm': '640px',
+ md: '720px',
+ 'navbar-md': '840px',
+ lg: '960px',
+ 'navbar-lg': '960px',
+ xl: '1140px',
+ },
},
plugins: [
addDynamicIconSelectors(),
+ Matiboux – Mathieu Guérin
I'm an EPITA student and developer. I work on EPITA.it and other projects.
-- Email @epita.fr - Github - Matiboux.me -
+