@datagouv/components-next 0.0.1

package/src/components/ResourceAccordion/Swagger.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="swagger-ui" />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import SwaggerUI from 'swagger-ui'
+import 'swagger-ui/dist/swagger-ui.css'
+import 'swagger-themes/themes/newspaper.css'
+
+const props = defineProps<{
+  url: string
+}>()
+
+onMounted(async () => {
+  SwaggerUI({
+    dom_id: '#swagger-ui',
+    url: props.url,
+  })
+})
+</script>
+
+<style>
+/** Taken from newsletter theme */
+.swagger-ui .opblock-tag small,
+.swagger-ui .opblock .opblock-summary-description,
+.swagger-ui .opblock-description-wrapper,
+.swagger-ui .opblock-description-wrapper h4,
+.swagger-ui .opblock-title_normal,
+.swagger-ui .opblock-title_normal h4,
+.swagger-ui .opblock-description-wrapper p,
+.swagger-ui .opblock-title_normal p,
+.swagger-ui .responses-inner h4,
+.swagger-ui .responses-inner h5,
+.swagger-ui .response-col_status,
+.swagger-ui .dialog-ux .modal-ux-content p,
+.swagger-ui table thead tr td,
+.swagger-ui table thead tr th,
+.swagger-ui .parameters-col_description p,
+.swagger-ui .info p,
+.swagger-ui .info a,
+.swagger-ui .info .title,
+.swagger-ui .topbar {
+  font-family: 'Marianne', Arial, sans-serif !important;
+}
+</style>

