Working slider component

[kuatroka]

Feature Description

Hi, I'm not sure it should go here but I don't know under which category to file it. I've been going through your tutorial and playing with Evidence. I would like to add a small contribution in case it might be interesting to somebody. It's a working version of a simple slider that changes values in the markdown when the slider is used. It's connected to a hypothetical result of a query, so it would be fully operational for a database of file connection, not just hardcoded values. It can illustrate how a simple binding mechanism works between Evidence, Svelte in HTML

Examples

Two files are needed:
Slider.svelte (put it in components folder)

<script>
	// export makes the variable a component property	
	export let value;
</script>

<input type='range' bind:value min=0 max=10 step=1 />

test-slider.md

<script>
    import Slider from '$lib/Slider.svelte';
    let score = 8;
</script>

## Using component **Slider** 
- It's a slider component that lives in `./components`  
- We import it here and bind its only attribute `value` to a variable `score` declared in `script` section
- Then we add some text that dynamically changes when we move the slider
- `value` comes from the imported `Slider.svelte`
- `score` is bound to this `value` variable

<Slider bind:value={score}/>

The score is: **{score}**

Screenshot

[archiewood]

Hey @kuatroka I think this is an ideal component to add into Evidence Labs (which is where we are hoping to put some of the more "experimental" features of evidence).

https://github.com/evidence-dev/labs

We'd welcome a PR there if you are open to it!

You'd need to

• put the slider component somewhere in src/lib (perhaps in a folder called input?)
• export the slider in src/lib/index.js
• put your example code somewhere in /pages

[archiewood]

Then anyone could use it if they add @evidence-dev/labs to their evidence.plugins.yaml

[kuatroka]

Happy to help, but I've never done any PR or a proper programming. Let me check what exactly do I need to to here.

1. I create a folder structure on my laptop - input/src/lib/components with Slider.svelte file in it?
2. I create a folder structure on my laptop - input/pages with index.md file that references Slider.sveltein it?
3. I don't understand what is the src/lib/index.js for or what to put there?
4. How do I pass the code to you, do I just zip all these folders into one and attach it here?

Sorry if all of these questions are too naive, but honestly I'm not really familiar with all of this PR or other github terminology. I'm used to just copy/paste someone else's code and tweak it for my needs. Thanks

[archiewood]

Ah gotcha. Let me give some more detail then!

1. start by cloning the repository onto your computer: open an terminal and type git clone https://github.com/evidence-dev/labs
2. open that folder, it will already have the folder structure ready for you to add your files
3. src/lib/index.js should list any components that are in the src/lib folder that need to be accessible by users of the @evidence-dev/labs package. You can copy the current entry for FranceMap and change it for the component that you need to add
4. Once you have the code running in the repository, you commit your code into your local repository
   • git add .,
   • git commit -m "adding my new slider component"
5. Then you push your repo to github git push origin master (it will prompt you to create a fork of the evidence-dev/labs repository)
6. And then open a pull request against the main evidence-dev/labs repo - this is where we can review the code, and then merge it in if it works!

This looks like quite a good generic guide: https://github.com/firstcontributions/first-contributions

[kuatroka]

1. I'm trying to push the changes (from my branch called kuatroka-branch) but getting an auth error. Not sure what to do now.

 ~/D/d/labs (kuatroka-branch) [128]> git push -u origin kuatroka-branch
remote: Permission to evidence-dev/labs.git denied to kuatroka.
fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403

2. The way I've got the path to the imported component doesn't look very good to, but the FranceMap example is the same. I've tried to use the $lib prefix but would get errors all the time.

<script>
    import Slider from '../../../../../src/lib/charts/input/Slider.svelte';
    let score = 8;
</script>

[archiewood]

