tutorials-code_aster/index.html at main · simvia-tech/tutorials-code_aster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!doctype html>
<meta charset="utf-8">
<title>code_aster tutorials</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css">

<style>
  :root {
    color-scheme: light dark; --side: 310px; --accent: #0969da;
    /* Plate tokens. --plate-tag is the blue of the diagram boxes in the decks. */
    --plate-ground: #fdfdfb; --plate-line: #c9d1d9; --plate-tag: #0b4ea2;
  }
  body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

  #bar { position: fixed; top: 0; left: var(--side); right: 0; height: 3px; z-index: 5; }
  #bar i { display: block; height: 100%; width: 0; background: var(--accent); }

  nav {
    position: fixed; inset: 0 auto 0 0; width: var(--side); overflow-y: auto;
    padding: 20px 14px 40px; box-sizing: border-box;
    border-right: 1px solid var(--borderColor-default, #d1d9e0);
    background: var(--bgColor-muted, #f6f8fa);
  }
  nav h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
           color: var(--fgColor-muted, #59636e); margin: 0 0 10px 10px; font-weight: 600; }
  nav hr { border: 0; border-top: 1px solid var(--borderColor-default, #d1d9e0); margin: 22px 6px 18px; }
  nav a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13.5px;
          line-height: 1.35; text-decoration: none; color: var(--fgColor-default, #1f2328); }
  nav a:hover { background: var(--bgColor-neutral-muted, #eaeef2); }
  .docs a { font-size: 14px; margin-bottom: 2px; }
  .docs a[aria-current] { background: var(--accent); color: #fff; font-weight: 600; }

  /* outline: parts are anchors, subsections are indented and quieter */
  #outline a { border-left: 2px solid transparent; border-radius: 0 6px 6px 0; }
  #outline a.h2 { font-weight: 600; margin-top: 8px; }
  #outline a.h3 { padding-left: 24px; color: var(--fgColor-muted, #59636e); font-size: 13px; }
  #outline a.h4 { padding-left: 38px; color: var(--fgColor-muted, #59636e); font-size: 12.5px; }
  #outline a.here { border-left-color: var(--accent); color: var(--accent);
                    background: var(--bgColor-accent-muted, #ddf4ff); }

  main { margin-left: var(--side); padding: 40px 48px 60vh; }
  .markdown-body { max-width: 1012px; margin: 0 auto; }
  .markdown-body h2 { scroll-margin-top: 24px; }
  .markdown-body h3, .markdown-body h4 { scroll-margin-top: 24px; }
  .markdown-body .table-wrap { overflow-x: auto; }
  .markdown-body table { display: table; }

  /* Table polish. GitHub strips class/style from README HTML, so these only
     apply here; on GitHub the same tables get GitHub's own table styling.
     The tint on merged cells echoes the shaded spanning rows of the deck. */
  .markdown-body thead th {
    background: var(--bgColor-accent-muted, #ddf4ff);
    border-color: var(--borderColor-default, #d1d9e0);
  }
  .markdown-body tbody th { background: var(--bgColor-muted, #f6f8fa); font-weight: 600; }
  .markdown-body td[colspan], .markdown-body th[colspan] { background: var(--bgColor-muted, #f6f8fa); }
  .markdown-body td[align="center"], .markdown-body th[align="center"] { text-align: center; }
  .markdown-body table sup, .markdown-body table sub { line-height: 0; }
  .markdown-body td { line-height: 1.7; }
  /* Figures render as drawing plates. The deck's figures are all ink on white,
     so a plate keeps its own light ground in both themes: on the dark theme a
     bare PNG glares, on the light one it dissolves into the page. Squared
     corners set the plates apart from GitHub's rounded chrome, and the source
     slide number sits in the top edge like the number on a drawing plate.
     Built here and not in the READMEs because GitHub strips class/style from
     README HTML; there the same markup stays a centered image and a caption. */
  .markdown-body .plate {
    position: relative;
    margin: 32px 0 36px;
    border: 1px solid var(--plate-line);
    background: var(--plate-ground);
  }
  .markdown-body .plate-art {
    padding: 24px 22px 20px;
    text-align: center;
    overflow-x: auto;
  }
  .markdown-body .plate-art img { vertical-align: middle; background: transparent; }
  .markdown-body .plate-art img + img { margin-left: 26px; }
  .markdown-body .plate-no {
    position: absolute; top: 0; left: 18px; transform: translateY(-50%);
    padding: 3px 9px 2px;
    font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .07em; text-transform: uppercase;
    color: #fff; background: var(--plate-tag);
  }
  .markdown-body .plate figcaption {
    border-top: 1px solid var(--plate-line);
    padding: 11px 18px 13px;
    color: #4c555f; font-size: 13.5px; line-height: 1.6; font-style: italic;
  }
  /* the caption continues the sentence the plate number starts */
  .markdown-body .plate figcaption::first-letter { text-transform: capitalize; }

  #err { color: #d1242f; font-family: ui-monospace, monospace; white-space: pre-wrap; }

  @media (max-width: 900px) {
    nav { position: static; width: auto; height: auto; }
    #bar { left: 0; }
    main { margin-left: 0; padding: 24px 20px 40vh; }
    .markdown-body .plate-art { padding: 14px 10px 12px; }
    .markdown-body .plate-no { left: 10px; }
    .markdown-body .plate figcaption { padding: 10px 12px 12px; }
  }
</style>

<div id="bar"><i></i></div>

<nav>
  <h2>Tutorials</h2>
  <div class="docs" id="docs"></div>
  <hr>
  <h2>On this page</h2>
  <div id="outline"></div>
</nav>

<main><article class="markdown-body" id="doc">Loading…</article><div id="err"></div></main>

<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.js"></script>
<script>
const DOCS = [
  ["Home", "README.md"],
  ["Presentation of code_aster and salome_meca",
   "00_foundations/Pres_Code_Aster_Salome_Meca/README.md"],
  ["Local resolution of constitutive laws",
   "00_foundations/Comp_Local_Resolution/README.md"],
  ["CAO et maillage : SHAPER & SMESH",
   "01_preprocessing/CAO_Maillage_Shaper_SMESH/README.md"],
];

// Every way a README can be linked to from Markdown, mapped to its canonical
// path. Document links are routed back into this preview; without this the
// static server answers a directory link with a directory listing.
const ROUTES = new Map();
for (const [, p] of DOCS) {
  const dir = p.replace(/[^/]*$/, "");
  for (const key of [p, dir, dir.replace(/\/$/, "")]) if (key) ROUTES.set(key, p);
}

// The document lives in the query string and the section in the hash, so that
// an in-page heading link does not overwrite which document is open.
const docUrl = (path, section = "") =>
  `?doc=${encodeURIComponent(path)}${section ? `#${section}` : ""}`;
const isDoc = (p) => DOCS.some(([, d]) => d === p);

let current = DOCS[0][1];

const docsNav = document.getElementById("docs");
const outline = document.getElementById("outline");
const doc = document.getElementById("doc");
const err = document.getElementById("err");
const bar = document.querySelector("#bar i");

// GitHub-style heading anchors, so the in-page links in the READMEs work.
// Accents are folded to ASCII before the class below drops everything outside
// [a-z0-9_- ]: a French deck would otherwise anchor "Données" as "donnes" and
// "nœuds" as "nuds". NFD splits a letter from its accents, \p{M} deletes the
// accents, and the two ligatures that have no decomposition are spelled out.
// check_tutorial.py must fold identically — see the note on slug() there.
const slug = (s) => s.toLowerCase().trim()
  .replace(/<[^>]+>/g, "")
  .replace(/œ/g, "oe").replace(/æ/g, "ae")
  .normalize("NFD").replace(/\p{M}/gu, "")
  .replace(/[^\w\- ]/g, "").replace(/ /g, "-");

function render(md, base) {
  const code = [], math = [];

  // Order matters: pull fenced/inline code out first so $ inside it is left
  // alone, then pull math out so marked cannot read _ or * as emphasis.
  md = md.replace(/```[\s\S]*?```|`[^`\n]+`/g, (m) => `@@CODE${code.push(m) - 1}@@`);
  md = md.replace(/\$\$([\s\S]+?)\$\$/g, (_, t) => `@@MATH${math.push([t, true]) - 1}@@`);
  md = md.replace(/\$([^\n$]+?)\$/g, (_, t) => `@@MATH${math.push([t, false]) - 1}@@`);
  md = md.replace(/@@CODE(\d+)@@/g, (_, i) => code[i]);

  const renderer = new marked.Renderer();
  renderer.heading = (text, depth) =>
    `<h${depth} id="${slug(text)}">${text}</h${depth}>\n`;
  let html = marked.parse(md, { renderer, gfm: true });

  // Relative paths in the markdown are relative to the markdown file, not to
  // this page. Links to another tutorial become preview routes; everything else
  // is an asset served from the repository root — kept relative so the same
  // page works at / locally and under /<repo>/ on GitHub Pages.
  html = html.replace(/(src|href)="(?!https?:|\/|#|@@)([^"]+)"/g, (_, attr, p) => {
    const target = attr === "href" && ROUTES.get((base + p).replace(/[?#].*$/, ""));
    return target ? `href="${docUrl(target)}"` : `${attr}="${base}${p}"`;
  });
  doc.innerHTML = html;

  const tex = (i) => katex.renderToString(math[i][0],
    { displayMode: math[i][1], throwOnError: false });
  for (const el of doc.querySelectorAll("*")) {
    if (!el.children.length && el.innerHTML.includes("@@MATH")) {
      el.innerHTML = el.innerHTML.replace(/@@MATH(\d+)@@/g, (_, i) => tex(i));
    }
  }
  doc.innerHTML = doc.innerHTML.replace(/@@MATH(\d+)@@/g, (_, i) => tex(i));

  doc.querySelectorAll("table").forEach((t) => {
    const w = document.createElement("div");
    w.className = "table-wrap";
    t.replaceWith(w);
    w.appendChild(t);
  });

  doc.querySelectorAll('p[align="center"]').forEach(plate);

  buildOutline();
}

// A figure in a README is a centered <p>: the image, then its caption in <em>,
// opening with the slide it came from. Promote that to a real <figure>, with the
// caption in a footer and the slide number in the plate's top edge.
function plate(p) {
  const imgs = p.querySelectorAll("img");
  if (!imgs.length) return;

  const fig = document.createElement("figure");
  fig.className = "plate";
  const art = document.createElement("div");
  art.className = "plate-art";
  // a figure can be a set of views: slide 13 and slide 19 each show two
  imgs.forEach((i) => art.appendChild(i));
  fig.appendChild(art);

  const em = p.querySelector("em");
  if (em) {
    const cap = document.createElement("figcaption");
    const parts = em.innerHTML.match(/^\s*(Slides?[^—]*?)\s*—\s*([\s\S]+)$/);
    cap.innerHTML = parts ? parts[2] : em.innerHTML;
    if (parts) {
      const no = document.createElement("span");
      no.className = "plate-no";
      no.textContent = parts[1].replace(/\s+/g, " ");
      fig.insertBefore(no, art);
    }
    fig.appendChild(cap);
  }
  p.replaceWith(fig);
}

let marks = [];

function buildOutline() {
  outline.textContent = "";
  marks = [...doc.querySelectorAll("h2, h3, h4")].map((h) => {
    const a = document.createElement("a");
    a.className = h.tagName.toLowerCase();
    a.textContent = h.textContent.replace(/\s+/g, " ").trim();
    a.href = `#${h.id}`;
    a.onclick = (e) => {
      e.preventDefault();
      h.scrollIntoView({ behavior: "smooth" });
      history.replaceState(null, "", docUrl(current, h.id));
    };
    outline.appendChild(a);
    return { h, a };
  });
  spy();
}

// Highlight the heading the reader is currently under, and show progress.
function spy() {
  let cur = marks[0];
  for (const m of marks) {
    if (m.h.getBoundingClientRect().top <= 90) cur = m; else break;
  }
  for (const m of marks) m.a.classList.toggle("here", m === cur);
  const max = document.documentElement.scrollHeight - innerHeight;
  bar.style.width = `${max > 0 ? Math.min(100, (scrollY / max) * 100) : 0}%`;
}

let queued = false;
addEventListener("scroll", () => {
  if (queued || !marks.length) return;
  queued = true;
  requestAnimationFrame(() => { queued = false; spy(); });
}, { passive: true });

async function load(path, section = "") {
  err.textContent = "";
  current = path;
  docsNav.querySelectorAll("a").forEach((a) =>
    a.toggleAttribute("aria-current", a.dataset.path === path));
  try {
    const r = await fetch(`${path}?t=${Date.now()}`);
    if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
    render(await r.text(), path.replace(/[^/]*$/, ""));
  } catch (e) {
    doc.textContent = "";
    outline.textContent = "";
    err.textContent = `Could not load ${path}\n${e.message}\n\n` +
      `Serve the repository root: python3 -m http.server`;
    return;
  }
  history.replaceState(null, "", docUrl(path, section));
  // The content is injected after page load, so the browser cannot scroll to a
  // fragment on its own.
  const anchor = section && document.getElementById(section);
  if (anchor) anchor.scrollIntoView(); else scrollTo(0, 0);
  spy();
}

for (const [label, path] of DOCS) {
  const a = document.createElement("a");
  a.textContent = label;
  a.href = docUrl(path);
  a.dataset.path = path;
  a.onclick = (e) => { e.preventDefault(); load(path); };
  docsNav.appendChild(a);
}

let startDoc = new URLSearchParams(location.search).get("doc");
let startSection = decodeURIComponent(location.hash.slice(1));
// Links written before the document moved into the query string put the
// document path in the hash. Keep those working.
if (!startDoc && isDoc(startSection)) {
  startDoc = startSection;
  startSection = "";
}
load(isDoc(startDoc) ? startDoc : DOCS[0][1], startSection);
</script>