package/src/components/ResourceAccordion/france.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" viewBox="0 0 64 64" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="path-1-inside-1_677_1834" fill="white"><path d="M47.6364 31.7323C47.8391 31.8153 48.0153 31.8812 48.1901 31.9556C49.3599 32.4569 50.0394 33.3352 50.1277 34.6162C50.1983 35.6647 50.2292 36.7158 50.2371 37.7685C50.2523 39.8635 51.2789 41.4763 52.6657 42.8981C53.5865 43.842 53.6661 44.3716 52.7286 45.2974C51.1332 46.8812 49.3827 48.2165 47.1329 48.7665C44.8819 49.3216 42.5083 49.0548 40.4357 48.0138C39.4892 47.5604 38.5265 47.3019 37.5309 47.7071C37.071 47.9103 36.6618 48.214 36.3331 48.596C36.0111 48.9977 35.7367 49.4357 35.5154 49.9011C35.0548 50.75 34.2981 51.2484 33.4773 51.6648C33.2122 51.7978 32.9196 51.8661 32.6233 51.8641C32.3271 51.862 32.0355 51.7897 31.7724 51.653C31.4776 51.521 31.2044 51.3451 30.9618 51.1313C29.8211 50.0656 28.445 49.7385 26.9352 49.6965C24.2186 49.5962 21.5474 48.9671 19.0698 47.8441C18.4504 47.5532 17.8641 47.1957 17.3213 46.7778C16.6911 46.3217 16.5988 45.9152 16.8344 45.1807C17.1056 44.3195 17.3992 43.4821 17.6453 42.6226C17.6638 42.5251 17.6598 42.4247 17.6338 42.329C17.6077 42.2333 17.5603 42.1449 17.495 42.0705C16.4777 41.1564 16.4698 41.1632 15.3346 41.8919C12.2675 43.8671 9.1983 45.8419 6.12697 47.816C5.39573 48.2874 5.04746 48.1891 4.61497 47.4308C4.33147 46.9348 4.052 46.4365 3.77656 45.9357C3.18563 44.8787 3.26602 44.5782 4.27115 43.9407C7.48797 41.9067 10.6834 39.8658 13.9015 37.8507C14.3035 37.5956 14.4007 37.3572 14.3108 36.8936C13.6776 33.714 14.5417 30.9795 16.8278 28.6954C16.9816 28.5764 17.0894 28.4073 17.1328 28.2171C17.1763 28.027 17.1526 27.8277 17.0658 27.6532C16.5668 26.2486 15.7792 25.1355 14.3525 24.5233C13.5227 24.1467 12.7175 23.7178 11.9416 23.2391C10.7864 22.5922 9.89092 21.5619 9.40841 20.3243C9.31335 20.0822 9.28169 19.8197 9.31644 19.5617C9.3512 19.3037 9.45121 19.059 9.60692 18.8509C10.6377 17.2552 12.2625 16.7311 13.9773 16.7337C15.3337 16.7378 16.6957 17.1374 18.0435 17.418C19.2594 17.6697 19.3451 17.666 19.9235 16.5752C20.1987 16.055 20.4163 15.4882 20.7251 14.9994C21.2758 14.1191 21.9105 13.926 22.8624 14.3348C23.2938 14.516 23.7286 14.7474 24.1486 14.9462C24.9684 15.324 25.7026 15.2084 26.3461 14.585C26.6077 14.3351 26.842 14.0578 27.045 13.7578C27.8829 12.5231 28.9904 11.4969 30.2827 10.7576C31.7264 9.85971 32.9011 8.58535 33.6818 7.07013C34.0043 6.47507 34.6284 6.37336 35.1547 6.87449C36.1787 7.85765 37.2353 8.82594 38.1708 9.8952C39.6137 11.5828 41.5324 12.7905 43.6733 13.3587C45.1679 13.7661 46.5788 14.4553 48.045 14.97C49.8289 15.5957 51.624 16.1995 53.4326 16.7561C54.4429 17.0682 54.7071 17.4125 54.4318 18.4614C53.8032 20.8525 53.1633 23.2416 52.512 25.6287C52.2313 26.6591 51.5044 27.3829 50.6757 27.9621C49.3363 28.9134 48.2845 30.2182 47.6364 31.7323ZM19.0829 43.0845C18.8621 43.7906 18.688 44.4745 18.4321 45.1261C18.2675 45.546 18.3981 45.7414 18.7452 45.9473C21.1132 47.3103 23.6962 47.8813 26.3813 48.163C27.5256 48.2847 28.6999 48.356 29.785 48.6883C30.5876 48.9346 31.287 49.5481 32.0035 50.0404C32.41 50.3202 32.7838 50.4547 33.176 50.0845C33.6071 49.6961 34.0124 49.2799 34.3896 48.8386C34.6545 48.4664 34.8964 48.0784 35.1142 47.6767C35.6541 46.8224 36.438 46.3537 37.4121 46.1269C38.6063 45.8473 39.8607 46.0113 40.9435 46.5887C43.5843 47.9246 46.236 47.8653 48.8 46.4721C49.8779 45.8886 50.796 44.9852 51.8339 44.1811C49.2935 41.8756 48.4762 39.073 48.724 35.8709C48.7321 35.4135 48.6838 34.9569 48.5801 34.5115C48.4556 33.8144 47.9893 33.425 47.3285 33.2617C47.0897 33.2022 46.8401 33.1982 46.5981 33.1537C45.8078 32.9971 45.5014 32.4304 45.8734 31.7287C46.8901 29.7991 47.9735 27.9259 49.8707 26.6837C50.2318 26.4528 50.5403 26.1477 50.7759 25.7885C51.0114 25.4292 51.1688 25.0241 51.2375 24.5995C51.4742 23.351 51.8317 22.1215 52.1618 20.8919C52.3982 20.012 52.6732 19.1464 52.9439 18.2473C52.0883 17.992 51.2364 17.7912 50.4176 17.4913C48.2143 16.6752 46.0306 15.8094 43.8326 14.9782C42.7874 14.5843 41.7022 14.2815 40.6869 13.8328C38.9215 13.0457 37.6898 11.5944 36.4238 10.1918C35.887 9.59656 35.273 9.06983 34.7665 8.58209C33.7652 9.61965 32.9772 10.7416 31.9168 11.4609C30.2571 12.5878 28.7721 13.8207 27.6019 15.4618C27.008 16.2924 26.1005 16.6368 25.0653 16.6718C24.1996 16.7016 23.4937 16.3034 22.7614 15.9491C22.0637 15.6113 22.0795 15.6271 21.7115 16.3264C21.3435 17.0257 20.9463 17.727 20.5177 18.3967C20.3427 18.6865 20.0779 18.9105 19.764 19.0344C19.45 19.1582 19.1044 19.1751 18.7801 19.0823C17.7876 18.8694 16.7939 18.6383 15.799 18.389C14.442 18.0468 13.0074 18.2086 11.7591 18.8447C10.8519 19.286 10.659 19.8764 11.3125 20.6174C11.7995 21.1706 12.3573 21.6566 12.9713 22.0626C13.7107 22.5281 14.4823 22.9399 15.2802 23.2949C16.2898 23.744 17.1328 24.5015 17.6895 25.4597C18.0248 26.0498 18.3157 26.6661 18.629 27.2724C23.4786 24.8338 27.9071 26.9763 29.9508 29.657C31.1027 31.1657 31.7438 33.0057 31.7801 34.9075C31.8164 36.8093 31.2461 38.6732 30.1526 40.2264C28.1536 43.0702 23.9809 45.1654 19.0829 43.0845ZM23.4376 42.3861C27.4778 42.1222 30.5404 38.6684 30.2798 34.6712C30.16 32.7164 29.2747 30.8892 27.8175 29.5894C26.3603 28.2897 24.4499 27.6232 22.5043 27.7359C21.536 27.7825 20.5865 28.0224 19.7111 28.4416C18.8358 28.8608 18.0522 29.4508 17.4059 30.1773C16.7596 30.9039 16.2636 31.7523 15.9469 32.6733C15.6301 33.5943 15.4988 34.5693 15.5608 35.5416C15.6227 36.5139 15.8766 37.4639 16.3076 38.3364C16.7387 39.2089 17.3382 39.9863 18.0714 40.6234C18.8045 41.2604 19.6566 41.7444 20.5779 42.047C21.4992 42.3497 22.4713 42.465 23.4376 42.3861ZM5.73574 46.2692L15.5443 39.9311L14.9626 38.9176L5.11278 45.1722L5.73574 46.2692Z"/></mask><path d="M47.6364 31.7323C47.8391 31.8153 48.0153 31.8812 48.1901 31.9556C49.3599 32.4569 50.0394 33.3352 50.1277 34.6162C50.1983 35.6647 50.2292 36.7158 50.2371 37.7685C50.2523 39.8635 51.2789 41.4763 52.6657 42.8981C53.5865 43.842 53.6661 44.3716 52.7286 45.2974C51.1332 46.8812 49.3827 48.2165 47.1329 48.7665C44.8819 49.3216 42.5083 49.0548 40.4357 48.0138C39.4892 47.5604 38.5265 47.3019 37.5309 47.7071C37.071 47.9103 36.6618 48.214 36.3331 48.596C36.0111 48.9977 35.7367 49.4357 35.5154 49.9011C35.0548 50.75 34.2981 51.2484 33.4773 51.6648C33.2122 51.7978 32.9196 51.8661 32.6233 51.8641C32.3271 51.862 32.0355 51.7897 31.7724 51.653C31.4776 51.521 31.2044 51.3451 30.9618 51.1313C29.8211 50.0656 28.445 49.7385 26.9352 49.6965C24.2186 49.5962 21.5474 48.9671 19.0698 47.8441C18.4504 47.5532 17.8641 47.1957 17.3213 46.7778C16.6911 46.3217 16.5988 45.9152 16.8344 45.1807C17.1056 44.3195 17.3992 43.4821 17.6453 42.6226C17.6638 42.5251 17.6598 42.4247 17.6338 42.329C17.6077 42.2333 17.5603 42.1449 17.495 42.0705C16.4777 41.1564 16.4698 41.1632 15.3346 41.8919C12.2675 43.8671 9.1983 45.8419 6.12697 47.816C5.39573 48.2874 5.04746 48.1891 4.61497 47.4308C4.33147 46.9348 4.052 46.4365 3.77656 45.9357C3.18563 44.8787 3.26602 44.5782 4.27115 43.9407C7.48797 41.9067 10.6834 39.8658 13.9015 37.8507C14.3035 37.5956 14.4007 37.3572 14.3108 36.8936C13.6776 33.714 14.5417 30.9795 16.8278 28.6954C16.9816 28.5764 17.0894 28.4073 17.1328 28.2171C17.1763 28.027 17.1526 27.8277 17.0658 27.6532C16.5668 26.2486 15.7792 25.1355 14.3525 24.5233C13.5227 24.1467 12.7175 23.7178 11.9416 23.2391C10.7864 22.5922 9.89092 21.5619 9.40841 20.3243C9.31335 20.0822 9.28169 19.8197 9.31644 19.5617C9.3512 19.3037 9.45121 19.059 9.60692 18.8509C10.6377 17.2552 12.2625 16.7311 13.9773 16.7337C15.3337 16.7378 16.6957 17.1374 18.0435 17.418C19.2594 17.6697 19.3451 17.666 19.9235 16.5752C20.1987 16.055 20.4163 15.4882 20.7251 14.9994C21.2758 14.1191 21.9105 13.926 22.8624 14.3348C23.2938 14.516 23.7286 14.7474 24.1486 14.9462C24.9684 15.324 25.7026 15.2084 26.3461 14.585C26.6077 14.3351 26.842 14.0578 27.045 13.7578C27.8829 12.5231 28.9904 11.4969 30.2827 10.7576C31.7264 9.85971 32.9011 8.58535 33.6818 7.07013C34.0043 6.47507 34.6284 6.37336 35.1547 6.87449C36.1787 7.85765 37.2353 8.82594 38.1708 9.8952C39.6137 11.5828 41.5324 12.7905 43.6733 13.3587C45.1679 13.7661 46.5788 14.4553 48.045 14.97C49.8289 15.5957 51.624 16.1995 53.4326 16.7561C54.4429 17.0682 54.7071 17.4125 54.4318 18.4614C53.8032 20.8525 53.1633 23.2416 52.512 25.6287C52.2313 26.6591 51.5044 27.3829 50.6757 27.9621C49.3363 28.9134 48.2845 30.2182 47.6364 31.7323ZM19.0829 43.0845C18.8621 43.7906 18.688 44.4745 18.4321 45.1261C18.2675 45.546 18.3981 45.7414 18.7452 45.9473C21.1132 47.3103 23.6962 47.8813 26.3813 48.163C27.5256 48.2847 28.6999 48.356 29.785 48.6883C30.5876 48.9346 31.287 49.5481 32.0035 50.0404C32.41 50.3202 32.7838 50.4547 33.176 50.0845C33.6071 49.6961 34.0124 49.2799 34.3896 48.8386C34.6545 48.4664 34.8964 48.0784 35.1142 47.6767C35.6541 46.8224 36.438 46.3537 37.4121 46.1269C38.6063 45.8473 39.8607 46.0113 40.9435 46.5887C43.5843 47.9246 46.236 47.8653 48.8 46.4721C49.8779 45.8886 50.796 44.9852 51.8339 44.1811C49.2935 41.8756 48.4762 39.073 48.724 35.8709C48.7321 35.4135 48.6838 34.9569 48.5801 34.5115C48.4556 33.8144 47.9893 33.425 47.3285 33.2617C47.0897 33.2022 46.8401 33.1982 46.5981 33.1537C45.8078 32.9971 45.5014 32.4304 45.8734 31.7287C46.8901 29.7991 47.9735 27.9259 49.8707 26.6837C50.2318 26.4528 50.5403 26.1477 50.7759 25.7885C51.0114 25.4292 51.1688 25.0241 51.2375 24.5995C51.4742 23.351 51.8317 22.1215 52.1618 20.8919C52.3982 20.012 52.6732 19.1464 52.9439 18.2473C52.0883 17.992 51.2364 17.7912 50.4176 17.4913C48.2143 16.6752 46.0306 15.8094 43.8326 14.9782C42.7874 14.5843 41.7022 14.2815 40.6869 13.8328C38.9215 13.0457 37.6898 11.5944 36.4238 10.1918C35.887 9.59656 35.273 9.06983 34.7665 8.58209C33.7652 9.61965 32.9772 10.7416 31.9168 11.4609C30.2571 12.5878 28.7721 13.8207 27.6019 15.4618C27.008 16.2924 26.1005 16.6368 25.0653 16.6718C24.1996 16.7016 23.4937 16.3034 22.7614 15.9491C22.0637 15.6113 22.0795 15.6271 21.7115 16.3264C21.3435 17.0257 20.9463 17.727 20.5177 18.3967C20.3427 18.6865 20.0779 18.9105 19.764 19.0344C19.45 19.1582 19.1044 19.1751 18.7801 19.0823C17.7876 18.8694 16.7939 18.6383 15.799 18.389C14.442 18.0468 13.0074 18.2086 11.7591 18.8447C10.8519 19.286 10.659 19.8764 11.3125 20.6174C11.7995 21.1706 12.3573 21.6566 12.9713 22.0626C13.7107 22.5281 14.4823 22.9399 15.2802 23.2949C16.2898 23.744 17.1328 24.5015 17.6895 25.4597C18.0248 26.0498 18.3157 26.6661 18.629 27.2724C23.4786 24.8338 27.9071 26.9763 29.9508 29.657C31.1027 31.1657 31.7438 33.0057 31.7801 34.9075C31.8164 36.8093 31.2461 38.6732 30.1526 40.2264C28.1536 43.0702 23.9809 45.1654 19.0829 43.0845ZM23.4376 42.3861C27.4778 42.1222 30.5404 38.6684 30.2798 34.6712C30.16 32.7164 29.2747 30.8892 27.8175 29.5894C26.3603 28.2897 24.4499 27.6232 22.5043 27.7359C21.536 27.7825 20.5865 28.0224 19.7111 28.4416C18.8358 28.8608 18.0522 29.4508 17.4059 30.1773C16.7596 30.9039 16.2636 31.7523 15.9469 32.6733C15.6301 33.5943 15.4988 34.5693 15.5608 35.5416C15.6227 36.5139 15.8766 37.4639 16.3076 38.3364C16.7387 39.2089 17.3382 39.9863 18.0714 40.6234C18.8045 41.2604 19.6566 41.7444 20.5779 42.047C21.4992 42.3497 22.4713 42.465 23.4376 42.3861ZM5.73574 46.2692L15.5443 39.9311L14.9626 38.9176L5.11278 45.1722L5.73574 46.2692Z" fill="#3558A2" stroke="#3558A2" stroke-width="1.47127" mask="url(#path-1-inside-1_677_1834)"/><path d="M55.8056 54.9357L55.8053 54.9356C53.9679 53.7622 53.1178 52.0475 53.3058 49.8972C53.3294 49.6381 53.4447 49.3591 53.6234 49.051C53.749 48.8346 53.8901 48.6287 54.0361 48.4157C54.1014 48.3203 54.1677 48.2235 54.2341 48.1238L54.2342 48.1235C54.8237 47.2354 55.4726 46.374 56.1353 45.5437C56.3434 45.2859 56.6122 45.0845 56.9172 44.9578L56.9172 44.9579L56.923 44.9553C56.9599 44.9393 57 44.9321 57.04 44.9343C57.0801 44.9366 57.1192 44.9482 57.1542 44.9684L57.3381 44.6496L57.1542 44.9684C57.1892 44.9885 57.2192 45.0168 57.2417 45.0509C57.2643 45.0851 57.2786 45.1242 57.2835 45.1651L57.2856 45.1826L57.2894 45.1999C57.6104 46.6687 57.9003 48.1378 58.1967 49.6402C58.2648 49.9854 58.3332 50.3324 58.4025 50.6815C58.3661 51.0327 58.3381 51.3785 58.3105 51.7205C58.2462 52.5158 58.1835 53.291 58.0196 54.0677C58.0039 54.1413 57.9855 54.2112 57.9646 54.2774L57.2274 53.9288C57.2588 53.8551 57.2859 53.7789 57.3096 53.7024C57.3862 53.4552 57.4388 53.1657 57.4739 52.8556C57.5443 52.235 57.5488 51.4924 57.5128 50.7585C57.4768 50.0228 57.3995 49.2844 57.3024 48.6685C57.2079 48.0695 57.0879 47.5396 56.9499 47.2536L56.7354 46.8089L56.3706 47.1425C56.2548 47.2485 56.1361 47.3593 56.0145 47.4728C55.7638 47.7069 55.5007 47.9526 55.2238 48.1917C54.6795 48.6593 54.3018 49.1965 54.1288 49.809C53.9559 50.4209 53.997 51.0746 54.2336 51.7594C54.4146 52.3383 54.7129 52.8734 55.1098 53.331C55.3952 53.66 55.7272 53.9438 56.0944 54.1737L55.7471 54.522L56.7235 54.4551L56.7277 54.4549L57.9319 54.3724C57.7731 54.799 57.5043 55.0583 57.2051 55.1753C56.8363 55.3195 56.3419 55.2789 55.8056 54.9357Z" fill="#3558A2" stroke="#3558A2" stroke-width="0.735634"/><path d="M32.0098 27.4033C31.8698 27.2844 31.5731 27.1425 31.4612 26.9121C31.1579 26.3001 30.8869 25.6725 30.6493 25.0318C30.3973 24.4023 29.9882 24.0238 29.3023 23.9844C29.1123 23.9917 28.9234 23.9526 28.7517 23.8704C28.5172 23.7179 28.2081 23.5158 28.1586 23.2791C28.1439 23.1349 28.1632 22.9893 28.2149 22.854C28.2666 22.7187 28.3493 22.5976 28.4562 22.5003C29.5039 21.7777 29.8084 20.7899 29.7264 19.5716C29.7065 19.276 29.9189 18.7875 30.1499 18.7C30.4334 18.5837 30.8707 18.7286 31.1946 18.8687C31.3888 18.9523 31.5044 19.2372 31.6316 19.4454C32.1339 20.2747 32.7479 20.9278 33.7881 21.0293C34.2101 21.07 34.6257 21.2037 34.763 21.6872C34.9004 22.1708 34.6307 22.4926 34.3129 22.7861C33.2433 23.7735 32.6731 24.9564 32.828 26.4478C32.8683 26.9232 32.6691 27.2634 32.0098 27.4033ZM30.4794 22.663L30.6854 22.453L31.8104 23.5978L32.5667 22.3769L31.0835 21.3304C30.8875 21.782 30.6846 22.2235 30.4795 22.6651L30.4794 22.663Z" fill="white"/><path d="M35.3139 40.5875C35.3348 40.8978 35.3563 41.2165 35.3777 41.5352C35.4082 41.9882 35.3326 42.3915 34.814 42.5028C34.3801 42.5957 34.023 42.3042 33.8949 41.7716C33.8565 41.6057 33.8531 41.4311 33.8311 41.2599C33.8091 41.0886 33.7922 40.9613 33.7682 40.7923C33.2267 40.6882 32.6052 40.6718 32.5854 39.9106C32.5739 39.4901 32.8465 39.305 33.5825 39.1535C33.56 38.818 33.5204 38.4794 33.5144 38.1407C33.5097 37.5722 33.777 37.2148 34.2023 37.1815C34.6277 37.1481 34.9354 37.4536 35.0143 38.0338C35.0584 38.3467 35.0566 38.6628 35.0807 39.0214C35.6566 38.982 36.1913 38.8927 36.3436 39.5669C36.4511 40.0125 36.158 40.2979 35.3139 40.5875Z" fill="white"/><path d="M21.4362 21.894C21.9395 21.8975 22.3991 21.9376 22.4815 22.5071C22.5739 23.1327 22.0685 23.2853 21.6171 23.4615C21.6054 23.6919 21.6696 23.9614 21.5678 24.1305C21.4188 24.3767 21.1636 24.6954 20.9321 24.7133C20.7847 24.6985 20.6431 24.6475 20.5199 24.5649C20.3966 24.4822 20.2955 24.3704 20.2253 24.2393C20.0438 23.8157 19.9873 23.413 19.4798 23.1592C19.0311 22.9392 19.1104 22.3418 19.5218 22.0082C19.6613 21.8997 19.8457 21.7754 19.8794 21.6214C19.9716 21.217 20.1775 20.9438 20.5923 20.9406C21.0443 20.9286 21.2544 21.2471 21.3591 21.6507C21.3761 21.7169 21.4017 21.7868 21.4362 21.894Z" fill="white"/><path d="M25.7339 38.1494L25.5118 38.0538L23.9878 37.3977L23.6345 37.2455L23.8028 36.8992C24.223 36.035 24.0136 35.2562 23.5068 34.3769L25.7339 38.1494ZM25.7339 38.1494L25.9099 37.9831M25.7339 38.1494L25.9099 37.9831M25.9099 37.9831C28.053 35.958 27.6901 32.4635 25.1777 31.0098L25.9099 37.9831ZM24.2421 30.9358L24.2421 30.9358C24.3489 30.8623 24.4644 30.8442 24.5434 30.8403C24.6273 30.8362 24.7094 30.8464 24.7803 30.8608C24.9203 30.8893 25.0655 30.9447 25.1776 31.0097L24.2421 30.9358ZM24.2421 30.9358L24.2401 30.9372M24.2421 30.9358L24.2401 30.9372M24.2401 30.9372C23.7609 31.2718 23.4531 31.907 23.3201 32.5212M24.2401 30.9372L23.3201 32.5212M23.3201 32.5212C23.1867 33.1377 23.2036 33.8514 23.5067 34.3768L23.3201 32.5212ZM23.0591 40.1014L23.0591 40.1013L23.0499 40.1021C22.3684 40.1591 21.6825 40.0799 21.0317 39.8689C20.381 39.6578 19.7782 39.3192 19.2584 38.8724C18.7385 38.4257 18.3119 37.8796 18.0032 37.2658C17.6946 36.6521 17.5101 35.9827 17.4603 35.2966L17.4603 35.2965C17.2504 32.4087 19.5441 29.8094 22.5065 29.6066C25.4646 29.4041 27.8677 31.4988 28.0702 34.4116C28.1146 35.1162 28.0201 35.8228 27.792 36.4907C27.5638 37.1589 27.2066 37.7751 26.7408 38.3039C26.275 38.8327 25.7099 39.2637 25.0781 39.5721C24.4462 39.8806 23.7601 40.0605 23.0591 40.1014ZM23.9612 38.251C23.9505 38.2473 23.9397 38.2436 23.9291 38.2399C23.7969 38.1945 23.6718 38.1514 23.5454 38.1032C23.2053 37.9729 23.0039 37.7713 22.9151 37.5596C22.8289 37.3541 22.8275 37.0893 22.9832 36.7792C23.1516 36.4926 23.2326 36.1628 23.2164 35.8306C23.2 35.4964 23.0859 35.1745 22.8883 34.9051C22.5891 34.4641 22.4159 33.9488 22.3879 33.4153C22.3597 32.8796 22.479 32.3466 22.7324 31.8747L22.7326 31.8747L22.7378 31.8643C22.8467 31.6451 22.9491 31.418 23.0581 31.1762C23.1023 31.0783 23.1475 30.9779 23.1948 30.8747L23.436 30.3474L22.8564 30.3542C21.7919 30.3667 20.7629 30.7392 19.935 31.4108C19.7356 31.5393 19.5844 31.7309 19.5054 31.9551C19.4256 32.1818 19.4243 32.4286 19.5012 32.6557C19.6015 33.0536 19.7317 33.4432 19.8905 33.8213L19.8952 33.8325L19.9006 33.8433C20.5091 35.0609 20.4616 36.3277 20.0864 37.6368C20.0145 37.8854 19.9917 38.1472 20.1124 38.3899C20.23 38.6262 20.4455 38.7653 20.6559 38.8634L20.6565 38.8637C21.7133 39.3545 22.8172 39.5094 23.9887 39.04L24.387 39.1796L24.3495 38.6228L24.3493 38.6186L24.314 38.0951L23.9612 38.251ZM19.11 34.067L18.7841 34.1721L18.7448 33.9013L18.5019 33.9369L18.1413 33.9898L18.1904 34.3509L18.514 36.7302L18.5633 37.0933L18.9267 37.0448L19.1531 37.0145L19.3869 36.9833L19.4563 36.7577C19.594 36.3104 19.6343 35.8386 19.5745 35.3744C19.5148 34.9102 19.3564 34.4643 19.11 34.067Z" fill="#3558A2" stroke="#3558A2" stroke-width="0.735634"/><path d="M25.6571 37.7115L24.1331 37.0554C24.6319 36.027 24.3565 35.1105 23.8249 34.1884C23.3498 33.3573 23.7072 31.7529 24.4499 31.2344C24.56 31.1574 24.8398 31.2351 24.9925 31.3237C27.2847 32.6497 27.6341 35.8488 25.6571 37.7115Z" fill="#F2F7FF"/><path d="M18.7969 34.2611C19.0149 34.6133 19.1551 35.0084 19.2081 35.4198C19.2611 35.8312 19.2256 36.2492 19.104 36.6457L18.8776 36.676L18.554 34.2967L18.7969 34.2611Z" fill="#F2F7FF"/></svg>

