Skip to content

WIP Tutorial annotation, URL Explorer, and SVG icons#134

Draft
livcheerful wants to merge 17 commits intoallmaps:developfrom
livcheerful:tutorial-annotations
Draft

WIP Tutorial annotation, URL Explorer, and SVG icons#134
livcheerful wants to merge 17 commits intoallmaps:developfrom
livcheerful:tutorial-annotations

Conversation

@livcheerful
Copy link
Contributor

@livcheerful livcheerful commented Sep 5, 2024

Three major changes in this!

  1. Basic 'Code Annotation' component (You can view this at [localhost]/tutorials/annotated-code)
  • Annotations highlight on scroll
  • Code lines can be authored to highlight when annotations are highlighted
image
  1. URL Explorer bones (you can view this at [localhost]/tutorials/allmaps-ids)
  • Parts of the URL get highlighted on hover
  • Loading in an IIIF Manifest will load URLs for the editor and viewer
  • The IIIF Manifest's JSON loads in
image
  1. SVG items
  • Individual SVG elements that can be used to build larger illustrations

@livcheerful livcheerful marked this pull request as draft September 5, 2024 17:43
baseUrl: 'https://github.com/allmaps/allmaps/tree/develop/apps/docs/'
},
expressiveCode: {
themes: ['material-theme']
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A variety of theme options can be found here: https://expressive-code.com/guides/themes/

or any VS Code theme works!

"copy-readmes": "node ./scripts/copy-readmes.js"
},
"dependencies": {
"@allmaps/iiif-parser": "workspace:^1.0.0-beta.37",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is being used to load URLs for the ID explorer

"astro": "^4.0.1",
"expressive-code": "^0.35.3",
"sharp": "^0.32.3",
"shiki": "^1.10.3",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Being used for codeToHtml to style JSON in the ID Explorer

"@astrojs/svelte": "^5.0.3",
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.0.1",
"expressive-code": "^0.35.3",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Used to style code for the Annotated Code Blocks

}

// Add the highlight-line class to all lines included for the given annotation
const highlightAnnotationLines = (annotationIdx: number) => {
Copy link
Contributor Author

@livcheerful livcheerful Sep 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Annotation> can't talk to <AnnotationCodeBlock>, so we're communicating through classes.

Annotation will add the lines it wants to highlight into its HTML classes, and AnnotationCodeBlock will read that when it loads in all the rendered HTML elements

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant