Regular Markdown

Here is some Markdown between 2 tags.


More Markdown Between Open/Close tags

This is some local Markdown between two tags. There is also

some

HTML formatting.

I’m a p tag

I’m a p tag

with italics


inserted as content

This is some extra Markdown, defined in the code fence.

Fetched Markdown Content

This project is now suspended and is continuing at https://github.com/sarah11918/sastro

Taking advantage of Tropical Storm Elsa to learn Astro!

After spending time laying the groundwork to rescue www.summersidechoir.ca from a well-intentioned but fatally-flawed Jekyll instance (rewriting from scratch with GatsbyJS - project at https://github.com/sarah11918/scctake2), I got bored with the fine-tuning stage and wanted to explore what I want to do with my OWN website, www.rainsberger.ca

This is my Astro(.build) playground as I figure out what’s what, deployed at https://astro-elsa.netlify.app/ , and try to do a bunch of things (using JavaScript and React) for the sake of doing them.

As always, Coded on a Chromebook, in a browser and Created with CodeSandbox

This is a p tag, for a test

And this is an h1

//Here is some markdown code:

function addBallCount() ASTRO_ESCAPED_LEFT_CURLY_BRACKET
  if (ballsThrown < 3 && before.some(pin => pin === "up")) ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    ballsThrown += 1;
  }   
  document.getElementById("balls-thrown").innerHTML = ballsThrown; 
};
//src/pages/experiments/remote-markdown.astro
---
import { Markdown } from 'astro/components';
import BaseLayout from '../../layouts/BaseLayout.astro';
const content = await fetch("https://raw.githubusercontent.com/sarah11918/astro-elsa/main/README.md").then((res) => res.text());

const localMarkdown = `# inserted as content
  This is some extra Markdown, defined in the code fence.
  - why
  - no
  - left
  - padding?
`
---
<BaseLayout title = "Remote Markdown" >
<style>
  h1, h2, h3 {
    color: blue;
  }
  
  p {
    color: green;
  }
</style>

<main>
  <Markdown>
  ### Regular Markdown

  Here is some Markdown between 2 tags.
  - It's
  - all
  - just
  - Markdown syntax
  </Markdown>
  
  <hr>
  
  <Markdown>
  ### More Markdown Between Open/Close tags 

  This is some local **Markdown** between two tags. There is also <b>some<b> HTML formatting.

  <p>I'm a p tag<p>
  <p>I'm a p tag <i>with italics</i><p>
  </Markdown>

  <hr>

  <Markdown content={localMarkdown} />

  <h5>Fetched Markdown Content</h5>
  <Markdown content={content} />
</main>
</BaseLayout>