You will need to push your changes to a fork of the evidence project: https://docs.github.com/en/get-started/quickstart/fork-a-repo You can then change which repo your local points at with `git add upstream …` And then `got push upstream` On June 16, 2023 at 17:13 GMT, kuatroka ***@***.******@***.***>> wrote: 1. I'm trying to push the changes (from my branch called kuatroka-branch) but getting an auth error. Not sure what to do now. ~/D/d/labs (kuatroka-branch) [128]> git push -u origin kuatroka-branch remote: Permission to evidence-dev/labs.git denied to kuatroka. fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403 1. The way I've got the path to the imported component doesn't look very good to my, but the FranceMap example is the same. I've tried to use $lib but would get errors all the time. <script> import Slider from '../../../../../src/lib/charts/input/Slider.svelte'; let score = 8; </script> — Reply to this email directly, view it on GitHub<#4 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AN3CLASFNBFVVATP5PXKG6LXLSH3FANCNFSM6AAAAAAZJOMEOQ>. You are receiving this because you commented.Message ID: ***@***.***> [https://bolt.im/t/?CsXtNizbg385YuNyzJSgKdK2VPdMAzBW_z4mT6IDjzZXv1OJ2-zAI0SWg86yhalr5aLLGE9X6KUc3TO6kruWPg]

[archiewood]

The lib reference issue is something we need to work on. We plan to make this better but the way you have it now is the best solution. End users won’t need to import it all if they use the labs plug-in in evidence! They will just be able to write <Slider/…> in their markdown On June 16, 2023 at 17:13 GMT, kuatroka ***@***.******@***.***>> wrote: 1. I'm trying to push the changes (from my branch called kuatroka-branch) but getting an auth error. Not sure what to do now. ~/D/d/labs (kuatroka-branch) [128]> git push -u origin kuatroka-branch remote: Permission to evidence-dev/labs.git denied to kuatroka. fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403 1. The way I've got the path to the imported component doesn't look very good to my, but the FranceMap example is the same. I've tried to use $lib but would get errors all the time. <script> import Slider from '../../../../../src/lib/charts/input/Slider.svelte'; let score = 8; </script> — Reply to this email directly, view it on GitHub<#4 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AN3CLASFNBFVVATP5PXKG6LXLSH3FANCNFSM6AAAAAAZJOMEOQ>. You are receiving this because you commented.Message ID: ***@***.***> [https://bolt.im/t/?HXq4Ck8_aEOKN24ADcmC5TgIin8EkL2dJCLxS8KrDu9udZ7jqGvBL5d0S7Q6Xy5V56cYpSvzx24l2iBKLG9LBQ]

[kuatroka]

I've tried all of that, but still it errors out on me. Still the same authorisation issue.

origin  https://github.com/kuatroka/labs-fork.git (fetch)
origin  https://github.com/kuatroka/labs-fork.git (push)
 ~/D/d/labs-fork (kuatroka-branch)> git remote add upstream https://githu
b.com/evidence-dev/labs.git
 ~/D/d/labs-fork (kuatroka-branch)> git push upstream
remote: Permission to evidence-dev/labs.git denied to kuatroka.
fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403

[kuatroka]

How about I copy/paste the code for the two files ( Slider.svelte and index.md) here and that's it?
I don't want to become an "auth" burden

[hughess]

Hey @kuatroka, if you paste in the code here I can add the components to labs!

[kuatroka]

Sure. Below are two files. The component and the markdown where the component is used.

src/lib/charts/input/Slider.svelte

<script>
	// export makes the variable a component property	
	export let value;
</script>

<input type='range' bind:value min=0 max=10 step=1 />

pages/slider/index.md

<script>
    import Slider from '../../../../../src/lib/charts/input/Slider.svelte';
    let score = 8;

</script>

## Using component **Slider** 
- It's a slider component that lives in `./components`  
- We import it here and bind its only attribute `value` to a variable `score` declared in `script` section
- Then we add some text that dynamically changes when we move the slider
- `value` comes from the imported `Slider.svelte`
- `score` is bound to this `value` variable

<Slider bind:value={score}/>

The score is: **{score}**

Here is the screenshot of the folder structure (just in case)

[hughess]

Closed by #14! 🎉