[docs] Migrate CSS_Coding_Style

[sarjona]

The URL of the page on https://docs.moodle.org/dev/

https://docs.moodle.org/dev/CSS_Coding_Style

Is this documentation specific to a Moodle version?

No

What location would you suggest in the new docs?

/docs/guides/styles or /general/development/policies/codingstyle/css

Related with #983

[Arjun-A3]

hey @sarjona,
I would like to work on the above-mentioned problem
can you provide a bit more information about the documentation?

[sarjona]

Hi @Arjun-A3!
In case you're interested in migrating some of the pages from the old wiki to the new devdocs, here you have the instructions:

1. Install the devdocs requirements (basically yarn): https://moodledev.io/general/documentation/contributing#installation
2. Clone locally the Github devdocs repository (https://github.com/moodle/devdocs).
3. Run yarn install and yarn start commands (to start locally your devdocs project).
4. Look at the issues in the github project (https://github.com/moodle/devdocs/issues or https://tracker.moodle.org/browse/MDL-79219) and pick one of them. You can also run the script ./scripts/wikimedia-sync.js fetch-todo to get the list of pages that still need to be migrated and then choose your favourite one.
5. Run yarn migrate <wikimedia_page> <newpath> to fetch the content and adapt it from the Wikimedia format to Markdown. For instance, yarn migrate Admin_tools general/projects/api/admin-tools.md
   • Remember "docs" is for versioned pages depending on the Moodle version, like the APIs and "general" for unversioned pages, like the Coding style, the process or Tracker.
6. Review the content, and improve it, to guarantee it's updated and has some of the nice Markdown features that Docusaurus includes (https://docusaurus.io/docs/markdown-features).
   • Remember to add a link to the proper sidebar (docs.js or general.js).
7. Once you're happy with the migrated page, commit changes, push them to your repository and create a pull request to the devdocs project.

Before starting any migration, this is the "cheating sheet" to commit and push your changes:

git checkout main
git pull
git checkout -b branchname
yarn migrate <wikimedia_page> <newpath>
git add -A
git commit -m '[docs] Migrate xxxx page'
git push origin branchname
Create a pull request to the devdocs project

There are also a few tools that can help you:

A. To find the list of pending pages that need to be migrated (or marked as WillNotMigrate) you can run the following command from the root of the devdocs folder:

node scripts/wikimedia-sync.js fetch-todo

B. To mark as WillNotMigrate obsolete pages or pages that make no sense to migrate to devdocs, you only need to edit the legacy page and add the following code at the beginning:

{{Template:WillNotMigrate}}

C. When you review the code, remember you can add some of the nice admonitions: https://docusaurus.io/docs/markdown-features/admonitions to make it more readable.

D. There are a couple of useful commands, to check the links and the spelling:

yarn mdlint-all
yarn spell

[Arjun-A3]

hey @sarjona,
I am working on migrating css_coding_style but unfortunately, I am Stuck at the migrating stage

can you help me out here
I tried changing or commenting out the 183rd line yet it did not work.

[sarjona]

Hi @Arjun-A3!
I would suggest ussing "`" , `styles_<theme name>.css`
If it doesn't work, you can also try to escape < using \ before it (so \< )

[bhect0]

Hi @sarjona!

I've migrated the CSS_Coding_Style page. The PR is waiting for a reviewer: #1647

What location would you suggest in the new docs?
/docs/guides/styles or /general/development/policies/codingstyle/css

After long discussion with myself and taking into account several related pages and /docs/ structure, I thought that /general/development/policies/codingstyle/css would be more convenient.

However, I think that include "Styles" in /docs/guides/ would be great, in order to centralise a bit styles related information.

The structure that I suggest would be:

• /docs/guides/styles: Brief explanation of Styles in general.
• /docs/guides/styles/css: CSS in Moodle. Explain for example the fact of Moodle reads all styles.css files and make one minified file. Besides link to pages like: /docs/apis/plugintypes/theme/styles
• /docs/guides/styles/scss: Migration of https://docs.moodle.org/dev/SCSS (as you raised [docs] Migrate SCSS #983)
• /docs/guides/styles/bootstrap: migrate https://docs.moodle.org/dev/Bootstrap and include some clear examples of using Bootstrap classes in plugins and best practices.

If makes sense, I'll be glad to open an issue \o/