package/src/components/ReuseCard.vue

@@ -0,0 +1,106 @@
+<template>
+  <article class="fr-enlarge-link group/reuse-card bg-white border border-gray-default flex flex-col relative">
+    <div class="flex flex-col h-full flex-1 order-2 px-8">
+      <div class="order-1 flex flex-col px-4 py-1 h-full -mx-8">
+        <h3 class="font-bold text-base mt-1 mb-0 truncate">
+          <AppLink
+            class="text-gray-title"
+            :to="reuseUrl"
+          >
+            {{ reuse.title }}
+          </AppLink>
+        </h3>
+        <div class="order-3 text-sm m-0 text-gray-medium">
+          <p class="text-sm mb-0 flex items-center">
+            <span
+              v-if="reuse.organization"
+              class="relative block truncate break-all z-[2] flex-initial"
+            >
+              <AppLink
+                v-if="organizationUrl"
+                class="fr-link block"
+                :to="organizationUrl"
+              >
+                <OrganizationNameWithCertificate
+                  :organization="reuse.organization"
+                />
+              </AppLink>
+              <OrganizationNameWithCertificate
+                v-else
+                :organization="reuse.organization"
+              />
+            </span>
+            <span
+              v-else-if="ownerName"
+              class="mr-1 truncate"
+            >{{ ownerName }}</span>
+            <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+            <span class="block flex-none">{{ t('published {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+          </p>
+          <ReuseDetails :reuse />
+        </div>
+      </div>
+    </div>
+    <div class="order-1 relative flex-auto">
+      <div class="group-hover/reuse-card:brightness-90">
+        <Placeholder
+          class="object-cover block object-center w-full h-auto aspect-[1.4]"
+          alt=""
+          type="reuse"
+          :src="reuse.image"
+          :size="320"
+        />
+      </div>
+      <ul
+        v-if="reuse.private || reuse.archived"
+        class="list-none m-0 p-0 mt-4 px-4 -mb-2"
+      >
+        <li v-if="reuse.private">
+          <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium">
+            <RiLockLine class="size-3.5 mr-0.5" />
+            {{ t('Draft') }}
+          </p>
+        </li>
+        <li v-if="reuse.archived">
+          <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium">
+            <RiLockLine class="size-3.5 mr-0.5" />
+            {{ t('Archived') }}
+          </p>
+        </li>
+      </ul>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { RouteLocationRaw } from 'vue-router'
+import { formatRelativeIfRecentDate } from '../functions/dates'
+import { getOwnerName } from '../functions/owned'
+import type { Reuse } from '../types/reuses'
+import AppLink from './AppLink.vue'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import ReuseDetails from './ReuseDetails.vue'
+
+const props = defineProps<{
+  reuse: Reuse
+
+  /**
+  * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.
+  * It is used as a separate prop to allow other sites using the package to define their own reuse pages.
+  */
+  reuseUrl: RouteLocationRaw
+
+  /**
+  * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha reuse.
+  * It is used as a separate prop to allow other sites using the package to define their own organization pages.
+  */
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const { t } = useI18n()
+
+const ownerName = computed(() => getOwnerName(props.reuse))
+</script>

package/src/components/ReuseDetails.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-wrap items-center gap-0.5">
+    <p class="text-sm mb-0">
+      {{ reuseType }}
+    </p>
+    <RiSubtractLine
+      aria-hidden="true"
+      class="size-4 fill-gray-medium"
+    />
+    <p
+      class="text-sm mb-0 flex items-center gap-0.5"
+      :aria-label="t('{n} views', reuse.metrics.views)"
+    >
+      <RiEyeLine
+        aria-hidden="true"
+        class="size-3.5"
+      />{{ summarize(reuse.metrics.views) }}
+    </p>
+    <p
+      class="text-sm mb-0 flex items-center gap-0.5"
+      :aria-label="t('{n} followers', reuse.metrics.followers)"
+    >
+      <RiStarLine
+        aria-hidden="true"
+        class="size-3.5"
+      />{{ summarize(reuse.metrics.followers) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
+import { useI18n } from 'vue-i18n'
+import { useReuseType } from '../composables/useReuseType'
+import { summarize } from '../functions/helpers'
+import type { Reuse } from '../types/reuses'
+
+const props = defineProps<{
+  reuse: Reuse
+}>()
+
+const { t } = useI18n()
+
+const { label: reuseType } = useReuseType(() => props.reuse.type)
+</script>

package/src/components/SimpleBanner.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="w-full rounded p-3"
+    :class="classes"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  type: 'primary' | 'warning' | 'gray'
+}>()
+
+const classes = computed(() => {
+  return {
+    primary: 'bg-datagouv-lightest text-datagouv-dark',
+    warning: 'bg-warning3-lightest text-warning3-dark',
+    gray: 'bg-gray-some text-gray-plain',
+  }[props.type]
+})
+</script>

package/src/components/SmallChart.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <canvas
+      ref="canvasRef"
+      width="120"
+      height="30"
+    />
+    <div class="fr-grid-row justify-between">
+      <p class="text-xxs fr-m-0 text-mention-grey">
+        {{ startDate }}
+      </p>
+      <p class="text-xxs fr-m-0 text-mention-grey">
+        {{ endDate }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Chart, type ChartOptions } from 'chart.js/auto'
+import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+
+const LIGHT_COLOR = '#B6CFFB'
+const COLOR = '#3558A2'
+const COLOR_WITH_OPACITY = 'rgba(53, 88, 162, 0.7)'
+const LIGHT_COLOR_WITH_OPACITY = 'rgba(182, 207, 251, 0.7)'
+
+const props = withDefaults(defineProps<{
+  data: Record<string, number>
+  type: 'line' | 'bar'
+  lastWithLowEmphasis?: boolean
+}>(), {
+  lastWithLowEmphasis: false,
+})
+
+const last = (ctx, value) => {
+  return ctx.p1DataIndex === months.value.length - 1 ? value : null
+}
+
+const canvas = useTemplateRef('canvasRef')
+const context = ref<CanvasRenderingContext2D | null>(null)
+const chart = ref<Chart | null>(null)
+
+const data = computed(() => {
+  const months = Object.keys(props.data)
+  months.sort()
+  const orderedData: Record<string, number> = {}
+  for (const month of months) {
+    orderedData[month] = props.data[month]
+  }
+  return orderedData
+})
+const months = computed(() => Object.keys(data.value))
+const values = computed(() => Object.values(data.value))
+
+const additionalDatasetConfig = computed(() => {
+  if (props.type === 'bar') {
+    return {
+      barPercentage: 1,
+      categoryPercentage: 0.9,
+      // Change the color of the last bar only
+      backgroundColor: months.value.map((_value, index) => index === months.value.length - 1 ? (props.lastWithLowEmphasis ? LIGHT_COLOR_WITH_OPACITY : COLOR) : LIGHT_COLOR),
+    }
+  }
+
+  if (props.type === 'line' && props.lastWithLowEmphasis) {
+    return {
+      segment: {
+        borderColor: ctx => last(ctx, COLOR_WITH_OPACITY) || COLOR,
+        borderDash: ctx => last(ctx, [3, 3]) || [6, 0],
+      },
+    }
+  }
+
+  return {}
+})
+
+const getMonthYear = (dateAsString: string): string => {
+  const date = new Date(dateAsString)
+
+  return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().slice(-2)}`
+}
+
+const startDate = computed(() => months.value.length ? getMonthYear(months.value[0]) : null)
+const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]) : null)
+
+const OPTIONS = {
+  animation: false,
+  responsive: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: false,
+    },
+  },
+  elements: {
+    bar: {
+      backgroundColor: LIGHT_COLOR,
+      borderRadius: 2,
+      hoverBackgroundColor: COLOR,
+    },
+    line: {
+      backgroundColor: COLOR,
+      borderColor: COLOR,
+      borderJoinStyle: 'round',
+      tension: 0.35,
+    },
+    point: {
+      radius: 0,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: { display: false },
+      ticks: { display: false },
+    },
+    y: {
+      display: false,
+      grid: { display: false },
+      ticks: { display: false },
+    },
+  },
+  layout: {
+    padding: {
+      top: 1.5, // half border width
+    },
+  },
+} satisfies ChartOptions
+
+onMounted(() => {
+  context.value = canvas.value ? canvas.value.getContext('2d') : null
+})
+
+watchEffect(() => {
+  if (!context.value) return
+  if (chart.value) chart.value.destroy()
+
+  chart.value = new Chart(context.value, {
+    data: {
+      labels: months.value,
+      datasets: [{ data: values.value, type: props.type, ...additionalDatasetConfig.value }],
+    },
+    options: OPTIONS,
+  })
+})
+</script>

package/src/components/StatBox.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    :class="{
+      'text-gray-medium': !changesThisYear && !summary,
+    }"
+  >
+    <h3 class="fr-text--sm fr-m-0">
+      {{ title }}
+    </h3>
+    <div class="fr-grid-row fr-grid-row--middle">
+      <ContentLoader
+        v-if="summary === null"
+        :width="92"
+        :height="32"
+        :speed="2"
+        primary-color="#f3f3f3"
+        secondary-color="#ecebeb"
+      >
+        <rect
+          x="0"
+          y="0"
+          rx="3"
+          ry="3"
+          width="92"
+          height="32"
+        />
+      </ContentLoader>
+      <p
+        v-else
+        class="h1 line-height-1 fr-m-0"
+      >
+        {{ summarize(summary, 2) }}
+      </p>
+      <ContentLoader
+        v-if="data === null"
+        :width="120"
+        :height="30"
+        :speed="2"
+        primary-color="#f3f3f3"
+        secondary-color="#ecebeb"
+        class="fr-ml-1w"
+      >
+        <rect
+          x="0"
+          y="0"
+          rx="3"
+          ry="3"
+          width="120"
+          height="30"
+        />
+      </ContentLoader>
+      <div
+        v-else-if="changesThisYear"
+        class="fr-ml-1w"
+      >
+        <SmallChart
+          :type
+          :data
+          :last-with-low-emphasis="true"
+        />
+      </div>
+    </div>
+    <p
+      v-if="lastValue && lastMonth"
+      class="fr-mt-1w fr-text--regular text-transform-none fr-badge fr-badge--no-icon fr-badge--success"
+    >
+      <strong class="fr-mr-1v">
+        + {{ summarize(lastValue, 2) }}
+      </strong>
+      {{ t(" in ") }}
+      {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ContentLoader } from 'vue-content-loader'
+import { formatDate } from '../functions/dates'
+import { summarize } from '../functions/helpers'
+import SmallChart from './SmallChart.vue'
+
+const props = defineProps<{
+  title: string
+  data: Record<string, number> | null
+  type: 'line' | 'bar'
+  summary: number | null
+}>()
+
+const { t } = useI18n()
+
+const months = computed(() => props.data ? Object.keys(props.data) : [])
+const values = computed(() => props.data ? Object.values(props.data) : [])
+const lastMonth = computed(() => months.value.length ? months.value.reduce((max, c) => c > max ? c : max) : null)
+const lastMonthIndex = computed(() => lastMonth.value ? months.value.indexOf(lastMonth.value) : null)
+const lastValue = computed(() => lastMonthIndex.value !== null ? values.value[lastMonthIndex.value] : null)
+
+const changesThisYear = computed(() => Math.max(...values.value) > 0)
+</script>

package/src/components/Tabs/Tab.vue

@@ -0,0 +1,62 @@
+<template>
+  <Tab
+    v-slot="{ selected }"
+    as="template"
+  >
+    <button
+      class="fr-segmented__element"
+      :class="{ selected: selected }"
+    >
+      <div class="inner">
+        <slot />
+      </div>
+    </button>
+  </Tab>
+</template>
+
+<script setup lang="ts">
+import { Tab } from '@headlessui/vue'
+</script>
+
+<style scoped>
+button {
+    display: inline-flex;
+    align-items: center;
+    border-radius: .25rem;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    padding: .25rem 0.25rem;
+    white-space: nowrap;
+}
+
+.tabs-sm button {
+    font-size: .875rem;
+    line-height: 1.5rem;
+}
+
+button.selected {
+    box-shadow: inset 0 0 0 1px var(--border-active-blue-france);
+    color: var(--text-active-blue-france);
+    z-index: 1;
+}
+
+button:hover {
+    background-color: transparent;
+}
+
+button .inner {
+    width: 100%;
+    padding: .25rem .75rem;
+    border-radius: .25rem;
+}
+
+.tabs-sm button .inner {
+    padding: 0rem .5rem;
+
+}
+
+button:not(.selected):hover .inner {
+    background-color: var(--hover);
+}
+</style>

package/src/components/Tabs/TabGroup.vue

@@ -0,0 +1,20 @@
+<template>
+  <TabGroup
+    as="div"
+    :class="{
+      'tabs-sm': size === 'sm',
+    }"
+  >
+    <slot />
+  </TabGroup>
+</template>
+
+<script setup lang="ts">
+import { TabGroup } from '@headlessui/vue'
+
+withDefaults(defineProps<{
+  size?: 'sm' | 'md'
+}>(), {
+  size: 'md',
+})
+</script>

package/src/components/Tabs/TabList.vue

@@ -0,0 +1,15 @@
+<template>
+  <TabList class="fr-segmented__elements">
+    <slot />
+  </TabList>
+</template>
+
+<script setup lang="ts">
+import { TabList } from '@headlessui/vue'
+</script>
+
+<style scoped>
+.fr-segmented__elements {
+    display: inline-flex;
+}
+</style>

package/src/components/Tabs/TabPanel.vue

@@ -0,0 +1,7 @@
+<template>
+  <TabPanel><slot /></TabPanel>
+</template>
+
+<script setup lang="ts">
+import { TabPanel } from '@headlessui/vue'
+</script>

package/src/components/Tabs/TabPanels.vue

@@ -0,0 +1,7 @@
+<template>
+  <TabPanels><slot /></TabPanels>
+</template>
+
+<script setup lang="ts">
+import { TabPanels } from '@headlessui/vue'
+</script>