- 🇫🇷 French version here
E-learning platform by the ENSEIRB-MATMECA's students, for the students.
This website aims to host several formats of online teaching posts about computer science dev tools.
It has been started from a fork of the open-source fireship.io
website (history of the fork in
this repo).
The following kinds of courses are available:
- Standard courses (
/courses
section): a range of chapters to deal with a dense topic, following a given pedagogic arc. - Ad hoc tutorials (
/tips
section): one page to quickly deal with a punctual topic. - Challenges (
/challenges
section): one page with a problem, in order to learn with a more practice. (not developed yet)
To edit or add new content, all that users have to do is writing in Markdown
files in the ./content
folder. For each kind of content (courses
, tips
,
...), an archetype folder with many useful placeholders in its markdown files
can be generated thanks to the handy Hugo command below:
# in the repository's root
hugo new content ./content/<the-section-you-want>/<title-of-your-post>
For instance, an entire file tree in a new directory in the ./content
one can
be created with the command below:
# in the repository's root
hugo new content ./content/courses/<title-of-the-tutorial>
According to the path of each markdown page, the good layout is inferred and then everyone can make content of a given kind from a same structure.
To get all the layout features that the Markdown syntax can enable, writers might also want to read the placeholders of the course that the command above generates and also check those doc pages : Built-in front-matter fields, Built-in shortcodes
They might also need to read this
page to know more about
how to correctly organize markdown files in the ./content
directory.
First, install Hugo Extended
ver 0.129.0
or greater.
Then, in the cloned repository's root, run the following command:
npm install
By writing the following credentials in the app/.env.local
file, the application
features will be functional :
VITE_SUPABASE_URL=https://ewgpcyjmrccjopdjtqed.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImV3Z3BjeWptcmNjam9wZGp0cWVkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjAyNjk1NzIsImV4cCI6MjAzNTg0NTU3Mn0._KFUPaMoOUwv-NYtPer1_lmLm_RCKrDdk-csP60hu0U
The layout uses Svelte components defined in the app
directory, and these
components use .scss
sheets in the style
directory. Then, the files in both
theses folders must be built by the Vite framework with the command below
npm run vbuild
Then, the markdown content can be rendered in the deployable site in the
public
directory by running this command
hugo
Both the commands above are bundled in the production building command below
npm run build
First, build once the Svelte components in the static
directory by running the
vite building command:
npm run vbuild
Then the website can be rendered with watching over the content by running the Hugo dev server:
npm run hugo
If you want your draft pages to be rendered, then run
npm run hugo-dev
Check it on http://localhost:6969/
.
Both the layout and the Hugo website can be concurrently built with watching engines for development over as well the Markdown content as the layout/application layer. To do that
npm run start
To do that with the draft pages rendered by Hugo, run
npm run dev
Check it on on http://localhost:6969/
.
Create a Svelte file in the app/components
directory. It must have a custom
element tag.
<svelte:options customElement="hi-mom" />
<script>
export let greeting: string;
</script>
<h1>Hi Mom! {greeting}</h1>
Export the component from app/main.ts
:
export * from "./components/hi-mom.svelte";
Now use it in anywhere in your HTML or Markdown.
<hi-mom greeting="i made a web component"></hi-mom>
Note: A weird caveat with Svelte web components is that all styles must be
encapsulated. You can use Tailwind, BUT only with @apply
in the component.
Global styles will not work.
npm run svelte-dev
: Runs components in isolation. Servesapp/index.html
as a playground for components.npm run check
: Checks typescript and svelte syntax (scss checks have been removed in cause of the non-removable and pollutingunknownAtRules
warnings.npm run test
: Runs Vitest for running tests over all.test.ts
modules. Feel free to use it without moderation.